こんにちは、ナガタです。

自社サービス、universionsの大幅バージョンアップなどなど少しそちらに集中しており、更新が度々途絶えてすみません。

のちほど大幅バージョンアップについても記事書きたいと思います。

2015年もそろそろということで、今年のトレンドと次のトレンドについて考えてみたいと思います。

1カラム、ミニマル、モバイルファースト、マテリアルデザイン

2014年からの流行もありますが、2015年でどっと増えたデザインの特徴をいくつかあげてみます。

1カラム

サービス系、ブランド系サイトでとても増えた印象があります。
これまで右にサイドバーが設置されていた設計から、ストレートに１カラムで設計されたものが増えました。

サイドバーがある設計

引用：NTTドコモ ホーム

1カラムの例

引用：Uber – Tokyo

並べて見るとそもそもの情報量に大きな差がありますね。
また、視線誘導の点からも大きな違いがあります。

Webデザインをされている方はご存知と思いますが、Zパターン、Fパターンというものがあります。
「グーテンベルク・ダイヤグラム」と言われているものです。

「視線の動きを意識して、コンテンツを配置しましょう」みたいな話です。

サイドバーがある場合はF型ですね。Fの右先端にサイドバーがチラチラと見え、下に降りていきます。
では１カラムが増えた理由はなんでしょう。

スマートフォン向けデザイン

これはとても大きいと思います。縦長かつディスプレイ幅が限られているスマートフォンでは２カラムは本来のコンテンツを阻害します。そして、小さく表示されるものはタップしにくく、操作性もとても悪いです。
でもPC版もなぜ合わせる必要があるの？という点については制作側の作りやすさもありつつ、PCサイトのおまけでモバイル用を作る時代から、スマートフォン最適化がメインになっている時代に影響されているのではないかと思います。つまり、スマートフォン最適化になれたユーザーはPCサイトのサイドバーがあっても目もくれず、むしろノイズになりかねないわけです。

1カラムになると楽？

１カラムになると設計は楽になるでしょうか？
ユーザーにとってノイズがはいらない反面、偶発的な出会いが少なくなります。つまり、Webページを回遊する確率が多少なり下がります。

そして１カラムということでコンテンツに集中できるわけですが、視線の動きというものは１カラムであっても意識する必要があります。

• 同じアイコン、同じ形、同色で関連度をつける
• 矢印らしきもの（明確に限らず）で次のコンテンツを暗に示す

等の工夫は必要ですね。

また、１カラムになることで画像を大きく使えるため、高解像度の画像を用意する必要もあります。
２カラムデザインに比べ中央揃えをするコンテンツも増えますね。

ミニマル

これは2015年より前からの流行にあり、現在も流行っていますね。
考え方は1カラムで挙げたものと似ていると思います。必要最小限のデザインと適切なスペースで情報のまとまりとコンテンツに集中できるデザインで設計します。
情報を最小限にすることで視線の設計や、余白の美しさ等を考えなければなりません。

モバイルファースト

サイトをみるデバイスがPCからモバイルにシフトし、「いつでもすぐ使える」スマートフォンで閲覧されることが多くなりました。
Web制作従事者となるとPCが直ぐ側にあり、なかなか実感は少ないかもしれませんが世の中はそうなっているようです。

そしてここでもUI的配慮が最も重要な部分になります。
PCに比べてスマートフォンは制限があります。スクリーンサイズや通信速度等ですね。それに変わり、位置情報やカメラ、マイク、ジャイロセンサー等の標準の機能性も高いです。

2015年、後者の機能性をつかったサイトも生まれてきましたが、まずは前者の制約に対応することが重要でした。
Googleがモバイルフレンドリーなサイトを検索結果で優先するという発表をしました。スマホ対応できているかどうかが検索順位の決定に関わってくるとなり大きなニュースとなりました。みなさんの中にもこれが影響してお仕事となった案件も少なくないのではないでしょうか。

• テキストの大きさ
• リンク同士の距離
• モバイル用Viewport設定
• コンテンツ幅とデバイスのサイズ

などなどを意識する必要があります。あとは表示速度ですね。4G、3Gを意識したファイルサイズにしましょう。

マテリアルデザイン

2013年から2014年にかけてフラットデザインというグラデーション等を利用した立体感のないデザインが流行しました。しかし2015年はマテリアルデザインというものもでてきています。
フラットデザイン2.0と呼ばれたりもしていますね。

フラットデザインが流行すると、過去のグラデーションがかったものが古臭く感じてしまうため、様々なサイトがフラットデザインを採用してきました。
しかし、流行とはいえ新しい手法なため、それによってクリック率がどうか、などの数字的観点はまだ未明でした。

マテリアルデザイン、またフラットデザイン2.0が生まれた背景はそのクリック率がどうか、という結果によるものです。

フラットすぎてしまうWebデザインは、クリック可能かどうかを判別するのが非常に難しいです。それに比べ過去のデザインでは立体効果があり、浮き出ているものはクリックできそうで、へこんでいるものは入力できそうというユーザビリティがありました。しかし、それも極端であったといえるのかもしれません。

そこで最近では、セミフラットでバランスの取れたものにしよう。となっています。ユーザビリティを損なわず、でも古臭くならない。
そんなデザインが最先端になっているのではないでしょうか。

• 僅かなシャドウ
• 細かいハイライト

を駆使し、微妙な奥行きを表現します。
アフォーダンス（見た目から連想する機能）をきちんと設計したデザインです。

また、レスポンシブインタラクションも重要です。ユーザーの操作にあわせて、レスポンスを返します。
はじめのデザインが「押せる感」だとすれば、レスポンスは「押された感」をきちんと演出します。

重要なのは、フラットデザインがただ立体的になった、シャドウがかかったデザインではなく、各素材や目的を意識した設計だという点です。

Webのトレンドはどこからやってくるのか

やはり、Webのトレンドは海外からやってくることが多いようです。
フラットデザイン然り、マテリアルデザイン然り、海外で評判のよい、提唱されたデザインルールが海をわたって日本にも来ます。

いくつか海外のデザインキュレーションメディアをご紹介しますので、是非確認してみてください。

Design Bombs – Droppin’ design bombs everyday!

Awwwards – Website Awards – Best Web Design Trends

FlatDSGN – Freebies and Inspiration Resources in the Flat Design

Best Web Gallery

まとめ

年の瀬ということで、2015年のWebデザインを振り返ってみました。
デザインだけでなく技術的にも様々な変化がありましたが、いつになってもインプットしつづけないとついていけない業界だなとビクビクしました。

今年もまだまだ残っておりますが、暖かくして過ごします。