最新Webトレンド「カード型デザイン」を取り入れるべき、効果的な4つの理由

海外デザインブログWebdesigner Depotで公開された「Embracing the Latest Web Trend: Card-Based Design」より許可をもらい、日本語抄訳しています。

勢いのあるWebデザイントレンドは、いつの時代も存在します。数年前に登場し、今でも人気のパララックス・スクロールは、誰もが覚えているでしょう。最近では、長い縦スクロールを利用したサイトが、ユーザーの注目を集めています。

他に比べてあまり認識されていませんが、すでに色々なところで活用され始めているトレンドのひとつが、カード型デザイン（英: Card-Based Design）です。

このデザイントレンドを、ウェブコンテンツ一覧として活用した有名サイトがPiterestですが、このデザインアプローチによる利点やメリットにより、採用するサイトが増えています。カード型デザインのサイトをユーザーが閲覧するときに、このシンプルでエレガントなアプローチによって、すっきりとして、よく整理された印象を与えることができます。

カード型デザインをWebサイトに採用するメリットを、今回はまとめて見ていきましょう。

詳細は以下から。

グリッド・アプローチによる情報アーキテクチャ

カード型デザインを眺めるときは、同時にグリッドベース・デザイン（英: Grid-Based Design）が利用されているのに気付くでしょう。なぜならすべてのカードの端は、より大きなさまざまなサイズのグリッドの端となり、このうまく整理するシステムが、見事にコンテンツの一貫性を保ち、サイトデザインの調和を生みます。

このテクニックは、情報アーキテクチャ（英: Information Architecture）の作成にとても役立ちます。これによって、「情報をわかりやすく伝え」、「受け手が情報を探しやすくする」ことができます。

カード型デザインは、閲覧ユーザーの視線を、統一感のあるデザインによって、うまく誘導してくれます。各カードは、水平および垂直な線が揃った、カラムや列の一部となります。この整理方法によって、どの情報が他に比べて重要かなのか、ユーザーが理解する手助けとなるでしょう。

上記の写真マガジンサイトContrastlyをサンプル例に考えてみましょう。利用されているグリッド/カード型レイアウトは、階層上に並べられるコンテンツにより、どの情報が重要か理解する手助けとなります。新しい記事ほど上部の列に表示され、古い記事ほど下部の列に表示されます。読んでもらいたいコンテンツや情報に、優先順位を付けることができるテクニックと言えるでしょう。

イメージ写真をメインコンテンツに。

これまでにもわたしたち人間が、ビジュアルを好むということは、決まり文句のように言われてきていますが、カード型デザインには新しい意味合いが生まれています。カード型デザインは、ほぼ独占的にビジュアル写真に依存しています。一緒に記載されているコピーや見出しタイトルは、情報アーテテクスチャにおいて、ビジュアル写真の次に重要な要素（英: Secondary）となります。

イメージ写真をたくさん利用すること自体が、カードデザインの強みであり、写真がウェブデザインの個性を高めることも、最近の研究で明らかになってきています。たとえば高画質な写真と、人間の顔を撮影した写真は、どちらもコンバージョン率をアップさせます。実際に、イメージ写真を使って、サイトのコンバージョン率を改善する7つのテクニックも公開されています。

もうひとつの例として、イメージ写真を強調した、カード型デザインはよりサイトを訪れたユーザーに、魅力的に見えるでしょう。Alexaの調査で、アメリカ15番目の有名サイトPiterestの人気は、偶然とは言えないでしょう。

Pinterestで「食べもの（Food）」と検索した結果を見てみましょう。ページを開いたときに、まずイメージ写真が目に飛び込んできます。最初見た段階では、写真の下の説明文に目も行きません。高品質で素晴らしい写真は、まずユーザーの注目を見事に捉え、記載されている説明文を読みたいかどうか決定します。

ユーザーエクスペリエンスの向上

