今年も半分以上過ぎましたが、2018年はすでにWebデザインにとって特筆すべき年となっています。ここ数年におけるデザインの進化が実を結びつつあり、それはデザインシステムやタクタイルデザイン（Tactile Design）といったトレンド、レトロスタイルの復興といった楽しく精力的なスタイルから見てとれるでしょう。Webデザインで何が起きていて、将来どのようになるのかを熟慮することが、これまで以上に必要不可欠となっています。
この記事では、2018年のもっとも影響力のある６つのWebデザイントレンドを取りあげます。１つ目は、新しくデザインの必需品になりつつあるトレンドです。
１. コンポーネントベースのデザインシステム
まだ会社でデザインシステムを導入していなくても、数年の内には導入することになるでしょう。2017～18年のUX業界報告によると、調査した企業の内、まだデザインシステムを持っていない企業の67％が、現在構築中であると述べました。
デザインシステムの人気には合理的な理由があります。デザインシステムは、スタイルガイドやパターンライブラリから発展したものですが、現代の会社のニーズをより満たすことができるのです。
MailChimp Design Systemに基づいて作られたMailChimp
デザインシステムとは何か？
デザインシステムには、デザインスタンダードや文書のほかに、パターンやコードなどのUIツールキットが含まれます。特にツールキットを内包していることは、もっとも秀でた長所の１つです。デザインシステムは、会社の各製品に一貫性をもたらし、あらゆる状況において最適なデザインソリューションを提供することを目指します。
Nathan Curtis氏曰く、「デザインシステムはプロジェクトではなく、製品のための製品」なのです。
デザインシステムは、一部だけを変更できるように設計されており、新しいソリューションやより良いソリューションが現れるたびに、自動的にアップデートされ続ける「生きた文書」と言えます。
デザインシステムにおいて、デザインはどのように扱われるのでしょうか？ 事例として、Shopifyが使用しているPolarisデザインシステムを見てみましょう。デザインシステムは、下図のように４つのエリアに分類できます。
- 製品原則：アクセシビリティの重視といったプロダクトデザインに関する理念やアプローチ。
- 文書コンテンツ：文法やスペルの選択肢、表現やトーン、対象の読解レベルなどの包括的なガイドラインを含む、すべての文書コンテンツのスタイルガイド。
- ビジュアルプロパティ：色、タイポグラフィ、画像のガイドライン、アイコン、チャートの体裁など、すべての視覚的な要素。
- コンポーネント：基本となるデザインパターンとその利用に関する規約、実際のコードなど。
ShopifyのPolaris Design System
デザインシステムの作り方
電子書籍『Creating a Design System: The 100-Point Process Checklist』で述べられている以下の７段階に従えば、独自のデザインシステムを作り出すことができます。
- UIインベントリを作る：すべての製品とWebサイトをチェックして、使用されているデザインパターンをリストアップしましょう。一貫していないものがあれば修正してください。
- 会社や組織からのサポートを得る：調査結果を発表し、ほかの皆の同意を得てください。余計な仕事で浪費されてきたデザインやエンジニアリングの時間を測定し、デザインシステムで合理化された製品がNPSスコアを改善できることを伝えると説得しやすくなるでしょう。
- デザイン原理を確立する：会社全体を左右する原理は何ですか？ 答えをマスターリストにまとめましょう。
- カラーパレットを作る：適切なカラーコードを使用してカラーパレットを標準化し、汎用命名規則（UNC）の合意を得ましょう。
- タイポグラフィの基準を決める：フォントのサイズ、太さ、行の高さなどを細かく調整し、表示される文字の具体的なルールを決めましょう。
- アイコンライブラリやほかのスタイルを実行する：最初のUIインベントリに戻り、アイコンやデザインの選択に反映させましょう。
- 最初のパターンを作り始める：パターンライブラリを検査し、あなたの会社、製品、顧客をもっとも表すパターンを選びましょう。
デザインシステムは決して完成しないことを覚えておいてください。定期的にアップデートし、改善可能な場所に注意を払い続けましょう。
Predix design systemに基づいて作成されたGE Digital
２. 多角形と幾何学的なレイヤー
2018年においてもっとも目立ったWebデザイントレンドの１つは、図形のレイヤーや多角形といった幾何学的なテーマを扱ったものです。恐らく実際のデザインを見れば、このスタイルだと特定できるでしょう。正確な定義では、多角形とは、主に３～５本の直線から成る閉じた図形のことです。下図のような浮遊する三角形や四角形も含まれますが、この定義に沿った独創的な図形もあります。
このスタイルは、図形（標準的な多角形とそうでない図形）や、基本的な幾何学的パターン（グリッドや平面）といった幾何学を中心に作られます。では、具体的なコンポーネントに分類してみましょう。
シンプルな幾何学
上記のESPNのように、スクリーン全体を埋めるのではなく、独創的ながらシンプルな図形を使う会社も多いです。この方法にはほかにも細かな利点があります。たとえばESPNの例では、傾いた図形を使うことで視覚が自然に誘導され、全体として流動的な画面を作り上げています。
注目を集める太線
線も幾何学なので、線を強調することも、このスタイルに適合します。適切に用いることで、大きく太い線でスクリーンに視覚を誘導するか、補完的なイメージに注意を惹きつけることができます。
太い線を使うときには、色と交点の両方に注意を払うことが重要です。線自体に注意を集めたいか逸らしたいかにかかわらず、色によってユーザーの注意が向く先は決定します。そして、交点には必ず注目が集まるので、上手に使いこなすことが必要です。
細部
幾何学的なデザイン以外も使いたいならば、このトレンドを細部のみに使うこともできます。多角形や幾何学のレイヤーは、どのようなサイズでも視覚的に目立つため、補助的なグラフィックとしても適しており、ボタンアイコンとしても活用できます。
３. タクタイルデザイン
タクタイルデザインには興味深い由来があります。マテリアルデザインの原理から発展したものですが、同時に2010年代初期のトレンドである、スキューモーフィズム（skeuomorphism）を現代風にアレンジしたものでもあるのです。
つまり、タクタイルデザイン（Tactile Design）とは、デジタル空間のオブジェクトにリアリティを持たせるものです。Googleのマテリアルデザインガイドラインには次のように記載されています。「マテリアルデザインは、立体的なリアリティを土台としています。紙やインクの研究にインスパイアされている一方で、技術的に進歩したデザインであるため、デザイナーは想像力を駆使して何でも創造できるのです。」
タクタイルデザインは言葉で説明しにくいのですが、幾何学トレンドと同じく、該当する成果物を見ればタクタイルデザインだと特定できます。よくあるコンポーネントを紹介しましょう。
縁なしのデザイン
上のサイトは、現実世界と同様に境界や窓がありません。すべてが同じ世界観に存在しています。特にテキストなどの特定の要素は、１つの要素やスクリーンから次のものへと移動します。タクタイルが機能するためには、どこをクリックしたらどこに行くのかユーザーが理解できるように、デザイナーがスペースを上手に使う必要があります。そのため、余白は十分に取られることが多いです。
マルチレイヤーデザイン
マテリアルデザインと同様、タクタイルデザインはより現実的に見せるために、複数のレイヤーで構成されます。そのため、レイヤーを見分けられるようにするとともに、よりリアリティを吹き込むためにドロップシャドウを多用しています。
目的を持ったモーションやアニメーション
タクタイルデザインでは、楽しませるために作られた複雑なアニメーションよりも、意味のあるモーションが好まれます。ホバー状態やトランジションのアニメーションといった動的な要素は、ビジュアルを改善するだけでなく、ユーザビリティ改善という目的にも適います。
解像度の高い写真
リアリティを重要視するため、タクタイルデザインでは、HD画質で接写した、とても高解像度の写真を使います。ECサイトにこのような解像度の高い写真があると、顧客は商品を理解しやすくなるため、タクタイルデザインの利点と合わせて二重に有効です。
４. 複雑なデスクトップ、シンプルなモバイル
スマートフォンが開発されて以来、デスクトップとモバイルは対立していると考えられてきましたが、実際には対立していないことが認知されつつあります。２つのデバイスは協調しているのです。GO-Gulfの調査によると、どの年齢層のユーザーも、90％が複数のデバイスで同じタスクを完了することができます。
最近では、モバイルとデスクトップのサイトの間に、インターフェイスの違いが見られるようになりました。複雑なシステムをモバイルデバイスに詰め込んだり、シンプルなシステムをそのままデスクトップに転送したりするのではなく、同じ製品や、サイト、アプリをデバイスに特化させてデザインするようになりました。
厄介なのは、どのニーズがどのように変化するのかを理解することです。デスクトップのシステムを転写する代わりに、モバイルデバイスの個性を最大限に活かす方法について、重要な点を以下にまとめました。
複雑なインタラクションをモバイルで変更する方法
- ヘッダーのビデオを、サムネイル画像に替えましょう。モバイルサイトにビデオを配置しなければならないなら、YouTubeのリンクを使いましょう。
- ホバー効果は使用しないでください。代わりにタップ可能なボタンやジェスチャーコントロールを使うことで、情報を表示したり隠したりできます。
- アニメーション効果はシンプルにしましょう。モバイルではデスクトップ上のようには上手く機能しません。たとえばCoachは、デスクトップではスライダーアニメーションを組み合わせていたグラフィックを、モバイルではアニメーションGIFに差し替えています。
- ドロップダウンメニューをハンバーガーメニューに取り替えましょう。ハンバーガーメニューは好き嫌いが分かれますが、ユーザーのほとんどがすでに使い方を理解している確立されたパターンだからです。
- できる限り音声起動を実装しましょう。音声起動は現在人気が高まっており、２、３年後には標準的な機能になっているかもしれません。
- 色と背景を再検討しましょう。モバイルデバイスでは読みやすさを保つために、コントラストを高くする必要があるときがあります。
５. レトロモダンデザイン
New York Timesでさえも、Webデザインは今、ノスタルジアの時代であることを認めています。現代のデザインには、90年代、80年代、70年代の独特なスタイルが取り入れられています。各年代がどのような特徴を持つのかご覧ください。
- 90年代：デジタルなプラットフォームでは何ができるのかデザイナーが模索していた時代。アニメーションや色、動く部分がたくさんあるデザインか、あるいは情報を伝えるだけの最小限のデザイン。
- 80年代：駆け出しのビデオゲーム産業に由来するピクセル表現と、当時のファッションや初期のMTVから影響を受けた鮮やかなネオンカルチャーの融合。
- 70年代：印刷メディアがまだ影響力があった時代の、落ち着いた色と太字の書体（特にサイケデリックなフォント）。
現代にレトロスタイルを使う際には、最善の要素をピックアップすることが求められます。というのも、デザインスタイルによっては過去に置いておくべきものもあるからです。現代に残したいレトロスタイルのおすすめは次のものです。
古風なタイポグラフィ
大きい太字の文字だけでなく、フォント自体も復興しています。凝った筆遣いのフォントや、太い筆記体、粗く縁取られたフォントは、古い映画のポスターを彷彿とさせるため、人気が再燃しています。
そういった「うるさい」フォントを使う際には、節度を持つことが重要です。大きい太字のタイポグラフィは、タイトルやヘッドラインに使うことが理想的で、二次的な情報や本文に使用するとユーザーの気を散らしてしまいます。「うるさい」フォントは、シンプルで目立たないフォントを通常の文章で用いた上で使うべきでしょう。
極端な色使い
落ち着いた色を使うにしても、鮮やかな色を使うにしても、現代のWebデザインでは、色使いにきめ細かい配慮が欠かせません。色を重ねることは珍しくないため、ほかの画像やイラストを強調させるためにカラーマッチングを用いることもあります。
テクスチャと勾配
色と同じように、テクスチャや勾配も極端に使わることが多いです。より現実的な雰囲気を出すために大量にテクスチャを使う企業もありますし、ミニマリズムを徹底して、そのようなエフェクトをすべて取り除く企業もあります。
ビデオゲームスタイル
初期の任天堂コンソールを真似たピクセル表現が、ゲーム以外のWebサイトでも人気のスタイルになっています。忠実度が高い要素と低い要素を併置させることで、目立ちやすくなるのは言うまでもなく、若い世代から年配の世代まで楽しめる面白いデザインが生まれます。
編注：レトロモダンデザインについて詳しくはこちら。昔と今のトレンドを融合させた「レトロモダンデザイン」
６. シンプルなトップページ
最後に、基本に戻りましょう。トップページの流行は長年変化し続けてきましたが、今は、情報源というよりは、出入口の役割を果たすシンプルなトップページがよく見られます。
このトレンドは、ほかのさまざまなトレンドを包摂しています。よって、現代的なトップページを作りたいなら、以下のどのトレンドを利用しても構いません。
ミニマリズム
シンプルで使いやすいインターフェイスとして定番のスタイルです。ミニマリズムは、十分なネガテイブスペース（余白）、大きく太字のタイポグラフィ、カラフルなアクセントといった特徴から特定できます。上記のEvernoteのように、トップページでは、重要なCTAに注目させるために色がもっとも効果を持ちます。
さまざまなフラットデザイン
FlatやAlmost Flat、Flat 2.0といった多様なフラットデザインは似通っているものの、明確な違いがあります。これらはすべて、トップページをシンプルにする際に有効です。フラットデザインでは、ミニマリズムと同様に気を散らすものを減らし、華やかな色を利用します。しかし、フラットデザインは高画質のヒーローヘッダー画像のような細かいビジュアルに対しては寛容です。
わずかなアニメーション
アニメーションはユーザビリティを改善し、ユーザーを楽しませますが、重要な要素から気を逸らしてしまうこともあります。最近では、トップページのアニメーションはより繊細になっていて、ほとんど下記の２種類に限られています。
- 定期的に動く自動アニメーション
- ユーザーのクリックやスクロールに起因して動くアニメーション
これらのかすかなアニメーションを使用することで、アニメーションの利点を維持しながら、現代のトップページが志すシンプルな側面を失わずにいられます。
美しい写真やビデオ
気が散るような画像を別に使わない限り、目を引くヒーローイメージやビデオを背景に使うことで、シンプルなトップページが作れます。ユーザーを画像のテーマだけに集中させることができ、上手に実装すれば、強力な効果を持ちます。
読みやすさを優先する
特に長いコンテンツを載せているサイトで人気なのは、読みやすさを重視したトップページです。もしトップページのコピーを強調したいのであれば、以下の方法を使って読みやすくしましょう。
- 平均よりも大きな文字サイズ（ボディの文字は16ポイント以上）
- レディングや行の高さを誇張する（文字サイズの1.75倍）
- ガターサイズをきわめて広くする
- 背景の補色を用いる
- 行の高さが均一に保たれるよう画像とコールアウトを中央に配置する
まとめ
2018年のWebデザインは、おそらくこれまでの年よりも大幅に進歩しています。そのため、2018年は、コンテンツの詰まったページに代表される古いスタイルが引退する一方で、モバイルデザインやコンポーネントベースのシステムのような分野が真価を発揮し始めた、変化と推移の１年と言えるでしょう。
今こそ、デザイン戦略を評価し直し、直近の数ヶ月、数年の間に脚光を浴びたものに追いつく絶好の機会です。
もっとアドバイスや事例をご覧になりたい方は、78ページの電子書籍『Web Design Trends 2018』を無料でダウンロードできます。
