Webサイトの設計は、簡単そうで意外と難しいものです。構造の見直しやユーザー導線を意識するなど、それを1から自社で行う場合に、必要となるのが基本設計のスキルとワイヤーフレームを使いこなすことです。
そこで本記事は、Webサイト設計が必要な理由や手順、おすすめのワイヤーフレームツールなどを紹介します。
目次
閉じる
1.Webサイト設計とは
Webサイト設計は、企業や個人が作成するWebサイトの構造や配置などを設計することです。
しかし、Webサイト設計に必要なものは骨組みだけではありません。Webサイトを訪れるユーザーを意識したコンセプトづくりやターゲットの明確化、SEOの施策の盛り込みなどもWebサイト設計の一環です。
Webサイトとは
Webサイトは、ホームページやコーポレートサイト、ブログなど、Webページ上で動作するサイトを指します。1カラムで作るランディングページ（LP）のように、サイトが1ページで完結しているケースであっても同じWebサイトの仲間です。
2.Webサイト設計が必要な理由
Webサイトを設計することには次の理由があります。
土台を形にするため
1つ目は、土台をしっかり作ることによってその後のコンテンツ制作をしやすくすることです。サイトを部分的にしか設計せずに作成を進めると、どこかで無理が出たり、バランスが崩れたりして、使いにくいWebサイトとなります。
後から想定外の設計要素の追加があることでデザインが崩れるなどの問題も起こるのです。事前にWebサイト全体をイメージした土台を作り、そこに具体的な機能やテーマ性、コンテンツの具合を決める必要があります。これらを一貫して行うには、全体を意識したWebサイト設計が欠かせません。
サイト管理を容易にするため
2つ目は、Webサイト設計がサイト全体の管理をしやすくすることです。どのコンテンツをサイト内のどこに置くか決まっていれば、配置やコンテンツの管理・運用も楽になります。
逆に、Webサイトの設計をせずに不規則にコンテンツを作れば、その管理に労力を割かれることになるでしょう。1ページずつのペラサイトを作る場合も同じです。Webサイトは、ページを集約して1つに束ねる設計をするだけで、個別管理が不要となります。事前に設計をして、それを配置図に見立てた整理・整頓ができるのです。
ユーザーの使いやすさ（ユーザビリティ）を追求するため
3つ目は、目的のページにすぐ到達できる「ユーザビリティ」の向上が見込めることです。
設計によって全体のテーマや構造が決まっていれば、ユーザーは目的の情報をすぐに探し出せます。それはユーザーにとって役立つと同時に、繰り返し使いたくなるユーザーに優しいWebサイトのあり方です。設計がきちんとしていなければ、ユーザーのために機能を増やしても、機能だらけで逆に使いにくいでしょう。
Googleなどの検索エンジン評価を上げるSEOのため
4つ目の理由は、Webサイト設計がSEOの施策に直結するためです。SEOとは、「検索エンジン最適化（Search Engine Optimization）」の頭文字を取ったマーケティング用語です。
Webサイト設計を重点的に行うことで、Googleなどの検索エンジンからの評価を上げることができます。検索エンジンから評価されると、ユーザーに役立つ優良なサイトとして上位表示されるのです。特にボリュームのあるビッグワードで1～3位を獲得した場合、数千や数万、それ以上のアクセスユーザー数を確保することができます。ちなみに、このボリュームはGoogleトレンドやキーワードプランナーなどを使ってさまざまな指標を確認できます。
また、Webサイト設計はクローラーにも効果を発揮します。検索エンジンには、サイト情報を集める「クローラー」が存在し、定期的に巡回することでサイト情報がインデックスされます。つまり、サイトマップやサイト内外との関連性などもSEOにプラスの影響を与えます。
SEOでは関連付けを行うためにリンクすることを「外部対策」や「内部対策」と呼びます。過度な対策はNGですが、適度な対策を盛り込んだWebサイト設計は、SEO的に検索エンジンの評価が上がって検索順位が上昇し、新規ユーザーへの露出機会が増えるのです。
関連記事
ビジネスでのペルソナとは？【具体例付き】ターゲットとの違いや設定方法、メリットなどを解説
3.Webサイト設計の方法と手順
ここからは、実際にWebサイトを設計する場合の具体的な方法や手順を解説します。
①基本的なことを決める
最初にWebサイト設計の基本的なことを決めます。具体的には目的やターゲットユーザー、目標、コンセプトなどです。
Webサイトは運用方針や細かいことを先に決めます。そのため、企画書の作成や要件定義の取りまとめなど、文章の形でWebサイト設計のベースを作るのです。
②ニーズや競合の調査
次に、市場の状況を調べて、マーケティング戦略を練るための具体的なデータを集めます。ユーザーのニーズは調査してみないとわからないこともあり、競合との差別化できる部分を知るためにも調査は欠かせません。
例えば、自分のサイトを訪れるユーザーがどのような情報を必要としているのかです。そこで、よく検索されているキーワードやテーマからユーザーの意図を見極めます。
また、競合調査をした結果、同じ市場に競合が多すぎる場合は、SEOに費用がかかりすぎて、採算が取れません。これをレッドオーシャンと呼び、勝負しても上位表示できずに撤退する目算が高いといえます。
競合の具合はどの程度か
自社が勝負しても予算やコンテンツの質で勝てるのか
以上をこの段階で確認します。難しければサイト設計のテーマや具体的なキーワードの変更などが必要です。
また、サイト設計にどれくらいの予算や力を入れているかも確認します。ブログや個人サイトが表示されるようならブルーオーシャン（競合少ない市場）で勝負できますが、費用をかけたコーポレートサイトやオウンドメディアブログなどは、予算をかけている競合が上位を独占している場合は競合を抑えて「検索上位を独占する」「自社サイトを唯一無二にする」などが難しいでしょう。
③サイト全体の設計（サイトマップ作成）
次に、サイト全体の設計を決める「サイトマップ」の作成を行います。サイトマップとは、サイト全体の構造を図式化して階層ごとにまとめたものです。
人間のユーザーが見ることを前提とした「HTMLサイトマップ」や、検索エンジンにサイト構造を示す「XMLサイトマップ」などの種類があります。
サイト全体を設計する目的は、サイト制作に携わる関係者やユーザーに、全体像を示すことです。例えば、企業ホームページとECサイトでは、ユーザー層やサイトの目的、コンバージョンの種類（問い合わせ、購入アクション）などが異なります。
そのため、設計するサイトマップの作成もまた違ったものが出来上がるのです。設計手順の中でエンジニアやデザイナー、HTMLコーダーなどがそれを理解しやすくなるでしょう。
また、検索エンジンにサイトを認知させて、サイト内を巡回させるためにも必要です。Google Search Console（Googleウェブマスターツール）を使う場合は、サイトマップを送信して、自然巡回に頼らずにサイト構造を伝えることができます。
④ワイヤーフレームの作成（ページレイアウトの決定）
サイト全体の設計の後は、個別のページ設計を決める「ワイヤーフレーム」の作成を開始します。
ワイヤーフレームでは、枠と線によってページレイアウトを決めることが可能です。サイト全体像や個々のページ配置を表現できます。
例えば、以下のようなことをワイヤーフレームで決めるのです。
ページごとのテーマや目的の設定
配置やカラムの決定
優先順位の取り決め
これらのユーザーの使いやすさを意識した設計には、視覚的に情報を示せるワイヤーフレームの作成が有効です。
⑤デザインの決定
ワイヤーフレームの作成が終わったら、それに合わせたデザインを決めます。具体的には、カラーやフォント、画像などです。デザイン系のツールを使う場合はワイヤーフレームと同時に簡単なデザインも指定できます。
事前に統一感が出るように決めておくことで、デザイン性のブレやコンセプトとの不一致などを回避するのです。
以上をもとに、コーディングやデザイン制作が行われます。その後、サイト構築の細かい設定やコンテンツの配置、運営の仕方などを決めて、A/Bテストなどの試験作業を実施する、といった流れです。
関連記事
UI・UXデザイナー は副業で稼げるって本当？求人の探し方、必要なスキル、単価などを解説
4.Webサイト設計のポイント
Webサイト設計の流れを理解したら、今度は設計時のポイントを押えます。
マーケティングを意識する
1つ目のポイントは、ペルソナからコンバージョンまでマーケティングを意識した設計を心がけることです。
マーケティングとは、企業が利益を得るために行う行為全般のことです。Webサイトでは集客やコンバージョンの具体的な成果を上げるための施策を指します。
例えば、ペルソナはWebサイトに訪問する人物を具体的に設定して、そのユーザーが具体的に購入に至るまでのイメージを明確化するためのマーケティング手法です。
また、ペルソナ以外にも、ターゲティングを利用する手法（収集したデータで属性の傾向や地域性を活用する）などもあります。このようにWebサイト設計に使えるマーケティングの理論や方法は多彩です。
特にWebサイト設計者が意識したいのはコンバージョン率（CVR）です。アクセスユーザーがコンバージョン（購入、問い合わせ、資料請求）に結びつくようなサイト設計を考えます。
例えば、40代女性の化粧品は見た目の華やかさよりも健康や肌に良い自然志向です。そのようなデータを分析したら、サイトが掲げるコンセプトやデザインカラー、コンテンツもそのターゲットユーザーに合わせたものを用意するのです。
ECサイトなら売上やリピーターを増やす施策を設計し、ホームページやコーポレートサイトなら資料請求や問い合わせにコンバージョンの誘導を自然なものに工夫します。逆に、無理な誘導でコンバージョンを達成するような設計は避けるべきです。
ユーザー目線で考える
2つ目は、ユーザー目線で考えたWebサイトを設計することです。Webサイト設計者やコンテンツ制作者は、作る側の都合を優先して構造やデザインなどを決めがちです。しかし、実際にWebサイトを訪問して利用するのはユーザーです。
ユーザーを無視したサイト設計は使いにくく、快適性が失われます。例えば、広告を大量に貼ったWebサイトや、デザインばかり凝っていて使い勝手がよくわからないWebサイトなどです。
特に、クリエイター系やアフィリエイト系のWebサイトに見られる傾向です。創造性をユーザーに知ってもらうなどの目的でデザインを優先した設計をするのは構いませんが、最低限、他サイトと統一する部分や来訪するユーザー層を意識したアクセスビリティは確保しなければなりません。
快適な利用に向けて、ボタン・リンク間の移動や検索機能、視覚的なレイアウトなどの工夫で、ユーザーの離脱防止に配慮することです。
シンプルな設計を目指す
3つ目は、Webサイトの階層構造やコンテンツ配置を複雑にせず、シンプルな設計にすることです。
通常、ユーザーはトップページにアクセスした際、目的のページを見つけ出すまでに2クリック以上が必要だと、サイトの離脱が起こりやすくなります。そのため、トップページやサイドバーにサイトマップを表示した上で、サイトの回遊が発生する場合でも最深部までが2クリック以内、3階層以下になるよう設計するのです。
また、タグ付けや関連コンテンツの表示（内部リンク対策）、ページ位置をURLから把握できるようにする（URLの簡潔化）工夫なども有効でしょう。
SEOの知識を身に付ける
4つ目は、Webサイト設計者がSEOの知識を身に付けることです。
検索エンジンで上位を狙う企業サイトやECサイトは、上位に入れないと流入のボリュームが十分に確保できません。現在はSNSやメルマガ誘導、広告流入なども積極的に行われる時代ですが、それを踏まえてもビッグワードの検索からの流入ボリュームには勝てません。
もちろん、リスティング広告や検索エンジン流入に頼らないWebサイトも存在しますが、その場合はSEO以外の部分に費用や労力を大量投入しているため、安易な真似はおすすめできません。そして、費用をかけずに新規顧客を増やしやすいのが検索エンジンの上位表示です。
検索エンジンの仕組み
そこでまず、検索エンジンの仕組みを知ることです。例えば、Googleにはキーワードごとに上位表示を決めるアルゴリズムがあり、キーワード選定や専門性、サイトの信頼度（ドメイン）など200以上もの項目（正式な数も一部内容も公式開示なし）から検索順位が決まるとされています。
200という数字は、種類の変数のことで、公式アナウンスの正式な数字ではありません。200はマット・カッツの発言が根拠となっています。ちなみに、アップデートが何度も起こっていることから、当時からこの15年でさらに数は増えているでしょう。
Webサイト設計に競合調査やキーワード選定が絡んでくるのは、上位表示に必要な検索アルゴリズムと関係が強いためです。キーワードを大きく外したサイトは、キーワード検索のメインで上位表示の可能性を失うだけでなく、検索がランク外という扱いを受けます。下位検索でも流入が見込めません。
そこで、メインとなるキーワードをいくつか決めて、検索ユーザーが求めるサイトを作ることが必要です。
検索エンジンはスパム対策がある
検索エンジンの仕組みを利用して、上位表示を目指すサイトづくりは、すでに企業や個人、SEO業者やSEOコンサルなどが試みています。しかし、Googleを中心に、スパム対策は厳格化しており、過度な対策はペナルティを受けたり、気づかないうちに上位から落とされたりということが起こるのです。
特にキーワード対策と外部リンク対策はスパム扱いされやすい項目です。本来、SEO評価を上げるための正攻法は、良質なコンテンツで専門性を高めたコンテンツを掲載できるサイト設計を目指すことです。
設計に力を入れず、キーワードだけで検索上位を狙うなどは、下策といえます。そして、Google検索エンジンのアルゴリズムでは、過度なキーワード対策や小手先のテクニックで上位表示を許さない仕組みを作っています。
そして、Googleは検索エンジンのアルゴリズムを変える際に、アップデートとしてその内容を一部公開しています。外部リンクのスパム対策でペナルティを課す「ペンギンアップデート」が有名です。
いまのアルゴリズムもこの先同じとは限らない
アップデートは現在も繰り返しており、いま使えるSEOの手法やテクニックが次も使えるとは限りません。Webサイト設計者は新しいSEOの情報をアップデートして知る必要があります。
細かいテクニックを除けば、方法が偏らない基本的な対策がサイト設計で上位表示を目指すSEOの取り組み方としては有効です。
したがって、検索エンジンの評価を総合的、かつ長期的に上げて、優良サイトを維持するためには、キーワード対策や過剰な外部対策ばかりに頼らない、良質なコンテンツを設計をすることです。アップデートがされただけでサイトがスパムを受けない対策をしましょう。過去には、大型のアルゴリズム変更となったペンギンアップデートで、多数の企業サイトが順位下落やペナルティのために、サイトの作り直しを余儀なくされています。
直近のアップデートとその対応
ここ数年の間にも、アップデートが何度か起こっています。まず、2022年の「ページエクスペリエンスアップデート」では、ユーザーの快適さが検索順位の評価に加えられています。
また、2015年から現在も繰り返し変更がされている「モバイルフレンドリーアップデート」です。この影響で、デバイスがスマホメインや画面切り替えを前提に設計したWebサイトが評価される傾向にあります。
これを踏まえて、Webサイト設計者はそれも設計に盛り込むべきです。特に、パソコンとモバイルではコンテンツの配置や見方が大きく変わるため、設計時には決めておきます。
SEOに強いWebサイトを作りたい方は、SEOで本質的に評価される方法を知り、アップデートにも対応しやすいように、安易な対策に頼らず、基本に立ち返った設計を心がけましょう。
関連記事
SEO検定とは？意味ない？合格率や難易度、デメリット、おすすめの勉強方法を解説
5.Webサイト設計の注意点
Webサイト設計をする際には、以下の注意点があります。
競合調査やターゲット調査を手抜きしない
1つ目の注意点は、Webサイト設計の際に行う競合調査やターゲット調査をしっかり行うことです。
最近は、SEOツールで競合調査やターゲット調査ができるため、実際にサイト訪問やキーワード検索しての調査を怠るケースが少なくありません。しかし、表面的な情報の確認だけでは見逃す情報もあるのです。
したがって、SEOツールはあくまでも補助的に使い、担当者が自分の目で確認してサイト設計に盛り込むべき内容を決めましょう。
目的を増やしすぎない
2つ目の注意点は、あれもこれもと目的を詰め込みすぎないことです。Webサイト設計では、最初の目的にさらなる目的を追加して、網羅性を高めたい欲が出ます。これは、費用と時間をかけてWebサイト制作をするために、「ついでにこれも」とできることをさらに増やそうとするのが原因です。
しかし、目的が煩雑になったWebサイトは、検索エンジンから評価されにくく、サイト制作の際の工数も増えるため、時間も費用もかかります。
いまのユーザーは、万能さや網羅性よりも、情報の専門性を求めており、複数のことを知る場合は検索し直して情報サイトやサービスを探すものです。ニュースサイトやポータルサイトなどを除けば、基本は網羅よりも専門性に力を入れて設計することです。
セキュリティを初期の段階で決めておく
3つ目の注意点は、セキュリティを踏まえた設計を行い、最初の要件定義を決める際にセキュリティ内容を具体的に盛り込むことです。
セキュリティの変更は、ファイルの扱いや接続の通信方式などにまで影響が及びます。そのため、先にセキュリティを踏まえない設計をしてしまうと、後でそれらすべての変更が必要となるケースもあるのです。できればセキュリティは、最初の仕様書段階ですでに決めておきましょう。
関連記事
リキャプチャ(reCAPTCHA)とは？仕組みや種類、導入方法、メリット・デメリットを解説
6.Webサイト設計に活用したいおすすめのフレームワークツール
ここでは、Webサイト設計で使えるフレームワークのツールを3つ紹介します。
Figma
「Figma」は、フレームワークとしての機能を網羅したWeb業界でも代表的なツールです。複数人で共有しながらの作業が可能で、チームプロジェクトも管理できます。
基本的な操作はブラウザからする仕様で、外部のデータを取り込んで活用することも可能です。メニューを活用することで、よく使われるデザインをすぐに使えますし、細かく線の太さや色も変えられます。
最初にログインが必要ですが、無料ですぐに使用感を試せるのは魅力でしょう。Webサイト設計でフレームワーク作成を多彩な機能が手助けしてくれます。
AdobeXD
「AdobeXD」は、イラストやデザイン制作ツールで有名なAdobe社が提供するフレームワークツールです。フレームワーク作成がしやすい性能になっており、基本的な作成やチーム共有、コメント追加などが可能です。
フレームワークを作った後のデザイン追加もできるため、設計を見やすくする工夫も簡単にできます。ただし、利用は有料で、無料期間は7日だけです。ツールの使用感を確かめる期間としては少し短いでしょう。
Sketch
「Sketch」は、OS環境がMacのユーザー向けフレームワークツールです。アプリケーションとして導入し、直感操作に向いた画面仕様と図形作成が可能です。軽量で操作性に優れています。
使用する場合は有料利用が基本です。ただし、30日間だけ無料で試すことができます。機能や規模によってプランがわかれており、企業向けのビジネスプランもあります。そのため、目的にあわせて選べるでしょう。
関連記事
Webデザイナーおすすめ資格10選【初心者・独学者向け】学習方法や資格取得後にすべきことも解説
7.Webサイト設計のよくある質問
ここでは、Webサイト設計についてよくある質問に回答します。
Webサイトの設計書はテンプレートを使ったほうがいい？
Webサイト設計で最初に作成するものに仕様書や設計書があります。その際に使われるのがテンプレートです。独自のフォーマットを使用するよりも、テンプレートに当てはめるだけで手早く作成する事ができます。
そのため、作業の時間短縮やメンバー間のフォーマット統一といったメリットがあります。作成業務が効率化することでしょう。しかし、テンプレートは柔軟性に欠けるため、テンプレートから大きく外れる設計作業の場合は逆に非効率となります。テンプレートの多様には注意が必要です。
SEOに強いWebサイトはどう設計すれば作れる？
Webサイトには、設計によってSEOに強いサイトが作れる場合と弱いサイトしか作れない場合があります。SEOに強いWebサイトは骨組みがしっかりとしていて構造化されており、コンテンツの関連性も強く、小手先のテクニックに頼らないサイトです。
一方、SEOに弱いケースとして、スパムや小手先のテクニックで上位表示を狙った中身のないサイトです。SEOに強いWebサイトほど、検索エンジンアルゴリズムの評価項目を盛り込んでいます。ページの表示速度に優れるなどもその項目の1つです。
また、スマホ寄りな画面設計や専門的なコンテンツの充実、クローラに適したサイトマップの提供などがプラス要素として評価されます。
ホームページとブログはサイト設計が違う？
同じWebサイト設計でも企業向けのホームページとオウンドメディアブログでは根本的に設計が異なります。
ブログは内容がホームページほど堅い内容ではなく、個人スタッフ風のブログやオウンドメディアの特徴を活かした自社開発・販売の内側など、役立つサイトなどです。
近年では、自社製品を使った料理やDIYをコンテンツにする企業も出ています。そのため、ホームページとブログでは目的に合わせた別々の設計が必要です。
Webサイト設計にSEOは必要なのか？
検索エンジンは文字以外を人間と同じような情報として認識することはできません。しかし、デザインや配置を考えることは決してSEOにとって無駄ではないのです。むしろ、SEOを意識した施策が有効でしょう。
なぜなら、検索エンジンの評価は、最初に行われる機械的なアルゴリズムが決定する順位と、後から無作為で人の目視により行われるチェックの2パターンがあるからです。これを「検索品質評価者」と呼びます。Googleは正式にこれを外部依頼しており、そのための指標として「google検索品質評価ガイドライン 」も公表しています。
キーワードだけで中身のない対策をしたサイトは、目視チェックで後から順位下げやランク外ペナルティが行われることもあります。しかし、人の手でチェックする数には限界があるため、無理な対策をしたサイトも検索上に残ることがあるわけです。
8.まとめ
今回はWebサイトの設計について、制作前に設計が必要な理由や設計手順などについて解説しました。Webサイト設計は、ユーザーの使いやすさ向上や検索エンジンの評価を上げるためにも必要です。今回挙げたポイントや注意点を踏まえて、Webサイト設計を進めましょう。
本記事が皆様にとって少しでもお役に立てますと幸いです。
「フリーランスボード 」は、数多くのフリーランスエージェントが掲載するITフリーランスエンジニア・ITフリーランス向けの案件・求人を一括検索できるサイトです。
開発環境、職種、単価、稼働形態、稼働日数など様々な条件から、あなたに最適なフリーランス案件・求人を簡単に見つけることができます。
単価アップを目指す方や、自分の得意なスキルを活かせる案件に参画したい方は、ぜひ「フリーランスボード 」をご利用ください。
自身に最適なフリーランスエージェントを探したい方はこちら よりご確認いただけます。