モバイルファーストでデザインを考える
業種やジャンルによっては前後しますが、6割から7割のアクセスはモバイル端末からのアクセスです。サイト全体のヴィジュアルの雰囲気を掴むためにはPCイメージの方が判断しやすいですが、成果の高いサイトを目指すためにはモバイルファーストでUI/UX・デザインを考えて行く必要があります。
具体的には「文章の可読性の高さ」「ボタンなどの導線コンテンツの充実化」「CTAコンテンツの操作性」「写真画像や見出しのバランス」などを重点的にモバイルファーストでデザインを行います。
特にボタンコンテンツなどはPCデザインの場合は上下左右に余白があるためボタンと認識しやすいが、モバイルは余白が少ないためボタンと認識しにくいなど、モバイルデバイスを考慮したヴィジュアル作成が必要になります。
色の使い分けでウェブサイトの機能を表現する
モバイルデバイスがトラフィックの中心になっているため、小さな領域のデザインを行う必要があります。
これまでは大きな可視領域を考慮したデザインなため、余白や装飾でメリハリを付けていました。小さい領域でデザインする場合は過度な装飾はUXの面から考える、使いやすさや見やすさの低下を招いてしまいます。この問題は色で機能を仕分けることで解決します。例えば”日付””タイトル””カテゴリー”で構成される要素は”日付”をタイトルより薄い色で表現することにより、ボックスなどで囲うような表現を行わなくて良くなります。
このようにグレースケールを有効活用することでもデザインにメリハリがつき、UXの向上を見込むことが可能となります。弊社ではプロジェクト毎に「本文」「日付、注釈文」「罫線」「背景色」などの基本的な構成要素を予めどのような配色にするかを決定し、デザインに取り掛かっています。
過度な英語の装飾は行わない
ついついナビゲーションなどは英語を使ってしまいがちです。その方が見た目がスタイリッシュにはなりますが、プロジェクトによってはユーザーにとって分かりにくいデザインとなっていまいます。見出しなども日本語と英語を併記を行いますが、こちらもプロジェクトの性質によってどちらのプライオリティーを高くするかよく検討する必要があります。
また、フォントについてもよく検討する必要があります。Googleが提供するGooglefontは読み込みの時間もかからず使い勝手が良いので基本的にはGooglefontを用いたデザインを行いたいです。したがってコーポレートデザインシステムを考える際にはウェブで使用するフォントの選定も行っておいた方が良いですね。
CTAのデザインは特に意識して行う
ほとんどのホームページのゴールはユーザーから電話やお問い合わせを受けることになります。ですのでCTA（コール トゥ アクション）のデザインや構成には気をつけなければいけません。ページ内で最も目立つ様にデザインすることはもちろんのこと、ファーストビューにボタン設置、ページの先頭と最後に同じデザインのCTAを設置、モバイルレイアウト時に追従コンテンツにするなど、設置位置やレイアウトも熟考する必要があります。
積極的にSVGを活用する
デザインカンプはPHOTOSHOPを中心に行ってきました。1px単位で調整が可能なのでコーダーとの連携が図りやすかったことが理由の一つです。ですが、4Kモニタの普及やIllustratorとPhotoshopの連携がスムーズになったことや、様々なSVG素材の普及もあり、図やタイトル見出し、装飾は積極的にSVGを活用しています。