より良い研究、より良いデザイン、より良い結果
公開: 2022-03-10何年にもわたって、私たちが一貫して見てきたことの1つは、Web開発プロジェクトの計画段階でデジタルマーケターからの洞察がほとんど使用されていないことです。
Google AnalyticsおよびSEMrushからVWO( V isual W ebsite O ptimizer)やHotjarなどのツールへのデータはすべて、コードの最初の行を作成する前に貴重な洞察を提供するために使用できるリソースです。 URL構造やメタデータなどの基本的なSEO要素も、Webデザインプロジェクトの意思決定に関与する必要があります。
これは以前に指摘されており、多くのSEOやコンテンツの専門家にとっては痛いポイントです。 ただし、この記事では、効果的なコンテンツの調査と作成である独自の推奨方法と、ユーザーの意図がすべての段階でプロセスにどのように影響するかに関する問題に焦点を当てます。
次に、設計プロセスの各側面に進み、途中でSEOの質問について話し、ワークフローの詳細な内訳を示します。見栄えのするWebサイトと、完全に実現されたアセットが設計されたWebサイトです。測定可能な目標を達成するため。
インテリジェントコンテンツリサーチ
ウェブサイトを構築する必要はありません。 材料を投入する必要があります。 この資料の設計方法は、Webサイトの成功、つまりクライアントのビジネスや組織に何をもたらすかを決定する上で大きな役割を果たします。
これが、通常のWebデザインプロセスが、キーワードリサーチや、より発展した相対的なコンテンツ戦略などの初期段階で見落とされているのが不思議な理由です。 そのため、フレームに何が含まれるかを十分に考慮せずにフレームが作成されることがよくあります。
あるレベルのすべてのプロジェクトではキーワードの調査が必要であり、これには常にユーザーの意図に注意を払う必要があります。 SmashingMagの読者として、あなたはおそらくこの概念を理解するでしょう。 ただし、わかりやすくするために、コンテンツ戦略とSEOの観点からこれを再検討する価値があります。
ユーザーの意図が重要になる前は、キーワードの調査では、検索ボリュームと「難易度」のリストを収集し、理想的なユーザーが実際に使用する可能性が高いクエリであるかどうかにあまり注意を払わずに、ランク付けする可能性のあるキーワードを見つけようとしました。 。
私たちはまだこのプロセスを経なければなりませんが、効果的な研究には、私たちが見つけたデータのよりインテリジェントな使用が必要です。 ターゲットキーワードの発見と、クエリの背後にある意図を満たす資料の開発に焦点を当てる必要があります。その一方で、関連する「良い機会」のキーワード(つまり、大量、低競争)を探します。
つまり、キーワードリサーチは、ユーザーがコンテキストでの検索で何を意味するのか、どのような質問に答えたいのか、どのような言語を使用するのかを理解する方法になりつつあり、すべてウェブサイトを支援する可能性が最も高いコンテンツを作成することを目的としています。所有者の目標を達成します。
ユーザーの意図とコンテンツの作成
ユーザーの意図は、キーワードの調査に通知します。キーワードの調査は、やがてコンテンツ戦略になり、次に作成されます。 私たちが作成するコンテンツには常に目的があり、ほとんどの場合、ユーザークエリの背後にある意図を満たすことです。
大まかな例として、「コーヒー」というクエリを考えてみましょう。 結果は次のようになります—さまざまな意図を満たすことを目的としたさまざまなタイプのコンテンツに注目してください。

