カテゴリー: WEBデザイン

スマホ用Webデザインの最適なサイズ

スマートフォン表示時の見やすいフォントサイズ
タイトルのフォントサイズ
基準：20px
範囲：18~24px

本文のフォントサイズ
基準：15px
範囲：14・15・16 px

行間（行送り line-height）のフォントサイズ
基準：1.8
範囲：1.5～2.0

画像サイズについて
2021年現在のスマホ用Webデザインの最適なアートボードサイズは、375px × 667px
iPhone端末の採用ディスプレイ「Retina」を見据えて、Webデザインに使用する画像サイズは現状3倍で作成するのが良い。

バナーは主に広告で使われるWebデザインで、Webページ上で他のWebページを紹介する役割があります

Webサイトやランディングページとは違って、掲載できるサイズがある程度決まっています。
バナーは、その限られたサイズの中で伝えたい情報を伝えるWebデザインです。

画像のようにあらかじめ決まっているサイズの中でデザインをします。
最終的にランディングページへと誘導するので、ユーザーが興味をもつ情報を整理してデザインする必要があります。

バナーは限られた領域の中で、文字と画像によって伝えなければなりません。
そして、ユーザーにクリックされるためには、伝えたい相手に伝えたい情報を一目で伝えなくてはなりません。

1.目立たせたい文字の優先順位を決める

まず、バナーに掲載したい文字を全て配置してみましょう。

その次に、この中でどの情報を一番伝えたいか、どの情報がユーザーにとってメリットのある情報なのかを考え、目立たせたい文字の優先順位を決めます

2.文字の大きさを決める

先ほど決めた優先順位をもとに、視覚的に優先順位の違いがわかるよう文字の大きさを変えて強弱をつけていきます。

3.文字の位置を揃える

人の視線は左から右に移動するので、文章を読ませることを目的としたコンテンツを作成する場合は左揃えることが私見です。
背景画像と文字だけで構成するバナーを作成する際には、「中央揃え」がおすすめです。
中央揃えは全体がシンメトリー（左右対称）になるので安定感が生まれ、デザインとしての一体感を出しやすくなります。

4.文字に装飾を付ける

文字の大きさを変えてだけでは、まだ単調な印象です。
文字要素によって文字の後ろに背景色を敷く、上下に線を引くだけでも要素間にメリハリが生まれます。

背景を敷いた文字や、白抜きにした文字は他に比べて目に留まりやすくなるので、全体の構成に合わせて文字の大きさを再調整します。
ここで色を付けると配色とレイアウトの両方で悩んでしまい、余計に時間がかかってしまう場合もあるのでモノクロのまま進めていきます。

5.フォントを変える

フォントはデザインの印象を決める大事な要素です。
選ぶフォントによってユーザーに与わる印象が変わってくるので、どういったユーザー層に訴えたいのか、どのような印象を与えたいのかによって使いわける必要があります。

6.文字の大きさを揃える

同じ文字サイズで設定してもひらがな、カタカナ、漢字、英語で大きさが違って見える場合があります。

7.文字に対比を付ける

先ほどの一体感を出す作業とは対照的に、文字の大きさを不揃いにすることによって内容を強調することが出来ます。

8.字間と行間を調整する

字間とは文字の左右の空間で、行間とは文章の行と行との間のことです。
どちらも伝わりやすさに影響することなので、要素ごとにまとまりが感じられるように設定することが大事です。

9.色をつける

色はデザイン全体の印象を決める大事な要素です。
バナーのリンク先のページの色に合わせる、伝えたい内容のテーマやイメージに合った色を選ぶなどでメインの色を決めます。

10.遊び心を加える

デザインがまとまったところで、より魅力的になるよう少し手を加えてる。

配色パターンとは、ホームページサイトのデザインを決める上で重要な要素のひとつです。
一般的には、以下の3つの色を選ぶのが好ましいと言われています。

・ベースカラー
・メインカラー
・アクセントカラー

ベースカラー

サイト内でもっとも大きな面積を占める色で、背景や余白で使われます。

メインカラー

サイト全体の印象を決める色で、配色カラーの中でもっとも大切なカラーになります。
メインカラーによって全体のイメージが決まります。

アクセントカラー

メインカラー、ベースカラーに対して、ユーザーが見たときに目が引くような色を指します。
問い合わせボタンなどに使われる場合が多いです。

ベースカラー70%、メインカラー25%、アクセントカラー5%の割合がバランスが良いとされます。