ページの本文へ

Hitachi

HeartCore顧客体験価値を共創するCMS HeartCore(ハートコア)

「ユーザーに受け入れられる
Webデザインとは?-2」

2016年3月8日

このエントリーをはてなブックマークに追加

ユーザーに受け入れられるWebデザインとは?-2

前回のデジタルマーケティング報では、デザインシンキングの概要やポイントについてお話しましたが、今回は、昨今話題となったデザイントレンドについてお話していきます。

1.「縦長スクロール型」

数年前まではWebデザインのファーストビューについては、ファーストビューの中で必要な情報を全て盛込み、ユーザーの欲しい情報をいち早く見つけてもらえるようなデザインがマーケティング視点からも主流でした。その作り方がランディング後の離脱を減少させると言われてきたからです。では、今はどうでしょうか?

過去のようなPC主流の時代からスマートフォンやタブレットなどの利用者が増え、Webサイトの閲覧方法などにも変化が及ぼされました。スマートフォンやタブレットなどで容易にスクロールできるようになったため、スクロールに対して違和感を抱かなくなってきていると言えます。

背景には、TwitterやLINEなど、スクロールを主にしたアプリなどの登場と、アプリの浸透で利用者が自然とスクロールというものに抵抗を感じなくなったと言えるのではないでしょうか。

今までのようなファーストビューで全てを見せる形から、スクロール型で下部にも有意義な情報があることを気づかせるデザインが重要になります。

TOYOTA GAZOO Racing 46 THINGS

(参考サイト:TOYOTA GAZOO Racing 46 THINGS)
http://gazooracing.com/pages/special/tnga/things/

2.「レスポンシブデザイン」

ここ数年でWebサイト閲覧デバイスが増加し、中でもスマートフォンやタブレットの利用者は著しく増加しています。スマートフォンなどの利用者が増加したことにより、今までのようなPCを軸としたWebサイトでは閲覧しづらく、ユーザビリティにも好まれない状態になっています。

レスポンシブデザインはそのようなデバイスによって左右される閲覧上の問題を解決するためのデザインです。単一のHTMLファイルが自動的にデバイス最適化を行い、Webサイトを最適に表示する形のものになります。 従来はPC用HTMLを作成し、スマートフォン用のHTMLの2つを作成する必要がありましたが、レスポンシブデザインの登場により、一つのソースでマルチデバイスに対応することが可能となりました。

繰り返しになりますが、レスポンシブデザインのメリットは、1つ目は、ワンソースでマルチデバイス管理が可能になる点から運用工数を削減できます。2つ目は、最近Googleが重要視し、Googleのアルゴリズムに大きな影響を与えた「モバイルフレンドリー」への対応も容易になることです。モバイル端末表示に最適化されていないWebサイトは結果的にGoogleのアルゴリズムに評価されにくく、検索順位にも大きな影響を及ぼすと思われます。

3つ目は、今後出てくるであろうデバイスにも対応可能な点があります。レスポンシブデザインは端末の画面サイズに依存しないので、将来出てくるであろう端末にも対応が可能になり、ユーザビリティを損ねることなく、デザインを継承できる点があります。

レスポンシブデザインにする上で注意する点もあります。過去のように、PCサイトが主体のデザインでは表示領域が大きいため、情報量を多く掲載できましたが、スマートフォンやタブレットとなると領域が限定されるため、デザインをする上で、今まで以上にユーザビリティについて入念に検討する必要が出てきます。また、古いブラウザーには対応していないので、利用者属性を考慮しながら、レスポンシブデザインの導入を検討する必要も出てくるでしょう。

PARTY

(参考サイト:PARTY)http://prty.jp/

3.「フラットデザイン」

フラットデザインとは、ドロップシャドウやグラデーション、テクスチャなど、立体感のあるスタイルを採用せず、よりアイコンや配色に着目したデザインのことです。先程のレスポンシブデザインにも関係しますが、モバイル端末が増え、ブラウザーの表示範囲に変化がある中で、ボタンのような立体感のあるデザインを採用してしまうと端末によっては文字が潰れたりすることが発生し、ユーザビリティの低下を招くことが起こりえます。

その点、フラットデザインはユーザーが迷わないシンプルなボタンや配色を採用することが多く、ユーザーの視認性を高め、素早く情報を探せるためのユーザビリティを考慮したデザインの手助けをしてくれます。

簡単にフラットデザインのメリットを書くと以下の通りです。
・見た目が華やかであり、視認性が高くなる。
・コントラストがはっきりしているため、文字がわかりやすい。
・ボタンの領域が限定的ではなくなるため、ユーザーがクリックしやすい。
・構成自体がシンプルなため、レイアウトがしやすく更新がしやすい。
・シンプルなデザインのため、ページの読み込み速度が速くなる。

フラットデザインをする上で注意することは、シンプルなデザインを得意としていることです。色の多様化は重要コンテンツなどポイントとなるコンテンツの魅力を減少させてしまうので、色使いには注意が必要です。

フラットデザインのポイントは、大きく3つあります。
・ボタンの立体感を出すための表現はしない。
・使用するテキストは簡潔にする。
・要素の配色は原色を利用し、色の数は多用しないこと。
上記をふまえ、フラットデザインを実践してみてはいかがでしょうか。

Google Design

(参考サイト:Google Design)https://design.google.com/

次回は、「ゴーストボタン」や「ストーリーデザイン」についてお話しましょう。

このエントリーをはてなブックマークに追加

デジタルマーケティング戦略

最新記事

2016年07月22日

「コンテンツマーケティングによって作り出す顧客-3」

コンテンツマーケティングを実践するには、どこに着目し、何をどうしたらよいのでしょうか。今回は、コンテンツマーケティングの進め方(後編)を解説します。

2016年06月13日

「コンテンツマーケティングによって作り出す顧客-2」

コンテンツマーケティングを実践するには、どこに着目し、何をどうしたらよいのでしょうか。今回は、コンテンツマーケティングの進め方を解説します。

2016年05月25日

「コンテンツマーケティングによって作り出す顧客-1」

コンテンツマーケティングとはユーザーにとって価値のあるコンテンツを提供することで、ユーザーの意識改革や購買行動を喚起し、ユーザーとのエンゲージメントを作り出すためのマーケティング手法です。今回は、コンテンツマーケティングによるメリットを解説します。

デジタルマーケティング報へ

  • ページトップへ