結果は、ターゲットとするオーディエンスによって大きく異なります。 近くでコーヒーを飲む場所を探している人を対象としたものもあれば、オンラインでジョーを注文できるサイトもあります。 コーヒーの歴史と栄養情報を調べるリソースもあります。
このような広い用語を扱う必要はあまりありませんが、これらすべてをWebサイトの目的に応じて考え、選択せずに計画する必要があります。 つまり、コンテンツリサーチは、ユーザーに焦点を当てた場合、サイトアーキテクチャ、さらには美学に関しても、明白で大きな意味を持ちます。つまり、デザインプロセスで最初に解決する必要があります。
コンテンツが考慮されていない場合
古いサイトと新しいサイトの両方で見られる最も一般的な問題の1つは、正確なフレーズと一般的な意図の観点から、ユーザーのクエリに完全に対応するように設計されていないコンテンツです。 場合によっては、これは簡単に修正できます。たとえば、ページのメタデータとコピーを少し調整するだけで、クエリとユーザーターゲティングをほぼ瞬時に明確にできることがよくあります。
ただし、他の多くの場合、問題ははるかに深刻であり、まったく新しいコンテンツ戦略の一部として、アーキテクチャまたはナビゲーションの改訂が必要になります。これは、適切な専門家に相談していれば回避できたはずのコストのかかるプロセスです。
何度も遭遇したサイトコンテンツに固有のシナリオを次に示します。
シナリオ1:光沢のある新しいWebサイト、鈍い新しいコンテンツ
クライアント(彼をジョンと呼びましょう)は、参照する以前のコンテンツがない、まったく新しいサイトを立ち上げています。
ただし、ジョンがコピー、コンテンツ、またはSEOについて考えるように促されない場合は、かなり後の段階(通常はバックエンド開発フェーズの後)まで、不適切な決定を下す可能性がありますが、一部を失うリスクもあります。彼のモチベーション、エネルギー、そしてプロジェクトに対する忍耐力について。
完成を急いで確認するということは、コンテンツが長期的に効果を発揮するのに十分な調査や実行が行われていないことを意味します。 最終的には、時間と費用のかかる第2段階のSEOおよびコンテンツ作成キャンペーン中に再度検討する必要があります。
シナリオ2:同じコンテンツ、同じ問題
既存のサイトを再構築するということは、見たり参照したりする既存のコンテンツがあることを意味します。 時々、ジョンはとても急いでいるか、この段階でコストを抑えることに非常に熱心であり、コンテンツはまったく考慮されていません。
古いサイトでも新しいサイトと同じコンテンツが使用されており、ジョンはなぜ自分のサイトがすべての上位キーワードですぐに1位にならないのか疑問に思っています。 最終的には、時間と費用のかかる第2段階のSEOおよびコンテンツ作成キャンペーン中に再度検討する必要があります。
新しいコンテンツ、またはそれ以外の場合!
たとえば、ブランド変更の一環として、価値のある信頼できるサイトが再構築されることがあります。 ジョンはすべてが新しいと主張します。 分析データ(以下で詳しく説明します)など、これを詳しく説明する適切な調査がなければ、ジョンは自分がすでに持っている資産を認識していません。 彼は、検索エンジンが価値があると考えていた古いコンテンツを取り除き(または新しいドメインに切り替えるなど、さらに悪いことをします)、不思議なことにランキングを上げます。 最終的には、時間と費用のかかる第2段階のSEOおよびコンテンツ作成キャンペーン中に再度検討する必要があります。
事後にSEOが呼び出された場合のワークフローの問題
もちろん、私たちは得たものでやらなければなりませんが、問題が発生した後、SEOがプロジェクトに取り組むのはイライラします。また、比較的新しいサイトがある場合は、それを分解する必要があることを示唆する必要があります。その価値を実現することを願っています。
SEOが最初から考慮されていない場合、ページレイアウトとセマンティックマークアップは、抜粋、Hタグ、メタデータ、またはCMSがSEOを長期的にどのように支援できるかを考慮していません。 その後、多くのクライアントは、YoastのようなWordpressプラグインなどのクイックフィックスに目を向けます。 これらが効果がないか、誤って使用されて、目前の問題が永続する可能性があります。

だから、何を推測しますか? サイトが立ち上げられた後、SEOスペシャリストが連れてこられます。
現在、クライアントは既存の代理店に不満を持っており、SEOの改善を非常に重要視しています。 同様に、SEOスペシャリストは、Webエージェンシーを弱体化させないようにするという困難な仕事をしていますが、それでも構造的およびページ上の調整を推奨する必要があります。
彼らはまた、クライアントの期待に関する問題に直面するでしょう。彼らは当然のことながら、彼らの新しい光沢のあるウェブサイトにより多くのお金を費やすことに恨みを抱きます。
これはすべておなじみのように聞こえますか? 私たちの議論の核心は、意図に焦点を当てたキーワード研究などのインラインプロセスを最初から導入することで、これらの状況を回避し、誰もがうまくやっていくことができるということです。
同時に、統合されたアプローチは、強力なSEOパフォーマンスとともに、より優れたUXと変換を意味します。 関連性はGoogleのアドワーズ広告の計算の一部であるため、より焦点を絞ったコンテンツは、PPCコストの削減も意味します。
高価な設計段階とそれに続く2回目の高価なSEO作業ではなく、プロセス全体を合理化して、時間とコストを抑え、クライアントを満足させ、結果としてより良い最終製品を生み出すことができます。
新しい設計プロセス
これはすべてうまくいっていますが、どうすればそれを実践できますか? 複雑さの程度はさまざまですが、業界の多くの人にとって、設計プロセスは次のようになります。
典型的なワークフロー

