前回Webサイトの企画についてご説明しました。今回は企画フェーズの次のステップである設計についてご説明します。
サイト設計とは
サイト設計は企画の段階で確定したWebサイトの方針に基づき、どのようなページやコンテンツを配置し、構造化するプロセスを指します。
効果的なWebサイト設計を行うことで、サイト制作全体の見通しが向上し、完成したサイトには高いユーザビリティやSEOに対する好影響が期待されます。さらに、サイトの制作と運営の過程でクリエイターや関係者との円滑な意思疎通が促進され、共通の方向性が確立されます。
逆に、サイトの設計を怠ると、コンテンツの配置が混乱し、ユーザがサイト内を効果的に巡回することが難しくなるなど、さまざまな問題が発生する可能性があります。
サイト設計の必要性
サイトやコンテンツにブレがなくなる
サイト設計を行うことで、同じテーマのコンテンツが統一的に配置され、サイトに一貫性が生まれます。一貫性のあるテーマはユーザーに印象を与え、ファンを生み出し、そのサイトを繰り返し訪れる可能性が高まります。
また、公開されたサイトを運営する際には、関与する全員が共通の理解を共有することが重要です。これにより、方向性が一致せずに混乱するリスクが低減されます。各メンバーが本来の目的を念頭に置きながら、確実にゴールに向かって協力することが可能となります。
ユーザーエクスペリエンスの向上
適切なサイト設計を行うことで、ユーザーエクスペリエンス（UX）を向上させることが期待されます。優れたサイト設計は、ユーザーがサイトをスムーズに閲覧し、必要な情報を容易に見つけることを可能にします。ユーザーがサイトを訪れ、快適な体験をすることは、サイトの成功において不可欠な要素と言えます。
UX向上のためには、ナビゲーションの使いやすさや情報の整理、視覚的なデザインの配慮などが重要です。これらの要素が調和して組み合わさることで、ユーザーはより満足度の高い体験を得ることができ、サイトの利用頻度や評判が向上するでしょう。
設計の流れ
サイトのコンセプトを決める
企画の初期段階において、最初に行うべきことはサイトのコンセプトを確立することです。Webサイトの設計におけるコンセプトは、そのサイトが存在する目的や伝えたいメッセージ、提供するべき体験に関する基本的なアイデアや方針を指します。サイトコンセプトを明確にすることで、特定のターゲット層を的確に捉え、それに伴って商品やサービスの強みを際立たせ、訴求力を高める効果が期待されます。
コンセプトを具体的に決定していく際には、「5W1H」という考え方が役立ちます。これは、「What（何を）」「Why（なぜ）」「Who（誰が）」「When（いつ）」「Where（どこで）」「How（どのように）」という6つの要素に焦点を当て、それぞれの観点からコンセプトを考える方法です。
このアプローチを通じて、サイトの目的や特長を明確にし、ユーザーに対して魅力的で理解しやすいコンセプトを構築することが可能です。
| What(何を) | Webサイト制作の目的は何か？ |
| Why(なぜ) | なぜ自社のWebサイトを利用するのか？ |
| Who(誰が) | どんなユーザー像を想定するか |
| When(いつ) | どのような時に見られるサイトなのか |
| Where(どこで) | どこで見られるサイトなのか |
| How(どうやって) | どのような経路でアクセスされるのか |
キーワードを選定する
Webサイトにおけるキーワード設定は、SEOの不可欠な要素です。具体的なキーワードやフレーズの選定、そしてそれらを戦略的にウェブサイトのコンテンツに組み込むプロセスがこれに該当します。このプロセスは、ウェブサイトの検索エンジンランキング向上や、検索エンジンからのトラフィック増加を狙う上で極めて重要です。
キーワードの選定方法としては、検索エンジンで上位表示されている競合他社からキーワードを洗い出したり、ツールを用いて抽出するなどの方法があります。
サイトマップの作成
サイトマップとはサイトの設計図のことで、Webサイトの階層構造をひと目で把握できるようにした図です。
ホームページにおいては「階層構造」を採用することが基本です。トップページを第一階層とし、他のページは第二階層、第三階層といったように繋がっています。サイトマップが用意されていれば、制作段階でこの階層構造を視覚化し、プロジェクトチーム全体が全体像を共有するメリットがあります。サイトマップを活用することで、全体像を把握した上で詳細ページを進める際にも理解が容易になります。
ただし、階層構造が深くなりすぎると、ユーザーが目的のページに辿り着くまでの時間が増加する可能性があります。そのため、極力サイトマップは3階層までで構成するよう心がけることが重要です。これにより、ユーザーが迷わずに情報を探しやすくなり、サイト全体の使いやすさが向上します。
ワイヤーフレームの作成
サイトマップの作成が完了したら、次にワイヤーフレームの作成に移ります。ワイヤーフレーム（構成案）は、Webページのレイアウトやコンテンツの配置を定めた設計図のことです。ここでの「ワイヤー（wire）」は「針金」、そして「フレーム（frame）」は「枠」や「骨組み」を指し、文字通りシンプルな線や図で構成されています。
ワイヤーフレームの作成により、ページにどのような要素が必要かを事前に整理することができ、ページ内の不足要素が後から出てくることを防ぐことができます。
ワイヤーフレームが完成したら、それを基にデザイン制作に移ります。デザインのフェーズ以降は、企画・設計フェーズで定めた内容から逸脱しないように進行管理を行う必要があります。これにより、プロジェクトが予定通りに進行し、最終的な成果物が初期のビジョンと一致するようになります。
まとめ
ここまで設計について様々なことを述べてきましたが、おおまかに設計には
- サイトを閲覧する人にとって使いやすいサイトにする（サイトを利用するユーザー目線）
- SEOを強化し、検索されやすくする（制作を依頼した顧客目線）
- 制作者間での意思疎通をはかり、プロジェクトを円滑に進める（実際にサイトを作る制作者目線）
というサイトに関わる人それぞれの視点での目的があると感じました。
見やすいデザインやSEOを意識したコーディングも重要ですが、それ以前の段階から、サイトにかかわる人に対して考えることがあると改めて認識しました。今後、企画や設計をする際には、制作を依頼した顧客や利用するユーザーの求めるものは何か、制作者がいかにスムーズに制作ができるかを考えて一つ一つの過程を進めていく必要があると感じました。
