フォントやアイコンなどの設定も、サイトデザインを分かりやすく、美しいものにするための重要なポイントです。
フォントの種類やアイコンの使い方を学んでいきましょう。
サイトの雰囲気に合うフォントの設定、わかりやすさをアップするアイコンの使用について学びましょう。
フォント
フォントの区分
フォントには、ひらがな・カタカナや漢字の「和文フォント」とアルファベットの「欧文フォント」があります。それぞれ、いくつかの種類があります。 また、フォントが与える印象も様々です。
●明朝書体（和文）・セリフ書体（欧文）
セリフ(Serif)とは文字の先端にあるヒゲのような小さな飾りのことで、セリフを持つフォントのことをセリフ体といいます。和文フォントの明朝体も同様に、右肩にヒゲのような三角形の山が付いています。
明朝体は印刷物だと、レポートや企画書・新聞など長い文章を読ませる際に使用されています。 こうした利用から誠実・信頼という印象もあります。
縦線・横線の太さが異なり、基本的には細めの書体。 高級感がありますが、文字が小さくなると可読性が低くなります。Webサイトの場合、細かく文字・長い文章を表現するには適しません。
●ゴシック書体（和文）・サンセリフ書体（欧文）
サンセリフ(sans-serif)やゴシック体は、セリフ書体のようにヒゲ飾りが付いていないことが特徴です。 縦線・横線の太さもほぼ同じで、親しみやすさ・ナチュラル・ポップなどの印象があります。
また、OSで標準的に使用されているフォントでもあるので、パソコンやスマートフォンなどで見る場合は見慣れていて最も読みやすい書体とも言えます。 長い文章の部分、細かい文字を使う場面ではゴシック/サンセリフ書体が無難です。
●行書体（和文）/ スクリプト書体（英文）
行書体やスクリプト書体は、筆記体と呼ばれるような形のフォントの総称です。 和風や伝統的な雰囲気があり、威厳・高級感などの印象になるでしょう。
デザイン書体
上記３つのタイプに属さない書体は概ね「デザイン書体」と呼び、手書き風の書体、ポップ体なども含まれます。 デザイン要素としてタイトルや見出しに使用することはありますが、本文(細かい文字の文章)やWebページ全体に使用するのは避けましょう。
実例
上記のような大まかな区分の中で、更に、丸みがあるものや角ばったものなど沢山のフォントが存在します。ターゲットユーザー情報や、サイトの内容によってフォントを選んでいきましょう。
以下は「ナルミヤ」という子供服のブランドを展開する会社のサイトです。
http://www.narumiya-online.jp/webshop/
子供服ブランドなので、ポップなイメージのサイトになっていますね。 このサイトでは、ゴシック体が使われています。
対して、以下は「自由区」という４０代前後の女性に人気のブランドサイトです。
https://www.jiyuku.net/collection/
こちらでは、上品なイメージのブランドに合わせ明朝体とセリフ体が使われています。
フォントの注意点
サイトの中で使用するフォントの種類は２～３種類内に抑えましょう。 まとまりがなく、ごちゃごちゃした印象になってしまいます。
デバイステキストと画像テキスト
WEBサイトで使用するフォントは大きく2タイプに分けられます。
- デバイステキスト
- 画像テキスト
デバイステキスト
HTMLソース内に記述されている文章を、デバイスにインストールされているフォント、もしくはサーバー上にあるフォントで表示させているものがデバイステキストです。 HTMLのコード内にそのまま入力されている文字ですね。
解像度に依存せず、拡大・縮小しても美しく表示されることが最大の特徴。 高解像度ディスブレイでも読みやすさを維持できるため、近年は本文や見出しを含め、できるだけデバイステキストで表示する流れが主流となっています。
画像テキスト
SVGなどのベクター形式やPNG・JPGなどのビットマッブ形式で文字を画像化して表示したものが画像テキストです。ビジュアル表現の一部として文字を見せる箇所や、図版内の細かい説明文章を表示する際に使用します。
ベクター形式の画像以外は、解像度によって文字の可読性が悪くなってしまうため注意が必要です。
見分け方
使用されている文字がデバイステキストか画像テキストかは、ブラウザの検証ツールを使用すると分かります。
デバイステキストの場合は、何のフォントが使われているのかも分かります。
アイコンを使う
アイコンとは機能などの意味を持ったイラストです。 適切にアイコンを入れることで、テキストのみの場合よりも短時間でユーザーは何を示しているか把握することが出来ます。
では、アイコンの例をいくつか見てみましょう。
それぞれ、イラストだけでも何の役割があるか分かりますよね。 こうしたアイコンを使用することで、機能などを分かりやすくユーザーに伝えることが出来ます。
また、テキストで示すよりも、ユーザーの目を引くことが出来るでしょう。こうしたメリットからアイコンはwebサイトでも頻繁に使われています。 たとえば、以下は「Amazon」の検索フォーム部分のアイコンです。
虫眼鏡のアイコンが使われています。「検索」を行うという意味ですね。 こうしたアイコンは様々なサイトやアプリで頻繁に使われています。ですので、意味を説明するテキストがなくても、アイコンのみでユーザーに伝わるかと思います。
しかし、以下のようなアイコンはどうでしょうか。
アイコンのみだと、機能や意味が明確には分かりませんね。 このように意味が伝わりにくいアイコンには、テキストも表示しましょう。たとえば、「GU」というサイトでは以下のようにテキストとアイコンの表示になっています。
https://www.gu-japan.com/jp/pc/
配色について
アイコンのカラーと配置の決定には、注意点があります。 たとえば、グローバルナビゲーションでアイコンを使うとします。そうすると、狭い範囲内に複数のアイコンが存在することになりますね。
その際に、様々な色を使ってカラフルにしてしまうとユーザーの気が散ってしまいます。重要な情報を認識しづらくなる恐れがありますね。ですので、グローバルナビゲーションなどでは配色を統一したほうがよいでしょう。
配置について
配置というのは「テキスト＋アイコン」という組み合わせの場合の、それぞれの位置についてです。これは、アイコンとテキストの関係性などから決めると良いでしょう。
では、例を通し詳しく学んでいきましょう。 以下イメージは「nifty」というサイトです。
グローバルナビゲーションの右上には「ログインする」という意味の「鍵」のアイコンと、「ログイン」というテキストがあります。この「ログイン」というテキストは、アイコンの意味を説明しています。アイコンとテキストの意味が同じだと言えるでしょう。
「アイコンとテキスト」のかたまりを見るとき、視線の流れはどのようになるでしょう。 横方向であれば左から右に向かいます。縦なら上から下ですね。
このパターンを踏まえると、上記２つは「アイコン」が先に置かれていると考えられます。つまり「nifty」では、アイコンとテキストの意味が同じ場合は「アイコン→テキスト」の順で統一しているのではないでしょうか。
それに対し、「ニュースランキング」という項目内では、アイコンが右にあります。このテキストは、リンク先のニュースのタイトルを示しています。そして、アイコンは「そのニュースの順位の変動」を表しています。アイコンとテキストの意味が異なりますね。この場合は、アイコンが後と統一されています。
では、「話題」という部分を見てみましょう。 テキストは話題のキーワードを意味しています。アイコンは「順位」ですね。意味が異なるという点は「ニュースランキング」と同じです。
しかし、アイコンが先に置かれています。これは、先ほどの視線の流れが関係しています。以下イメージは「ニュースランキング」と「話題」においての、並び方のパターンです。
「話題」はアイコンとテキスト、「アイコン＋テキスト」のかたまり、この両方が横並びです。このパターンには、ある問題点があります。
横並びの場合、ユーザーは左から順に見ていきます。この時、テキストの右にアイコンを置いてしまうと、どのテキストと、どのアイコンが紐づいているのか分かりづらくなってしまうのです。
このように、並び方によっては見づらくなってしまうことを考慮する必要があります。 その上で、アイコンとテキストの関係性でグループ分けをして、配置パターンを統一していきましょう。
◆実習：アイコンを入れる
実習では、コーディング時にも使いやすいFont Awesomeのアイコンを使います。
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself よりフォルダをダウンロードし、解凍します。
svgsフォルダに各アイコンが入っています。 サイトと見合わせながら、使いたいアイコンをイラストレーターのファイルに配置していきましょう。
TwitterやYouTubeなどはbrandsフォルダ内にあります。
これでクロージングとフッターが出来ました。 複製して他のページにも反映させます。
これで実習は終わりです。
◆実習：補足
アイコンを入れる・カラーを変える・フォントを明朝体にしてみるなど、お好きにアレンジして色々なデザインの雰囲気を試してみて下さい。
例えば、フォントでもかなり雰囲気は変わります。
詳細ページの「こんなお悩み～」の見出し、クロージングのWRB予約・TEL部分などにアイコンを加えてみたり。
ファーストビューと写真のテイストを合わせたり。
…このような感じで、サイト全体の雰囲気がまとまり、ユーザーに分かりやすくなるようデザインの変更・調整をしてみてください。
また、ワイヤーフレーム段階ではインデント（文字・図形の揃え位置）などを大まかにしか設定していません。 そういった細かい箇所も合わせて調整していけば、デザインの完成となります。