優れた開発者は、独自のワークフローでユーザーエクスペリエンスと訪問者の旅に焦点を当てることを述べる価値があります。 代わりに、一般的なプロジェクトは次の段階を通過する可能性があります。

別のアプローチ
過去1年ほどの間、私たちはクライアントに可能な限り最高の価値を提供すると信じる方法でこのプロセスを洗練することに多大な努力を払ってきました。 ここにあります:
プロジェクト計画

いつものように、これは今後の作業の範囲を定義するため、最初のステップである必要があります。 現実的であり、エラーの余地を作り、あなたがあなたが支払うものを手に入れることを非常に意識してください。 予算不足は、デザイン、機能、コンテンツなどの主要な領域で不足するリスクを伴います。 同時に、プロジェクトのすべての予算が設計と開発に飲み込まれた場合、サポートするマーケティング戦略や継続的な更新と改善の余地はありません。

同様に、あなたの目標は最初から明確でなければなりません。 メールアドレスの取得や商品の販売に力を入れていますか? 訪問者に何よりもしてもらいたいことは何ですか? これを明確に理解しないと、サイトの目的が不十分になる可能性があります。
これが決まったら、より広い目標の設定に進むことができます。 ここには、SMART目標(または具体的、測定可能、達成可能、関連性、期限付き)などの多くの方法があります。 これらは、成功したプロジェクトが完了時にどのように見えるかを定義します。 ここで現実的に考えてください。現在のサイトに月に数百回の訪問がある場合、深刻な努力と投資なしに、これが数か月以内に10,000に達するとは思わないでください。

同時に、Google、LinkedInなどで使用されているObjectives and Key Results(OKR)アプローチの大ファンです。 この手法は、一般的なビジネス戦略だけでなく、Webプロジェクトにも非常に効果的です。
これは、OKRシステムの背景を説明するすばらしいビデオです。
効果的なOKRを書くこと自体はちょっとした芸術ですが、ここにいくつかの良い例があります。 ただし、覚えておくべき主なことは、目標はサイトのアーキテクチャをある程度定義することです。
最も単純なレベルでは、連絡フォームがない場合、他の人はあなたに連絡することができません。 同様に、あなたの製品やサービスが何をしているのかを説明するのに役立つたくさんのFAQやブログ投稿を削除すると、彼らは連絡を取る可能性が低くなります。 これにより、次のステップに進みます。

すでにうまく機能しているページがあるかもしれません。 その場合は、それらを識別して、新しい構造に組み込まれていることを確認する必要があります。 目標到達プロセスの任意の時点でトラフィックをもたらすページを削除すると、見込み顧客や売り上げが失われる可能性があります。 URLの変更に加えて、これは、移行またはサイトの大幅な更新後のトラフィックの低下の主な原因の1つである可能性があります。 当たり前のように思えるかもしれませんが、これは私たちが何度も目にした問題です。
これを防ぐための最初の段階は、GoogleAnalyticsまたは使用している分析プラットフォームを調べることです。 まず、どのページがオーガニック訪問をもたらしているかを調べます。 これらは、優先順位として新しい計画に組み込む必要があります。できれば、URLを変更せずに、ナビゲーション構造で目立つ場所を維持する必要があります。
ここでのもう1つの優れたツールは、KeywordHeroです。 これは比較的新しいものですが、Google Analyticsにプラグインし、数年前にオーガニックキーワードに適用されていた<not provided>
タグを削除します。

