美しいデザインにするためのポイント

サイトデザインを分かりやすく美しいものにするためのポイントを学んでいきましょう。

• フォント
• 情報のグループ分け
• 美しい余白とは
• まとめ

フォント

フォントには、ひらがな・カタカナや漢字の「和文フォント」とアルファベットの「欧文フォント」があります。それぞれ、いくつかの種類があります。また、フォントが与える印象も様々です。

明朝体（和文） ・ Serif（欧文）

高級感・誠実・信頼という印象を与えられるでしょう。

ゴシック体（和文） ・ Sans-serif（欧文）

親しみやすさ・ナチュラル・ポップという印象となるでしょう。また、ゴシック体やサンセリフは読みやすさがあります。長い文章の部分などで使われます。

行書体（和文）

和風・威厳・伝統的という印象になるでしょう。

このような種類の中で更に、丸みがあるものや角ばったものなど沢山のフォントが存在します。ターゲットユーザー情報や、サイトの内容によってフォントを選んでいきましょう。以下は「ナルミヤ」という子供服のブランドを展開する会社のサイトです。

http://www.narumiya-online.jp/webshop/

子供服ブランドなので、ポップなイメージのサイトになっていますね。このサイトでは、ゴシック体が使われています。以下は「自由区」という４０代前後の女性に人気のブランドサイトです。

https://www.jiyuku.net/collection/

こちらでは、上品なイメージのブランドに合わせ明朝体とセリフ体が使われています。

また、サイトの中で使用するフォントの種類は２～３種類内に抑えましょう。まとまりがなく、ごちゃごちゃした印象になってしまいます。

情報のグループ分け

「デザインの原理・原則を知ろう！」の章の「近接」の項目で、情報のグルーピングについて学びましたね。情報を種類ごとにグループ分けして、同じグループの情報は近くに配置するというものです。

更に、異なるグループの情報同士は距離を離して配置する事で、情報の種類の違いをユーザーに伝えることが出来るというものでしたね。この、近接以外にも情報の種類の違いを可視化する方法があります。

区切りをつける

距離と合わせ、異なる種類の情報の間に区切りとしてラインを引く事で更に分かりやすくなるでしょう。

上記は美容室のトップページの例です。見出しにラインを引いていますね。ラインがあることにより、情報ごとにグループ化されているのが伝わるかと思います。

また、グループごとに囲ってしまうのも見やすくてよいでしょう。以下は、美容室の店舗情報の部分です。

これを、グループごとに囲ってみましょう。

それぞれ、区切ることで読みやすさや見た目の統一感が増している感じがしますね。見にくく、分かりづらいサイトはユーザーの離脱を招きます。分かりやすさというのは。とても重要な点です。分かりやすさを意識しデザインしていきましょう。

美しい余白とは

先ほど「分かりやすさ」の重要性についてお話ししました。この分かりやすさの向上には、「余白」を上手に使う事が必要となります。近接という点からも余白はとても重要です。また、コンテンツ同士の間に余白が十分にとられていないと、見づらく「ユーザーが求めている情報」を見つけにくくなります。

https://www.apple.com/jp/

上記は「apple」のサイトです。重要なコンテンツ部分で余白を大きく取ることによって、ユーザーの目を引き付けることもできるのです。美しく使い勝手の良いサイトを作るには、余白を使いこなすことが必須です。様々なサイトを見て、余白の使い方を学ぶと良いでしょう。

まとめ

フォントには、ひらがな・カタカナや漢字の「和文フォント」とアルファベットの「欧文フォント」があります。

サイトの中で使用するフォントの種類は２～３種類以内に収めましょう。また、重要なコンテンツ部分で余白を大きく取るなどの工夫も必要です。