こんにちは。1月も後半ですね。
京都はますます寒さが厳しくなってきました。

2014年はタブレットの所持率もますます増加し、PC、スマートフォンに限らず、より多様なマルチデバイス対応の需要が高まりそうですが、今年は一体、どのようなデザインが流行するのでしょうか?今回は、気になる今後のトレンドをまとめてみました。

フラットデザイン、グリッドスタイルレイアウト

昨年から引き続き、レスポンシブと親和性の高いフラットデザイン、グリッドスタイルレイアウトのサイトはまだまだ登場しそうです。
また、昨年はフラットデザイン×グリッドスタイルレイアウトのサイトが多く見受けられましたが、
今年はグリッドスタイルに限らず、よりレイアウトの自由度を増したフラットデザインが出てくれば面白いですね。当面廃れそうにないので、今後の変化に注目したいところです。

2014_trend_sample
http://www.thecreativeco.com.au/
オーストラリアにある制作会社のサイト。デザインはシンプルで美しく、スマートフォンで見ても、
PCで見てもブランドイメージが損われません。完成度の高いレスポンシブデザインですね。

モバイル・ファースト

今や、FICCのクライアントサイトでも、アクセスの半数以上をスマートフォンが占めることはもう珍しくありません。スマートフォンでのサイト訪問率増加に伴い、スマートフォンサイトを優先して考え、次にPCサイトを制作する『モバイル・ファースト』の考え方が今年はより浸透し、サイト制作のスタイルもどんどん変化していきそうです。
そこで、下記にポイントとなる項目をピックアップしてみました。

1.タッチデバイスのユーザーインターフェースデザイン

例えば、PCサイト→スマートフォンサイトの流れでサイトを制作する場合、PCの基本動作はクリックが大半を占めるので、スマートフォンサイトを制作するときクリック→タップに置き換えるだけにとどまりがちです。これが、スマートフォンサイトのデザインを先につくるとなるとどうでしょうか。タップだけではなく、ドラッグ、フリック、スワイプ、シェイク、ピンチ…などなど、UIの操作方法はPCサイトよりもずっと豊富です。
PCサイトが先にあると無意識のうちに操作を限定しがちですが、モバイル・ファーストの考えが広がっていくことで、見た目のデザインだけではなく、ページ遷移の方法やコンテンツの操作方法も、大きく自由度が増すのではないでしょうか。

2014_trend_sample_1
http://pattern.dk/sun/
フリックすると、まるで立方体が回転するように画面遷移します。面白い画面遷移の仕方ですね。
(※home screenに追加する必要がありますが、ぜひ見てみてください。)

2.リッチな演出などを盛り込んだデザイン

また、今後はデバイスの性能アップに伴い、デバイスの規格や制約にとらわれず、よりリッチな演出なども盛り込んだデザインが可能になってくるのではないでしょうか。FICC KYOTO BLOGを立ち上げた時、デバイスのスペック差異による制限は大きな課題でしたが、デバイスの性能向上によってデザインの自由度が増し、よりリッチで快適なデザインを実現できれば、とても嬉しいことですよね。

2014_trend_sample_2
左:http://www.spektrummedia.com/ 軽快なアニメーションが見ていて楽しい。
右:http://oneiota.com/ アクセスする度に画面が異なり、ランダムに変化するタイポグラフィが面白い。

3.マルチデバイス対応しつつ、デバイスによる表示の差異を少なくし、
ブランドイメージやトーン&マナーを統一する

私は、PCでサイトを見て、「すごくかわいい!」と思ったサイトにスマートフォンからアクセスした時、デザインが全然違っていたり、使いづらくてガッカリしてしまうことがよくあります…
一度そう思ってしまうと、もう一回そのサイトをスマートフォンで見ようとは思いませんよね。

そうならないように、どんなデバイスで見ても印象がブレず訴求力を損なわない、シンプルでわかりやすいスマートフォンサイトが求められてきています。
例えば、フラットデザインやグリッドスタイルレイアウトもリンクの面積が広く、タップ・クリックしやすいという点で、そういった条件を満たしていますね。

2014_trend_sample_3
http://bunq.co.uk/
スマートフォンで見ても、PCで見ても、無理なくイメージが統一されていて非常に美しいサイト。

4.マルチデバイス対応の手間を軽減・簡略化したデザイン

マルチデバイス対応をよりスムーズに行うため、Webフォント、CSS3などを駆使し、極力画像に頼らずデザインすることでメンテナンスや運用作業を軽減するなど、マルチデバイス対応の敷居を下げる工夫が今後はさらに必要になってきそうです。
こういった需要は、実際にクライアントワークでも非常に強く感じています。

2014_trend_sample_4
左:http://ponscreative.com/ Webフォント、CSS3を使用しているサイト
右:http://roxannekoranda.com/ bootstrapを使用しているサイト

その他、タイポグラフィをダイナミックに用いたデザイン、ネオンカラーも今年のトレンドです。どちらもシンプルですが訴求力の高い手法なので、スマートフォンサイトでも取り入れやすいですね。

2014_trend_sample_5
左:http://www.dasselundwagner.com/en/ タイポグラフィの印象的なサイト
右:http://incub.ro/ ネオンカラーをうまく取り入れて世界観を表現しているサイト

新しいタブレットやスマートフォン端末の登場、解像度の変化など、2014年も何が起るかわかりませんが、常にベストなかたちで柔軟なデザインを心がけたいですね。


【参考資料】iOSヒューマンインターフェイスガイドライン
アプリのインターフェイスに関する資料ですが、操作方法について「タップ」ではなく「ジェスチャ」に主軸を置く考え方や、「直接操作」「メタファ」など、iPhoneに限らず、タブレットでの閲覧を考えたデザインについて、参考になるキーワードがいっぱいです。この記事の執筆にあたって、一部参考にさせていただきました。