2014年のWebデザイントレンドと本当に必要とされるデザインと手法

去る6月25日(水)、竹橋マイナビルームにてマイナビ様が主催する「Creator’s Career Lounge(以下、CCL) vol.6」が開催され、FICCから戸塚、福岡、冨田、STANDARD社から鈴木 健一氏が登壇しました。「Webデザイントレンドの潮流」をテーマに、これまでのWebデザインが歩んだ歴史と背景、そして現在Webの現場で活躍するWebデザイン技法について、約2時間に渡った講演の内容を振り返ります。

web-design-trends-for-2014-1

スライド

デザインには目的がある

web-design-trends-for-2014-2

大前提として、ここでお話しする「デザイン」とはただのスキンやその作り方だけの話ではありません。「買ってほしい」「知ってほしい」「シェアしてほしい」などの目的を達成するための手段がデザインなのです。目的が変わればデザインも変わります。そしてWebサイトを取り巻く環境の変化によって目的もまた変化してきました。

環境の変化、要求の変化、デザインの変化を振り返る

まずWeb制作の環境の変化を、FICCが設立された2004年を起点に振り返ります。2004年のFlash全盛期から2006年のWeb動画登場で一気にリッチコンテンツに傾いていった一方、2005年のmixi、ブログブーム、その後のソーシャルメディア勃興とIT分野の発展も目覚ましく、広告・サービスが平行して時代が進みました。

しかし2008年、iPhoneの登場によってWeb制作の現場は一転。FlashからHTMLへ、Web制作の潮流が一気に変わります。iOSの特徴的なスキューモーフィックなデザインはWebの世界に流入し大きなトレンドに成長しました。やがてスマホの普及とバリエーションの増加、さらにタブレットの登場でターゲットととなる閲覧環境が分化していった、これが現在に繋がるWeb環境の変化でした。その時代を反映するように、Web制作のトレンドが発生し、変化していったのです。

ただの流行ではないフラットデザインの意義

web-design-trends-for-2014-3

現在のWebデザインにおいて最も特徴的なトレンドと言えば「フラットデザイン」でしょう。iPhoneの流行とともに世界を席巻したスキューモーフィックデザインでしたが、現在はそれを塗り替えるかのようにフラットデザインが主流となっています。なぜこのような変化がWebデザインの現場に起きたのでしょうか。大きな要因の一つとしてコストの問題が挙げられるのではないでしょうか。スキューモーフィックデザインでサイトを一通り作るとなるとボタン一つを制作するにも時間と労力がかかります。また現実にある楽器のツマミをスクリーン上で再現しても実際につまんで操作できるわけでもないように、リアリティのあるデザインがユーザビリティの向上に結びついていたのか疑わしい部分もあります。ボタンがボタンとしてユーザーに理解できるのであれば、スキンがリアルであれフラットであれ効果は変わらないはずなのです。

web-design-trends-for-2014-3

ではフラットデザインの利点とは何でしょうか。それは解像度にデザインが左右されないという点です。iPhoneの登場以降、ブラウザ内で拡大・縮小を行えることが当たり前になり、Retina解像度を持つスマホや、画面サイズの異なるタブレットの登場により、「ピクセルパーフェクトなデザイン」を行うことが理に適わなくなってきました。CSS上で再現できる、解像度に囚われないデザインとしてフラットデザインは非常に適しています。余白を使ったデザインであるところが情報の整理にもなり、そして自然とコンテンツを引き立てるデザインであることも人気に繋がった要因ではないでしょうか。

web-design-trends-for-2014-5

一方でフラットデザインにも苦手とすることがあります。

web-design-trends-for-2014-6


冨田「同じキャンペーンサイトをフラットデザイン、スキューモーフィックデザインそれぞれでデザインしましたが、フラットデザインでは “盛り上がり感” の演出に欠ける部分があります。情報整理と演出、それぞれのデザインの良いところを適宜利用するのが望ましいのではないでしょうか」

フラットデザインはあくまで器であり、そこに入るコンテンツをどう伝えるかを一番に考える必要があるのではないでしょうか。

レスポンシブデザインは自由のために自由を捨てている?

1つのHTMLソースで複数のデバイスでの表示に対応したサイトを作る「レスポンシブデザイン」。既に多くのサイトで取り入れられている技法です。1ソースでページを管理することによるコストの低減を目的とすることが多いレスポンシブデザインですが、本当に低コストでのサイト制作に繋がるのでしょうか?

web-design-trends-for-2014-7

