ウェブフォントは、ホームページを表示する際に、ユーザーのコンピューターに、その都度フォントをダウンロードして表示する技術です。

英語フォント

英語フォントの場合は、
Googleが提供しているGoogle Fonts
http://www.google.com/fonts
Adobeが提供しているType Kit
http://typekit.com
などのサービスにより、普及しだしています。

日本語フォント

一方日本語フォントは、英語フォントに較べ、文字数が多く、制作にコストがかります。また、データ量が増えるため、ダウンロードに時間がかかります。
無料やそれに近いサービスがほとんど無いので、なかなか普及に時間がかかるかもしれません。

JapanSans(無料)
M+ Outline Fonts(無料)
FONT PLUS(有料)

英語(アルファベット)表記の多いページでは、期待通りのフォントを使えます。
必要に応じて導入するのが良いでしょう。

Basic Fonts-01
今回はホームページのフォントについて解説します。

フォントの指定

通常のホームページでは、CSSで最初にフォントを指定します。

font-family: “Hiragino Kaku Gothic ProN W3”, “Meiryo, “Lucida Grande”, sans-serif;

と言ったような記述です。

前から順にコンピューター内にあるフォントを検索して、該当するフォントがあれば、そのフォントを使って画面を表示します。

上の例では、

  1. ヒラギノ角ゴシック ProN W3
  2. メイリオ
  3. ルチアグランデ
  4. その他サンセリフ(ゴシック体)

の順に表示していきます。

無いフォントでは表示出来ない

コンピューターにどの様なフォントがインストールされているかは、コンピューターによって全く異なります。

この為、自分のコンピューターでは、凝ったフォントを指定していたとしても、読者のコンピューターにそのフォントが無ければ、期待していた様には表示されません。

特殊なフォントの指定は避けた方が良いでしょう。

フォントの解像度

印刷物の解像度は300dpi(dot per inch = 1インチあたりに300ドット)です。対して、コンピューターモニターの解像度は一般的に72dpi、印刷物の約4分の1しかありません。
この為、コンピューター上では、フォントの細部はつぶれてしまい、読みづらくなってしまいます。
アルファベットに較べ、こみ入った漢字では特に読みづらくなります。

フォントの選択肢

読者の読みやすさを考えた場合、ディティールが細かい明朝体(セリフ体)より、解像度が低くても読み取り易いゴシッ(サンセリフ体)が、ホームページの基本フォントとして採用されるケースが多くなっています。

SEO(=検索エンジン最適化)を施す際には、基本的に以下の手順でキーワードを決めて行きます。

顧客の身になって、キーワードを決めて行きます。
実際にそのキーワードで検索されているかどうかはGoogle AdwordsのKeyword Plannerなどを使って検証していきます。
キーワードは、1サイト全体、2カテゴリー毎、3ページ毎の順に設定していきましょう。

サイト全体で狙う大キーワードを決める

サイト全体で狙う大キーワードを設定します。
大キーワードは提供する商品カテゴリやサービス+地域名にする事が多いです。
例)ハワイ+スパ

カテゴリー毎の中キーワードを決める

検索エンジンに適切に登録されると、サイト全体でなくカテゴリや個別の商品に直接顧客が来訪する様になります。
顧客が直接訪れるページをランディングページと呼びます。
カテゴリ毎に中キーワードを設定します。
例)ハワイ+レセプション

ページ毎の小キーワードを決める

個別の商品やサービスについて小キーワードを設定します。
例)ハワイ+サマースクール+プナホウ

background color

コンテンツがどれほど良くても、読みづらいホームページ画面だと、結果に繋がりません。
読みやすいページ作りは非常に大切です。

今回はホームページのベースの色について、解説します。

コントラスト

コンテンツを読みやすくするためには、背景と文字のコントラストを大きく取る必要があります。白い背景には濃い文字、濃い背景には白い文字を配置するわけです。
それではどの様な色が適当でしょうか

やっぱり白

第1に考えるのは白い背景です。白い背景の場合、濃い色の文字はどんな色であっても、映えます。また、白い背景はニュートラルなので、複数のさし色をおいてもうまく画面の構成もまとめることが可能です。

次に候補に挙がるのが、黒い背景です。黒はそれ自体主張が強く、高級感を出しやすいです。黒い背景に白い文字は画面に緊張感が生まれます。
注意点としては、黒背景の場合、複数のさし色を採用しにくい所でしょうか?
黒背景、白文字にすると、さし色として採用するのは1色程度にとどめたいところです。

その他

白に近いベージュや、濃い茶色はそれぞれニュートラルなので、背景色としても採用しやすいです。
一般的に濃い色は、それぞれの主張が強く、商品やサービスとマッチングさせながら、しかも読みやすいものにするのはかなり難しくなってきます。

それぞれの色は、それぞれ固有のイメージを持っています。
この為、それぞれの業界ごとに多く用いられている色が存在します。
また、ビジネスの持つキーワードから、適切な色を選び出す事も可能です。

イメージ よく使われる業界 具体例
生命 飲食 KFC,
活発、幸福 飲食 松屋,
自然、癒やし エコ関連 Clinique, Whole Foods
清潔、信頼 病院、公認会計士、弁護士 John Hopkins, Deloitte
高級、男性 高級ブランド、老舗 AXE, Dior, とらや

逆に、これら業界毎によく用いられている色をあえて外す事によって、
自社のホームページを他社と差別化する事も可能です。

