モバイルオンリー、グリッドの使い方の変化、ボタンに使われるアニメーションなど、Web制作者が備えておきたい現状とトレンドを解説

Post on:2017年2月16日

01. Webデザインのスタンダードは、モバイルデザインに

2016年は「モバイルファースト」の年でした。そして、2017年はついに「モバイルオンリー」の声が聞こえてきます。

行き過ぎだと思いますか？
実際のところ、2015年には上位サイトへのすべてのトラフィックが、モバイルで56％を占めていました（2015年トラフィックレポート）。この割合は上昇し、2016年のデータはまだありませんが、専門家はモバイルのトラフィックが全体の60％を大幅に上回っていると考えています（モバイルのトラフィックは増加し続ける唯一のデバイスです）。

デスクトップユーザーのためのWebエクスペリエンスを考え、それをタブレットとスマートフォンの画面に適応させていた日が過ぎ去って久しく感じます。あなたにデザイナーとして期待されているのは、モバイル向けにデザインすることです。それはほとんどのユーザーをカバーします。

もし何かに適応させるのなら、それはデスクトップ版にです。モバイルはWebデザインの新しいスタンダードです。これは、ハンバーガーメニューや隠されたメニューや幅いっぱいのスクリーンなどのモバイル的な特徴が、デスクトップサイトでも一般的に利用されることを意味します。

モバイルオンリーは、ここで挙げるリストのほとんどのトレンドで共通のテーマになります。

02. プログレッシブWebアプリ

プログレッシブWebアプリとは、通常の（ネイティブ）アプリと似ていますが、ブラウザ上で動作するアプリのことです。アプリを利用するためにダウンロードする必要がなく、普通のWebページのようにブラウザで利用できます。

ネイティブアプリのストアアプリのように、デスクトップやホーム画面からアプリを起動できますが、アプリストアが存在する必要はありません。

このことはオンラインのデザインにどのように関連しているでしょうか？ 2点あります。

1つ目は2016年の時に書いたように、Webデザインはアプリデザインに似ていました。これは開発段階であっても当てはまります。Webのエクスペリエンスはアプリのように感じられ、アプリのようにコーディングされます。

2つ目はますます多くの制作者が、ネイティブアプリの設計からプログレッシブWebアプリの開発に移行することです。2017年末にはWebの大部分がアプリのように見え、またそのように感じるでしょう。そしてそれ以外は、時代遅れに見えてしまいます。

アプリストアが完全に消えるということではありません、少なくとも2017年にではなく。しかし、「アプリ」と「アプリストア」が2つの独立したコンセプトになる年です。

プログレッシブWebアプリについて詳しく知りたい時は、GoogleのProgressive Web Appsやインフォグラフィックを確認してみてください。

参考: 2016年のWebとグラフィックデザインのトレンド

03. スピナーから、スケルトンスクリーンに

昨年、私はすべてがユーザビリティに関係があると言いました。そのトレンドはまだ続いています。

スケルトンスクリーンは、Webサイトやアプリの見た目に関するものではありません。ロード時のものです。ユーザエクスペリエンス（UX）の最新のトレンドを見てみましょう。

source: Animation and the User Experience

ロード時のスケルトンスクリーンは、Webやアプリのエクスペリエンスができるだけ速くなるようにするためのシステムです。これはページを段階的にロードすることで実現されています。最もシンプルな要素から最も複雑な要素まで、常にあなたが閲覧しているスクリーンに最低限の要素を表示します。

この方法は、ユーザーがロードする予定のものを予測したり予期したりすることができます。スピナーやステータスバーの目的とはまったく逆です。2017年、このスケルトンスクリーンはより多く見かけるようになるでしょう。

04. マイクロインタラクション

マイクロインタラクションは、ユーザーが特定の操作をしたときに引き起こされる小さい視覚的な合図です。

マイクロインタラクションは、ユーザインタラクションの構成単位です。あらゆるデバイスで、あなたが設定を変更するたびに、マイクロインタラクションを使用しています。例えば、ボタンをホバーするとそのカラーは変化します。いいねをした時なども同様にマイクロインタラクションです。

優れたマイクロインタラクションは、サイトやアプリを成功へと導きます。ハンバーガーメニュー、Facebookのいいね、自動修正、自動完了などは、素晴らしいマイクロインタラクションの典型的な例として評価を得ています。

これからもわたし達はWeb上で、ますます多くのマイクロインタラクションを見るでしょう。よく使用され、ユーザーのフィードバックと同様にサイトやアプリに機能を加えます。マイクロインタラクションはユーザーにその操作が変化を引き起こしたことを知らせ、それを再び行う必要はありません。