ユーザーエクスペリエンスが重要であることは、どのデザイナーも知っていますし、デザインにおいて、まず真っ先に検討されるべき要素です。カード型デザインがなぜ使いやすく、近い将来も利用されるであろう、もうひとつの理由は、ユーザー・エクスペリエンスを改善してくれるポイントです。同時にサイトを訪れたユーザーに、またサイトに戻ってきたくなることで、滞在時間も伸び、結果的にコンバージョンも改善されます。

良いとされるユーザー・エクスペリエンスは、ユーザーがなにも迷わずに、サイトを閲覧することができることで、ユーザーが見つけたい情報を、頭を悩まさずに見つけることができるべきです。

Dribbbleでは、カード型デザインを採用することで、ユーザーエクスペリエンスをよりシンプルに、そしてより良くすることを心がけています。このサイトは、ユーザーのアートワークや作品を、ギャラリーショーケースとして公開することができる、オンライン・クリエイティブ・コミュニティーとして知られています。

ユーザーにとってこのサイトのポイントは、投稿されたイラストレーションやグラフィック、イメージ写真などすべてのクリエイティブに対し、フィードバックしあうことなので、カード型デザインがもっとも適したレイアウト方法と言えるでしょう。イメージ写真がユーザーの注目をすぐに、効果的に惹いたことで、グリッド上に並べられたどのカードに興味があるのかすぐに分かり、ユーザーエクスペリエンスも強調してくれます。興味のあるデザインを見つけたら、すぐにカードをクリックして、詳細を確認することができます。

Dribbbleのようなサイトは、ユーザーが見つけているものを、とても便利な方法ですぐに探すことができます。これこそが、良いユーザー・エクスペリエンスのお手本、典型と言えるでしょう。

モバイルデザインにも最適。

モバイル端末ユーザーが、デスクトップユーザーを超えたというニュースを聞いたことがあるかもしれません。2015年、アメリカ国内におけるモバイルサイトにおける閲覧時間51%に対し、デスクトップは42%になる予想です。レスポンシブ型フレームワークへの対応のしやすさを考えると、カード型デザインのトレンドは理想的と言えます。カード型デザインは、コンテンツをよりわかりやすくかみ砕き、モバイル端末での表示も楽にしてくれます。

カード型デザインの形やサイズは、スマートフォンやタブレット端末において実用的に真似することができます。もちろんさまざまな機種があるので、完全にとまではいきませんが、アスペクト比を考えるときは、サイズをかなり合わせることができるでしょう。

結果として、モバイル端末の利用ユーザーが増えるのと同時に、カードデザインは増えていき、その勢いはしばらく収まることはなさそうです。

一時的なデザインブームとは違う。

いくつかのデザイントレンドの問題は、一時的なブームとなってしまうことで、短命で忘れられやすくなるということです。カード型デザインの場合は、他とはすこし異なります。たくさんの実用的な使用方法やメリットがあることを考慮すると、今後ますます人気となってくることは間違いないでしょう。

サイトの情報構造をより分かりやすく一貫性を持たせ、イメージ写真を全面に使うことでクリックしやすくし、コンバージョン率を改善してくれます。同時に、ユーザーが探しているものを見つけやすいという点で、サイト全体のユーザー・エクスペリエンスも改善することができます。そして、モバイル端末の利用ユーサーが、ここ数年で増えたおかげで、ユーザーがおもしろいコンテンツにたどり着きやすくすることが、デザインアプローチの大黒柱（英: Mainstay）となってきています。

カード型デザインは古いコンセプトですが、ウェブデザインの新しくて、新鮮なアイデアによってアップデートされ、元気を取り戻しています。革新的なデザイナーは古いものや、ありふれたものを、21世紀のなにかすごいものに変えてしまうかもしれません。

デザインの引き出しが増える！こだわりの無料UIコンポーネント素材まとめ

最近のUIコンポーネントも、カード型デザインが増えてきているのがよく分かります。