Vol.1 Webのトレンドレポート

小ネタ日誌。

2014年02月24日

昨今のWebトレンドについてダイジェスト。流行しているWebデザインを調べてみました。

Vol.1

フラットデザイン

フラットデザイン

WEBSASの目で紹介していますが、グラデーションやテクスチャ等の表現は使わない平面的なパーツを利用したWebデザインをフラットデザインといいます。いろいろと説明はあるようですが、これらを簡単に理解頂くためには、実際にサンプルを見ていただくのがよいでしょう。たとえば、メトロUIを用いた先駆け的な「Windows 8 - Microsoft Windows」や、グリッドレイアウトを多用した「UNIQLO - ユニクロのコーポレートサイト」を見ていただければ、どんなものかイメージしやすいと思います。

WEBSASでは、ボタンやナビゲーションなどのパーツやにフラットデザインを用いてご提案した実績もありましたが、利用者の特性(年齢や性別)、利用デバイスや利用シーン、お客様のブランディングイメージなどをきちんと考慮したうえで、適度にトレンドも織り交ぜながら、Webデザインをご提案することがとても重要だと感じました。グラデーションを聞かせて少し立体的に見せてみたり、パーツのサイズや色、パーツ内でのフォントと背景の組み合わせによっても、見え方は大きく異なるので、個人的には今後、まだまだ発展の余地があるのではないかと感じています。

レスポンシブWebデザイン

WEBSASのキャンペーンサイト

フラットデザイン同様WEBSASの目でも紹介していますが、利用者の画面サイズにあわせて柔軟にレイアウトが切り替えられるWebデザインが、レスポンシブWebデザインです。ここ数年、流行のデザインなので、いろんなサイトで利用されています。たとえば、「NHKスタジオパーク」や「じぶん銀行」へいろいろなデバイスで、もしくはPCのブラウザサイズを大きくしたり、小さくしたりしてみると、画面サイズによって表示形式が変わることを体感頂けると思います。

またレスポンシブWebデザインの一部に、「アダプティブデザイン」というデザインもあるそうです。アダプティブデザインとは、利用者のコンテキストに合わせて表示する内容を切り替えるWebデザインと理解されることが多く、利用者に応じて表示切替を行う観点ではこの2つは同じ考え方といえます。では何が異なるのでしょうか。アダプティブデザインでは限定的なデバイスサイズのみに応じたWebサイトを作る手法をとります。万能なサイズに対応するレスポンシブWebデザインとは異なり、利用者環境によってはデザイン崩れが発生することもありますが、そこは重要視されません。また制作にあたり利用者状態に合わせて、どのようなコンテンツをどうやって表示するかを検討する必要があります。たとえば、利用者が家からアクセスした際にはオンラインショップへ、実際のストアにいるときはショップアシスタントにつながるといった「GAP Home vs Store」や「Google Now」などが参考になると思います。

WEBSASのキャンペーンページもレスポンシブWebデザインを利用しています。個人的には、メディアクエリをつかった万能対応ができるレスポンシブWebデザインをお勧めしたいですね。

シングルページデザイン

WEBSASの社内向けPRサイト

コンテンツを一枚のページに集約したシングルページ完結型レイアウトのWebデザインが、シングルページデザインです。全てのコンテンツを一枚のページでまとめているため、探したい情報がすぐに見つけられるといった利点があります。また、縦長の中にも効果的なアニメーションなどの遊び心を盛り込んだりと多様な工夫がなされているものもあります。WEBSASの社内向けPRサイトではシングルページデザインを採用しました。

フルスクリーンデザイン

websas

魅力的な写真や動画を画面いっぱいに使用して、利用者へインパクトを与えつつ世界観をつくりだすWebデザインが、シングルページデザインです。しっかりとしたコンセプトや写真や画像といった素材があるWebサイトで多く見受けられますね。

WEBSASでは「大空を背景に用いたCloudのサイト」などをいくつかご提案した実績があります。素材を全面に出すこのデザインを使う場合には、どんなイメージにしたいのかといったコンセプト決めと決め手となる素材の選定がとても大切だと思います。

編集後記

トレンドなWebサイトということで、今回はページレイアウト、サイトの構成に着目して、調べてみました。個人的にはどのデザインも一長一短で、「コンセプトにマッチするデザインが何か」を考えることが大切だということを再認識しました。

WEBSASでは、システム開発におけるデザイン製作を担当することがケースが多くあります。そのため、リッチできらびやかなデザインよりも、利用者にとっての使いやすさ、わかりやすさといったユーザビリティの観点を踏まえて、「利用者が確実に機能を使えるデザイン」を主軸に、ご提案しています。

とはいいつつも、お客様とデザイン検討を進めていくと、必ず「迷い」が生じてきます。やっぱり「システム」にとらわれない斬新なものがほしい。リッチ感を求めて黒を多用したが、なんだか暗い・・・etc・・・デザイン決めには必ずといっていいほど、「迷いが生じてしまう」という難しさがあると思います。デザイン案が2択、3択、あるいは別の選択肢……と、デザインは無限に存在していきます。そうなるとデザイン検討が終えられない問題が勃発し、お客様も開発・デザインチームも皆が辛い状態に陥いります。

こうならないために、「誰にとって、何を、どうするために、Webサイトを作ろう!」という主軸(コンセプト)を決めておくことの大切さを実感します。こういった指標があれば、このデザインはサイト全体のコンセプトにはあわないので、今回は見送りましょう。そのかわり、このデザインを使って、キャンペーンページを作ってみたらどうでしょうかといった提案もできます。

今度は、主軸(コンセプト)の決め方について深堀してみようと思います。