これは巧妙な機械学習を使用しており、どのキーワードがサイトの特定のページにトラフィックを誘導しているかを確認できることを意味します。 これは、どのページを保持または削除するかを計画する上で非常に役立ちます。
もちろん、すべてのページがオーガニックトラフィックの観点から重要であるとは限りません。 前述のように、FAQページなど、重要な変換前または販売である可能性がありますが、サイトへのインバウンド訪問の可能性はほとんどありません。 ページビューとここでのユーザーフローを見て、何かを見逃していないことを確認してください。
同時に、データが完全ではない可能性があることを覚えておく価値があります。 Google Analyticsデータの有効性をチェックすること自体はかなり大きなテーマですが、実行できる最も簡単な手順の1つは、トラッキングコードが正しく実装されていることをチェックすることです。
繰り返しになりますが、ここでは詳細については説明しません。 ただし、コンテンツの移行を実行するときに推奨する1つのトリックがあります。 WebクローラーのScreamingFrogには、すべてのページでAnalyticsコードをチェックできる優れた機能があります。 追跡されておらず、再設計で失われた可能性のある貴重なページを何度も発見しました。


次に、表示されているキーワードを確認します。 ここで使用するツールはいくつかありますが、最も便利なのはSEMrushです。 これは数十億のキーワードを監視し、どのサイトがそれらのためにランク付けされているかを追跡します。 データベースにクエリを実行することで、トラッカーに手動で入力しなくても、Googleの結果にサイトが表示されているキーワードを確認できます。 完璧というわけではないので、見逃したと思われる用語がないか手動で位置を確認する必要があります。

この情報を入手したら、スプレッドシートにまとめて描画を開始できます。 これがサンプルドキュメントで、最初のタブで最初の結果を確認できます。


UXとSEOの両方で、誰と話しているのかを理解することが重要です。 ユーザーが知っている言語やフレーズの種類、および声のトーンについて考えてください。 彼らは画像やコピー、詳細や箇条書き、派手なデザイン、またはより技術的なページに反応しますか?
キーワード調査は、用語を定義し、正しい語彙を明らかにするため、ここでも非常に役立ちます。キーワード調査が最終的にどのようにフィルターされ、ほとんどすべてのステップで重要であるかの別の例です。

誰と話しているのかがわかったので、どのように最善を尽くすことができますか? このドキュメントの前半で、ユーザー意図に焦点を当てたキーワード調査の背後にある概念について説明しましたが、ここでは、それを自分たちで行う方法についていくつかの洞察を示します。 これはそれ自体が機能である可能性があることに注意してください。簡潔にするために、ここでは概要に焦点を当てています。
ツールキットに関しては、SEMrushとMozを組み合わせて使用する傾向があります。 AdWordsのキーワードプランナーと、手に入れることができる他のツールの両方を使用することが、データを収集するための最良の方法であると考えています。各ツールには独自の長所があり、多くの場合、ロングテールキーワードのデータはあるツールで利用できますが、別のツールでは利用できません。
これが最初のステップです。
- 私たちが見つけることができるすべての関連するキーワードとそれらのために私たちが持っているデータをリストします、ボリュームは最も重要です。
- また、彼らがどれほど競争力があるかについてのいくつかの尺度と、現在がすでに彼らのためにランク付けされているかどうかの指標も含めます。 ここでは通常、このキーに対応するMozデータを使用します。
鍵
0〜15% | 非競争的な用語、十分に最適化されたページ上のキーワードの使用で達成可能なトップランキング |
16〜30% | 競争が少なく、ページ上のキーワードの使用が最適化され、リンク強度が低いため、トップランキングを達成できます。 |
31〜45% | やや競争力のあるトップランキングには、十分に最適化されたページ上の使用と適度なリンク強度が必要です |
46〜60% | 高度に最適化されたページ上のコンテンツと実質的なリンク強度でのみ達成可能な競争力のあるトップランキング |
61-75% | 競争の激しい用語であるトップランキングには、ページ上の最適化、確立された歴史、強力なリンク強度が必要です |
76〜90% | 非常に競争力のある用語であり、確立されたサイトと圧倒的なリンク強度でのみ達成可能なトップランキング |
91%以上 | ウェブ上で最も競争力のある用語の中で、最も強力で人気のあるサイトだけがランキングを達成できます |
- ここにできるだけ多くの情報を集めて、クライアントが自分で調査を確認できるようにし、すべてを一度に確認できるようにします。もちろん、ほとんどが使用されることはありませんが、長いリストは、いくつかの単純なリストよりも徹底的に見えます。 、よく研究された提案の場合。
収集したデータを使って行うことで、検索エンジンのアルゴリズムにとってユーザーの意図がそれほど重要でなかった、または理解されていなかった5年前とは異なり、はるかに価値のある調査が可能になります。
キーワード調査データから、サイトの構造とページのリストを明らかにし、可能な限りインテリジェントに考える必要があります。 この目的を達成するために:
私たちは見つけたものすべてを調べ、ボリューム、競争に基づいてキーワードを選択しますが、最も重要なのは、サイトがクエリの背後にあるユーザーの意図を効果的に満たすことができるかどうかです。 数字がクリックするだけの場合もありますが、ほとんどの場合、妥協する必要があります。ユーザーの意図が常に最も重要な考慮事項です。
次に、選択した最も一般的なキーワードまたはショートテールキーワードを使用して、それらを意図またはトピックの「ノード」と見なし、調査を深め、潜在的に価値のあるコンテンツへの洞察を深めます。
ランディングページに焦点を当てたキーワードを見るだけでなく、キーワードと正確なフレーズ(たとえば、逐語的な検索クエリでもある質問)のニーズとウォンツも重要です。 AnswerThePublicは、選択したトピック/キーワードについてユーザーが疑問に思っていることを分岐して確認するための優れたツールです。

