Uxデザイン

Webレイアウトのベストプラクティス：分析された12の時代を超越したUIパターン

UIデザインのトレンドはウェブ上で行き来する可能性がありますが、いくつかのUIパターンは時の試練に耐えてきました。 UIパターンを時代を超越させるものは何ですか？使いやすさと変化するトレンドやテクノロジーへの適応性の組み合わせをもたらすWebレイアウトのベストプラクティスの順守。

UIパターンを持続させるいくつかの基準があります。使いやすさもそのひとつです。「見た目は素晴らしい」が使い勝手が良くないUIパターン 長く続くものではありません 。

最も便利なUIパターンは、変化するトレンドにも適応できます。 たとえば、カードスタイルおよびグリッドベースのレイアウトは、次の方法で実装できます。 UIデザイナーさまざまな方法で。適応性により、彼らは何年も前から存在しているかもしれませんが、現代的でトレンドに見え続けることができます。ここに含まれる他のUIパターンについても同じことが言えます。

カードスタイルのWebレイアウトパターン

カードスタイルのレイアウトは、Pinterest、Facebook、Twitterなどのサイトで人気がありました。ニュースサイトやブログでは、各部分を区別しながら多くのコンテンツをページに配置するのに適しているため、標準になっています。

名前が示すように、これらのレイアウトは、さまざまな形状とサイズの物理的なカードに似たコンテンツブロックを使用します。 2つの主要なレイアウト形式があります。 1つのレイアウトでは、同じ寸法のカードをグリッド上に配置します（ ApeeScapeデザインブログホームページ）、もう一方は、さまざまなサイズのカードが整然とした列に配置されているが、明確な行がない流動的なレイアウトを使用しています（ Pinterest のレイアウト）。

カードスタイルのレイアウトは、さまざまなコンテンツを整然と配置できるため、うまく機能します すべてのピースを別々に保ちながら。カードは、実世界のカード型のアイテムを認識するため、人々にも馴染みがあります。それらは心理的に意味があり、Webサイトを初めて使用する場合でも簡単に使用できます。

カードの使用などのWebレイアウトのベストプラクティスにより、ユーザーエクスペリエンスが向上します

ドリブルカードを使用して、デザイナーのプロジェクトを表示します。

ザ・デッキテンプレートはカードに対して異なるアプローチを取り、ほぼフルスクリーンのカードが視差スクロールでナビゲートされます。

分割画面レイアウト

技術的には、分割画面のレイアウトは 1903年、映画へ アメリカの消防士の生活 エドウィン・S・ポーター著。しかし、Web UIデザインでは、分割画面レイアウトが2013年に人気を博し始め、2016年に本格的に動き始めました。

分割画面レイアウトは、2つの要素がページ上で等しい重みを持つ必要がある場合に人気のあるデザインの選択肢です。 また、テキストと画像の両方を目立つように表示する必要があるデザインでよく使用されます。縦に並べたり、テキストを画像に重ねたりするのではなく、並べて配置することは、洗練されたミニマリストの品質を提供できる意識的なデザインの選択です。並べて配置された2つの画像もよく見られ、テキストがオーバーレイされることもあります。

ほとんどの分割画面デザインはかなり均等に分割されていますが、一部は異なる比率で分割されています。（33:66または40:60が最も一般的な比率のようです。画面が1/3よりも小さいサイズに分割されると、実際の分割画面デザインというよりはサイドバーのようになります。）

分割画面のデザインは、eコマースサイトの製品ページに特に適しています。 これらのページでは商品の画像を目立たせる必要がありますが、価格、仕様、カートに追加するボタン、商品のオプションなどの重要な情報も目立つようにする必要があります。

分割画面では、必ずしも半分の間に視覚的な仕切りがある必要はありません。

片側のテキストと反対側の画像は、人気のある分割画面のデザインパターンです。

ビッグタイポグラフィ

ビッグタイポグラフィはウェブの登場以来存在していましたが、モバイルデザインが普及したときに人気を博しました。

ラージタイプ見出しやタイトルで特に人気がありますが、一部のサイトでは本文にも見られます。適切なフォントを選択すると、テキストが大きいほど多くなります読み取り可能ユーザーエクスペリエンスを向上させます。さらに、それは強力な視覚的ステートメントを作成します。他の視覚要素がほとんどないミニマリストデザインで特に人気があります。

