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

  1. TOP
  2. 自分でできる!セルフJimdoリメイク塾 : 第3回 【トップページ作成:前編】雑誌の「表紙」と「目次」の機能を持たせる

エキスパートコラム

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

第3回:【トップページ作成:前編】雑誌の「表紙」と「目次」の機能を持たせる

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

2017年6月19日更新

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

閲覧数1,484views

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

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

第3回目となる今回からは、Webサイトの顔とも言えるトップページの作り方を前編・後編の2回にわたって掲載していきます。

トップページの役割について改めて考える

まず最初に、Webサイトにおけるトップページの役割について考えてみましょう。トップページの役割と似たものとしてよく例えられるのが、雑誌の「表紙」と「目次」です。

雑誌の表紙には、その雑誌に何が掲載されているのかが網羅的に記載され、目次には、どんなコンテンツが何ページに載っているのか、つまり各ページへの導線が記載されています。雑誌を手に取った時、表紙と目次をざっと眺めれば、だいたいの内容が把握できるというわけです。この機能をWebサイトのトップページに持たせましょう。

GoogleやYahoo!などの検索エンジンが発達した現在、必ずしもすべてのユーザーがトップページから訪れるわけではありませんが、途中のページから訪れたユーザーも、トップページにこのような機能を持たせておけば、全てのコンテンツを把握してもらうことができます。

まずは「表紙」の機能を持たせよう

それぞれについて具体的に見ていきます。まずは「表紙」です。

雑誌の表紙には、通常その雑誌の内容を端的に表した写真が掲載されています。ファッション雑誌であればモデルの写真、スポーツ雑誌であればスポーツの写真、といったように、一瞬で何の雑誌かが分かるようにデザインされているのです。

この「一瞬で」というところがポイントで、Webサイトを訪れるユーザーは、何かしらの目的を持ってWebサイトを探しており、その目的にあったWebサイトであるかどうかを一瞬で判断し、見るか見ないかを決定します。この一瞬の間に訴えかけるには分かりやすい画像(メインビジュアル)が必要なのです。

では、サンプルサイトを見てみましょう。

古いワゴン車の写真が掲載されています。これはただ単純に「雰囲気のあるかっこいい写真だから」という理由で掲載しました。しかしメインビジュアルはそういった安直な理由で選ぶべきではありません。

このサンプルサイトはホームページのリメイクについて解説するWebサイトです。古い車なので、車を直す≒リメイクと言えなくもないですが、それは少し強引です。一瞬で何のWebサイトか分かってもらうためには、例えばコンピュータの画像やデザインに関連する画像の方が適しているでしょう。さっそく変更してみます。

管理メニュー→デザイン→背景の順に進むと、背景画像を設定する画面になるので、「+」と書かれた枠をクリックし「画像」を選択します。

背景画像の設定画面で「+」ボタンをクリック

いくつかの選択肢の中から今回は「画像」を選択

画像をアップロードする画面になるので、新しく用意した「女性が雑誌を読みながらコンピュータを操作している」写真をアップロードし、保存します。新しい画像が背景に設定されました。

「コンピュータ」と「雑誌」という要素の入った画像にすることで、今回のコラムの内容に合わせて、雑誌を参考にしながらWebサイトを操作しているというストーリーが頭に浮かびます。さらに人物を、リラックスした様子の女性にすることで、簡単にリメイクができそうな印象を持たせることができます。

はじめに掲載されていたワゴン車の画像と比べて、「ホームページのリメイクについて解説するWebサイト」という内容に相応しい画像になりました。

サンプルサイトの内容に合うメインビジュアルになった

「目次」の機能を持たせて各ページへの導線をつくる

表紙の次は「目次」です。雑誌の目次には各コンテンツの「タイトル」と「内容の抜粋」「掲載ページ」などが並んでいます。これをWebサイトに置き換え、まずはコンテンツの「タイトル」と「内容の抜粋」を掲載します。

サンプルサイトでは、LESSON、ABOUT、CONTACTという3つのコンテンツを制作しました。この3つのコンテンツを掲載します。こういったときに便利なのが「カラム」です。カラムは、コンテンツエリアを分割する機能で、複数のコンテンツを並べて掲載するときに使用します。さっそく設定しましょう。

まずは、コンテンツを追加→カラムの順にクリックします。

コンテンツを追加メニューから「カラム」をクリック

すると、コンテンツエリアが左右に分割されます。今回は3分割にしたいので、「カラムを編集」と書かれた青いエリアをクリックします。

「カラムを編集」をクリック

カラムを編集する画面になるので、真ん中あたりにある「+」ボタンをクリックし列を追加します。

マウスを置くと「列を追加」と表示される

コンテンツエリアが3分割されました。これで準備は完了です。

コンテンツエリアが3つに分割された

3つに分割されたエリアに、それぞれLESSON、ABOUT、CONTACTの「タイトル」と「内容の抜粋」を掲載していきます。それに合わせた画像も掲載すると良いでしょう。このときに、文章の量や画像の縦横比を揃えるときれいに見えます。

画像の縦横比や抜粋文の文章量を揃えるときれいに見える

さらに、「リンク」を使用して各ページへの導線を作りましょう。まずは画像にリンクを設定します。先ほど掲載した画像をクリックし、メニューの「追加オプション」から、鎖のアイコンをクリックします。

「追加オプション」の「画像にリンク」をクリック

するとリンクを設定する画面になるので、①内部リンクをクリックし、②該当のページを選択したら③リンクを設定をクリック、④保存します。

画像を任意のページへのリンクにすることができる

ABOUT、CONTACTも同じように設定します。これで、画像をクリックすると各ページへジャンプするように設定できました。

ボタンを設置して導線を強化する

画像リンクが設定できたら、導線をさらに分かりやすくするために、3つの項目それぞれにボタンを設置しましょう。「コンテンツを追加」から「ボタン」をクリックします。

Jimdoの標準機能で「ボタン」を設置することができる

すると「新しいボタン」と記載されたボタンが生成されるので、この文字列を変更します。ここでは「MORE >」とします。「詳しくみる」などでも良いでしょう。

任意の文字列に変更が可能

さらに、先ほどの画像リンクと同じように鎖のアイコンをクリックして、それぞれのページへのリンクを設定します。

画像リンクと同じようにリンク先を指定する

これでトップページに「目次」の機能を持たせることができました。ブラウザで確認してみましょう。

「表紙」と「目次」の機能を持たせることで使いやすいトップページになった

トップページには詳しい内容を載せないのがコツ

トップページはいわば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オフィスナンバー

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