Webサイトの構成を考えてみよう



01.構成考える

 

サイトの新規作成でも、リニューアルでもどのような構成で作成していくかで、ユーザーにとって親切なサイトになります。つまり、「お問い合わせしてみようかな?」、「もっと詳しく内容を知りたい」という気持ちになってもらえる=サイトをきちんと構成したことによって効果に繋がっているということになります。

サイトの構成の基本的な形を考えていきましょう。


02.サイトマップをエクセルで

 

サイトの構成を考える時に、エクセルを使うと分かりやすいでしょう。サイトは、いくつかの階層があって構成されています。といっても、最初からサイトマップはなかなか作れないので、「サイトマップテンプレート」を使って作成していきましょう。



03.webページ 作り方

 

Webサイトを検索して開いた時に、どの部分を最初にみますか?


それが、ヘッダーやメインビジュアルで構成されている、ファーストビューです。一番ユーザーに見てもらいたいところになりますね。まずは、この部分を決めてから、構成を組み立てていくとスムーズに進んでいくかもしれません。


ヘッダーって?メインビジュアルって??様々な名称がありますね。制作会社との打ち合わせなどにも分かっておくととても便利です。



04.サイトの各パーツの名称

 

Webサイトの構成説明画像

①ヘッダー  

Ⓐグローバルメニュー

ホームぺージの上部に設置され、どのページにも表示される部分の名称です。ここは、ホームぺージに入って道に迷わないようにする大切な設計の部分です。

・ロゴマーク

・お問い合わせ

・資料請求

・電話番号

・オンラインショッピング

・多言語切り替え

ロゴマークをクリックするとトップページに戻れるようになっています。

②メインビジュアル

ファーストビュー(画面に表示される最初の領域)にある大きな画面で、ここは第一印象の重要部分。

・イメージの画像を使う

・メッセージで訴える

・動画を使う



③メインコンテンツ

内容を表示するところ。ホームぺージが何ページにも渡る場合、グローバルメニューで表示するとともに、どんな大きさでどの配置で入れていくかによって中まで読んでもらえるかという大事な部分です。

④フッター

ホームページの一番下の部分で、サイトマップのような役目にもなります。

特にモバイルで閲覧した際のことを考えて作りましょう。

また、フッダーは多くみられることから、見てもらいたいページのリンクバナーなども設置すると誘導しやすいです。


Webサイトの構成モバイル説明画像

モバイル版でホームページを検索する時に左上や右上に表示される三本線を「ハンバーガーメニュー」といいます。


クリックすると、メニューが開きます。


デザインの邪魔をすることなく、情報をまとめることが出来ますが、見つけづらいというお話を聞くこともあります。


ハンバーガーメニューを作り、さらにフッターで丁寧に紹介していきましょう。


モバイル版で閲覧することが一般的になり、いかに見やすいかということに重点が置かれるようになりました。自分たちでもモバイル版でWebサイトを閲覧する時にどんな風に見ているかを意識してみましょう。





まとめ

 

Webサイトの構成は、もちろんいろんな方に見ていただくことを前提に作っていきます。しかし、自分たちが発信していきたいことと、閲覧するユーザー側の気持ちが合致するとも限りません。制作会社に依頼する場合は、どんな風に構成していくことがいいのか、きちんと話し合っていきましょう。