ナビゲーションに使用される大きなタイポグラフィ。

ヘッダーデザインでは大きなタイポグラフィが人気です。

パーソナライズ

パーソナライズアルゴリズムは何年も前から存在しており、デジタル体験を各人の好みに合わせて調整しています。 AIはこれらのアルゴリズムをさらに便利にし、提案アルゴリズムなどの機能により、人が次に見たり、読んだり、学んだり、購入したりするものを正確に予測できるようになりました。

米国を拠点とするフルタイムのフリーランスUIデザイナーが望んでいた

メンバーシップサイトでは、人々は自分の欲求やニーズを満たすコンテンツを見たいと思っています。加入者の以前の選択に基づいて、Netflixには、視聴する可能性が最も高い映画や番組を提供する優れた予測アルゴリズムがあります。のようなサイト中以前に読んだことと楽しんだことの両方に基づいて、ログイン時に楽しむ可能性のある記事を表示します。

しかし、パーソナライズは行き過ぎになる可能性があります。広告ネットワークのアルゴリズムは非常に高度になっているため、オンラインで商品を検索したり言及したりしていなくても、購入に興味があるかもしれないものを予測できる場合があります。このレベルの予測により、人々はスパイされているように感じることがあります。このため、 UIデザイナーパーソナライズを慎重に使用する。

ウェブサイトのベストプラクティス：パーソナライズによりユーザーエクスペリエンスが向上

Netflixはパーソナライズを使用して、人々が見たいと思うかもしれないコンテンツを提案します。

中各ユーザーのホーム画面を、以前の読書習慣や、ユーザーが購読しているユーザーや出版物からの新しいコンテンツに基づいて、読みたい記事でパーソナライズします。

グリッド

グリッドは、1990年代後半のテーブルベースのレイアウトから始まって、長い間UIデザインの一部でした（ただし、グリッドはそれよりずっと前に本や新聞などの印刷レイアウトで使用されていました）。 CSSがレイアウトの作成で人気を博したとき、よりエレガントなグリッドシステムが開発されました。最も初期の注目すべき例は、 960.gsグリッド。

グリッドは、デザインに視覚的なバランスと秩序を提供し、人々がコンテンツを消費しやすくします。 同時に、グリッドはWebレイアウトに多くの柔軟性を提供できます。グリッドシステムの大部分は、12列または16列のいずれかを使用し、その間に側溝があります。グリッドベースのレイアウトを使用する一部のWebサイトでは、グリッドがデザインの目立つ機能になっています。対照的に、他のものはより微妙であり、グリッドは綿密な検査でのみ明らかになります（実際のグリッドがデザインにオーバーレイされた場合にのみ）。

列ベースのレイアウトグリッドに加えて、ベースライングリッド Webデザインでは、論理的な方法で要素を水平方向に配置するために一般的に使用されます。たとえば、本文の行と見出しの間隔を調べると、タイポグラフィで最もわかりやすくなります。ベースラインの水平グリッド間隔は、Webデザインで使用される垂直グリッド間隔と密接に関連しています。

グリッドベースのWebデザインは、バランスの取れた整理された方法でコンテンツを表示します。

グリッドデザイン内で異なるサイズのコンテンツを使用すると、コンテンツを整然と保ちながら視覚的な関心が高まります。

雑誌スタイルのWebレイアウト

ニュースや定期刊行物の業界は、ウェブ上の雑誌スタイルのレイアウトに大きな影響を与えました。初期の頃は、ニュースサイトやオンラインマガジンで主に見られていました。時間の経過とともに、他のセクターでも人気が高まり、eコマースサイトやブログなど、さまざまな種類のサイトで見られるようになりました。

雑誌スタイルのレイアウトには、ホームページの2次および3次記事だけでなく、特集記事（または、カルーセルまたは同様の形式の複数の特集記事）が含まれます。また、コンテンツ用に複数の列があり、セクションに分割されることもあります。 これらのWebレイアウトは、コンテンツが大量にあるサイト、特に毎日新しいコンテンツが追加されているサイトに適しています。

雑誌スタイルのレイアウトは、定期的に更新される大量のコンテンツを紹介するのに最適です。

さまざまな画像の形が、この雑誌スタイルのレイアウトをユニークで思い出深いものにしています。

