去る6月25日（水）、竹橋マイナビルームにてマイナビ様が主催する「Creator’s Career Lounge（以下、CCL） vol.6」が開催され、FICCから戸塚、福岡、冨田、STANDARD社から鈴木 健一氏が登壇しました。「Webデザイントレンドの潮流」をテーマに、これまでのWebデザインが歩んだ歴史と背景、そして現在Webの現場で活躍するWebデザイン技法について、約2時間に渡った講演の内容を振り返ります。
スライド
デザインには目的がある
大前提として、ここでお話しする「デザイン」とはただのスキンやその作り方だけの話ではありません。「買ってほしい」「知ってほしい」「シェアしてほしい」などの目的を達成するための手段がデザインなのです。目的が変わればデザインも変わります。そしてWebサイトを取り巻く環境の変化によって目的もまた変化してきました。
環境の変化、要求の変化、デザインの変化を振り返る
まずWeb制作の環境の変化を、FICCが設立された2004年を起点に振り返ります。2004年のFlash全盛期から2006年のWeb動画登場で一気にリッチコンテンツに傾いていった一方、2005年のmixi、ブログブーム、その後のソーシャルメディア勃興とIT分野の発展も目覚ましく、広告・サービスが平行して時代が進みました。
しかし2008年、iPhoneの登場によってWeb制作の現場は一転。FlashからHTMLへ、Web制作の潮流が一気に変わります。iOSの特徴的なスキューモーフィックなデザインはWebの世界に流入し大きなトレンドに成長しました。やがてスマホの普及とバリエーションの増加、さらにタブレットの登場でターゲットととなる閲覧環境が分化していった、これが現在に繋がるWeb環境の変化でした。その時代を反映するように、Web制作のトレンドが発生し、変化していったのです。
ただの流行ではないフラットデザインの意義
現在のWebデザインにおいて最も特徴的なトレンドと言えば「フラットデザイン」でしょう。iPhoneの流行とともに世界を席巻したスキューモーフィックデザインでしたが、現在はそれを塗り替えるかのようにフラットデザインが主流となっています。なぜこのような変化がWebデザインの現場に起きたのでしょうか。大きな要因の一つとしてコストの問題が挙げられるのではないでしょうか。スキューモーフィックデザインでサイトを一通り作るとなるとボタン一つを制作するにも時間と労力がかかります。また現実にある楽器のツマミをスクリーン上で再現しても実際につまんで操作できるわけでもないように、リアリティのあるデザインがユーザビリティの向上に結びついていたのか疑わしい部分もあります。ボタンがボタンとしてユーザーに理解できるのであれば、スキンがリアルであれフラットであれ効果は変わらないはずなのです。
ではフラットデザインの利点とは何でしょうか。それは解像度にデザインが左右されないという点です。iPhoneの登場以降、ブラウザ内で拡大・縮小を行えることが当たり前になり、Retina解像度を持つスマホや、画面サイズの異なるタブレットの登場により、「ピクセルパーフェクトなデザイン」を行うことが理に適わなくなってきました。CSS上で再現できる、解像度に囚われないデザインとしてフラットデザインは非常に適しています。余白を使ったデザインであるところが情報の整理にもなり、そして自然とコンテンツを引き立てるデザインであることも人気に繋がった要因ではないでしょうか。
一方でフラットデザインにも苦手とすることがあります。
冨田「同じキャンペーンサイトをフラットデザイン、スキューモーフィックデザインそれぞれでデザインしましたが、フラットデザインでは “盛り上がり感” の演出に欠ける部分があります。情報整理と演出、それぞれのデザインの良いところを適宜利用するのが望ましいのではないでしょうか」
フラットデザインはあくまで器であり、そこに入るコンテンツをどう伝えるかを一番に考える必要があるのではないでしょうか。
レスポンシブデザインは自由のために自由を捨てている？
1つのHTMLソースで複数のデバイスでの表示に対応したサイトを作る「レスポンシブデザイン」。既に多くのサイトで取り入れられている技法です。1ソースでページを管理することによるコストの低減を目的とすることが多いレスポンシブデザインですが、本当に低コストでのサイト制作に繋がるのでしょうか？
コストを下げる要因としては「ワンソースなので管理がラク」「（UAなどを使った）事前のページ振り分けを考えなくていい」という2点が挙げられます。ウィンドウ幅だけでビューを変えることができるからこその大きな利点です。一方コストを上げる要因になりうるのが「デバイスによってコンテンツを大幅に変えることができない」「結局CSSを書く総量はさほど変わらず、むしろ保守が難しくなる可能性がある」「JSの対応に注意」「各種ブラウザ対応（特にIE）」です。扱い方を誤れば手数が増えてしまう可能性があるのもレスポンシブデザインの特徴です。コンテンツの性質もあわせ、事前にレスポンシブデザインに適したサイトであるか確認する必要があるでしょう。
レスポンシブデザインの目的はそもそもマルチデバイス対応です。マルチデバイスに対応したサイトの作り方は他にもあります。まず「viewportを固定しサイトを拡大・縮小して表示」する方法です。iPhoneのサイトがスマートフォン対応をしていない、というのは有名な話ですが、そもそもスマホブラウザは拡大・縮小が標準の機能となっています。むしろレスポンシブデザインで拡大・縮小機能を殺してしまうことで、ユーザビリティが低下する可能性だって考えられるのです。文字サイズを大きく設定する（16px以上が目安）など読みやすさを向上させる工夫を施しましょう。また「そもそもスマートフォン向けサイトだけを作る」という発想もあります。最初から小さいスクリーンサイズに向けて作れば、PCでも表示できるわけです。ファーストフードの短期キャンペーンなどでよく見られる手法です。
戸塚「キャンペーンサイトでは、こうした方法で作成することも少なくないです。例えば、メインユーザーが若年層で、スマホユーザーが多いとか、予算の関係でPC版とスマホ版の両方は作れないというケースなど、必ずしもレスポンシブデザインが必須というわけではなくなってきました」
大切なのはまずユーザーがどのようにコンテンツを閲覧するか考えることです。レスポンシブデザインの採用を決めるのはその後に考えましょう。
楽しい？苦しい？「パララックスサイト」の使いどころ
突然降って湧いたように出現した「パララックスサイト」。ウィンドウスクロールに応じて演出を発生させる技法の総称として用いられていますが、そもそもなぜこれだけの流行を見せることになったのでしょうか？近年ではPCのトラックパッドの進化や、スマホの登場により、スクロールすることの抵抗感がなくなりました。するとクリックよりもスクロールの方がアクションのハードルが下がり、コンテンツをページに分割しない、1ページ完結型のサイトが増加しました。そんな中、クリックが発生しない中で演出を加えると考えると、スクロールにフックすることしか考えられなかったということではないでしょうか。
しかしスクロールに演出を加えたり、スクロールを制御したりする行為はユーザーから反感を買うこともしばしばです。挙動も重く、読み込み量も多いとなればユーザーは「不要な演出」と感じるでしょうし、スクロールをJSでコントロールすることで「いつものスクロール感覚と違う」気持ち悪さを感じます。パララックス演出はこの注意点を踏まえた上で導入を検討しましょう。
本講演ではスクロール量に応じた演出が入る「イベント型」とコンテンツをページに別けて表示する「ページ分割型」の2種類を定義しました。「ページ分割型」は演出というよりむしろ新しいUIの形と捉えてもいいかもしれません。スクロールは現代のWebサイトと切っても切れない大切な要素です。
Flash以後のリッチコンテンツ復権
Web広告の分野に置いてあれだけの存在感を放ったFlashも、iPhoneの普及によって追いやられてしまった現在。Flashの採用は少なくなりましたが、リッチコンテンツが再び増えつつあるように感じます。
canvasタグやWebGL、UnityといったFlashと競合となるテクノロジーの成長だけでなく、今までFlashできなかったアニメーション、映像、音楽といった演出がHTML5やCSS3、JSの組み合わせでも実現できるようになってきたことも背景にあります。
旧来のFlashサイトでは一つのFlashを全画面展開し、その中でコンテンツを描画するものでしたが、今ではHTMLにとけ込む形でパーツとしてリッチコンテンツを使う、というケースが多いのではないでしょうか。
リッチコンテンツが盛り上がるのはある意味2周目ともいえます。FlashがあれだけWeb広告の世界で熱狂して受け入れられていたところから一転、姿を消していったのは必ずしもiPhoneの登場だけとは言えないのではないでしょうか。リッチで思いも寄らない演出に気を取られ、Webサイトの本来の目的、結果と結びつくことを忘れてしまっていたということはないでしょうか。「カッコいいサイトならブランディングになる」という声もあるでしょうが、サイトの目的はブランディングだけでないということは明白でしょう。サイトの目的は何なのか、その中でリッチコンテンツはどういった役割を果たすのか、まず考えてみることが必要ではないでしょうか。
Webなのに？今求められる「エディトリアルデザイン」
Webサイトは情報を発信するメディアとして、第一党と言ってもいいほどの成長を遂げました。ソーシャルメディアの登場で「シェア」という情報伝播方法も加わり、SEO中心時代の「情報を置いておくだけ」の世界から「読み手を意識した情報」の世界へとシフトしています。さらに今までではWeb上にいなかった人が流入してきたことで需要と供給が増え、コンテンツを魅力的に見せる競争はさらに激化しているのが現状です。
そんななかフリーペーパーのようなレイアウトを持った情報サイトや雑誌の誌面がそのままコンテンツになったようなサイトなど、Web上で誌面を再現したようなデザインが増えています。ただ誌面を再現するだけでなく映像やインタラクティブな要素を加えることができるのもWebの強みです。ブラウザの進化やCSS、JSのノウハウの蓄積がこのようなレイアウトを可能にしています。今後もさらに魅力的なデザインのサイトが生まれてくるのではないでしょうか。
Webトレンドの背景に流れるもの
このような形で2時間ほどの講演を行いました。駆け足の内容ではありましたが、現在のWebの現場を賑わすWebデザイントレンドとその背景にある目的をおさらいすることができたかと思います。講演後Googleがリリースしたマテリアルデザインのように、Webトレンドは今後も次々に生まれていきます。その背景にはどのような目的があるのか考えていただければ嬉しいです。
今回このような機会にお声がけいただきましたマイナビ様、そして本講演ご来場いただきました皆様、本当にありがとうございました。
講演の最後に賞品争奪「フラットデザイン・カラーコード当てゲーム」を行いました。CreateJSを使いローカルで構築した本講演だけの特別なプログラムです。