コストを下げる要因としては「ワンソースなので管理がラク」「(UAなどを使った)事前のページ振り分けを考えなくていい」という2点が挙げられます。ウィンドウ幅だけでビューを変えることができるからこその大きな利点です。一方コストを上げる要因になりうるのが「デバイスによってコンテンツを大幅に変えることができない」「結局CSSを書く総量はさほど変わらず、むしろ保守が難しくなる可能性がある」「JSの対応に注意」「各種ブラウザ対応(特にIE)」です。扱い方を誤れば手数が増えてしまう可能性があるのもレスポンシブデザインの特徴です。コンテンツの性質もあわせ、事前にレスポンシブデザインに適したサイトであるか確認する必要があるでしょう。

レスポンシブデザインの目的はそもそもマルチデバイス対応です。マルチデバイスに対応したサイトの作り方は他にもあります。まず「viewportを固定しサイトを拡大・縮小して表示」する方法です。iPhoneのサイトがスマートフォン対応をしていない、というのは有名な話ですが、そもそもスマホブラウザは拡大・縮小が標準の機能となっています。むしろレスポンシブデザインで拡大・縮小機能を殺してしまうことで、ユーザビリティが低下する可能性だって考えられるのです。文字サイズを大きく設定する(16px以上が目安)など読みやすさを向上させる工夫を施しましょう。また「そもそもスマートフォン向けサイトだけを作る」という発想もあります。最初から小さいスクリーンサイズに向けて作れば、PCでも表示できるわけです。ファーストフードの短期キャンペーンなどでよく見られる手法です。

web-design-trends-for-2014-8


戸塚「キャンペーンサイトでは、こうした方法で作成することも少なくないです。例えば、メインユーザーが若年層で、スマホユーザーが多いとか、予算の関係でPC版とスマホ版の両方は作れないというケースなど、必ずしもレスポンシブデザインが必須というわけではなくなってきました」

大切なのはまずユーザーがどのようにコンテンツを閲覧するか考えることです。レスポンシブデザインの採用を決めるのはその後に考えましょう。

楽しい?苦しい?「パララックスサイト」の使いどころ

web-design-trends-for-2014-9

突然降って湧いたように出現した「パララックスサイト」。ウィンドウスクロールに応じて演出を発生させる技法の総称として用いられていますが、そもそもなぜこれだけの流行を見せることになったのでしょうか?近年ではPCのトラックパッドの進化や、スマホの登場により、スクロールすることの抵抗感がなくなりました。するとクリックよりもスクロールの方がアクションのハードルが下がり、コンテンツをページに分割しない、1ページ完結型のサイトが増加しました。そんな中、クリックが発生しない中で演出を加えると考えると、スクロールにフックすることしか考えられなかったということではないでしょうか。

しかしスクロールに演出を加えたり、スクロールを制御したりする行為はユーザーから反感を買うこともしばしばです。挙動も重く、読み込み量も多いとなればユーザーは「不要な演出」と感じるでしょうし、スクロールをJSでコントロールすることで「いつものスクロール感覚と違う」気持ち悪さを感じます。パララックス演出はこの注意点を踏まえた上で導入を検討しましょう。

web-design-trends-for-2014-10

本講演ではスクロール量に応じた演出が入る「イベント型」とコンテンツをページに別けて表示する「ページ分割型」の2種類を定義しました。「ページ分割型」は演出というよりむしろ新しいUIの形と捉えてもいいかもしれません。スクロールは現代のWebサイトと切っても切れない大切な要素です。

Flash以後のリッチコンテンツ復権

Web広告の分野に置いてあれだけの存在感を放ったFlashも、iPhoneの普及によって追いやられてしまった現在。Flashの採用は少なくなりましたが、リッチコンテンツが再び増えつつあるように感じます。

web-design-trends-for-2014-11

canvasタグやWebGL、UnityといったFlashと競合となるテクノロジーの成長だけでなく、今までFlashできなかったアニメーション、映像、音楽といった演出がHTML5やCSS3、JSの組み合わせでも実現できるようになってきたことも背景にあります。

web-design-trends-for-2014-12

旧来のFlashサイトでは一つのFlashを全画面展開し、その中でコンテンツを描画するものでしたが、今ではHTMLにとけ込む形でパーツとしてリッチコンテンツを使う、というケースが多いのではないでしょうか。

リッチコンテンツが盛り上がるのはある意味2周目ともいえます。FlashがあれだけWeb広告の世界で熱狂して受け入れられていたところから一転、姿を消していったのは必ずしもiPhoneの登場だけとは言えないのではないでしょうか。リッチで思いも寄らない演出に気を取られ、Webサイトの本来の目的、結果と結びつくことを忘れてしまっていたということはないでしょうか。「カッコいいサイトならブランディングになる」という声もあるでしょうが、サイトの目的はブランディングだけでないということは明白でしょう。サイトの目的は何なのか、その中でリッチコンテンツはどういった役割を果たすのか、まず考えてみることが必要ではないでしょうか。

