サイトデザインで確認したいことまとめ

こんにちは、ANDSPACEの後藤です。
前回は「サイト公開前に確認したいことまとめ」と題して、
表示速度の改善やアナリティクスの設定といった、
主にサイトの裏側についてご紹介いたしました。
そこで、今回はサイトの表側。つまり、デザインについてお話したいと思います。

皆さんは、デザインの出来が良いとテンション上がりませんか。
出来が良すぎて、チェックがおろそかになってしまっては、
あとから、思わぬ作業が発生していまい、余計なコストがかかってしまいます。

そうならないためにも、自分への戒めも兼ねて、基本的なチェック項目をご紹介します。

フォントサイズは適切か

ユーザーが読みやすい文章になっているかを確認します。

主にチェックするものは、

• フォントサイズが小さすぎないか。
• 見出しや文章、それぞれ区別ができるか。
• 背景に文字が馴染みすぎていないか。
• 適切な行間・文字間がとれているか。

フォントサイズによって、適切な行間は変わります。
文章が詰まりすぎていたり、逆に空きすぎると読みづらくなるので、
最適な行間になっているか、文章が読みづらくないか、第三者の目を持って確認しましょう。

例えば、読んでもらいたい文章の場合は行間をあけ、
タイトルや補足的な文章に対しては狭くすると、
情報がグループ化でき、読みやすく全体的にまとまりができます。

ちなみにですが、

横書きであれば一行35～40文字。
縦書きであれば一行38～40文字。

がWEBサイトにおける、読みやすい文字量と言われています。

文字の量

文字の量は、WordpressなどのCMSを利用する場合はとくに要注意です。

• 一覧ページの記事タイトル
• 詳細ページの記事タイトル
• カテゴリー名
• 新着情報などで表示されるタイトル

それぞれ、1行をこえてしまっても大丈夫なデザインになっているか確認しましょう。

CMSなどで入力されたタイトルは、文字が1行におさまらず改行されてしまう恐れがあります。
改行されてしまって、デザインが崩れることのないように注意が必要です。

画像

• 的確なトリミング位置で画像が書き出されているか
• ダミー画像のままになっていないか
• 画像がにじんだり歪んでないか
• 消し忘れたパーツが画像にまぎれていないか

レスポンシブサイトがベースになっている最近では、背景画像を用いた手法が多くなっています。
デバイス間で画像を流用する際は、最大サイズと最小サイズをイメージすることが大切です。

気づかないままそのままリリース。
なんてことに、ならないようにしっかり確認しましょう。

統一感（整合性）

• サイト全体のカラーに統一性があるか
• レイアウトに統一性があるか
• ボタンやリンクにルールが設定されているか
• 使用フォントにばらつきがないか
• 表記ルールが統一されているか

統一感のないサイトは、文章も読みづらく、視線がちらばってしまいます。
ユーザーに不快感をあたえることなく、コンテンツを気持ちよく読んでもらうことが重要です。

リンク

• サイト内でボタンが馴染みすぎていないか
• ボタンの中の余白は十分にとれているか
• テキストリンクがわかるようになっているか

ユーザーに何らかのアクションを求める場合、
視線を誘導して、必要な情報だけに、目がいくようなボタンになっているかが大切です。
余白がなく窮屈なボタンでは、視線が流れたり、一目でアクションを理解すること難しくなります。
また、サイト内のカラーバランスを考え、視線がいくような配色でなければなりません。

レスポンシブ対応

レスポンシブサイトを想定したデザインの場合、
PCサイト・タブレット・スマートフォンそれぞれデバイス間で、
無理なレイアウトになっていないか確認しましょう。
チェック漏れで、あとで発覚!となってしまっては大変です。