デジタルマーケティングTips
スマホ時代に適した実用性重視のWebデザイントレンドまとめ
Web閲覧環境の変化に取り残された古いサイトを放置すると、会社や製品のイメージも古い時代のものに固定されるリスクが高くなります。2010年代初頭以降のスマートフォン最適化の流れを軸に、Webサイトの実用性を高めつつデザインを最新にするための手法をまとめました。
メルマガでも情報を配信中です！ ぜひご登録ください。 Webサイトを、SafariやChrome等現在主流のスマートフォン用ブラウザで閲覧しやすくするには、サイト側で、表示領域(ビューポート)設定等のスマホ最適化設定が必要です。 スマホ最適化の設定がないサイトをスマートフォンで表示した場合、幅960～980ピクセル(以下px)相当のブラウザ表示を一度作ったのち、端末の画面に合わせて圧縮して表示されます。このため、 といったネガティブイメージの発生リスクをいくつも抱えることになります。 10年以上前に構築された古いサイトは、ブランドイメージを保護したい場合、スマホ最適化のためのリニューアルを大至急進めることが重要です。 2010年代初頭にスマートフォン最適化を行ったサイトの場合も、サイトの作り方によっては作り直しを検討したほうがよい場合があります。
フィーチャーフォンからスマートフォンへの移行期であった2010年代前半頃は、フィーチャーフォン用サイトの作り方に倣って、「PCサイトのサブディレクトリ/サブドメイン」としてスマホサイトを別建てする方式が多用されました。この方法はフィーチャーフォンからの移行期における対応としてはある意味順当でしたが、移行がほぼ完了した現在では、以下のデメリットが顕在化する傾向にあります。 これらを解決するには、デバイスを問わず共通ソースファイル・同一URLで情報を発信する必要があります。そのため、ブラウザ幅に応じてPC・SP表示を切り替える「レスポンシブWebデザイン」への移行が有効です。 2000年代のPCの画面は今よりも狭く、普及価格帯デスクトップやモバイルノートだと1024×768px等が当たり前でした。これに合わせてWebサイトをデザインする場合、 のようなケースが比較的一般的でした。 ボタンやリンク等のクリック要素についても、当時はマウスのように精緻な操作のしやすいポインティングデバイスが前提でした。押し間違いの心配が少ないこともあり、ボタン類は小さくてもあまり問題なく、可能な限り情報を狭い範囲内(特に1画面目＝ファーストビュー)に詰め込むことが優先されました。 これらの状況が2010年代に大きく変化したため、変化に取り残されたサイトは、見た目のデザインが悪くなくても「なんか古臭い」という印象を与える可能性が高くなります。 現在ではスマートフォン・タブレット・PCなど様々な種類のデバイスに、静電容量タッチパネルを指で操作する仕組みが搭載されています。 指でのタッチ操作は、マウスやスタイラスペンのような1ピクセル単位の精緻さに欠け、かつ「マウスオーバー(ホバー)」ができません。このため、以下のような対応が必要になります。 昔ながらの10～11px程度の文字サイズは、スマートフォンで表示すると、サイトをスマホ最適化したとしてもかなり小さく、読みづらさの原因となります。例えばGoogleは「12px(9pt)未満の文字は難読につき非推奨 現在の主要ブラウザはデフォルトフォントサイズを16pxとしているため、これに基づいて、PCで1行35～40文字程度、スマートフォンで1行20～25文字程度表示できるようなワイヤーフレームを設計すれば、おのずと使いやすく見た目にも今風のデザインに近づくことができます。 2000年代まではスクロール動作に対するユーザーの抵抗感が今よりも高く、Webサイトの初期表示領域(ファーストビュー)に興味を引く情報を詰め込み、下へのスクロールやクリックでの遷移を促すことが重視されました。 ところが、スマートフォンやSNSの普及により状況が大きく変わり、ファーストビューに情報を詰め込む必要性が薄れてきました。ユーザーのスクロール動作に対する抵抗感が下がり、デバイスを問わず「情報があればとりあえずスクロールする」という人が増えたためです。また、画面の小さいスマートフォンではそもそもPCのような情報の詰め込みが難しく、マルチデバイス化にあたり情報設計の根本的な見直しが必要になった、という背景も見逃せません。 スクロール前提のデザインが容易になったことによる大きな変化として、告知/広告用ランディングページのような、分かりやすさとビジュアルインパクト勝負のサイトが作りやすくなったことが挙げられます。例としては以下の通りです。 デバイス間の共通度の高い、レスポンシブデザイン向きのワイヤーフレーム設計を目指すと、上記のような構成に近づきやすくなります。 スマートフォン向けのサイトは、読み込みや描画の軽量化・高速化も意識する必要があります。回線混雑時や、低速回線(格安MVNO等)でのアクセスであっても、待たされずキビキビと表示されるのがベストです。 待ち時間の長短は、離脱リスクはもちろん、Google検索の順位評価にも影響するため、企業のPCからのアクセスが多いBtoB系サイトであっても油断は禁物です。 2000年代までの主流であったリッチデザイン(スキューモーフィズム…現実世界の物体要素をデジタルデザインに取り入れることで直感的分かりやすさを実現する手法)は、質感やわかりやすさには優れていましたが、画像パーツの読み込みが通信・描画負荷となるため、軽量化・高速化との相性はよくありません。2010代以降の主流である、平面・単色・シンプルさを重視したフラットデザインへ移行すると、画像点数の削減や省サイズ化が実現できます。 見た目の印象的にも、2010年のWindows Phone 7登場を皮切りに、各種OSのUIは次々にリッチデザインからフラットデザインへと舵を切ったため、リッチデザインには「一昔以上前の時代」のイメージがつきがちです。フラットデザインへの移行は、ブランドイメージの新鮮さを保つ意味でも有益です。 とはいえフラットデザインも欠点がないわけではありません。最も大きな弱点は、ボタン等操作すべき対象がわかりにくくなりがちなことです。最近は「ボタンは両端を角丸～半円にする」「購入や問い合わせ等のアクションに対応したアイコンを入れる」等視認性を高める工夫も進んでいますが、かつてのリッチデザインに比べると明瞭さが劣る点は否めません。 対策として、「マテリアルデザイン」や「ニューモーフィズム」のように、軽量なフラット素材を維持しつつ、シャドウや陰影で物体のわかりやすさを改善するデザインを活用するのもおすすめです。 OSによって標準搭載されているフォントはそれぞれ異なります。各OSの標準デバイスフォントを表示に指定することで、各OSのユーザーになじみ深い表示にできますが、一方で、テキストの見出しなど表示崩れの許されない部分で、フォント間の微妙なサイズ違いが問題となる場合があります。 これを根本的に解決したい場合は、Webサーバー内やクラウド上にあるフォントデータを使用する「Webフォント」を活用するのがおすすめです。現在ではGoogleが無料提供する「Google Fonts」(Noto Sans等)が広く使われているほか、フォントの見た目に凝りたい場合はモリサワ「TypeSquare」やMonotype「fonts.com」等の有料Webフォント提供サービスを利用することも可能です。 Webフォントは、当初日本ではフォントファイルの大きさや読み込み速度がネックとなり、欧米圏に比べて普及が遅れていましたが、現在は日本語フォントでも速度的に問題なく使用できるものが増えています。 タッチパネルでは、タップした際に、操作が通って通信中なのか、それともブラウザがフリーズしているだけなののかが見た目でわかると、訪問者の安心感につながります。 このため、ボタン押下等やチェック等のUI関連アクションに、細かい反応(マイクロインタラクション)を仕込むというのも有効な手段です。 単純な反応はCSS/JavaScriptでも実装できますが、凝ったアニメーションを作りたい場合は、After Effectsで作ったアニメーションをモーショングラフィックスJSONファイルに出力するといった方法もあります。 2018年以降、モバイル機器ユーザーに広がり始めた「ダークモード」への対応も見逃せないチェックポイントです。 ダークモードとは黒～暗めの背景色を基調とするカラースキームを指し、古くはコンピューター登場初期から存在します。が、1990年代以降はOS・Webブラウザとも白～灰色の背景色に黒文字が主流のライトモードに取って代わられました。 ところが、2010年代後半に入って、スマートフォンに有機ELディスプレイ搭載機が増え始めると状況が変わりました。有機ELは液晶と違って原理上発光量が少ないほど電池消費が抑えられるため、ダークモードの需要が再び高まりました。各種アプリに個別にライトモード・ダークモードの切り替え機能が搭載されたのち、主要OSのシステム設定にも順次ダークモード切り替えが搭載されました。 普段ダークモードがメインの人がいきなりライトモードのWebサイトを見ると、発光量が多くまぶしいため、長時間滞在の妨げとなる場合があります。世間的にダークモード切替機能が一般化するほど、ライトモードしかないサイトは「時代遅れ」扱いとなるリスクにさらされます。 実は、Webサイトの色設定を制御するCSSにも、OSのシステム設定(ライトモード・ダークモード)を判別する機能があります。これを使って、ライト・ダーク2種類の配色を用意したのちにシステム設定による分岐を作ることで、それぞれのモードのユーザーに合った色設定を自動で提供できます。アイコン画像も、SVGの単色ベクターイメージならCSSでの色変更が可能です。このようなときにフラットデザインを採用しておくと、CSSを使った色設定分岐にも柔軟に対応できて便利です。
メリットばかりではありません。ライトモード・ダークモードに両対応するには、当然2種類の配色を作る必要があるため、デザインコストは増加します。また、ダークモードの配色は、単純にライトモードの明度を反転すればいいわけではなく、ドロップシャドウが使えない分UIの視認性確保を彩度で補う等の工夫が必要です。色付きロゴや人物写真を多用するサイトなど、根本的に配色をダークモードに合わせづらいケースもあります。 とはいえ、ダークモードユーザーにとってWebがまぶしくないことは、再訪への心理的抵抗感を下げる要素となります。サイトのコンテンツ内容を考慮しつつ、デザイナーやWeb制作会社と検討してみるのがおすすめです。 これらのデザインを効率的に進めるには、使用ツールを進化させることも重要です。 レスポンシブデザインのイメージを共有するには、Adobe XDのようなデザインツールを使用する方が、Photoshop等で固定幅のデザインカンプを作るよりも適しています。 など、便利な機能を使いこなせると、デザイン・開発業務の効率化に繋がります。 「Webデザインはよくわからない」という人でも、ユーザーの閲覧環境に合わせてサイトの利便性を高める方法を組み立てていくことで、デザイン改善の道筋を立てることができます。デザイン・ページ構成の知見に優れたWeb制作会社と一緒に、Webサイトのイメージ一新に挑戦してみることをお勧めします。
WebサイトやSNSでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。 いますぐご登録ください！要点
Webサイトのスマートフォン最適化はいまや必須
PC・SPを別建てしたサイトは、レスポンシブデザインへの移行を検討
PCファーストビュー詰め込み時代の遺産を現代風に改善する
昔は「狭いPCモニターの1画面目に情報を詰め込む」が当たり前だった
変化1:あらゆるUIを指でのタッチ操作に最適化させる
。誤操作防止を重視するなら要素間16px程度がベター)変化2:小さすぎる文字サイズは改善
」としています。変化3:スクロールを前提とした、詰め込みより見た目のインパクトを重視した構成に
フラットデザインやマテリアルデザインなど、軽量化しやすいデザイン手法を導入
Webフォントの利用で、デバイスフォントの違いによる表示崩れリスクを防止
マイクロインタラクションで、ユーザーを安心感を与えるUIを実装
目と電池にやさしいダークモード自動対応で、サイト離脱・時代遅れ感のリスクを低減
Adobe XD等の高機能デザインツール導入で、関係者全員にとって便利な開発体制を確立
まとめ
関連ページ
マックスマウスからのお知らせ
Web制作・マーケティング担当者向けのお役立ち情報をメールマガジンでお届け！
その他のサービス