- 分岐することで、新しい意図を持った新しいユーザーを発見し、それらに会うための新しいコンテンツを考えます。 その結果、このサイトはより多くのユーザーに対応するように構築され、より多くのクエリにランク付けされ、より多くのトラフィックを獲得し、その権限が拡大し、以前の悪循環とは対照的に、好循環になります。
立ち上げ時に十分に調査されたコンテンツが存在するため、サイトは最初からその価値を実現できるため、クライアントはより多くのコンバージョンと収益を得ることができます。 このように、サイト構築中に必要な追加コストは相殺されます。

これらすべての情報を使用して、サイトの計画を開始します。 どのページに何が表示されるかを定義します。 コンテンツがWebサイトのどこに行くのか、そしてその理由を理解します。 スケーラブルにする—ビジネス目標は急速に変化する可能性があるため、コンテンツの追加または削除は簡単です。
この段階では、すべてが理にかなっている必要があります。 意味的に意味があるため、ページをリンクする必要があります。 ユーザーと検索エンジンの両方にとって重要なものは、ナビゲーションの上位にある必要があります。
Eコマースサイトはこれをうまく行うことがよくあります。 以下の例を見てください—カテゴリとサブカテゴリの構造は、ページにキーワードを使用する必要があることは明らかです。

一方、これはナビゲーションが無駄な機会であるサイトの例です。

キーワードグループをターゲットにできるサービスページはなく、メインカテゴリのサブページもありません。 「ミニベーション」は素晴らしいコンセプトかもしれませんが、ユーザーが検索するコンセプトではありません。 もちろん、この場合、これは優先事項ではないかもしれませんが、この種のレイアウトは何度も見られます。
全体として、ここでの危険は、この段階でSEOを認識していなくても、クライアントが最初の例のようなナビゲーションから2番目の例のようなナビゲーションに切り替えたいと思う可能性があることです。 この場合、トラフィック、ひいては収益に大きなリスクがあり、Webプロフェッショナルとして、これを明確に述べることが私たちの義務です。

コンテンツの制作は通常プロジェクトの最後に行われますが、プロジェクトの完了後にデザインを修正する必要性が大幅に減少するため、(lorem ipsumではなく)実際のコンテンツを中心にデザインする方がコストと時間の効率が高いと感じています。
また、プレースホルダーテキストは、コンテンツはデザインの二次的なものであり、プロジェクトの階層ではそれよりも少ないという考えを繰り返しているという非常に強力なケースもあります。 これもカイル・フィードラーによって見事にカバーされているという考えなので、同じ地面を踏む必要はありません。
同時に、この時点までに、あなたの研究はあなたがあなたの作家のために驚くべきブリーフをまとめるために必要なすべての情報をあなたに与えるでしょう。 私たちを信じてください、彼らはそれを感謝します!
デザイン

