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

  1. TOP
  2. Jimdoで魅せる日本語Webデザイン : 第1回 まずはここから!フォントサイズを設定しよう

エキスパートコラム

Jimdoで魅せる日本語Webデザイン(全12回)

第1回:まずはここから!フォントサイズを設定しよう

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

2016年4月4日更新

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

閲覧数4,747views

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

皆さんはWebサイトを作成していて「かっこよく作れない」「手作り感がでてしまう」などの難しさを感じられたことはありませんか?

このコラムでは、JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本語のWebサイトをデザインするポイントについて、全12回にわたって解説していきます。

第1回目の今回は、Webサイトの基本となる「文字の設定」について見ていきましょう。

Jimdoのバランスが難しい原因は、実は文字にあった

JimdoでWebサイトを開設したら、はじめにどこから手をつけますか?自分のお店などの写真を載せる?用意しておいた原稿を元に文章を入れていく?
そう、やりたいことがたくさんありますよね。もしくは逆に「何から手をつけていいかわからない…」という方もいるかもしれません。

やりたいことがたくさんある方は、はやる気持ちを抑えて、何をしていいか分からない方は操作に慣れる意味でも、まずは文字のサイズ設定から始めてください。

文字のサイズ設定とは「見出しと本文の文字の大きさ」です。実はこれらのバランスを整えるだけで、Webサイトは非常に見やすくなります。逆に言うと、このバランスが悪いままではどれだけ良いコンテンツを入れても、どこかしっくり来ない、いわゆる「素人っぽい」Webサイトから抜け出すことができません。

コンテンツの作成を始める前に、まずはこの「見出しと本文の文字の大きさ」を設定しましょう。

英語と日本語の違いを理解しよう

Jimdoで作られたWebサイトを見ると、文字サイズを初期設定のまま使用している方が意外と多く、アンバランスさを感じるもののどこが悪いのか分からない、という声も少なくありません。そういったとき、多くの場合文字サイズに原因があります。

Jimdoはもともとドイツで生まれたサービスであるため、文字設定はアルファベットを基本として設計されています。ここに落とし穴があります。
実はアルファベットと日本語では同じ一文字でも大きさが違い、ほとんどの場合「日本語の方が大きく」感じます。

下の図を見てください。英語と日本語のフォントで同じサイズで5文字並べてみました。どちらも標準的なフォントを使用していますが、日本語のほうが大きく感じられないでしょうか?

これには文字の「幅」が関係しています。通常、Webサイト上で設定する文字サイズは文字の「高さ」を表します。上の図では文字の「高さ」は同じ72pxですが「幅」が日本語のほうが広いため大きく見えるのです。半角・全角という言葉を思い出してみると分かりやすいかもしれません。

アルファベットではちょうどいいサイズであっても日本語にすると文字のバランスが悪く感じられるのはこのためで、日本語でWebサイトを作る際には、文字サイズを初期設定よりやや小さめに設定し直すとバランスが良くなります。

まずはバランスを整えて、サイトに合わせて調整していく

では具体的にどのくらいのサイズにすれば良いでしょうか。これは掲載するコンテンツや文章量、選ぶフォントやレイアウトによって異なりますので、一概に「これがベストです」と言えるものではありません。ただ、これまでの経験上「このサイズに設定しておくと大崩れしない」という目安となる数値があります。

私がJimdoでWebサイトを制作する際は、まず初めにフォントサイズと行間隔を以下の数値に設定してから、それぞれのサイトに合わせて微調整をしていきます。

Jimdoの文字サイズ設定画面

  • 大見出し・・・44 行間隔1
  • 中見出し・・・32 行間隔1
  • 小見出し・・・24 行間隔1
  • 本文  ・・・16 行間隔1.75

このサイズであれば、どんなレイアウトであってもある程度の読みやすさは確保できます。
Jimdoでサイトを開設したら、まずは文字を上記のサイズに設定してから、ご自身のサイトに合わせて微調整していくと良いでしょう。

文字サイズが設定できたらいよいよコンテンツの作成です。次回はサイトの顔であるトップページのレイアウトを作るコツについて解説していきます。

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

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

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

服部制作室 代表/JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/

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

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

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

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

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

コラム週間アクセスランキング[期間:2017/7/16~2017/7/22]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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