単一ページのレイアウト

単一ページのレイアウトでは、サイトのすべての主要コンテンツが単一のWebページに配置されます。ナビゲーションはスクロールによって行われます。多くの場合、特定のセクションにジャンプするためのショートカットがあり、視差スクロール効果がある場合もあります。場合によっては、利用規約、プライバシーポリシー、またはメインコンテンツの一部ではないその他の情報にセカンダリページを使用することがありますが、これによってレイアウトが単一ページと見なされることを妨げることはありません。

単一ページ Webサイトのレイアウトは、コンテンツがまばらなサイトに最適なソリューションです。また、インタラクティブな児童書などの物語のコンテンツにも最適です。

単一ページのレイアウトは、物語のコンテンツに適しています。ナビゲーションのヒント（「下にスクロール」と矢印）を使用すると、デザインがより使いやすくなります。

1ページのレイアウトは、童話のような物語に最適です。

FパターンとZパターン

FパターンとZパターンは、人の目がページ上をどのように移動するか、つまり人がコンテンツをスキャンする方法を示します。アン Fパターンページの上部に目立つコンテンツがあり、その下にページの左側に沿って追加のコンテンツが配置されています（おおよそ「F」字型）。 A Zパターン上部に目立つコンテンツがあり、さらに下部に貴重なコンテンツがあります。目はページの右上から左下に向かって斜めに描かれます（おおよそ「Z」字型）。

Fパターンは、視覚的な階層が非常に明確になっているZパターンよりもコンテンツが多いページに適しています。 Zパターンは、訪問者が見る必要のある2つの同等に（またはほぼ同等に）関連するコンテンツがある場合に、より役立ちます。

F字型のデザインパターンは、ページの左側を横切ってから下に目を引きます。

Z字型のデザインパターンは、目を上から横に引き、次に斜めに下に戻し、再び横に描きます。

非対称

簡単に言えば、非対称性は対称性の欠如です。デザインでは、非対称よりダイナミックで有機的な視覚的インパクトを生み出します。ほとんどの場合、非対称性は、互いに完全にバランスが取れていない画像とテキストを使用して作成されます。非対称性は、さまざまなページセクション間で異なるパターンを使用するなど、背景要素を介して作成または強化することもできます。

非対称性はダイナミックでエネルギッシュな視覚的印象を生み出すため、そのようなイメージを伝えたいブランドにとっては便利です。 非対称性も予期しないものであり、デザインをより印象深いものにし、含まれているコンテンツが対称的なレイアウトではうまく機能しない場合に実用的です。

このWebレイアウトでは、テキストとカードの強調表示機能を使用して非対称性を実現しています。

色の使用は、非対称のレイアウトを作成するのに役立ちます。

クリーンでシンプルなWebレイアウト

クリーンでシンプルなレイアウトは、UIデザインで何十年にもわたって流行し、時代遅れになっていますが、多くの場合、流行していません。これらのレイアウトの美しさは、 視覚的な混乱なしに、コンテンツに真っ向から焦点を合わせる 。

すっきりとしたシンプルなレイアウトは、事実上あらゆる種類のWebサイトに適しています。ここにある他のUIパターンの多くは、クリーンなレイアウトと一緒にうまく機能します。グリッドのクリーンバージョン、マガジンスタイルのレイアウト、非対称デザイン、および分割画面レイアウトがあります。最もエレガントなWebサイトの多くは、他にどのようなデザイン機能が組み込まれているかに関係なく、「クリーン」と見なすことができます。

すっきりとしたシンプルなレイアウトでも、イラスト、色、役立つ情報をすっきりと組み込むことができます。

画像間の広いマージン、最小限のタイポグラフィ、および緩いグリッドベースのレイアウトが連携して、このクリーンなレイアウトを作成します。

ナビゲーションタブは元々スキューモーフィズムデザインの主力であり、ファイルフォルダーやバインダー仕切りのタブに似ていました。ただし、成熟するにつれて、タブスタイルのナビゲーションは必ずしも現実的なタブに似ているとは限りません。代わりに、ナビゲーションタブの特徴は、メニューの各項目が他のメニュー項目から視覚的に分離されていることです。これは微妙な場合もあれば、メニュー項目を選択またはカーソルを合わせた場合にのみ表示される場合もあります。

