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

  1. TOP
  2. 自分でできる!セルフJimdoリメイク塾 : 第4回 【トップページ作成:後編】導入文と新着情報で関心と信頼を高める

エキスパートコラム

自分でできる!セルフJimdoリメイク塾(全12回)

第4回:【トップページ作成:後編】導入文と新着情報で関心と信頼を高める

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

2017年7月18日更新

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

閲覧数1,223views

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

Jimdoで作られたWebサイトのリメイクを累計100件以上担当した筆者が、リメイクをする際にどこを見ているのか、どう手直しすれば見やすいWebサイトになるのか、具体的な事例とテクニックを交えながら紹介する本コラム。

第4回目となる今回は、前回のコラム「【トップページ作成:前編】雑誌の「表紙」と「目次」の機能を持たせる」に続く後編として、引き続きトップページの作り方を解説します。

トップページには内容を端的に表す導入文を

「表紙」としての役割を持つトップページには、Webサイトの内容を一瞬で認識できる画像を掲載するのが望ましいことは、前回のコラムで解説しました。インパクトのある画像でWebサイトに関心を持ってくれた訪問者への次のアプローチとして、サイトの内容を「文字で」伝えましょう。

この時に気をつけることが2つあります。

  • 見出しをつけること
  • 要点を押さえた短めの文章(3~6行程度)にすること

この2つの目的はどちらも同じで、「できるだけ短い時間で内容を理解してもらう」ためです。Jimdoで作られたWebサイトの中には、トップページに長文を掲載しているケースがよく見られますが、訪問者はこの時点ではまだサイトへの関心が薄く、多くの場合、長い文章を読みこむほどの熱量はありません。そこで、まずは関心を高めてもらうため、キャッチーな内容だけを導入文として掲載するのです。

オススメの掲載方法は2パターン。テキストの分量や内容によって使い分ける

実際にリメイクでよく使う掲載方法を2つ紹介します。なお、見出し・テキスト・画像等の挿入についての操作方法は既出のためここでは割愛します。

パターン1 中央揃え型

見出しと導入文を中央揃えで掲載するシンプルなスタイルです。

サイトの世界観や目的を伝える導入文は3-5行程度に収め、数秒から10数秒程度で読める文字量が良いでしょう。その下に、申し込みボタンや詳細ページへのリンクなど、アクションを促すボタンを設置するのも効果的です。文章は必ずしも中央揃えにする必要はありませんが、こうすることで全体のバランスが良くなります。

パターン2 セクション型

扱っているサービスの特徴や強みが複数ある場合は、それぞれをセクションに分けて掲載する方法もオススメです。

この場合でもやはりテキストは要点を押さえた短いものにしましょう。文字数が多くなると文章だけではバランスをとるのが難しいので、カラム機能を使い左右に画像を配置すると文章が読みやすくなります。

2つのパターンのどちらを使用しても問題ありませんが、掲載したい内容や文字数により、ご自身のWebサイトに合ったパターンを使いましょう。

このように、まずは見出しと導入文によりサイトの内容を端的に伝え、関心を高めた後に、各詳細ページへの導線を置くことで、よりスムーズに各ページへ誘導することができます。

新着情報を掲載することでWebサイトの信頼性は大幅にアップする

もうひとつトップページに掲載したいのが新着情報です。閲覧者は掲載されている情報の新しさによって、Webサイトの信頼性を判断する傾向があります。新しければ新しいほど良いのでまめに更新するようにしましょう。

ここでは、ページの下部に新着情報のエリアを設置し、ニュースや更新情報を掲載します。いろいろな方法がありますが、今回は「表」を使った方法を紹介します。

まずは新着情報の見出しを掲載します。見出しの下に「水平線」を使用して区切り線を入れると、より分かりやすくなります。

「コンテンツを追加」から「水平線」を選択

見出しの下に区切り線が挿入される

続いて新着情報のコンテンツ部分を作成します。「表」を挿入しましょう。

「コンテンツを追加」→「その他のコンテンツ&アドオン」→「表」を選択

2列×2行の表が作成される

セル1 、セル2と記載された2列×2行の表が作成されました。これをカスタムして新着情報を掲載していきます。まずはセルの内容を書き換えましょう。左側のセルに日付、右側のセルに新着情報の内容を記載します。セルの幅は手動で設定できますが、文量に応じて自動で調整されるので、今回はこのままにします。

左側のセルに日付、右側のセルに内容を掲載する

行を増やしたい場合は「行の追加」から追加することができます。今回は1行追加して、3行にします。

行を追加して3行の表にする

だんだん新着情報らしくなってきました。

新着情報のベースが完成

次は日付の部分を太字にしましょう。日付のテキストを選択した状態で「B」のアイコンをクリックします。

日付を太字にすることでメリハリをつける

日付を太字にできたら、最後はセルの背景色を変えましょう。セルを選択した状態で「セルのプロパティ」をクリックします。

背景色を変えたいセルを選択して「セルのプロパティ」をクリック

するとセルのスタイルを設定するメニューが表示されるので、「背景色」をクリックし、好きなスタイルに変更しましょう。

セルのプロパティメニューから「背景色」を選択し、好きなスタイルに変更する

1行ごとに色を変えたスタイル

今回は1行ごとに色を変えて各項目の境目を分かりやすくしました。これで新着情報は完成です。

トップページはいかにバランスよく全体を俯瞰するかが重要

これによりトップページのコンテンツがすべて掲載されました。一度全体図を見てみましょう。
まず大きな画像でサイトに関心をもってもらい、端的な文章で内容を説明し、さらに詳しい情報を知りたい人のために各ページへの導線を引く。そして最後に新着情報を掲載して、新鮮な情報を届ける。これがトップページのひとつの王道といえるパターンです。

トップページはお店の入り口と同じです。実際の店舗でも、来店してすぐに長々と商品説明をされるより、まずは全体が見渡せて、POPなどで簡単な情報を得ることができ、より詳しい情報を知りたい場合は店員さんが的確な説明をしてくれる、そんなお店のほうが安心してお買い物ができるのではないでしょうか。

このように、実生活に置き換えて考えてみると、どのようにWebサイトを作ればいいのかがわかります。自分だったらどんなお店が信頼できるのか、それをWebサイトに落とし込むにはどうしたらいいのか、ぜひじっくりと考えてみてください。

次回は、Webサイトの共通部分(サイドバー・フッター)に掲載する情報について解説します。お楽しみに!

  • このエントリーをはてなブックマークに追加
このコラムを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 読も読もキャンペーン「テーマ別セレクト本」プレゼント!
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

コラム週間アクセスランキング[期間:2017/9/17~2017/9/23]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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