デザインは多種多様です。時代の空気に合わせて、多くのトレンドが生まれてきます。Webデザインの世界もそれは同じ、特に最近はPCからスマホへと閲覧環境がシフトしたため、大きな変化が起こっています。
ここでは、昨今のWebデザインのトレンドを振り返りこれからのデザインを探っていきたいと思います。
この記事の執筆にあたっては、毎年12月に開催されその年のWebデザインのトレンドを振り返る大規模イベント、「CSS Nite LP50 Shift10：Webデザイン行く年来る年」の内容をいくつか参考にさせて頂いています。
Webデザイン トレンドの話の前に
「トレンド」と聞くと、最先端という言葉がイメージされます。
実際に私もそうで、以前は最新情報をキャッチアップせねばという思いで、トレンドを追っていました。しかし実際のトレンドとは、その時期に人気のあるもので必ずしも最先端とは限りません。
よく「ファッションの流行は、20年前後の周期で繰り返す」と言われます。Webも普及してからそろそろ20年。ですから写真やレイアウト、フォントなどのデザインに、ちらほら一周回ってきた傾向が見え始めています。
ただトレンドは正解ではないのですから、一斉にそれに向かって飛びつくのは好ましいとは言えません。
例えばユーザビリティという言葉はすっかり定着しましたが、「こんなデザインが流行っているけど、ユーザビリティ的にどうなの？」というサイトも多く見かけます。
トレンドにただ乗っかるだけでなく、そこから自分なりの課題解決のヒントを探っていく事が大切です。
無料Eブック：成長を追求するWebサイト制作プロセス グロースドリブンデザイン入門
Webデザイントレンド ２つのキーワードと事例
シンプル&マテリアル
CSS Nite LP50を聴講しながら感じた2016年のデザインキーワードは「複雑からシンプルへ」「マテリアルデザイン」の２つでした。
ソースコードレベルではまだまだ多くのトレンドがありますが、ビジュアルデザインのキーワードとしてこの２つを念頭に、2016年にリニューアルしたコーポレートサイトを調べてみました。
任意にいくつかピックアップしてみましたが、シンプル&マテリアルに当てはまる部分が多くあったので、正直ビックリです。
Webデザイントレンドを取り入れた事例
わかさ生活
リニューアル後
リニューアル前
出典：わかさ生活ウェブサイト http://company.wakasa.jp/
目の健康を考えるサプリメント、ブルーベリーアイで有名な「わかさ生活」は、2016年12月にサイトをリニューアルしました。
以前のものに比べ、格段にシンプルなデザインになっています。新着情報欄の見出しには、マテリアル風のものを採用しています。
また、わかさ生活は「メイン画像が動画」「縦書き文字」「パララックス風のスクロール」「レスポンシブ」「マンガ風イラストの活用」など、他のデザイントレンドもいろいろ含んでいますので、そうした点でも参考になります。
松井証券
リニューアル後
リニューアル前
出典：松井証券ウェブサイト http://www.matsui.co.jp/service/?mnu=hd
文字数が多い、というイメージがある証券会社のWebサイト。
2016年10月にリニューアルをした「松井証券」は、かなりスッキリ、各パーツが大きくなり、以前のサイトに比べると格段にシンプルになった印象です。「口座開設」ボタンも、マテリアル風にチェンジしています。
他の注目点として、トップページのメイン画像の構成を見てみましょう。
メイン画像でいくつものトピックスを見せたい場合には、上下に配置した紹介ボタンで切り替わっていくというのも定番手法でしたが、リニューアル後では横へのスライドになりました。
このサイトもレスポンシブデザインを採用していますが、スマホ操作に慣れたユーザーにとっては、画像は横にスライドさせる動きの方が馴染みやすいはずです。
青山商事
リニューアル後
リニューアル前
出典：青山商事ウェブサイト http://www.y-aoyama.jp/
洋服の青山～でお馴染みの「青山商事」も、サイトリニューアルを2016年10月に行いました。
マテリアルデザインは強化されたものの、一見情報は以前にも増して多く掲載され続けているのでは、という印象です。しかしこれは、コーポレートサイトとオンラインストアを統合させた、戦略転換を兼ねたリニューアルを行っているためです。
ECはまだシンプルなデザインがベスト、という感じにはなっていませんので、別のトレンドとして追っていく必要があるのでしょう。
またこうしたサイト統合によるオムニチャネルや、デジタルマーケティング戦略に基づくデザインがどうなっていくかも、今後は注目して見ていくと良いかもしれません。
トレンドの背景はモバイル
こうした「シンプル」「マテリアルデザイン」が流行る理由は、どういったものでしょうか。
大きくはスマートフォン（スマートデバイス）の普及です。
レスポンシブを採用するため、といった制作上の理由もありますが、ユーザーがスマホからのアクセスに慣れているので、それに合わせた操作感、見た目となってきているということがあるでしょう。
ページ遷移ではなくスクロールして見ていくので、1カラムの縦長サイトへ移行してきた、というのは代表的な変化です。加えてマウスによるクリックではなくタップのしやすさ、あるいは最近だとPCではなくタブレットでタッチした際の操作感についても、考慮する必要があります。
細かな配置やビジュアルは今後もトレンドが移り変わっていくでしょうが、こうしたスマートデバイスで操作しやすい、という点は最適なUIとして定着していきそうです。
デザインの裏側：プロトタイプツールの台頭
大きく変わろうとしている制作環境
次に「制作環境の変化」です。
制作側の内容ですが、自分でデザインや制作を行っていない方にも密接な関わりがあるため、取り上げさせて頂きます。
制作環境の変化で大きいのが、プロトタイプツールの広がりです。これが業務プロセスに変革をもたらします。まず従来からのWebデザインの基本的な業務プロセスは、下記のようなものです。
企画→要件定義→設計→ワイヤーフレーム→デザイン（モックアップ）→コーディング→テストアップ→公開
文字にするとスラスラ流れる感じですが、実際には至るところで時間を要します。また、企業のサイトであれば確認や承認者も複数となるため、余計に時間がかかるでしょう。広く公開する会社の顔ですから確認の省略はできません。
ではどうすれば効率良くできるようになるかと言えば、業務プロセスの一部をまとめれば良いのです。
製品や営業といったWebに直接関わらない部門、あるいは経営層など関係者が複数いるだけでなく、意見が分かれていくのがデザイン部分です。ここは各自の好みが多く入って来るからです。
具体的には色や各パーツの大きさ、レイアウト、つまり見た目のデザイン部分に多くの指摘が入ります。
実際の現場だと、ワイヤーフレームでFIXがされていても、デザインを見せたら大きく変更になって返ってくる、というのもありがちです。
UIデザイナーやディレクターにとってみたら、これまでの議論は何だったのか、という感じになりますし、何よりプロジェクト自体の進行に大きな影響が出てしまいます。
またWebですから、画面遷移も気になるところです。デザインはOKが出たのに、テストアップしたサイトを見せると「どうしてここでクリックできないんだ」という意見が出てきます。Web担当者自身の意図ともまま違っていて、「ここ、リンクなかったんですか？」というやり取りを制作会社としているシーンによく出くわします。
そこで、「ワイヤーフレーム→デザイン（モックアップ）→コーディング」の部分をひとまとめにする業務プロセスが、数年前から唱えられています。
実際にある有名デザイナーは、このワークフロー部分をまるっとクライアントと打ち合わせをしながら目の前でやることもあります。しかし正直それは、ごく一部のスーパーな人でなければ無理なやり方です。スキル的に、すべてをカバーできる人は多くはいません。
けれどもこの部分のある程度をカバーできるプロトタイプツールが、多く出てきました。特に2016年はAdobeが「Adobe XD」の配布を開始した事で、加速しています。
また、国産のプロトタイプツール「Prott」なども多く普及しています。またAdobe XDは、早くも実装予定の機能を海外で次々発表していますので、さらなる進化は確実です。
制作側がこうしたプロトタイプツールを多く取り入れ始めた現在、発注側のWeb担当者も新たなワークフローを意識したデザインに取り組んでいく必要があるのでしょう。
こぼれ話
プロトタイプツールについては、面白いというか、困った話もあります。
CSS Nite LP50で「大まかなレイアウトと画面遷移を、提案で見せるレベルのものを作って持っていったのに、クライアントから『これで納品してください』と言われてしまった」という話が出たのですが、私も同じような経験をしました。
小規模なサービスサイトを作る際「これまであまりWebに積極的でなかった企業さんだから、図形と線だけのワイヤーフレームを見せてもイメージがつかないだろう」と思い、プロトタイプツールで簡単なページを作り提案してみました。
すると「デザインと主なページはできてるみたいだから、コンテンツの中身を作ればすぐできそうですね」と言われてしまったのです。
「デザインというほどちゃんと作っていませんから」「ここでリンクが効くのはあくまでも画面遷移の確認です。これはプロトタイプですから」と説明しても、先方は合点がいかない感じで、大いに困ってしまいました。
Webのプロトタイプの大きな目的は、UX面の強化です。前項では業務プロセスの効率化を中心に紹介しましたが、本質はユーザーへより良い体験を提供する事にあります。
UXといきなり書いてしまうと、何となく実感が薄れてしまうのであまり強調しませんでしたが、本来はワークフローで効率化できた分を、シナリオに合わせた設計や、より良いユーザー体験づくりにあてて欲しいものです。
今後考慮していきたいもの
今後、考慮していきたい非常に大切なもの二つを紹介したいと思います。
アクセシビリティ
一つは「アクセシビリティ」です。
2016年4月の障害者差別解消法の施行もあり、その重要性が問われています。誰もが快適にWebにアクセスできる、というのはとても大切な事ですから常にアクセシビリティに関しては改善されるべきでしょう。
意外と見落とされがちな領域ですが、UXの改善などと同じ考えでしっかりと取り組むべき要素として意識しましょう。
ブラウザ対応
もう一つが「ブラウザ」です。
Webの閲覧、動作で大きく問題になっていたIEの旧バージョンのサポートが無くなり、技術的な制約が少なくなりました。
しかし、企業内のWebデザインガイドラインがあまり更新されず、IEに対しての扱いもどこか中途半端になっているサイトを多く見かけます。
古いIEを無視する事で新しい技術が使え、制作効率が上がりコストの軽減にもなるのに、そこに踏み切れていないのです。もちろんセキュリティ性も向上します。
スマホが主流になった事もあり、Webサイトを100％すべての環境で同じ状態で閲覧する事は、今や不可能に近いでしょう。またすべての検証を実機でできるはずもありません。
ですから今後のWebサイトは、無数にあるアクセス環境の中から、サポートできる範囲の取捨選択をきちんと行っていくべきなのでしょう。
