スマートフォンサイトを表示する

  1. TOP
  2. Jimdoで魅せる日本語Webデザイン : 第2回 Webサイトの顔!トップページの骨組みを作ろう

エキスパートコラム

Jimdoで魅せる日本語Webデザイン(全12回)

第2回:Webサイトの顔!トップページの骨組みを作ろう

執筆:服部 雄樹(服部制作室)

2016年5月2日更新

  • このエントリーをはてなブックマークに追加

閲覧数3,231views

このコラムをPDF形式でダウンロードする

皆さんはWebサイトを作成していて「かっこよく作れない」「手作り感がでてしまう」などの難しさを感じられたことはありませんか?

このコラムでは、JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本語のWebサイトをデザインするポイントについて、全12回にわたって解説していきます。

第2回目の今回は、Webサイトの顔であるトップページを作るときのポイントについて解説していきます。

情報を得たい人の視点に立って考えよう

Webサイトを作るとき、トップページにはどんな情報を載せるでしょうか。「たくさんの情報を伝えたい」「熱い気持ちを載せたい!」など、色々な思いがあるでしょう。

Webサイトの目的は様々ですが、基本的には「情報を得たい人」が「正しい情報を得る」ためにどうするかを考えるのが正解です。ここで重要なのは「情報を伝えたい人」、つまり今このコラムを読んでくださっているあなたの視点ではない、ということです。何を載せるかは「情報を得たい人」=顧客や見込み客の視点に立って考えるべきなのです。

トップページは雑誌でいえば表紙と目次

ではその視点に立ったとき、トップページはどうあるべきでしょうか。

例えば、雑誌に置き換えて考えてみます。雑誌のトップページといえる「表紙」には通常大きな写真が載っており、キャッチコピーや特集のタイトルが並びます。ページをめくると「目次」があり、そこには各コンテンツが何ページにあるのか、重要なコンテンツはどれか、などが一覧できるようになっています。

この「表紙」と「目次」の役割を、Webサイトではトップページに持たせるのです。すると、自ずと掲載する情報が絞られてきます。

まず、詳細な情報や長文は避けます。トップページは力を入れて作られているのに詳細ページはスカスカ、というケースがよく見られますが、これは情報の設計として、逆です。

トップページはあくまで各コンテンツヘ誘導するための導線として機能するべきで、階層が深くなるほど詳細な情報が載っている、というのが正しい設計です。

また、新着情報として過去のお知らせをズラーっと何十件も並べてあるWebサイトをたまに見かけますが、これもやめたほうが良いでしょう。新着情報は「新着」だからこそ意味があり、1年も前の情報は必要ありません。雑誌の表紙にバックナンバーを載せる人がいないのと同じです。

ポイントは「広く浅く」

ではどんな情報を載せるべきか。具体的なテクニックのお話に移ります。

まず第一に、何のWebサイトであるのか直感的にわかるように、大きな画像(メインビジュアル)を載せます。これは花屋さんであれば花の写真、レストランなら料理の写真など、事業に関連した画像であるべきです。

次に、各ページヘの導線を作ります。全ページへ誘導する必要はありませんが、主要ページはある程度一覧できるほうが良いでしょう。

続いて新着情報です。Webの強みは「情報を更新できる」ことなので、更新性のある情報があれば載せます。ただし先述のように新しい情報だけに絞るように気をつけてください。

最後に、ユーザーが「すぐに知りたい」情報も掲載しておきましょう。これはどういうことかというと、例えば電話番号や営業時間などです。電話番号を調べたい、何時まで営業しているか知りたい、など「すぐに知りたい」情報へはできるだけ早くたどり着けるようにしておくと親切です。

このように、トップページには数多くの情報を少しずつ「広く浅く」載せるのがポイントです。

おすすめのレイアウトは「フォーボックス」

これらの情報をうまく掲載するにはいくつかのレイアウト手法がありますが、おすすめは「フォーボックス」です。これは4つの箱という意味で、まず一番上に大きな箱=「メインビジュアル」を置き、その下に小さな箱=「導線」を3つ並べる、というレイアウトです。サイトの規模によっては、この箱が6つになっても良いでしょう。

さらに、私の場合はこれをアレンジして、その下に2つの中ぐらいの箱=「新着情報」と「すぐに知りたい情報」を置きます。このレイアウトであれば、前項で挙げた情報すべてをバランスよく配置することができます。

Jimdoでは「カラム」という機能でこのレイアウトを簡単に実現できます。

Jimdoの詳しい操作説明はここでは省きますが、このように「箱」という概念で考えると情報を整理しやすくなりますので、「表紙と目次」「広く浅く」という視点を意識し、ぜひ皆さんのトップページにも応用してみてください。

トップページができたら次は詳細ページです。
次回は、詳細ページをレイアウトするコツやポイントをご紹介します。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

服部 雄樹(はっとり・ゆうき)

服部 雄樹(はっとり・ゆうき)

服部制作室 代表/JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/

愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。

HTML&CSSとWebデザインが 1冊できちんと身につく本

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/8/6~2017/8/19]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!