WEBデザインをする前に知っておきたいサイト設計入門編
WEBサイトを新規で立ちあげるときやリニューアルをおこなうときに登場するのがサイト設計です。
サイト設計が詳細に決まっているといないとでは、サイトの成果に大きく影響するのでとても重要になります。
WEBサイトの設計とは、クライアントがサイトを作って叶えたいことや望んでいることを明らかにし、目的に沿った制作を進めるためのものです。
また、サイト設計が決まらないと関係者が制作をスタートできないため、サイト設計は制作に関わるすべての人にとって重要です。
WEBデザイナーはサイト設計段階で、WEBデザイナー視点からの知見を求められることもあります。
「自分は指示されたページのデザインだけをすればいい」と思うのではなく、積極的にサイト設計に参加できるようになると、一目置かれるWEBデザイナーになりますよ！
サイト設計はプロジェクトの進行計画を決めるもの
サイト設計とは、プロジェクトの最初に制作会社とクライアントの間で（またはどちらかだけの場合もあります）決める全体の進行計画のことです。
決める内容は多岐にわたります。後ほど紹介しますが一例としてあげると、サイトの運営目的やターゲット、発信するコンテンツの内容、具体的なデザインの方向性や機能、スケジュール、リリース後の運用方法などがあります。
サイト設計はあやふやな情報をはっきりさせ、サイト制作各所に落とし込むためのものです。
WEBデザインする前にサイト設計をする目的
サイト設計をおこなう目的は、クライアントにとっても制作サイドにとっても色々あります。具体的な目的について見ていきましょう。
集客できるサイトを作るため
商材を利用するターゲット層の来訪を促すきっかけになるのがコンテンツです。最近では発信する方法も動画や記事などさまざまです。
ターゲット層の興味関心にあったキーワードから分析し、ニーズに合ったコンテンツを探す必要があります。
コンテンツをきっかけにターゲット層の集客ができると、ユーザーからファンに、ファンから顧客になることもあります。
ユーザーがファンになると、サイト内で商材の宣伝を見ても広告っぽさを感じることが少なく、成約数の向上が期待できます。
サイト設計でコンテンツの企画を詰めることで、商材に合ったターゲット層の集客が可能になるでしょう。
ユーザーの不安や疑問をサイト内で解消するため
ほとんどのユーザーは商品やサービスをよいと思っても、不安や疑問点が解消されなければ問い合わせをすることなくサイトから離脱してしまいます。
必要な情報をサイトにわかりやすく開示しておくと、商品やサービスを購入する前の不安や疑問点を解消できますよ。
サイト離脱を防ぐためには、ユーザー目線に立って使いやすさを考え、次に知りたいことや気になることを配置するなどの工夫が必要です。
あらかじめサイト設計の段階で洗い出しをしておくとサイトに盛り込むことができ、問い合わせなどが減るなどの運用面でのメリットが生まれます。
制作チーム内やクライアントとの間で認識を共有するため
サイト制作に関わる人の立場はさまざまです。
制作サイドであれば、WEBディレクターやWEBデザイナー、ライター、カメラマン、コーダーなどの担当に分かれていることがあります。
一方のクライアントサイドでは、サイト企画担当やデータベース管理担当、商品担当、システム担当などが関わっています。
サイト制作プロジェクトに関わる人数が増えれば増えるほど、同じ理解度での情報を共有するのは難しいですよね。
サイト設計は全員が共通認識を持つための基準書としての役割を担うことができるのです。
サイトリリースまで無駄のない作業とコストで進めるため
新規サイト立ちあげももちろんですが、特にサイトリニューアルの場合はクライアントも通常業務を抱えながらのケースが多いです。
途中で何度も修正が入るとその都度確認が必要になり、サイトリリースまでのスケジュールがタイトになってしまうケースが見られます。
他にも開発に時間とコストをかけすぎてしまい、リリースまでに予算と時間がなくなってしまうケースもあります。
上記のようなケースは最悪の場合、リリース日が後ろ倒しになってしまうので避けるべき事態です。
サイト設計の精度が高いと予算と時間を配分してあるので、途中でトラブルが起きても調整可能で、計画的にプロジェクトを進めることができます。
リリース後に分析しやすいサイトを作るため
サイトは、制作をしてリリースしたら終わりではありません。
運用でよりよい成果を生み出すためには、サイトの閲覧（PV）数や来訪者数、コンバージョン数などのデータをもとに分析をおこない、PDCAを回す必要があります。
分析データに必要な項目は、サイトの種類によっても違います。
サイト設計の段階で目的に応じてGoogle AnalyticsやSearch Consoleなどの分析ツールを選定し解析環境を考慮しておくと、制作途中でタグを埋め込むなどの作業がスムーズになります。
リリース後に運用しやすいサイトを作るため
リリース後に運用しやすいサイトとは、情報コンテンツの更新や変更が簡単にできるサイトのことです。
更新や変更の内容としては、コンテンツを新たに増やしたい、バナーやボタンのABテストをしたい、などが考えられます。
また、新機能開発が予算の関係で実装はリリース後になるということもあります。
サイト設計でリリース後にトラブルになりそうなことを予期できる限り洗い出しておくと、未然に防ぐことができるでしょう。
トラブルをリリース前に潰しておくことで、リリース後に運用しやすいサイトになります。
WEBサイト設計のときに決めておきたい要件
設計する要件は、必要な工程や担当ごとに準備するとよいでしょう。
制作現場によって要件の仕分け方法も変わると思いますが、よく使われる要件の項目をピックアップして紹介します。
サイトマップやワイヤーフレームで全体構造を決める
サイトマップとはサイトの全体がわかる地図のことであり、ワイヤーフレームとは各サイトページの間取り図のことです。
コンテンツの配置や機能の設置など、どこに何を配置するのかを決めてサイトマップやワイヤーフレームを作っていくことで、サイト全体の要素を把握できます。
全体構造を決める際、サイトの方向性や新しく導入するシステムなどを盛り込んでいくことで、サイトの全体像だけでなく制作進行のスケジュールや必要な新規開発案件などを洗い出すことができます。
サイトマップやワイヤーフレームは、WEBディレクターやWEBデザイナーが書き起こすことが多い作業です。
制作工程でとても重要なツールとなるので、WEBデザイナーはサイトの構造をしっかり把握しておくとよいでしょう。
対応するデバイスやブラウザを決める
サイトはユーザーが使用するデバイス（情報端末）であるパソコンやスマートフォン、タブレットによって見えかたが異なります。
最近ではほとんど見かけなくなりましたが、スマートフォンで開いたときにパソコン用の大きな画面が表示され見づらいと感じた経験がある人もいるのではないでしょうか。
サイトを最適に表示させるには、デバイス別の画面サイズに合わせたレイアウト作り、デバイスに合った最適な表示で見せることが必要です。
最近ではスマートフォンでサイトを閲覧する人が多いので、スマートフォンの画面を中心に決めることが多いです。
またブラウザ（インターネット閲覧用ソフト）にも、Internet ExplorerやGoogle Chrome、Safari、Firefoxなどいろいろな種類があり、同じサイトを表示しても崩れて見えることがあります。
こうしたユーザーのインターネット環境によって表示に違いが生まれないように、対応するブラウザを決めておく必要があります。
サイト内を移動しやすい動線を設計する
よくショッピングモール型のECサイトで、商品詳細を確認するページの階層が深いケースが見られます。
これは、細かくカテゴリ別に分けられているためです。
たとえば以下のような階層の例をみてみましょう。
ドラッグストア > 衛生用品・ヘルスケア > 家庭用マスク・アクセサリー > 家庭用マスク > 商品ページ
右にいくほど階層が深くなり、マスクの商品ページは第5階層目です。カテゴリを細分化しすぎると、見たい商品ページまでにクリックする回数が増えるのでユーザーは探しづらくなります。
他のカテゴリへの移動もしにくくなるので、サイト内を滞在する時間が減り、離脱が多くなることも考えられます。商品数が多くない限りは、階層を減らすことがおすすめです。
さらに階層の浅いサイトのほうが検索結果で上位表示されやすいとも言われているので、設計の際に考慮できるとよいでしょう。
ユーザーが目的を達成しやすい導線を設計する
導線はしばしば動線と似たような意味合いで使われることが多い言葉です。
前述したサイト内の移動のしやすさに焦点を当てた”動線”とは違い、”導線”はサイトに来訪したユーザーの目的を早くて簡単に達成させること、の意味合いで紹介します。
ユーザーは、商品購入や情報を知る目的でサイトに来訪します。来訪したときにユーザーが簡単に目的を達成できないと、次回は利用してもらえないかもしれません。
また、商品購入やサービスを成約するまでの途中に、不安や疑問点を解消するようなコンテンツを配置するなども重要です。
目的地までページ移動の数を少なくし、最短経路でユーザーが到達できるよう考えることが導線設計になります。
ユーザーの興味を引くコンテンツを企画する
コンテンツは、サイトリリース後に少しずつ増やせばいいと考える人もいるようですが、サイトの目的達成に大きく関わる部分なのでリリース前には準備しておきたい要件です。
コンテンツは、ユーザーの定期的なサイトへの来訪を促し、会社や商品、サービスに興味を持ってもらうきっかけづくりになります。
魅力的なコンテンツを用意するには、商品やサービスを購入する典型的なユーザー像であるペルソナが重要です。
ペルソナの悩みを解決するような情報や興味を持ちそうな情報などを提供できるようなコンテンツを作れるとよいでしょう。
ユーザーと継続的な関係を続けていくことで、今は商品やサービスの購入に至らなくても企業のファンになってくれることもあります。
ユーザーをファン化するためのきっかけになる企画を設計段階で決めておきます。
情報の表示ルールなどを決める
サイトに情報を表示させるために、ナビゲーションの表示方法やページリンクに関するルールなどを設計する必要があります。
ナビゲーションは、ヘッダー下固定のメニュータブやパンくず、検索窓、ページ割などがあり、ユーザーを目的のページまで案内します。
ページリンクとは、関連記事や関連商品のサイト内リンクを貼ることで、ユーザーが興味を持ちそうな情報を提供できるものです。
ページリンクがあるとサイトパフォーマンスがあがり、SEO対策になるメリットがあります。
ナビの配置ルールやサイト内リンクを入れる際のルールを決めておくと、サイトの統一性が保たれ運用しやすくなります。
公開用や管理用などの画面設計をする
更新の多いサイトの制作になると、CMS（コンテンツを管理するシステム）を利用してサイトの更新をおこなうケースがあります。
公開用の画面とは別に、限られた人しか見られない管理用の操作画面やプレビュー画面を用意することがあります。
管理画面は、サイトの更新や表示変更の指示をおこなったり、分析結果などが見られたりできる画面のことです。
プレビュー画面は、サイト内に新しいカテゴリやコンテンツを追加しようとしたときに、サイトの表示が崩れるなどの不具合がないかを本番公開前にチェックするために、画面を分けて設計しておくことがあります。
インフラ基盤などのシステム設計をする
Webサイトで使う”システム”とは意味合いが広い言葉です。
サイト制作の裏方といわれることが多いですが、ユーザビリティやサイトの運用面で大きな影響力を持つのがシステム設計です。
本記事では、デザインしたものをサイトに表示させるHTML・CSSやサーバーに大量のデータを保管し必要なときに引き出して利用するデータベース、個人情報を守るためのセキュリティなどを含みます。
WEBデザインにおけるサイト設計の簡単な流れ
サイト設計は要件定義をまとめることが主な作業ですが、決めなればならない要件はたくさんあります。サイト設計の流れを簡単に紹介します。
要件を決めるまでのスケジュールを立てる
要件をいつまでに策定するかを決めるまでには、以下のような流れになることが多いでしょう。
1.クライアントへのヒアリング、課題整理をおこなう
2.ヒアリングを受けて制作会社から提案する
3.クライアントと制作会社で内容に合意する
4.要件定義書にまとめる
クライアントへのヒアリングでは、後述する”要件定義で決めるべきこと”でサイトの目的やコンセプトを確認していきます。
サイトをリニューアルする場合では、現状の課題や問題点も確認し、改善できる点などを提案できるとよいでしょう。
ヒアリングを受けて、制作会社がクライアントの意向に沿ったサイトの提案を作り、クライアントと制作会社で合意したら要件定義書にまとめて、制作がスタートしていきます。
上記の流れに沿って要件定義書にまとめるまでのスケジュールを立てます。
▼ヒアリングについてより詳しく知りたい方は下記の記事をぜひ参考にしてくださいね。
WEBデザインはヒアリングが最重要！必須の10項目
要件定義書をまとめる
要件定義で決めるべき内容は制作するサイトの種類によりさまざまですが、まとめる内容の例を以下に挙げます。
サイトリリース日
スケジュール
予算
サイト構築の目的・目標
コンセプト
デザインのテイスト
サイトマップ
ワイヤーフレーム
上記の他に、前述した”設計する要件の種類”で作成した書類などの設計一覧を一緒にまとめておくか、要件定義書に盛り込んでおくとよいでしょう。
リニューアルの場合ならサイトマップで改変するページを指定し、ページに付随する設計一覧をまとめたものとワイヤーフレームを作っておきます。ワイヤーフレームに関しては、次の項で説明します。
▼要件定義に重要になってくるコンセプトについて、より詳しく知りたい方は以下の記事を読んでみてくださいね。
WEBサイトはコンセプト設計が鍵！成果の上がるWEBデザインにするには？
サイトマップとワイヤーフレームを作成する
サイトマップで全体の構造を練ってから、ワイヤーフレームで各ページに入れるコンテンツやレイアウトを決めていきます。
ワイヤーフレームは、トップページから作り始め階層が下のページを作っていきます。
要件定義書作成と同時に進めることもありますが、サイトマップやワイヤーフレームは、WEBディレクターやWEBデザイナーが作成する場合が多いです。
簡単に作れるものなので、勉強しておくとよいでしょう。
▼ワイヤーフレームの作り方やレイアウトについて具体的に知りたい方は、こちらを参考にしてみてください。
WEBデザイン初心者のためのワオヤーフレームの作り方と注意点をご紹介
【超重要】WEBデザイナーなら知っておきたいレイアウトの種類を一挙公開
サイト設計でWEBデザイナーが意識すること
サイト設計全体の流れを見てきましたが、WEBデザイナーが意識するポイントにはどのようなものがあるでしょうか。デザインを作るうえで意識したいポイントを紹介します。
ターゲットのペルソナに合ったデザインになっているか
ペルソナは前の項でも触れましたが、架空に設定したターゲットユーザーのことで、年齢や性別、職業、住んでいる地域、趣味、悩みなどを仮設定した人物像です。
ペルソナを設定するとサイトのコンセプトが決まり、WEBデザイナーはペルソナをもとにフォントデザインやサイズ、使う色展開などのサイトのテイストを選んでいくことができます。
たとえばマタニティ向けのサイトでは、淡い色使いや細めのフォントを使って安心感や優しさをイメージさせるサイトが多いです。
証券や不動産であれば、はっきりした濃いめの色を使い、高級感や信頼性をイメージさせるサイトが多く見られます。
以上のような例は、「ターゲットのペルソナだったらどういうデザインを良いと感じるだろう？」と考えて作られています。
ペルソナの嗜好や興味関心が細かく設定されていると、ペルソナはどう感じるだろうかと想像しやすくなります。ユーザーに近い視点を持ってデザインを作れるとよいでしょう。
ユーザビリティを意識したデザインになっているか
ユーザビリティを意識したデザインとは、見やすく使いやすいサイトであることです。確認すべき点は数えあげればキリがありませんが、例を挙げてみましょう。
レイアウトにバラツキはないか
アイコンは誰が見ても理解できるか
コンテンツの順番や流れ、ボタンの位置は適切か
必要な情報は同じページにあり足りないものはないか
前の段落と次の段落で話が切り替わっているのに同じデザインが続いていないか
細かいことのようですが、サイトのユーザビリティに影響を与えます。見にくく使いづらいサイトでは離脱につながりやすくなり、今後サイトを利用してもらえなくなる可能性もあります。
コンテンツの順番やボタンの位置、必要な情報があるかどうかなどはワイヤーフレームの制作段階でも気付くことができるポイントですので、ユーザー目線で客観的に見るよう意識できるとよいでしょう。
ワイヤーフレームのとおりにデザインしないこと
”ワイヤーフレームのとおりにデザインしない”とは、決して自分の個性を主張したデザインをすることやレイアウトやテイストを大きく変えて作るなどの意味ではありません。
駆け出しWEBデザイナーさんが陥ってしまいがちなことに、デザインを起こすときにワイヤーフレームに引っ張られてデザインしまう場合があります。
できあがったデザインがワイヤーフレームとまったく同じだったら、機械で作ることと変わりありません。
ワイヤーフレームは全体を把握するために作るもので、細かい見せかたの工夫などはされていないものです。
どうやったら読みやすいかや目立たせたいものを目立たせられるかを考えて作るのが、WEBデザイナーの腕の見せどころになります。
フォントの大きさや画像をそのまま使うのではなく、どうやったらより見やすくなるかを作る前に考えてからデザイン制作に入るとよいでしょう。そして変更した際は、変更した理由を説明できることが重要です。
WEBデザイナーの知見を活かしたデザイン制作ができれば、クライアントやチームから信頼を置かれるようになるでしょう。
まとめ
サイト設計は、サイトを新しく設計するときやリニューアルするときに必要な工程です。
チームやクライアント、サイト制作に関わるほとんどすべての人たちと共有する工程の基準になるので、WEBディレクターだけでなくWEBデザイナーも知っておく必要があります。
サイト設計が終わるまでは、細かくたくさんの要件をまとめなければなりません。しかし、きっちりサイト設計が作られていると、制作も運用もスムーズにおこなえますよ。
WEBデザイナー目線でも、ユーザー目線でも、よりよいサイトを作るための意見を提案できると重宝されるWEBデザイナーになれるでしょう。
サイト制作の核となるサイト設計を理解して、クライアントに喜ばれるサイト作りに活かしてみてくださいね！