2015年に量産されたWebデザインやトレンド

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

自社サービス、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がモバイルフレンドリーなサイトを検索結果で優先するという発表をしました。スマホ対応できているかどうかが検索順位の決定に関わってくるとなり大きなニュースとなりました。みなさんの中にもこれが影響してお仕事となった案件も少なくないのではないでしょうか。