それをすべてまとめ始める時が来ました。 最初のワイヤーフレームは、コンテンツ開発によって定義された基本的なボックスとタイトルであり、この時点までに生成されたコピーであり、Webサイトの主要なセクションの概要を示しています。 繰り返しになりますが、可能な限り実際のコンテンツを含むワイヤーフレーム。 Balsamiqやwireframe.ccのようなツールはこれに本当に役立ちます。

ワイヤーフレームが作成されると、デザインはより実現され始めることができます。 カラーパレット、実際のクライアントロゴ、企業のタイポグラフィ、フォントなど、いくつかのブランドアイデンティティを追加します。 この時点で、Webサイトがどのように表示されるかを正確に確認できるようになります。 この段階で変更を加える必要があります。コードを変更するよりも、Photoshopファイルを編集する方がはるかに簡単です。
発達
この段階までに、実際の開発フェーズは単純なものになるはずです。 基本設計のHTMLおよびCSSコードを記述してから、インタラクティブな要素に焦点を合わせます。 SEOの観点からは、Javascriptが非常にホットなトピックであることを述べる価値があります。 GoogleはJSの処理に完全ではないため、ナビゲーションや主要コンテンツの表示を制御するスクリプトは非常に注意深く実装する必要があります。 このトピックの詳細については、こちらをご覧ください。

私たちの経験では、これは多くの場合、プロジェクトの中で最も遅い部分です。 ただし、すべてのコンテンツ作成がプロセスの早い段階で完了しているため、このタスクではCMSにコピーアンドペーストするだけで済み、かなりの時間、ストレス、および遅延を節約できます。

いつものように、テストし、テストし、もう一度テストします。 サイトをクロールし、すべてのトラッキングコードを追加し、検索コンソールに追加して、インデックスが作成されていることを確認します。完全に機能します。

私たちは正しかったですか? 目標は成功しましたか? ウェブサイトは決して完成しません。 プロジェクトの開始時に設定された目標を常に覚えて、追跡と報告を続けてください。
多くのように思われるかもしれませんが、プロセス全体に追加されたステップはわずかです。 プロジェクトの開始時にキーワード調査とコンテンツ戦略に焦点を当てることで、サイトの目的がより明確に定義され、サイト全体の構造がマッピングされて理解され、すべてが適切な場所に配置されます。 2つの費用のかかる複雑なプロジェクト、SEO /コンテンツキャンペーンとWebデザインが1つになり、もう1つははるかに管理しやすく、効率的で、最終的にはより良い結果を生み出します。
これは一種の理想的なシナリオです。ほとんどの場合、私たちの仕事はSEOを念頭に置いて構築されたサイトでの作業を伴い、その後私たちは支援するようになります。 より多くの人々が、SEO、開発者、および設計者が順番にではなく、プロジェクトで一緒に作業する背後にある論理を認識し、その過程で互いの努力を弱体化させるにつれて、私たちの役割が変化するのを目にします。
参考文献
- 「SEOとウェブサイトのデザイン:あなたが知る必要があるすべて」、検索エンジンランド
- 「コンテンツ戦略:成功のための努力の最適化」、Allie Grey Freeland、Smashing Magazine
- 「コンテンツ戦略とストーリーテリング」
- 「テキスト」、Smashing Magazine
- 「DesigningVoiceExperiences」、Lyndon Cerejo、Smashing Magazine
- 「キーワードリサーチ」、SEOラーニングセンター、Moz.com
- 「ユーザーの意図を知ることの重要性」、ジョーダン・ジュリアン、UXmatters
- 「ジョンはクライアントの密度が高いのですか、それとも失敗していますか?」、スマッシングマガジンのポールボーグ
- 「PPCキャンペーンのCPCコストを下げる5つの方法」、DigitalMarketingPro.netのAlex Chris
- 「WebデザイナーがSMART目標を必要とする理由とその書き方」、James George、Design Crawl
- 「ヒーローはどのようにそれを行うのですか?」インフォグラフィック、キーワードヒーロー
- 「すべてのページでGoogleAnalyticsコードを確認する方法」SiteVisibility
- 「LoremIpsumはあなたのデザインを殺している」、Kyle Fiedler、Smashing Magazine
- 「SEOはWebデザインプロセスの一部ですか?」、Carla Dawson、TemplateMonster
- 「なぜあなたのウェブサイトをデザインするためにマーケティング会社と協力するのか」XanderMarketing