こんにちは！ 知り合いからホームページの相談を受けまくっているライターのナナミです。
ホームページを作ろうとなるとまず考えるべきは構成、つまりは設計図ですね。この構成作りにつまづいている……なんて人もいらっしゃるのではないでしょうか？
大丈夫、そもそもホームページの構成を考えるのってちょっとコツがいるんです。最初からできなくても不安になることはありません。
ホームページの構成が全然思いつかない……
どうやれば見ている人にわかりやすい構成になるんだろう……
今回はこんな疑問にお答えして、ホームページの構成について全部解説します！
これを読めば構成作りの流れは丸わかり。コツを掴んでサクサク作れるようになっちゃいましょう！
ホームページ作りで考えるべき構成は2つ
ホームページの構成と聞くと「ここに見出しを置いて、画像はここで……」のような配置を考えるイメージをお持ちではありませんか？
確かにそれも考える必要があるのですが、ホームページの構成は「どんなページを作るのか」という全体の構成も考えなければなりません。
つまり見出しの通り、「ページの構成」と「レイアウト構成」を考える必要があるのです。
ページの構成
まず、そのサイト全体がどんなページで構成されているのかが大事です。
例えば、お店の営業時間を「アクセス」という名前のページに掲載している場合と「店舗情報」というページに掲載している場合があったとします。ユーザーが営業時間を知りたい場合、どっちのページの方がすぐに見つけられると思いますか？
自分が伝えたい情報と、それをユーザーが迷いなく探せるようなページの構成こそ、ホームページ作りで重要なポイントになるのです。
ちなみに余談ですが、WEB業界ではこのページの構成のことを「ディレクトリ構成」と言い、ユーザーの情報の探しやすさをUXと言います。覚えておくと便利かも？
レイアウト構成
ページの構成がバッチリでも、ページ内がごちゃごちゃしていたら結局ユーザーが迷ってしまいますよね。そう、デザイン的な要素、レイアウト構成もしっかり考える必要があります。
UIという言葉を聞いたことはありませんか？ これはユーザーの見やすさ・使いやすさを表す言葉です。レイアウト構成はまさにこのUIをよくするために、どの情報をどこに配置するのかを考えることなのです。
余談ですが、このレイアウト構成を紙や画像に起こしたものを「ワイヤー」と言います。
ホームページの目的を定める：ページの構成
理屈がわかればあとは作るだけ！ 早速ページの構成から作っていきましょう。
ポイントは
- ユーザーがどんな情報を欲しがるのかを考える
- できるだけスッキリ仕上げる
の2点です。
何を伝えたいのかを書き出す
まずはそのホームページの目的、「何を伝えるためのホームページなのか」を考えてみましょう。
コツは「あなたが伝えたいこと」だけでなく「みた人が何を知りたがるのか」まで考えることです。
例えばカフェのホームページだったらこんな感じですね。
- お店の場所
- お店の営業時間
- メニュー
- こだわりポイント
- 予約
- 連絡先
- スタッフブログ
同じように、あなたが作りたいホームページでは、ユーザーに何を伝えたいのかを書き出していきましょう。
何のページが必要なのか考える
伝えたいものをふまえ、どんなページが必要なのかを考えていきましょう。
さっきの例ならば、下記のようになりますね。
- TOPページ（これは共通で必須）
- カフェのこだわり（こだわりポイント）
- メニュー（メニュー、新メニュー情報）
- 店舗情報（お店の場所、お店の営業時間）
- 予約（予約）
- お問い合わせ（連絡先）
- ブログ（スタッフブログ）
これでページの構成はほぼできたも当然です。
似たようなものはまとめる
ページが多いとユーザーがあっちにいったりこっちにいったりしなければならず、使いづらいホームページだなと思われてしまうかもしれません。
似たようなページはサクッとまとめてしまいましょう。
- TOPページ（これは共通で必須）
- カフェのこだわり（こだわりポイント）
- メニュー（メニュー、新メニュー情報）
- 店舗情報（お店の場所、お店の営業時間）
- 予約・お問い合わせ（予約、連絡先）
- ブログ（スタッフブログ）
こだわりと店舗情報を一緒にするかちょっと悩みましたが、「カフェのこだわり」はやはり推しポイントなので独立したページでがっつり伝えたい！と考えてこの形にしました。
これでページの構成は完成！ あとはレイアウトを考えていきましょう。
伝えたい情報をきちんと伝える：レイアウト構成
レイアウト構成で大事なのは、
- 移動しようと思った時にすぐに移動できる
- 本当に伝えたい重要な情報がパッと目につく
の2点です。これを踏まえて考えていきましょう。
ここからは紙とペン、もしくはpaintなどの画像作成アプリを開いて進めるのをお勧めします！
ヘッダーとフッターは必須
ヘッダーとはホームページの一番上に表示している要素、フッターとは一番下に表示している要素のことです。侍エンジニアブログで言えば、下記の画像の部分ですね。
とにかくこれは必須です。なぜならここには常に表示しておきたい情報や、他のページに移動するときのリンクの集まりにできるからです。
なのでまっさらな紙、もしくはアプリの画面に、こんな感じでヘッダーとフッターを書いちゃいましょう。
ただし、レイアウトによってはヘッダーを使わず、横にサイドバーのように表示することもあります。
どっちにするかは好みなので、好きな方を選んでくださいね。
情報のグループを作る
そのページにどんな情報を掲載するのか確認しましょう。今回は先ほど例に出したカフェを引き続き例としていきます。
TOPページの構成を考えると、まずはアクセスしてくれた人に「なんのホームページなのか」を知ってもらう必要がありますね。これはドドンと、一発目に目に入る場所に配置しましょう。
さらにここで簡単にお店の紹介をして、他のページに興味を持ってもらいたいですね。そういう内容も入れましょう。
ちゃんと更新されていて、ホームページが最新であることをアピールしたいので、それも入れます。
上記の内容を踏まえると……
こんな感じになりました！ なんとなくそれっぽくなってきましたね。
これはカフェサイトのTOPページを例にしましたが、ブログのページだったりしたら、サイドバーという横に表示するリンク群があると他の記事に飛びやすくなって便利になります。
このページにアクセスした人が、次にどんな行動をとりたくなるのかを考えながら作っていきましょう。
詳細さよりもインパクト
もっと色々、営業時間とか全部載せた方がいいのでは？
と思った方もいると思いますので、全部のせバージョンをご用意してみました。
どうですか？ どこにどの情報があるのかわかりづらくなってしまったと思います。
大事なのは、そのページの目的を考えることです。
TOPページの目的は、そのホームページに興味を持ってもらい、他のページを見てもらうこと。そのため以外の情報を載せるとごちゃごちゃしてしまい、逆に見てもらえなくなってしまうのです。
その分、一つ一つの情報にインパクトを持たせるように作ると、気になった人が次のアクションを起こしてくれます。
構成を考えるときに重要なのは、引き算の発想です。ちょっと少なすぎるかも……？ というくらいがちょうどいいと考えてやるのがコツです。
今すぐ参考にできる構成テンプレート
最後に、ホームページの構成でよくある３パターンをご用意してみました。参考にしてみてくださいね。
企業ホームページ
【ページ構成】
- TOP
- 〇〇企業の強み
- サービス
- 会社概要
- お問い合わせ
【レイアウト構成：TOP】
美容室のホームページ
【ページ構成】
- TOP
- こだわり
- メニュー
- 予約
- 店舗情報
- スタッフ
- ブログ
【レイアウト構成：TOP】
イベントのホームページ
【ページ構成】
- TOP
- イベントの目的
- 当日スケジュール
- 開催概要
- 申し込み方法
- ブログ
【レイアウト構成：TOP】
構成をしっかり練って使いやすいホームページに！
今回ご説明したのは、WEB業界でよく言われるUI・UXの考え方です。これを突き詰めていけば、ホームページだけでなくアプリの構成などにも使える一つのスキルになります。
どんなに美しいデザインにしても、どんなに難しいコードを使っていても、ユーザーが使いやすいホームページでなければパフォーマンスを発揮することはできません。
家もホームページも骨組みはしっかりと、みんなが便利に使えるホームページを作ってくださいね。