ナビゲーションタブは、アイテムが少ない小さなメニューに最適です。 そうしないと、雑然と見える可能性があります。ただし、サブメニューのドロップダウンと組み合わせて、機能を追加することができます。垂直方向の例は存在しますが、一般的に水平方向のナビゲーションでも見られます。

ナビゲーションタブは、サブメニュー項目のドロップダウンでうまく機能します。

一部のデザインでは、アクティブなタブのみが強調表示されます。

カルーセル

コンテンツカルーセルは通常、Webサイトのヘッダーまたはヒーローセクションにあります。多くの場合、テキストと組み合わせて画像が含まれていますが、どちらか一方しか含まれていない場合もあります。スペースが限られている場合に、ウェブサイトの1つのセクション内に複数のコンテンツを表示するために使用されます。

カルーセルは、いくつかの用途で非常にうまく機能します。 ブログやニュースサイトの注目コンテンツはカルーセルに適しています。製品、プロモーション、および販売は、eコマースサイトのカルーセルでも一般的に紹介されています。カルーセルは通常、Webページの上部近くに表示されますが、サブセクション内で使用して関連コンテンツを強調表示することもできます。これらは、ホームページコンテンツと、特定のカテゴリのコンテンツまたは製品の個々のページの両方で人気のある選択肢です。

カルーセルを使用すると、重要なコンテンツの複数の部分を同じ領域で紹介できます。

カルーセルは、eコマースサイトで注目の製品を紹介するのに最適です。

時代を超越したWebレイアウトのベストプラクティス

時代を超越したUIデザインは、適応性があり、ユーザーフレンドリーです。 さまざまなユースケースで機能し、わずかな変更を加えるだけで、今日は10年前と同じように見栄えがします（さらに10年後には同じように見栄えがします）。

時代を超越したUIデザイン要素を取り入れながら、Webレイアウトのベストプラクティスに従うと、見た目が良くない、または 感じる 短い期間で日付を記入しました。それは可能にします UIデザイナーユーザーを喜ばせ、ブランドの目標を達成するデジタル体験を作成します。

ご意見をお聞かせください。以下にあなたの考え、コメント、フィードバックを残してください。

•••

ApeeScapeデザインブログの詳細：

基本を理解する

最高のウェブサイトのレイアウトは何ですか？

最適なWebサイトのレイアウトは、Webサイトの目的とそのコンテンツによって異なります。あるサイトにとって「最良」である可能性があるものは、別のサイトにとっては完全に間違っている可能性があります。 Webレイアウトのベストプラクティスに従うことで、各Webサイトの正確なデザインに柔軟性を持たせることができるため、ユーザーに最適なように調整できます。

良いウェブサイトのレイアウトを作るものは何ですか？

優れたウェブサイトのレイアウトは、提示するコンテンツに適しており、美学に加えて（またはそれ以上に）ユーザーエクスペリエンスを優先し、テクノロジーやデザインのトレンドの変化に耐えることができます。 Webレイアウトのベストプラクティスと時代を超越したUIデザインパターンに従うことで、優れたWebサイトが実現します。

期限切れのアカウントとは何ですか

ウェブサイトをデザインする際に留意すべきことは何ですか？

ウェブサイトをデザインする際に心に留めておくべき最も重要なことは、デザインの決定がウェブサイトを使用する人々にどのように影響するかです。 Webレイアウトのベストプラクティスと標準に従い、十分なユーザー調査を実施することで、ブランドの目標も達成するポジティブなユーザーエクスペリエンスを確保できます。

ウェブサイトのレイアウトが重要なのはなぜですか？

Webサイトのレイアウトは、そのWebサイトへの訪問者が、サイトに表示されるコンテンツをどのように消費し、操作するかを大きく左右します。優れたWebレイアウト設計は、サイトのコンテンツを強化すると同時に、消費を容易にし、訪問者に前向きな体験を提供します。

ウェブデザインのトレンドは何ですか？

Webデザインのトレンドには、現在人気のあるデザインパターンとプラクティスが含まれます。場合によっては、トレンドとして始まるものがユーザーエクスペリエンスを向上させ、標準またはベストプラクティスになることもあります。カードベースのレイアウト、グリッドデザイン、非対称性などのパターンはすべてこのカテゴリに分類されます。