こんにちは！TANE-beデザイナーです。◠ ͜ ◠

今回も前回に続いて、「Webデザインの基本ルール」を紹介させていただきたいと思います。今回は「アイコンのデザイン」「テキストのメリハリ」そして「色の明暗比」について紹介させていただきます。

アイコンのデザイン

アイコンは視覚的に情報の伝達力が高く、ユーザーの興味を引き出してWebサイトの滞在時間を長くしたり、クリック率を上げたりするためによく使われています。よくデザインされたアイコンはユーザーに情報を直感的に伝達できますが、コンテンツの内容がちゃんと表現できていないアイコンはユーザーに混乱を招いてしまいます。

それでは、よくデザインされたアイコンというのはなんでしょう？( ͡•. •͡)?
基本的に下記の2点だけを守れば、アイコンのクォーリティーは上がります。

適切なメタフォーを活用して、伝えたいことを明確に表現する

ボタンでアイコンを使う時ユーザーがアイコンを見てボタンの機能が理解できるように、適切なメタフォーを活用します。
例えば、CONTACTボタンに設定ボタンでよく使われている歯車のアイコンがあったら、ユーザーはボタンの目的に混乱を感じてしまいます。

アイコンのデザイン一貫性を守る

Webデザインの基本としてよく言われるのは「一貫性(ルールの統一)」です。

テキストのサイズや画像の比率などページ数が多くてもデザインが一貫され情報がよく整理されていれば、ユーザーがサイト内の莫大な情報量に混乱することはないです。
この一貫性はアイコンにも適されます。アイコンの表現方法は多様なので、サイトのデザインコンセプトに合わせて一貫性を守るのが大事です。

アイコンの表現方法

アイコンの種類は大きく面と線に分けられます。また色の数、線の太さ、先端の形、角の形などで細かく分けられます。
上記だけではなく、アイコンを平面で表現するか立体的に表現するかなどデザインの表現方法は多様ですので、サイトのデザインコンセプトに合わせて一貫性を守ったデザインをしなければいけないです。٩(ര̀ᴗര́)

上記の2点を守れば、情報の伝達力が上がり直感的にユーザーが使いやすいデザインができます。
案件によっては直接アイコンを描いたり、Adobe Stockでダウンロードしたりしますね。Adobe Stockからの多様なアイコンを一つのサイトに使う時には特にアイコンのデザインがバラバラになる可能性が高いので、サイトのアイコンルールを決めて統一した方が望ましいです！

テキストのメリハリ (タイポグラフィ)

Webサイトはテキストで情報を伝えていて、テキスト量が多くなってしまいユーザーが興味を失ってサイトから離脱することがあります。ヽ（・＿・；)ノ

を防ぐために、テキストを整理してメリハリをつけて可読性を上げることが大事になります。テキストの可読性には「文字の可読性」と「テキスト全体の可読性（メリハリ）」があります。

文字の可読性

本文用のテキストフォントはシステムフォントにすることが多いです。

システムフォントはユーザーに一番見慣れているフォントなので読みやすいという長所があります。私はNoto Sans JPをよく使っていますね。ᙏ̤̫
見出しや英語のフォントはシステムフォントにする時もあれば、個性があるフォントを選んだり、サイトのコンセプトに合わせています。その時は本文のフォントとの調和を注意しなければいけないです。

テキスト全体の可読性（メリハリ）

テキスト全体の可読性を上げるためには、字間と行間の調節から、「タイトル・見出し」「本文」「注釈」の強調したいテキストのレベルを分けてサイズや色でメリハリをつけることができます。

タイトルと見出し

テキスト整理とメリハリで一番大事な要素はタイトルと見出しです。

人々は意外と文章を読んでいないらしく、3行以上の文章はあまり読んでいないそうです。それを防いで文章を読ませる役割をするのが見出しです。もし、WFにテキストが3行以上なのに見出しがない時には自分で見出しをつけたりしますね。

タイトルは本文より180%以上のサイズに設定した方がタイトルとして認識しやすいです。また、見出しは大中小などの大きさによって本文より120％以上のサイズに調整しています。サイズの調整に加えて色を変えたりあしらいをつけてタイトルと見出しにメリハリをつけることができます。

注釈

よく見落としてしまうのは注釈のテキストデザインです。

注釈と本文のデザインに差を置くことでよりテキストが読みやすくなります。主に本文のテキストよりサイズを落としたり、グレーにするなどの弱めにデザインにすることが多いですね。

色の明暗比

ベタ塗りの背景の上にテキストを載せることはよくありますね。その時の注意点は背景とテキストの色の明暗比です。

WCAG（Web Content Accessibility Guidelines）によると、文字は背景と3～4.5以上の明暗比の方が望ましいそうです。
しかし、目が色に慣れ過ぎたり疲れてしまった時視認性が落ちる色を選定してしまうことがあります。その時、自分の目は信用しない方がいいですね。( -᷅_-᷄)

その時使えるのが 「Contrast Finder」というサイトです。

「Contrast Finder」でフォントの色と背景の色を入力すると明暗比の数字が表示され、色の視認性が基準に適しているかいないかの明暗比を数字で教えてくれます。
もし基準に達していない場合は基準に合う色をお勧めしてくれます。

視認性がいいサイトを作るためには、常に「Contrast Finder」で確認作業を行う習慣をつけておくといいですね！◡̈⋆*

まとめ

今回は前回より少し長くになってしまいました。。
アイコンとテキストそして色の選定や、調整は油断したら沼に落ちてしまうことが多いですが、その時は基本ルールを思い出してみてくださいね！•̀.̫•́✧