やってみよう！WEBサイト制作第2弾 #02 WEB制作の設計
WEB制作の設計
Webサイトの「構造設計」とは、サイトの具体的な方向性を定めることです。何の目的でサイトを運営して、どのようなコンテンツを掲載していくかを決定し、Webサイトの「土台」を作ります。サイトの構造設計を行うと、ユーザーとGoogleの双方から好まれるようになり、マーケティングの成果が上がりやすくなります。
Webサイトの効率的な運用に欠かせない「構造設計」ですが、正しい手順による進め方が重要です。Webサイトを設計するときは次の4つのフェーズを意識して、一つずつ丁寧に進めていきましょう。
①Webサイトのコンセプトや課題などを書き出す
②サイトマップを作成してサイト全体の構造を設計する
③各ページのレイアウトを示すワイヤーフレームを設計する
④サイトマップとワイヤーフレームをもとにデザインを進める
最初にWebサイトの基本的な情報を整理して、サイトにどのようなコンテンツが必要で、誰がターゲットなのかを洗い出します。それからサイトの全体像と骨組みの設計、実際のデザイン作業へ移りましょう。
UI,UX
近年、ウェブサイトやアプリのデザインにおいて「UX（ユーザーエクスペリエンス）」と「UI（ユーザーインターフェイス）」という言葉がよく使われます。これらの言葉は、デザインの世界で重要なキーワードとなっていますが、実際のところ、どのような意味があり、どのような違いがあるのでしょうか？
UI
UIとは、ユーザーインターフェイスの略で、ユーザーとシステムが相互作用するための仕組みや方法を指します。具体的には、画面上のボタンやメニュー、テキストボックス、アイコンなど、ユーザーが操作するための要素がUIにあたります。UIのデザインは、ユーザーが直感的に操作できるようにすることが重要で、見た目の美しさだけでなく、使いやすさやアクセシビリティも考慮されます。
UX
UXとは、ユーザーエクスペリエンスの略で、製品やサービスを利用する際のユーザー体験を指します。つまり、ユーザーがアプリやウェブサイトを利用する際にどのように感じ、どのように操作していくかということが、UXに関わる要素となります。良いUXを提供することで、ユーザーはストレスなく製品やサービスを利用でき、満足度が高まります。
ECサイトを例にすると、購入前に見た広告やSNSでのクチコミ、商品の魅力や品揃え、ECサイトの使いやすさ、決済方法の豊富さ、発送方法やスピード、梱包や同梱物といった、あらゆるタッチポイントがユーザーの体験となっていきます。
UIとUXの違いについて
UXとUIは密接に関連していますが、それぞれ異なる概念であり、違いを理解することが重要です。UXはユーザーがサービス全体を通して得られる経験を指し、UIはユーザーが操作するための具体的な要素を指します。良いUIデザインがあって初めて、良いUXが実現されると言えますが、UIが優れていても、全体的なユーザーエクスペリエンスが悪ければ、UXは低く評価されることになります。つまり、UIはUXを実現するための一部であり、両者は切り離せない関係にあると言えます。
UIと似た言葉で、ユーザーがわかりやすく使えるかという観点の「ユーザビリティ（使い勝手）」、問題なく利用できるかという観点の「アクセシビリティ（アクセスのしやすさ）」といったものもありますが、それらもすべてUXに含まれるものと言えます。
UXが重視される背景
近年UXが重要視される背景として、商品やサービスの差別化が難しくなってきている現状があります。商品やサービスそのものの改善を重ねていっても、成熟し頭打ちになってしまったり、競合との差異が打ち出しづらくなります。
しかし、実際にユーザーが商品を選ぶときには、商品の機能やサービス内容、価格だけではなく、購入や利用を通じて得られる体験価値も評価対象となります。例えば、Webサイトでの機能解説がわかりやすい、商品の使い方が動画で分かりやすく説明されている、使い方がわからないときにいつでも質問できて答えてくれる、といった顧客体験の提供もユーザーに選ばれる要因となります。
良いUXとは？
「UXが良い」とはどのような状態のことでしょうか。それは、Webサイトの使い勝手とWebサイトが提供する体験の両方がユーザーの期待通り（あるいはそれ以上）である状態だと言えるでしょう。
基本的にユーザーは、「物を買いたい」「このサービスに加入したい」など、何らかの目的を持ってWebサイトにやってきます。当然、知りたい情報や辿り着きたいコンテンツに迷わずストレスなく辿り着けることが重要です。ECサイトであれば、目当ての商品を見つけやすいように用途、メーカー、価格帯などいくつかの分類方法でカテゴリー別項目を用意しておくことなどが挙げられます。
ただ、そうした使い勝手が良くても、商品やコンテンツ自体が魅力的でなければユーザーの満足度は高くなりません。欲しい商品が購入できるのか、品揃えは豊富にあるのか、販売商品についての十分な説明が記載されているか、購入後のサポート体制はあるのか、といったことも顧客体験につながります。
近年は特にスマートフォンからのアクセスが増えているため、スマートフォンで閲覧したときにいかに見やすくわかりやすい情報設計になっているかも大事なポイントです。文章量や画像の見せ方、導線設計の工夫で、小さな画面でもストレスなく操作でき、わかりやすいコンテンツにすることでUXを向上させることができます。
サイトマップとは？
サイトマップとは、サイトを制作する際に全体を俯瞰してみることができる資料で構成図とも呼ばれています。
ページの構成をツリー状に表したもので、トップページを頂点として、各ページがどのような繋がりを持っているのかを視覚的に分かりやすくしたものとなります。
➀WEBサイト全体を俯瞰してみることができる
②プロジェクトチームと全体像の共通認識が持てる
サイトマップの作り方
サイトマップは、以下の手順に従って作成していきます。
- １．必要ページを洗い出す
- ２．グルーピングする
- ３．ツリー状に整理する（図に落とし込む）
- ４．全体を俯瞰して確認する
サイトマップの作成手順を「コーポレートサイト」を例にして解説します。
必要ページを洗い出す
コーポレートサイトに必要なページは、何があるでしょうか。
例えば以下のようなページを洗い出します。
- トップページ
- 会社概要
- 社長メッセージ
- 採用情報
- お問い合わせ
- サービス案内
- サービスA
- サービスB
- 沿革
- グループ会社
- プライバシーポリシー
- 経営理念
- お知らせ
- お知らせ詳細
- IR情報
思いつくまま洗い出すよりも、競合他社や同じような規模の会社のコーポレートサイトを参考にすることで、抜け漏れがなくなります。
現状のWebサイトにコンテンツが「ある／ない」に関わらず、理想とするものを洗い出しておきましょう。
カテゴリーに分ける
- トップページ
- お知らせ
∟お知らせ詳細 - 会社概要
∟社長メッセージ
∟経営理念
∟沿革
∟グループ会社 - サービス案内
∟サービスA
∟サービスB - IR情報
- 採用情報
- プライバシーポリシー
- お問い合わせ
ここまで完成すれば、あとは図に落とし込むだけです。
ツリー状に整理する（図に落とし込む）
グルーピングしたものを、図に落とし込みます。
全体を俯瞰して確認する
全体を俯瞰して確認してみましょう。
ページの追加・変更・削除やグルーピングの名称の見直しを行います。
以上で、サイトマップの完成となります。
今回のコーポレートサイトの例は分かりやすいものでしたが、どんなサイトでもカテゴリーに分けて、その中にどのようなページが必要かを考え抜くことでサイトマップが完成します。
ワイヤーフレームとは？
ワイヤーフレーム（wireframe）とは、Webページのレイアウトやコンテンツの配置を定めた設計図のことです。
ワイヤーフレームをしっかり決めておくことで、デザインやコーディングの段階に入ってからの後出し追加や遡っての修正を防ぐことができ、効率的な制作進行管理を行えます。
Webサイトの新規作成やリニューアル時に作成するワイヤーフレームですが、必ず作成しなければいけないのでしょうか？ワイヤーフレームにはどのような目的があるか解説します。
WEBサイトのレイアウトを決めるため
ワイヤーフレームの第一の目的は、Webサイトのレイアウトを決めることです。デザインありきで「このデザインにはめ込むためにコンテンツを作る」という組み立て方をしてしまうと、デザインは良くても必要なコンテンツが足りていないWebサイトになりかねません。
Webサイトはまず「盛り込みたいコンテンツ」をリストアップし、ワイヤーフレームを用いてレイアウトを組み立てる工程が必要です。
レイアウトや機能を制作者で共有するため
Webサイトを作成するためには、ディレクター、ライター、デザイナー、エンジニア、コーダーなど複数の制作担当者が関わります。そこにクライアント側の担当者や決裁者が加わることもあるでしょう。
Webサイトのレイアウトや盛り込む機能、複数人ですり合わせた「ここはこうしましょう」という決定事項を記録に残す点でも、ワイヤーフレームは役に立ちます。ワイヤーフレームで情報を共有することで、後工程での追加訂正や認識ズレなどのトラブルの予防につながります。
ページ内容のアイデアを出したり、議論するため
ワイヤーフレームはシンプルな線と文字だけで作成されています。そのため、ページに盛り込むコンテンツや目を引くためのデザインなど、アイデアを出し合うたたき台として最適です。ワイヤーフレームの段階である程度デザインを固めてしまうと、議論の幅を狭めてしまう可能性があります。
最初のワイヤーフレームはモノクロのシンプルなラフにとどめ、複数の担当者で議論を行いながら最終的な決定稿までブラッシュアップしていきましょう。
ワイヤーフレームの作り方
ここからはワイヤーフレームの作り方手順を解説します。
ページに必要な要素を書き出す
まず最初に、作成するページに必要な要素を洗い出します。WEBサイトのトップページであれば、サイトのイメージを伝える画像やロゴ、どのようなサイトなのか要約したコピー、メニューなどが必要です。ランディングページであれば、商品を購入してもらうために顧客に説明すべき項目があります。これらの要素をリストアップします。
もし曖昧な場合は、思いつく限りWEBサイトに掲載する情報を書き出してみましょう。「アイキャッチ」「ロゴ」「会社情報」「SNSへのリンク」「キャッチコピー」など、多くの要素が上がるはずです。
表示順（優先度）を決める
必要な要素がリストアップできたら、それらを表示する際の優先度を決めましょう。通常のWEBサイトでは、ページの下の方に行くほど、見られる確率が下がっていきます。そのため、重要な情報ほどページ上部に配置する必要があります。
レイアウトを決める
要素を洗い出した後は、実際の配置を決める前にWebページのレイアウトを決めます。レイアウトには以下のような、定番と言える形があります。
- マルチカラム
- シングル
- フルスクリーン
- タイル
WEBサイトに掲載する情報の種類や、ユーザーが主に使うであろうデバイスを想定して選択します。レイアウトを決めた後は先程の要素をレイアウトに沿って配置していきます。
手書きでラフ案を書く
情報の優先順位とレイアウトに従って、どの要素をページのどこに配置するかを決めていきます。初めは紙に手書きで、ざっくりと配置を書いてみましょう。留意したいのは、WEBサイトを見るユーザーの目線や気持ちです。
ユーザーの視線は通常、画面の左上から右へ、それから下へ、「Z」の形を描いて移動します。ユーザーの気持ちを想定して、そのページに求めている情報は何かを考え、優先度が高い情報ほどページ上部に配置します。1ページに盛り込む情報が多すぎると感じられた場合は、優先度の低い情報を割愛するか、別のページに移すことも検討しましょう。
