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

  1. TOP
  2. 自分でできる!セルフJimdoリメイク塾 : 第2回 文字のバランス調整でJimdoサイトは生まれ変わる

エキスパートコラム

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

第2回:文字のバランス調整でJimdoサイトは生まれ変わる

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

2017年5月15日更新

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

閲覧数1,333views

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

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

第2回目となる今回は、JimdoでWebサイトを制作する上で重要なカギを握る、文字のバランス調整について解説します。

文字のバランスは、料理の塩加減のようなもの

Webサイトにとって文字のバランスは非常に重要です。料理に例えれば塩加減のようなもので、塩加減が決まらない料理は、醤油を足しても砂糖を足してもどこかボヤッとした締まらない味になってしまいます。Webサイトも同じで、文字のバランスが悪いと、なかなか見栄えのいいWebサイトにはなりません。

それほど重要な文字設定ですが、実際にJimdoで作られたWebサイトを見ていると、初期設定のままで使用している方が意外と多く、せっかく良いコンテンツ=素材を使用していても、文字設定=塩加減が悪いがゆえに、本来の魅力をうまく伝えられていないケースがあります。そこで私は、リメイクを進める際にはまず文字のバランスを整えるところから始めます。

ちなみに、なぜ初期設定のままではいけないのかについては和文と欧文の文字の作りに原因があります。このあたりは以前のコラムで詳しく解説していますので、よろしければ併せてご覧ください。

文字の設定はスタイルメニューから

それでは、実際に文字の設定を始めましょう。「管理メニュー」→「デザイン」→「スタイル」の順に進みます。左上の「詳細設定」がオンになっているか確認し、オフになっている方はオンにしてください。

詳細設定がオフになっていると細かい設定ができない

今回からは本コラム専用のWebサイトを使用して解説を進めていきます。せっかくなので、私が実際にリメイクで使用しているJimdoのレイアウト「Zurich」を使うことにしましょう。

前回のコラムで解説したように、文字色だけ一旦すべて黒に設定した状態から始めます。
その他は初期設定のままです。

Jimdoレイアウト「Zurich」の初期設定の状態。文字色だけを一旦すべて黒に変更済み

まずは、ロゴ下のキャッチコピーの設定から始めます。フォントを選択しましょう。なお、本コラムではJimdoProに搭載されている15種類の「モリサワフォント」を一部使用します。

ここで設定するフォントはお好みでかまいませんが、オススメは「見出ゴMB31」です。その名の通り、見出し用に作られているフォントのため、文字に適度な太さがあり、文字間も読みやすく設計されています。

キャッチコピー部分のフォントが変更された

フォントが変更されたのを確認したら、フォントサイズとフォントカラーも変更します。

フォントサイズはこのままでは大きすぎるので、ロゴとのバランスを考え、ロゴと同じぐらいかやや大きい横幅となるように設定します。サンプルサイトでは「28」に設定しました。フォントカラーもロゴに合わせて白に設定します。

サイズと色を整え、ロゴとのバランスをとる

見出し設定のコツはたくさんのフォントを使いすぎないこと

次に見出しの設定をします。Jimdoでは見出しは大・中・小の三種類があり、それぞれにフォントの種類や大きさ、カラーなどを設定することができます。

せっかく別々に設定できるので色々なフォントを使いたくなるところですが、1つのWebサイトの中で多くのフォントを混在させるのは高度なテクニックとバランス感覚が必要です。自信がない場合は大・中・小すべて同じフォントで設定しましょう。サンプルサイトでは、見出しはすべて「見出ゴMB31」に設定します。

大・中・小は同じフォントにしたほうが大崩れしない

フォントが変更できたらフォントサイズと行間隔を設定します。フォントサイズは初期設定では大きすぎるのでそれぞれを適度な大きさに調整します。私のオススメのサイズは以下の通りです。行間隔はすべて「1.5」に設定します。

  • 見出し大・・・40
  • 見出し中・・・32
  • 見出し小・・・24

数多くの日本語のJimdoサイトに触れてきましたが、2017年5月現在、私の考えるベストな設定はこの数字です。常にアップデートを続けているので、以前ご紹介した数字とは少し変わっているかもしれません。

見出しの文字サイズを整えるとずいぶん印象が変わる

これで見出しの設定は完了ですが、「見出し大」だけ配置が中央揃えになっていて少しバランスが悪く感じます。こういったときは、見出し大の下に水平線を入れると、コンテンツに区切りができてバランスが良くなります。これは実際のリメイクでもよく使うテクニックです。

見出し大の下に「コンテンツを追加」で水平線を入れる

コンテンツが区切られることでバランスが良くなる

本文は読みやすさが最優先。フォントは「Noto Sans」がオススメ

最後は本文の設定です。本文は読みやすさが最優先なので、私の場合はほとんどの場合「Noto Sans」というフォントを使用します。これはGoogleとAdobeが共同開発したという非常に読みやすいフォントです。フォントサイズは「16」行間隔は「1.75」に設定します。

フォントは「Noto Sans」が読みやすくてオススメ

これですべての設定が完了しました。

すべての文字設定が完了

設定前の状態と見比べてみましょう。文字の設定を変えただけですが、ずいぶんスッキリしました。

たかが文字、されど文字。読みやすい文字設定は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オフィスナンバー

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