正しく機能させるには、サイトやアプリに適切な一つの目的を持つ必要があります。もしユーザーがインタラクションから何も得られなかった場合、あなたのユーザビリティは向上するのではなく、不快な経験をすることになるでしょう。

顔文字のマイクロインタラクション

また、マイクロインタラクションはより長いプロセスまたはインタラクションを簡単に代用することができる。例えばユーザーに意見を求める時に、数種類の顔文字から選択させることで、退屈なフォームを作成する必要がなくなります。

05. グリッドの古い考え方に固執しない

2017年は、ほぼすべてのブラウザでCSS Grid Layoutを使用できるようになる年です。
参考: 「CSS Grid Layout」を使って、レスポンシブ対応の3カラムレイアウトを実装するチュートリアル

CSS Grid Layoutを使用できるということは、Webサイトのレイアウトのために完璧なレスポンシブ対応のグリッドを構築することが今まで以上に簡単になることを意味します。皮肉なことに、多くのデザイナーはコンテンツを配置するときに幾何学的なグリッドに対応させることに疲れました。そのグリッドから卒業する時がきました！

伝統的な真っ直ぐなグリッドに揃えない要素は、新しいスタンダードになります。より伝統的な企業サイトでも、それらを採用するようになります。古いグリッドに固執するWebサイトは色あせて見えるようになるかもしれません。

Hometown Trolley

06. 垂直に分割したレイアウト

ここ数年は水平に分割するのが標準でしたが、最近では特にランディングページで垂直に分割したレイアウトを採用するサイトが増えてきました。垂直の分割はトップページやランディングページで非常に機能します。

その大きな理由はユーザーに2つの選択肢を提示することができ、しかもそれら以外の要素を見せる必要がないということです。レイアウトは多くの場合、ネガティブスペースと大胆なタイポグラフィを組み合わせてデザインされています。

垂直のモジュールは、2つ以上にすることもできます。こうすることで、サイトのナビゲーションに最適な面でコンテンツを分割し、複数のコンテンツを見せるためのスライダーより優れたソリューションになります。コンセプトが非常に似ているため、大きい写真を中心にしたメニューを見逃さないようにしてください。

source: cloudfront

07. SVGの更なる進化

SVG(Scalable Vector Graphics)は、1999年から存在していたベクターの画像フォーマットです。登場以来、SVGはどのようにして2017年の重要なトレンドになったのでしょうか？

大きな理由が2つあります。解像度とロード時のスピードです。

SVGは拡大縮小が可能であるため、解像度に依存せず、あらゆるデバイスやサイズに関係なく、どんなスクリーンでも完璧に表示されます。このことは、通常の解像度のスクリーン用とRetinaスクリーン用の2つの画像ファイルを用意する必要がある問題を解決します。これは、ロゴやブランディング要素にとって大きい問題です。ロゴを一度作成するだけで、いつでも好きなようにでき、サイズに関係なく美しく表示されます。

一つ例を挙げると、新しいTNWのロゴはSVGファイルです。好きなだけブラウザを拡大して見ることができます。ロゴにはピクセルのノイズはありません。

また、SVGはページスピードに関する限り、httpリクエストをしません。これはSVGファイル自体がテキストに過ぎないため、ブラウザで読み込まれるのが速いからです。そして、あなたが知っているように、ますますモバイルではページスピードが重要です。

しかし最近では、人気の理由がさらに増えています。SVGはアニメーション化することができ、ロード時間に負担をかけることなく幾何学的な背景（ついでにもう一つの大きなトレンド）を作成するのに最適です。
SVGを好きではない点は何かありますか？

08. スクロール連動のアニメーションとシネマグラフ

スクロールして要素をアニメーションさせるのは、特に目新しいものではありません。そういった派手なギミックではなく、コンテンツのストーリーテリングのための重要な役割になりました。ページを下にスクロールさせて表示されたすべてのアニメーションは、ストーリーを伝えるべきです。Mac ProのサイトでAppleは、先駆的役割を果たしました。

もし実装が難しいと思う場合は、Adobe Sparkをチェックしてみてください。誰でも無料で利用することができます。ストーリーを喋っているのと同時に、素晴らしいページやグラフィックスを構築することができます。

しかし、それがアニメーションのすべてではありません。GIFが再び人気になっているのを知っていますか？昔のGIFアニメではなく、シネマグラフと呼ばれるものです。

シネマグラフとは画像の小さな一部に繰り返しの動きがあり、アニメーションのループを作成します。背景が静止しているので、人間の目はコントラストのある動く部分にすぐに引きつけられます。

見た目のインパクトが強いので、コマースサイトやバナー広告で広く使用されます。

09. アニメーションするアクションボタン

アニメーションは進化し続けています。アクションボタンを目立たせるために、形を変えたり、カラーを変えたり、そして次に試すことは何でしょうか？アニメーションがオススメです！

