駆け出しWebディレクター必見!Webサイトの構成を作る際に気をつけるべき3つのポイント

実際にやってみないと具体的に思い浮かべづらい「構成(ワイヤーフレーム)」を書く作業。
今回はWebディレクターであるヒデノリ(@hidenori_KROWL)がWebサイトの構成を書くときに気を付けているポイントをお話します!

実際の構成の作り方やオススメのサービス・アプリケーションなどは別の記事で紹介していますのでそちらも参考にしてみてください。

構成(ワイヤーフレーム)を作る際のポイント

以前掲載した記事を読んで「構成とはどのようなものなのか」ということは理解できた方も、実際に作るとなると手が止まってしまうのではないでしょうか。
今回は私が構成を書く際に気をつけているポイントをいくつか紹介していきたいと思います。

欲しい情報がすぐ見つかるように情報を整理する

  • コーポレートサイト
  • キャンペーンサイト
  • ブランドサイト
  • ポータルサイト

Webサイトには上記のように様々な種類があり、それぞれに「見せたい相手=Webサイトがターゲットとしている人=Webサイトで特定の情報が欲しい人」は異なります。

多くのWebサイトにとって重要なのは、ターゲットが最も欲しい情報を、『アクセスして3秒以内に見つかる』場所に配置する事です。サイトに流入してから必要な情報を見つけるまでの時間が短ければ短いほど、ターゲットとなるユーザーの「情報を探す」というストレスが低くなり、それはターゲットにとって良いWebサイトと言えるでしょう。
例えば、コーポレートサイトであればターゲットは全てのステークホルダー(※1)・就職希望者になりますので「事業内容」「IR情報」「採用情報」等がすぐに認識出来る導線設計が必要となります。

多くのコーポレートサイトの場合、まず目に入る「グローバルナビゲーション」に上記のメニューが存在していますね。

★ここでポイント

グローバルナビゲーションを格納する手段としてハンバーガーメニューがありますが、なんでもその中に格納してしまうと、パッと見て何があるのかが分かりません。
メニューを表示する場所が少ないスマートフォンでは、有力な手段である事は間違いないのですが、PC用のレイアウトでは分かりやすく見やすい場所にメニューとして掲載する方がUXとして重要ですね。


※1:消費者(顧客)・従業員・株主等全ての利害関係者

視線移動を意識して要素を配置する

「Zの視点移動」という表現があります。紙媒体全盛期から長く「視線移動の基本」と言われてきました。
左上から右へ流れ、画面端から斜めに左下方向へ、その後再度右へ。と視線は移動していく、という事です。

例えば単純に5列×5行で表組する場合、縦に流すより、順に横5列に流す方が自然に目で追う事が出来る形になります。

他にもWebサイトでは「F型」と呼ばれる視線の誘導もあります。
Z型とF型の両方に共通していることとして、左上から視点が始まることが挙げられますので、一番最初に目に入るポイントはまず左上という認識で間違いないでしょう。

Z型

F型

★ここでポイント

今ではめっきり見なくなった3カラム。上記の「Zの視点移動」をベースに考えると、右カラムはとても弱い存在になってしまいます。また、見る場所が多くなる事も、UI的に良いとは言えない構成でした。
それに比べ基本的なレイアウトが1カラムで作られた縦長ページはスマートフォン用のデザインにも対応しやすく、滞在時間の長さがGoogleの評価にも繋がる事から、現在Webサイトの主流になっていますね。

伝えたい事へ繋ぐ導線設計

前出の通り、アクセスしてきた際はターゲットの欲しい情報をすぐに届ける構成にし、その後は伝えたい事がしっかり伝わる設計を意識します。

例えばコーポレートサイトであれば、ターゲットごとに下記のようなことを伝えたいと考えれらます。

▼ステークホルダー向け

株式会社A

こんな新しい事業も始めてます!成長性あります!投資してね!

▼就職希望者向け

株式会社A

こんな社内イベントもやってます!楽しい会社です!応募してね!

上記のように「誰に何を伝えたいか」を明確にし、『入り口は訪問者の知りたい事、出口は企業の伝えたい事』を意識します。

★ここでポイント

商品の訴求を目的としたLP(ランディングページ)等は、意識別ターゲット層によって構成も変わってきます。

  • 商品を知らない潜在層向け
    ⇒入り口は商品の概要説明、出口は申し込みフォーム
  • 商品自体は知っているが、まだ購入を検討しているわけではない顕在層向け
    ⇒入り口は優位性訴求、出口は申し込みフォーム

例えば、商品を知っている人にその概要を伝える説明文は不要ですよね。

株式会社A

この商品はこんな商品で……

Aさん

いや、知ってるし

上記のように、必要としていない情報を伝えることになってしまいます。

顕在層向けのリスティング広告やリターゲティング広告等では、入り口に申し込みフォームを置いてしまう方が効果的という可能性もあります。

まとめ

今回は構成を書く際のポイントをお伝えしました。
結局のところ、みなさん自身がサイトを訪れて「使いやすい!」と思える構成が基本的に正解です。制作する側も、サイトを訪問すれば訪問者です。

ただ制作するのではなく、どうあれば使いやすいか、実際に自分がアクセスする事を想像しながら作ってみると良いかもしれませんね。

関連記事