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」というフォントを使用します。これはGoogleとAdobeが共同開発したという非常に読みやすいフォントです。フォントサイズは「16」行間隔は「1.75」に設定します。

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

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

すべての文字設定が完了

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

リメイクというと、画像などビジュアル面の変化や、カラーリング設定のような派手な部分に目が行きがちですが、Webサイトは人が読むものである以上、基本のコンテンツは文字です。文字の設定を整えるだけで、これだけ大きく印象を変えることができます。

ぜひ今回のコラムをご参考に文字設定を見直してください。それだけでも格段に見やすいWebサイトになるはずです。

次回は、トップページの役割とレイアウトのコツについて解説します。