Webなのに?今求められる「エディトリアルデザイン」

Webサイトは情報を発信するメディアとして、第一党と言ってもいいほどの成長を遂げました。ソーシャルメディアの登場で「シェア」という情報伝播方法も加わり、SEO中心時代の「情報を置いておくだけ」の世界から「読み手を意識した情報」の世界へとシフトしています。さらに今までではWeb上にいなかった人が流入してきたことで需要と供給が増え、コンテンツを魅力的に見せる競争はさらに激化しているのが現状です。

web-design-trends-for-2014-13

そんななかフリーペーパーのようなレイアウトを持った情報サイトや雑誌の誌面がそのままコンテンツになったようなサイトなど、Web上で誌面を再現したようなデザインが増えています。ただ誌面を再現するだけでなく映像やインタラクティブな要素を加えることができるのもWebの強みです。ブラウザの進化やCSS、JSのノウハウの蓄積がこのようなレイアウトを可能にしています。今後もさらに魅力的なデザインのサイトが生まれてくるのではないでしょうか。

Webトレンドの背景に流れるもの

このような形で2時間ほどの講演を行いました。駆け足の内容ではありましたが、現在のWebの現場を賑わすWebデザイントレンドとその背景にある目的をおさらいすることができたかと思います。講演後Googleがリリースしたマテリアルデザインのように、Webトレンドは今後も次々に生まれていきます。その背景にはどのような目的があるのか考えていただければ嬉しいです。

web-design-trends-for-2014-14

今回このような機会にお声がけいただきましたマイナビ様、そして本講演ご来場いただきました皆様、本当にありがとうございました。

講演の最後に賞品争奪「フラットデザイン・カラーコード当てゲーム」を行いました。CreateJSを使いローカルで構築した本講演だけの特別なプログラムです。

ゲームに学ぶ”ユーザーに嫌われない”Webデザイン6つのポイント

“ゲームの楽しさを取り入れたWebデザインを考える”
ゲームって楽しいですよね。私も大好きです。最近ではゲームの考え方(ゲーミフィケーション)を取り入れたデジタルコンテンツが増えています。ゲーミフィケーションとは一体なんでしょうか。Wikipediaの定義の項目を要約すると、

  • 楽しんでもらえるようにする仕組み
  • 長く付き合ってもらえるようにする仕組み

ということのようです。確かにゲームを遊ぶと楽しいし、ハマって何時間も遊んでしまうことがあります。逆に遊んでいてつまらない、すぐにやめたくなってしまうゲームは俗に「クソゲー」なんて言われて嫌厭されています。Webサイトだって使ってて楽しく感じてもらいたいですし、もっと長く滞在してくれたらうれしい。何より「クソゲー」ならぬ「クソサイト」なんて言われたら制作者としてもショックです。ですからゲームが持つ「楽しんでもらえる仕組み」をWebデザインに適用できたら素敵じゃないでしょうか。

しかしゲームはどうして “楽しい” と感じるのでしょう。私の個人的な考えですが、自分が1入力したら1以上返ってきたとき人はそれを “楽しい” と感じる、と考えています。どんなゲームも「ボタンを押す」→「押した結果が返ってくる」の繰り返しなのです。では皆さんが想像しやすいように誰もが遊んだことのあるゲームの王様、スーパーマリオで考えてみましょう。

「1入力したら1以上が返ってくる」状態を続けよう

gamification-web-design-1

コントローラーのAボタンを押す、これが「1を入力した」状態。普通はただマリオがジャンプしてそのまま落ちてくるだけです。これだけでも楽しいけどあまり見返りがありませんね。

gamification-web-design-2

ではタイミング良くそこに敵がいたらどうでしょう。なんと踏みつけて倒すことができました。嬉しいですね。感じ方は人それぞれですがこれで「1入力した」(ボタンを押した)状態から「1以上が返ってきた」(敵を倒せた!)状態に遷移しました。

gamification-web-design-3

そして時に敵を踏みつけたついでに蹴飛ばした亀の甲羅が次々に他の敵を倒して行き華麗に1UPしてしまうこともあるでしょう。1の入力がとんでもない成果(10、100…)に化けました。これをここでは「リターンの爆発」と呼びましょう。

gamification-web-design-4

逆にボタンを押してもうまく操作できない、ボタンを押した結果がよく分からない、思い通りに行かない、理不尽に一方的にやられる…そんなとき人はゲームをつまらなく感じます。

