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

  1. TOP
  2. 自分でできる!セルフJimdoリメイク塾 : 第12回 コンテンツや見出しの構造を整えてリメイクを仕上げる

エキスパートコラム

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

第12回:コンテンツや見出しの構造を整えてリメイクを仕上げる

執筆:服部 雄樹(株式会社服部制作室)

2018年3月19日更新

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

閲覧数1,614views

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

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

そこで今回はコンテンツページを読みやすく整える、リメイクの仕上げについて解説します。

見やすいWebサイトは全ページ共通のルールが作られている

これまでのコラムでは、主にトップページと共通部分(サイドバー/フッター、ナビゲーションなど)のリメイクについて解説してきました。これらを整えるだけでも十分見やすいWebサイトになりますが、せっかくトップページが見やすくても、肝心なコンテンツページが見にくければユーザーはそこで離脱してしまうかもしれません。

では、ページの見やすさを決定付ける要素とはなんでしょうか。文章と画像の整頓方法は本コラムの第7回第8回でご紹介しました。もちろんこれらが整理整頓されていることはとても大切ですが、実はそれよりも重要な要素があります。

それはサイト全体の統一感です。例えば各ページの冒頭の要素について、「ページの冒頭は必ず見出し大から始まる」「その次にはリード文が入る」など、サイト内の全ページを横断して適用されるルールがあれば、どのページを見ても統一感を感じることができます。このルールがきちんと守られていることで、ユーザーは各ページをストレスなく行き来することができるのです。

見やすいWebサイトは全ページ共通のルールがある

ページによって構成がバラバラだと見づらさを感じる

見出しの使い方は特に重要

そしてWebサイトのルールを作るとき、特に重要なのが見出しの使い方です。Jimdoで自作されたWebサイトを見ていると、見出しの使用ルールが曖昧なことがよくあります。Jimdoでは大中小の3種類の見出しを作成する事ができますが、皆さんはこれらをどのように使い分けているでしょうか。特に何も考えず、見た目上のデザインや色の違いだけで選んでいるのであれば、見出しの使い方にルールを定めましょう。

ひとつ参考になる考え方をご紹介します。それは、Webページをレポート文書や書籍などの紙媒体に置き換えて考えてみることです。レポート文書や書籍の冒頭にはタイトルが入っており、段落ごとに見出しが掲載されます。もし、これらのタイトルや見出しがルールなく無作為に配置されていたらどうでしょう?きっとその文書はとても読みづらいものになってしまうでしょう。

反対に、読みやすい文書や書籍は、文章の構造や階層に合わせて大→中→小と適切な大きさの見出しが配置されています。このように正しい文書構造でページを作成することは、見た目上読みやすいだけでなく、検索エンジンにとっても内容が理解しやすくなるため、SEOの観点からも効果があるとされています。

文書の構造や階層に合わせて配置された見出しは読みやすい

文書構造に関係なく無作為に見出しを配置すると読みづらい

Jimdoの定形ページ機能を活用すると簡単

そう言われてもやっぱり難しい、という方はJimdoの「定形ページ」機能がおすすめです。定型ページにはあらかじめ文書構造が整えられた雛形が用意されているので、文言や画像を差し替えるだけで簡単に正しい文書構造のページが作成できます。

使い方はとても簡単です。ナビゲーションメニューから新規ページを作成すると以下のような画面になります。

新規ページを作成すると表示される画面

下部にある[定型ページを利用する]ボタンをクリックします。するとポップアップウインドウが開き、いくつかの雛形が表示されます。今回はひとつ目の雛形を選んでみます。

表示された雛形から今回は赤枠内のものを選択

すると自動でコンテンツが配置され、「この定型ページを利用しますか?」と聞かれるので[決定]をクリックします。

[決定]をクリックすると自動でコンテンツが配置される

掲載されている内容は英語ですが、文章や写真を差し替えれば、正しい文書構造のページがあっという間に作成できます。

作成された雛形の内容を書き替えればわずか数クリックでページが完成する

定形ページ機能にはWebサイトの基本的な「型」が数多く収録されています。まずはこの型のとおりに作成し、慣れてきたらレイアウトを崩したり、複製したりしてアレンジしていくのが良いでしょう。

まずは基本の型のとおりに作成したほうが結果的には近道

ある有名な歌舞伎役者の言葉にこんなものがあります。

型があるから型破り。型が無ければ、それは形無し。

つまり、まずは基本の型をしっかりと覚えることが大切で、それができてこそ新しいことや面白いことに挑戦できるというわけです。それはWebサイトの作成においても同じです。

このコラムを読んでくださっている方の中には、「自分でWebサイトを作ろう!」と一念発起されたものの、イメージ通りにならず困っている方も多いかと思います。Jimdoには、ここでご紹介した定形ページ機能や、ポータルサイト、そして様々な専門家の知恵が詰まったこのエキスパートコラムという強力なサポートツールがあります。

まずはこれらを頼りに基本の「型」を身につけてみてください。それができるようになった頃には、Webサイトづくりはきっと今よりも遥かに楽しく、思い描いた通りに作成できているはずです。どうぞ楽しんで、素晴らしいWebサイトを作成してください。本コラムがその一助となればこれ以上の喜びはありません。

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

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

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

株式会社服部制作室 代表取締役/Jimdo Expert
https://www.hattori-studio.jp/
https://www.template-labo.com/

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

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

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

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

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

コラム週間アクセスランキング[期間:2018/12/2~2018/12/8]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