人間が、目と頭だけで直感的に数えられるのは7つまでだそうです。8つ以上は、たくさんという認識になります。
日本の神々を示す八百万の神は、8 millionの神々ではなく、たくさんの神々を意味します。スサノウの尊が退治した八岐大蛇は、たくさんの頭を持つ大蛇という意味です。

このことを踏まえると、ホームページのメニュー構成を考える場合、大きく7つ以下に分類する事が望ましいです。

さらに、ユーザーの直感的な判断を支援するためには、メニューを5つ以下の分類にする事をお勧めします。


Site Structure-01

サイト全体のページとメニュー構成を考える場合、以下の様な手順を踏むのが良いでしょう。

  1. 全てのページを書き出す
  2. 書き出したページを5つ程度のグループに分ける。
  3. グループ分けしたページが5ページ以上になる場合、
    さらにそのグループを5つ以下のサブカテゴリーにグループ分けする

また、トップページから、2クリック以内で、目的のコンテンツに到達出来る事が望ましいとされています。
深くなりすぎない様、大カテゴリー、中カテゴリー、個別ページと3階層以下になる様に、グループ分けをしましょう。

モニターの解像度

コンピューターのモニターの標準的な解像度は72dpiです。
これは、ドットが1インチあたり、72個並んでいるという意味です。
対して、印刷媒体の解像度は350dpi程度あります。

コンピューターでは,極めて解像度が低いため、小さな文字や込み入ったディティールはつぶれてしまいます。

見やすい日本語

日本語のなかでも、特に漢字は、アルファベットに較べ、ディティールがこみ入っています。
日本語のなかで比較的視認性が良いのがゴシック体、次いで明朝体となっています。
サイトの印象作りの為に明朝体は外せないという事でなければ、ゴシック体を採用した方が、読みやすくなります。

フォントの持つ印象

セリフ体=明朝体はフォーマルな印象があります。
対して、サンセリフ体=ゴシック体はカジュアルな印象があります。
比較的大きな文字を使えるのであれば、サイトの印象にあわせたフォントを使う事により、サイトの印象を方向づける事が出来ます。

使えるフォントはコンピューター毎に異なる

ホームページで指定出来るフォントには限りがあります。
自分のコンピューターでは、期待通り表示されているページでも、同じフォントを持っていなければ、他の人のコンピューターでは全く違った印象になります。
日本語に限れば、誰の環境でも期待通り表示出来るフォントは、非常に限られています。
WindowsでMSゴシック、MS明朝、Macでヒラギノゴシック、ヒラギノ明朝程度となります。

横の写真がオススメ

コンピューターのモニターは通常横長、スマートフォンは通常縦長です。
サイトのレイアウトにもよりますが、一般的には、横位置の写真の方が使い易いと言えます。

適切なサイズ

Webサイトの設定した画面サイズにあわせて、画像を縮小したり、トリミングします。
画面サイズは年々大きくなっています。
2013年の時点で、画面一面を埋め尽くす様なデザインのサイトも増えています。

Apple社Webサイト

Apple社Webサイト、画像の幅は1060px

それでは、Webサイト用に適切な画像のサイズはどれくらいでしょうか?
例えば、WordPressの場合、2013年度のテーマ「TwentyThirteen」では、サイト上部に幅1600ピクセルの画像を採用しています。
このことから、今後Webサイト向けに写真を用意する場合は、横幅が1600ピクセル以上ある画像である事が望ましいです。

1ページ1トピック

1ページ内で複数のトピックにまたがった場合

  1. 主要なトピックの理解が浅くなる
  2. SEO的な見地からも不利

このため、1ページ、1トピックを心がけましょう。

1行は30〜40文字

モニター上で読みやすいのは、1行あたり30〜40文字程度です。
Webサイトは、このベースラインを抑える様に構成していく事が望ましいです。

2行以上にならない様、文章を切る

また、1分あたりの長さが、長くなってしまった場合、
主語述語の関係や前後の関係が不明瞭になってしまう事があります。
この様な自体を避ける為、1文が2行を超える事の無い様に、分割しましょう。

メニュー項目の数

人間が直感的に頭の中で分類出来るのは7つまでだと言われています。
8つ以上については直感的に分類できない為、「たくさん」と表現されます。

八岐大蛇(やまたのおろち)はたくさんの頭がある大蛇、
八百万(やおよろず)の神はたくさんの神々を意味します。
電話番号も市外局番を除いて、7桁としている所が多いですね。

ウエブサイトのメニューの項目数は、このことを踏まえ、
直感的に判別出来る数以下の選択肢とする事が望ましいです。
通常は5つ程度の選択肢をメニュー項目として採用する事になります。

メニュー項目数の選び方

まずは、1ページ、1テーマで、全ページをリストに書き出します。
次に、リストの個々の項目を、共通項でグループ化していきます。
最終的に、メインメニュー項目5項目以内、それぞれのメインメニュー項目について、
下位のサブメニュー項目5項目以内となる様に、項目名をピックアップしていきます。

  1. 商品 – メインメニュー項目
    1. MENS – サブメニュー項目
      1. ジャケット – 個別のページ
      2. シャツ
      3. Tシャツ
      4. パンツ
      5. 下着
    2. WOMENS
    3. KIDS
    4. BAGS
    5. ACCESSORY
  2. メニュー項目2
  3. メニュー項目3
  4. メニュー項目4
  5. メニュー項目5

階層

この際、どこまで、深い階層を作るかという問題が出てきます。
一般的には、トップページから2クリック以内で、探してるものが見つかる事が望ましいです。