ポップアップやフライインと同じではありません。アクションボタンのアニメーションは、ボタンの内側に動きがあることを意味し、クリックするように促します。ただし、アニメーションが正しく行われていない場合、そのアクションボタンは迷惑になります。

アクションボタンのアニメーションをどうするか、インスピレーションを探す時は下記が参考になります。

PureCSS Call-to-Action Animated Buttons

10. グラデーションとデュオトーン

グラフィックデザインでは、2017年に2つの復活があります。グラデーションとデュオトーンです。

Photoshopの熟練者は2つともすぐに認識するでしょう。これらは何年にも渡り人気があったエフェクトでした（ミニマリズムやフラットが現れる前まで）。

グラデーションとデュオトーンは実際には同じエフェクトで、同じカラーの2つの色合い、またはブラックとカラーの色合いでイメージにエフェクトを与えます。通常、グラデーションはフラットな背景に適用するときに、決まったパターン（水平、円形など）で使用されます。デュオトーンは画像にオーバーレイで2つのカラーを適用するときに、頻繁に使用されます。この2つのカラーを使ったオーバーレイは、印刷デザインからきたものです。

Spotifyのデザインが、2016年にデュオトーンの先駆的役割であったのは間違いありません。Pantoneも2016年のトレンドカラーは2つのカラーを選びました。

Spotifyのデザインにあるように、デュオトーンはブランディングに最適です。そのため、世界中のブランドやデザイナーに受け入れられています。

Spotify

11. レトロの最近のトレンドは80年代

レトロなデザインが次第に消えていくことは決してないでしょう。オンラインツールやデバイスへの依存が高まるにつれて、ポラロイド写真やレコードプレーヤーや90年代のビデオゲームなど、親や兄姉の世代のものが欲しくなります。

レトロウェーブと呼ばれるムーブメントは、ネオンカラー、ヤシの木の背景、そしてマイアミバイス時代を思い起こさせる80年代のグラフィックスタイルをもたらしました。80年代のテキストエフェクトと背景を生成する無料のオンラインツールもあります。

Retro Wave

このトレンドの過激主義者は、ブルータリストです。90年代初期のテキストとリンクだけのWebサイトと同じように、デザインに譲歩することなくWebを探し求めています。ブルータリストのWebサイトに興味があるなら、Brutalist Websitesを見てみてください。

12. テクスタイルデザイン

Material Designは、2016年のトレンドとして人気がありました。しかし、トレンドとは同じものが長続きすることはありません。この後に続くものは何だと思いますか？

テクスタイルに注目が集まっています。フラットデザインによってテクスチャや奥行きが禁止されていましたが、Material Designで再び注目されるようになりました。テクスタイルデザインは異なるデザインのメタファで、3Dの質感をもたらします。そのゴールは、単にそれらを見るのではなく、触れることができれば、オブジェクトがどのように「感じるか」を伝えることです。

Material Designとスキューモーフィズム（現実世界のように見えるスタイル）との間の橋渡しと考えてください。

13. ミニマルにデザインされたロゴ

グラフィックデザインのすべての分野において、ミニマリズムがここ数年の間非常に人気が高いです。わたし達は今、その覇権の最後の日々を目の当たりにしているかもしれません、少なくともWebデザインにおいて。しかし、ミニマルなスタイルは消え去るのではなく、より強くなっている特定の用途があります、ロゴとブランディングです。

前述したように、Web全体が近いうちにアプリのように見えるという事実によって、このことを説明することができます。アプリのインターフェイスでは、ロゴやブランドの要素はユーザにとって重要な機能を犠牲にしてまで注目を集めるための要素ではありません。このことがブランドのミニマリズムが理にかなっている理由であり、将来的にはますます増えてくるでしょう。

Source: minimalist rebrands

なぜロゴのデザインをミニマルにするか技術的な説明は、Business Insiderの記事をチェックしてください。

14. 大胆なカラーとタイポグラフィ

これはMaterial Designで使用される大胆なカラーパレットで注目され、2016年に始まったさらにもう一つのトレンドです。まだ広く採用されていませんが、2017年にはさらに増えると予想されています。大胆なカラーとタイポグラフィは、メインとなる要素が配置されたトップページやランディングページで見かけます。

ToyFight

空白スペースはホワイトである必要はありません。要素が目立つように使用され、美しいカラーで満たされています。

一つ注意点があります。すべてのデザインで大胆なカラーパレットを使用することができますが、必ずしもそうしなければならないということではありません。すべてのトレンドがそうであるように、他の方法、ソフトなカラーやパステルカラーを使用することもできます。この後の手書きのフォントなど、他のトレンドとも相性が良いです。