ArticulateMarketingでウェブサイトを構築する方法
公開: 2022-04-12まず、HubSpotCMSWebサイトを構築します。 HubSpotが何であるかわからなくても、心配する必要はありません。 簡単な紹介のためにここに向かいます。 まだ私たちと一緒にいる人のために、今日私たちは私たちのクライアントのためにウェブサイトを構築するためのプロセスを概説しています。
この記事は、私が主催したウェビナーの1つ、ArticulateMarketingのスタジオ責任者であるIoanaNegulescuに基づいています。 ビデオを見て、以下のスライドをダウンロードできます。
ウェブサイト構築の課題
多くの場合、新しいWebサイトの構築（または既存のサイトの移行）に関しては、最初のステップがあります。 私たちはいくつかの恐れを和らげる必要があります。 以前の代理店での経験によって以前にやけどを負ったことがあるクライアントがいることは珍しいことではありません。
聞いたら...
「最後のウェブサイトはとても苦痛だったので、新しいウェブサイトを取得することを心配しています。」
私たちはこれを行います...
これは何度も聞いたことがあります。 ですから、私たちはより良いことをするよう努めています。
たとえば、ガントチャートを使用するのではなく、マイルストーンを使用するのが好きです。 私たちが焦点を当てていることの1つは、進捗状況を継続的に更新する透過的なプロセスを持つことです。 これにより、お客様に安心感を与えることができます。
Webデザインプロセスで私たちにとって本当に本当に重要なことの1つは、これです。電子メールを介したビデオ通話です。 クライアントの反応を測定できるので重要です。 彼らが少し静かな場合、彼らが非常に興奮している場合など。 そうすれば、私たちは彼らの期待に沿った提案をすることができます。 そしてもちろん、彼らが持っているかもしれないどんな質問にも答えます。
聞いたら...
「私たちは開発者を何度も追いかけようとしましたが、彼らは私たちに戻ってこないでしょう。」
私たちはこれを行います...
進捗状況を示すために、定期的なプロジェクト管理の呼び出しを使用し、初日からカレンダーに呼び出しを行います。 これらのプロジェクト管理の電話中に、新しい作業を提示し、ブロッカーを特定します。
設計者と開発者は実際に作業を完了するのに時間がかかるため、そのようなすべての呼び出しに参加することが常に意味があるとは限りません。 必要に応じて持ち込みます。
聞いたら...
「新しいウェブサイトが私たちの期待に応えられない場合はどうなりますか？」
私たちはこれを行います...
私たちがウェブサイトのデザインプロジェクトを始める前に、私たちは彼らのマーケティング戦略の基礎を実行します。 これは非常に重要です。なぜなら、この段階で、クライアントの顧客、バイヤーの旅、そしてビジネスのマーケティング目標について学ぶからです。 これは、最初から期待を設定して、ウェブサイトに関して私たちが行う多くの戦略的決定に情報を提供します。
次に、ブランドアーキテクチャに移ります。 ここでは、ウェブサイトの基本を説明します。 色、画像またはイラスト、UX / UI要素、フォント-ウェブサイトの全体的な美学。 これは非常に協調的なプロセスです。 私たちのクライアントはすべてのステップに関与しているため、クライアントの入力と要件は最終製品に組み込まれています。
例：HTG
受賞歴のあるHTGのWebサイトを構築したので、それらを例として使用します。
私たちが最初に彼らに話しかけたとき、彼らはこれらの恐れを表明し、彼らの挑戦を概説しました。 これらは、B2Bテクノロジー企業の間でかなり一般的な問題です。
- 野心的なビジネス成長目標
- 古いウェブサイト（およびブランド）
- リード獲得の機会はほとんどありません
- 不格好なナビゲーション
- 貧弱なユーザーエクスペリエンス
- サイトのパフォーマンスが悪い
これがあなたのように聞こえる場合は、ここにアクセスしてWebサイトをスコアリングしてください。
アーティキュレートプロセス
これが私たちのプロセスです。 この画像をクリックすると、詳細が表示されます。
HTGの例に戻りましょう。 彼らと一緒に、私たちは通常の7段階のプロセスに従いました。
1.キックオフ
キックオフは、Webサイトプロジェクトの最初のインタラクションです。 その電話の間に、私たちはデザインとブランドの願望に対するクライアントの好みを測ろうとします。 私たちは、これらの好みを戦略的に、Articulateで作成されたWebサイトの最終的な目標、つまり適切に機能するマーケティングエンジンを構築することと一致させたいと考えています。
2.ムードボードとウェブサイトの構造
ここでは、2つの内部プロセスを実行します。 1つは、ムードボード、フォントの推奨事項、色の推奨事項、画像などをまとめることです。
もう1つは、マーケティングコピーライターのチームとともに、サイトマップの推奨事項をまとめることです。 これは、構築する必要のあるナビゲーションとページの構造です。
次に、クライアントレビューコールがあります。これは、最初の大きなマイルストーンです。 各段階の最後に、レビューコールがあります。 すべてが承認されたら、次の段階に進みます。 そうでない場合は、戻って繰り返します。
3.初期設計とワイヤーフレーム
ここでは、ウェブサイトの美学を示す方法としてホームページをデザインします。 通常、クライアントが選択できるいくつかの異なるオプションを作成します。 モジュール方式で設計する場合、これは、最も重要な「レゴブロック」のいくつかがどのように見えるかを示すためのステップと考えています。
並行して、ページ構造を中心に戦略を立てます。 つまり、どのようなコンテンツがどのページに表示されるのでしょうか。 どのレゴブロックが必要ですか？
次に、私たちのチームは、デザイン要素のないWebサイトページのラフスケッチのようなワイヤーフレームを作成します。
4.すべてのモジュールを設計し、ドラフトWebコピーを作成します
この段階で、私たちのコピーライターチームはコピーのドラフトを開始し、デザインチームはWebサイトに必要なすべてのモジュールのデザインに進みます。 すべてのコピーをクライアントのWebサイトに書き込むとは限りませんが、書き込む場合は、事前に合意されたサイトマップに基づいて、ページごとに透過的に課金します。
5.ウェブサイトを開発する
モジュールの設計をその場で示すために、 lorem ipsumのコピーとプレースホルダーの画像を使用してすべてのページを作成および構築し、クライアントが最終結果を適切に把握できるようにします。
開発者、すべての開発者と協力するとき、あなたは彼らにいくつかの適切な質問をしたいと思います：
- 私たちのウェブサイトをコーディングするためにあなたが取る主なステップは何ですか？
- コードがきちんと整理されていることをどのように確認しますか？ （テンプレートWebサイトの主要な問題。）
- いつ、どのくらいの頻度で速度と全体的なパフォーマンスをチェックしますか？
- ウェブサイトが開発された後のページの作成はどのように見えますか？ ページを作成する人にとって、それはフレンドリーなユーザーエクスペリエンスですか？
または、Articulateを使用している場合、「ルービックキューブを解いた最速の時間はどれくらいですか？」 そのような質問を歓迎します。
私たちの開発プロセスは、私たちの仕事を計画するNotionから始まります。 次に、ナビゲーションといくつかのグローバルモジュールのベースコードを設定します。 次に、その特定のWebサイト用に構築する必要のあるすべての設計要素と機能の品質保証チェックリストを作成します。 これにより、ビルド全体を通して私たちを正しく保つことができます。
すべてのモジュールをHTMLでスキャフォールディングしてから、スタイルの確認を開始します。 だから、レンガ、石膏、絵画、装飾を考えてみてください。
全体を通して、すべてをテストし、パフォーマンスをチェックして、改善を行います。 多くの場合、私たちは何かをより良くする方法を学び、その専門知識を次のWebサイトに持ち込みます。
6.ページにデータを入力します
この段階で、数回の反復とクライアントのレビューの後、承認されたコピーと画像をページに入力します。 この段階で、ウェブサイトはほぼ立ち上げの準備ができています。 別のクライアントレビュー段階を経て、その後、リリース前の徹底的なQAチェックリストを実行します。
7.起動します！
ウェブサイトが機能していることと、ステージングからライブまで何も壊れていないことを確認することが非常に重要であるため、起動してから、起動後の別のQAチェックリストを実行します。
最後に、もちろん、私たちは祝います！
素晴らしいウェブサイトデザインのための10のヒント
これが私たちが何年にもわたって学んだいくつかのルールと数十以上のウェブサイトビルドです：
- 好みを2番目に置き、ペルソナの問題点を最初に置きます。
- 単にサービスをリストするのではなく、顧客をどのように支援するかに焦点を合わせます。
- 車輪の再発明を試みないでください。 何が機能するのか、理由があります。 たとえば、折り目の上の領域だけに焦点を当てることは神話です。 誰もがスクロールする方法を知っています。 それについてのウェブサイトさえあります：http：//abovethefold.fyi/
- ナビゲーションは短くシンプルにしてください。
- ボタンを価値主導にする。 可能な限り、一般的なコピーは避けてください。
- より多くのコンテキストを持つページが存在する場合は、常に関連するページにリンクしてください。
- 重要なページでは、外部リンクが多すぎないようにします。 （あなたのブログは別の話です。）
- 常に1つ以上のCTA（召喚状）でページを終了し、ユーザーをプロセスの次のステップに導きます。
- 連絡先ページの力を過小評価しないでください-あまりにも多くの場合、それは出口点ですが、あなたは本当に、本当にそのページに人々を留めておきたいのです。
- 少ないほうがいいですね！
ボーナス：ロゴに悪いデザインを指示させないでください
私たちがHTGのウェブサイトをデザインしたとき、彼らのロゴは時代遅れであり、私たちが目指していたブランドに適合しなくなりました。 いくつかの簡単な変更を加えて近代化しました。
ここに考えるべき食べ物があります。 私たちのデジタル時代では、あなたのブランドはあなたのロゴではなくあなたのウェブサイトである可能性が最も高いです。 したがって、最初にWebサイト、次にロゴを考えてください。
発売後はどうなりますか？
わかった。 新しいウェブサイトがあります。 それで？ すでに述べたように、Articulateではウェブサイトをマーケティングエンジンと見なしているため、エンゲージメントを開始時に終了する必要はありません。 実際、これはほとんどのクライアントにとっての旅の始まりにすぎません。
ブログ、ピラーページ、ゲートオファー、「スクイーズ」ページなどの新しいコンテンツの作成から、行動追跡や多変量テストの実行まで、Webサイトでできることは他にもたくさんあります。
スニークピーク：ニュークリアス
では、どうすればHubSpot Webサイトを入手できますか？ 特注のWebサイト構築など、いくつかのオプションがありますが、1つの方法はHubSpotテーマを使用することです。 NucleusはArticulate独自のテーマです。
テーマは、はるかに洗練されたWebサイトテンプレートのようなものです。 私たち自身のウェブサイトはNucleusに基づいて構築されており、さまざまなデザインスタイルを持つ複数のクライアントに使用しています。 2022年にHubSpotMarketplaceでリリースします。Nucleusを使用すると、クライアント向けに高度に最適化されたWebサイトを数週間から数日で構築できます。 それはすべてかなりエキサイティングです！
>> Nucleusを探索するには、ここをクリックしてください<<