「1入力したら1以上が返ってくる」そして「リターンの爆発」、これが繰り返されることがゲームを楽しいと感じる正体です。マリオもドラクエも、ソーシャルゲームもケータイ向けブラウザゲームもみんなそうです。「1入力したら1以上が返ってく」ればいいわけですから、捉え方次第ではいろんなものをゲームとしてとらえることもできるでしょう。Google検索だって、ウェブサイトだってゲームと捉えることもできそうですね。続けることが苦しい勉強だって(脳トレ)、フィットネスだって(Nike+)、ダイエットだって(WiiFit)、現にゲームになっているわけです。

「1入力したら1以上が返ってくる」なんて当たり前の、簡単だと思うかもしれせんが、制作したコンテンツが本当にそれを満たしているかどうか。改めて考えてみる必要があるでしょう。

1. アクションを適切に誘導できていますか?

そもそも ”1入力” がなければ何も返すこともできません。さてゲームを始めたけど何をすればいいかわからない、なんてクソゲーの典型です。ここは何のためのページですか?ユーザーが何をすればいいかわかるようになっていますか?登録画面など一連の動作が必要な場合はチュートリアルやヘルプメッセージの充実が求められるでしょう。

2. 常に「ユーザーに対してアクションを促し続ける」インターフェースになっていますか?

例えば、メールを開いたら自然と「返信」ボタンが表示されるように、行動を促すインターフェースを作りましょう。ユーザーのアクションを止めてはいけません。スクロールしたら「次へ」、商品のページでは「購入導線」、どんなWebページでも必ず次の指示、次のアクションの提示を行いましょう。

3. アクションに対して、ユーザーが期待した応答ができていますか?

ユーザーが行ったアクションに対して何が起こったかを適切につたえられていますか?ボタンを押して何も反応がない、予期した動作が行われない、のは大問題です。また「検索しても検索結果が何もない」「入力エラー処理」など予期せぬ事態に対するユーザーへの対応も重要です。「しかし、なにもおこらなかった!」だって立派なユーザーアクションへの反応なのです。

4. アクションに対する適切な演出ができていますか?

表現力はゲームが最も強みとする部分です。適切な演出がついていないとユーザーの勘違いを引き起こす可能性が出てきます。RPGならダメージと回復では違う演出がついています。もしこれがあべこべだったりわかりづらかったらユーザーは “こんらん” することでしょう。「ゲームをクリアしたときには…」「魔法を使ったときには…」「宝箱を開けるときは…」など具体的な例を思い浮かべてみるのもいいでしょう。「押すだけで楽しい!」が実現できたなら最高ですね。なめこの刈り取り作業などなどはそれだけでも楽しいことの一例です。

5. アクションが必要以上に複雑になっていませんか?

アクションのコストを下げましょう。「1入れて1以上」返さなくても「0.5入れて1以上」返せばいいのです。例えば「2つのラジオボタンと1つの送信ボタン」と「2つの送信ボタン」では同じ結果でもアクションの数が違います。最低単位は1クリック、1タッチ、1スライド。適切で簡単な入力をさせましょう。

6. アクションの選択肢が多すぎませんか?

選択の自由は選択の煩わしさでもあります。もしゲームで「HPを10回復する薬草」「HPを15回復するポーション」「HPを13回復する飲み薬」…と同じような効果でたくさんの種類のアイテムがあったら選択するのすら面倒です。大して違いがないなら選んでも選ばなくても一緒、という割り切りが必要です。ユーザーに選ばせる時点でコストになる、と肝に銘じましょう。メニューの数やカテゴリーの数はよく考えて、導線がたくさんあるのもいいですが結果的にユーザーを惑わせないように。よくソーシャルゲームなどは「決定ボタンをただ押してるだけじゃないか」などと揶揄されたりしますが、それはある意味アクションのコストを極限まで下げたゲームの形と言えるでしょう。

ゲームは長い歴史の中で「人に面白いと感じてもらえる方法」を追求してきました。ハードの性能向上によるグラフィックの変化だけでなく、もはや説明書を読んでプレイするゲームが存在しないように、プレイヤーへの対応も劇的に向上していきました。一方Webサイトにはそもそも説明書も、攻略本もありません。「楽しんでもらえる」「長く付き合ってもらえる」ために見た目だけではない、”ユーザーをアクションを促し、望んでいる反応を返す” Webデザインを制作していきましょう。

今回は「1入力したら1以上が返ってくる」ことについて集中してお話ししましたが、次回は「リターンの爆発」についてお話しします。どうすれば人は「リターンの爆発」を経験し「ハマる」のか?を考えてみましょう。