ウェブサイトのレイアウト

最高のウェブサイトのレイアウトの例とアイデア


あなたのウェブサイトのレイアウトはその成功を定義することができます。間違ったデザインを取得すると、ユーザーは混乱して混乱し、ユーザーエクスペリエンスを破壊します。重要なコンテンツを見逃したり、行動を促すフレーズを見逃したりする可能性が高い.

ただし、レイアウトの重要性はさらに高くなります。デザインはあなたのサイトのコンテンツにフィットする必要があります。適切なレイアウトでコンテンツを輝かせることができますが、間違ったコンテンツではコンテンツが混雑し、読みにくく、刺激のないものになる可能性があります.

あなたのウェブサイトのレイアウトはその成功を定義することができます。間違ったデザインを取得すると、ユーザーは混乱して混乱し、ユーザーエクスペリエンスを破壊します。重要なコンテンツを見逃したり、行動を促すフレーズを見逃したりする可能性が高い.

ただし、レイアウトの重要性はさらに高くなります。デザインはあなたのサイトのコンテンツにフィットする必要があります。適切なレイアウトでコンテンツを輝かせることができますが、間違ったコンテンツではコンテンツが混雑し、読みにくく、刺激のないものになる可能性があります.

結局のところ、すべてのサイトには、ウェブサイトのデザインの下にあるグリッドシステムがあります。これらの列と行はコンテンツの順序を提供し、ページの周りにユーザーの目を導きます。これらのグリッド内で、非常に多くの異なるアプローチを作成できます。すべてのWebサイトには、デザイナーがレイアウトを構築するための基になるグリッドがあります。.

ただし、サイトに適したレイアウト設計を選択する場合、開始するために使用できるいくつかの一般的な開始点があります.

1つのアプローチに固執する必要がないことは言うまでもありません。サイト全体、またはランディングページなどの単一ページでさえ、複数のレイアウトを簡単に組み合わせることができます.

とはいえ、利用可能な最も一般的なレイアウトオプションを見てみましょう.

まず、最も単純なレイアウトパターンである単一の列から始めます。.

1.単一列のレイアウト

あなたが見つける最も複雑なレイアウトではありませんが、モバイルWebの成長以来、その人気は大幅に高まっています。これは、ウェブサイトがモバイルデバイス、タブレット、デスクトップで同じデザインを使用できるため、開発時間を短縮できるためです。.

また、1列のレイアウトは、どちらの側にも邪魔されることなくコンテンツにユーザーを集中させるため、優れた読書体験を作成するのに適しています。だからブログサイト 彼らのすべての記事にそれを採用.

Mediumは、1列のレイアウトを使用して、読みやすさを向上させます。

最後に、1列のレイアウトを画像と組み合わせると、それらの画像を可能な限り大きく表示できるため、強力な影響を与えることができます. ジオーシャンリゾート これは実際の良い例です.

Ocean Resortは、画像の影響を最大化するために、単一列デザインの全幅を使用しています。

これらの要因を念頭に置いて、サイトで多くの時間を読んでもらいたい場合や、部屋を明るくする必要がある画像がある場合は、単一列レイアウトの使用を検討してください。.

シンプルであるため、単一列のレイアウトに関する課題はほとんどありません。ただし、情報の流れを慎重に検討する必要があります。ユーザーがコンテンツを表示するために必要な順序?

たとえば、ページの上部に何が含まれているかを要約してユーザーに伝え、最後に向けて明確な行動を促すフレーズを提供すると便利です。.

また、ユーザーがページを下にスクロールし続ける方法についても検討してください。単一列のレイアウトは長くなる傾向があり、スクロールせずに見える範囲にさらに多くのコンテンツがあることは、ユーザーにとって必ずしも明白ではありません。矢印などの視覚的インジケータが役立ちます.

1列のレイアウトが少し制限的であるように見えるが、それでもコミュニケーションするコンテンツが多い場合は、コンテンツに焦点を当てたデザインの採用を検討してください.

2.コンテンツ重視のレイアウト

Webデザイナーは、ニュースサイトやブログでコンテンツ重視のレイアウトを使用することが多く、通常、コンテンツのプライマリ列と追加情報の1つ以上のサイド列があります。.

このレイアウトの利点は、横の列の幅を変えることで、中央のコンテンツの行の長さを管理できることです。それは重要です テキストの行の長さが長すぎたり短すぎたりすると、読みにくくなります, 情報の理解と保持を減らす.

ただし、正しく行うと、コンテンツ中心のレイアウトは、コピー中心のWebサイトに最適です。秘密は、このレイアウト内のコンテンツを小さくて消化しやすいチャンクに分割することです.

Boagworldの投稿は、見出し、リスト、画像、プルアウトの引用でコンテンツを分割します。

例えば, 私のブログで, 私の平均的な投稿は、見出し、リスト、画像、引用符で区切られていることがわかります。これらはすべて、ユーザーが記事をスキャンし、興味のある部分を見つけるのを助けるためのテクニックです.

サイドコラムも慎重に検討する必要があります。 Webデザイナーがこれらの列に適切なコンテンツを配置し、視覚的に正しい重み付けをしていることが重要です.

問題は、ユーザーがサイドカラムにセカンダリコンテンツを見つけることを期待しているため、あまり注意を向けないことです。したがって、行動を促すフレーズのようなものをサイドカラムに含める場合は、注意を引くのに十分な強度が必要です。.

たとえば、 スマッシングマガジン カラフルな猫のイラストを使用して、ニュースレターのサインアップフォームに注意を向けます.

Smashing Magazineはサイドコラムを使用して、投稿に関する二次的な情報を提供しています。

コンテンツ重視のレイアウトがサイトのすべてのページに適しているわけではありません。ウェブサイトはこのレイアウトを雑誌スタイルのデザインと組み合わせることがよくあります.

3.雑誌のレイアウト

名前が示すように、このレイアウトアプローチは、雑誌やニュースサイトで広く使用され、多数の異なるストーリーを表示します.

印刷レイアウトに触発され、見出しと画像を組み合わせてストーリーを紹介できます。それは本質的にリンクのリストであるものを伝える魅力的な方法になることができます.

また、定期的に変更されるコンテンツを強調表示するための優れたレイアウトでもあります。それがニュースサイトが好きな理由です ワシントンポスト とても好き.

ニュースWebサイトは雑誌スタイルのレイアウトを好む傾向があります。

ただし、レイアウトには欠点がないわけではありません。マガジンのレイアウトは、応答性を高めるのが難しい場合があり、小さい画面のデバイスでは、デザインの完全な変更が必要になることがよくあります。.

このウェブサイトのレイアウトスタイルは、多数の画像と見出しが注意を喚起するなど、やや圧倒される場合もあります。.

この問題に対処する最も効果的な方法は、明確な視覚的階層を作成することです。つまり、一部の「ストーリー」を他のストーリーよりも大きくする.

ストーリーのサイズを変えることで、ユーザーの目を導きます。

たとえば、 流行 ウェブサイトは左側の画像をかなり大きくすることで注目を集めています。彼らは効果的に最初にどこを見るべきかをユーザーに伝えています.

それはまた、きれいなタイポグラフィとシンプルなナビゲーションバーで、ユーザーインターフェースの残りが簡単であることを助けます。マガジンレイアウトを使用する場合は、物事をシンプルに保つために一生懸命作業する必要があります。.

マガジンレイアウトのもう1つの潜在的な欠点は、その下にあるグリッドが非常に目立つため、「箱型」に見える可能性があることです。ただし、次のレイアウトタイプからインスピレーションを得ることで軽減できます。.

4.グリッドを壊すレイアウト

配下のグリッドを壊しているように見えるレイアウトは、従来のアプローチよりも視覚的にはるかに興味深いものになります。また、通常の列から外れる特定の画面要素に注目を集めるのにも優れています。.

たとえば、 VR Arles Festivalウェブサイト. 2つの列に重なることで、ナビゲーションバーに注意を向けていることに注目してください。.

VRアルルフェスティバルは、2つの列を重ねることでナビゲーションバーに注目を集めます。

グリッド分割レイアウトのもう1つの実用的な用途は、コピーに注意を引くような方法で画像にテキストをオーバーレイすることです。 Webページが画像上のテキストを完全にオーバーレイすると、多くの場合、失われる可能性があります。ただし、できる限り 以下の例から見てください, テキストが画像と部分的に重なる場合、それははるかに目立ちます.

このデザインは、テキストを部分的に画像でオーバーレイすることにより、テキストに注意を引き、行動を促すものです。

グリッドを壊すレイアウトの欠点は、特にWebサイトがレスポンシブである必要がある場合、正しくレイアウトすることが難しいことです。実際には、ほとんどのグリッドを壊すデザインはそのようなものではありません。基盤となるグリッドがまだあり、すべての画面要素がそれに適合します。グリッドがはるかに複雑であるため、それほど明白ではありません。そのため、設計が難しくなります.

それらの固有の複雑さは、デザインエージェンシーやファッションブランドなどのデザイン主導の企業で使用される傾向がある理由です。彼らは、特定の聴衆にアピールするデザインの洗練度を示しています.

グリッドを壊すレイアウトが状況に対して複雑すぎると感じたが、まだより革新的で珍しいことをしたい場合は、フルスクリーンデザインを検討してください。.

5.全画面レイアウト

全画面レイアウトは、名前が示すように、ユーザーがスクロールする必要なく、1つの画面に収まります。ストーリーテリングやプレゼンテーションに最適です.

たとえば、, バラバラの種. この豊かでインタラクティブなプレゼンテーション体験は、30種の従事種の物語を伝えます.

Species and Piecesはリッチでインタラクティブな体験であり、スクロールする必要なくすべてが行われます。

ご覧のように、フルスクリーンレイアウトは、強力な画像を伴う場合に最適です。そのため、写真、イラスト、ビデオが豊富なWebサイトに最適です。.

単一画面のアプローチに厳密に従う必要があるということではありません。一見すると、 国会議事堂広場のルーのウェブサイト Species in Piecesと同じ意味でフルスクリーンのウェブサイトのようです。ゴージャスな画像がビューポート全体を埋めます.

このウェブサイトでは、ビューポート全体を使用してその素晴らしい写真を紹介しています。

ただし、ページのさらに下に移動して、追加のコンテンツを表示することは可能です。残念ながら、これはこのレイアウトアプローチの1つの潜在的な欠点を強調しています。ユーザーはスクロールできることを常に認識しているわけではないため、貴重なコンテンツを見逃す可能性があります.

また、レイアウトがさまざまなサイズでどのように適応するかについても慎重に検討する必要があります。たとえば、フルスクリーンアプローチはモバイルデバイスで機能しますか?また、画面サイズが変化したり、単に縮小したりすると、画像がトリミングされますか?小さいサイズで表示領域から切り取られている画像の焦点をすばやく見つけることができます.

とはいえ、魅力的な画像を披露する場合、より優れたレイアウトデザインを見つけるのに苦労します。ただし、これらの画像の横に説明と行動を促すフレーズを追加するオプションが必要な場合は、代替レイアウトを検討することをお勧めします.

6.代替レイアウト

交互配置パターンは、Webで最も一般的に見られるパターンの1つです。一連のコンテンツブロックで構成されており、それぞれが2列のレイアウトになっています。ブロックは通常、片側が画像でもう片側がテキストで構成されています.

それがその名前を与えるのは、イメージが交互に並んでいるということです。したがって、最初のブロックは左側にコンテンツ、右側に画像があり、次のブロックはそのレイアウトを反転します.

これは、製品の機能や利点を説明するときに特に好まれるレイアウトアプローチです。たとえば、次のようなソフトウェア製品 Webydo 画像を使用して機能を表示し、次にコピーを使用して、機能またはそれが提供する利点を説明します.

異なるコンテンツのWebydo代替テキストと画像は、そのホームページをブロックします。

これらのコンテンツブロックは画像​​とテキストに限定されているわけではありません。時々、サイトは画像をビデオに置き換えます。同様に、要素のコンテンツ側には、アイコンからお客様の声、行動を促すフレーズまですべてを含めることができます.

例えば, Convertkit 各コンテンツブロックのテキストに加えて、紹介状と行動を促すフレーズが含まれています.

Convertkitには、お客様の画像とともに、お客様の声や行動を促すフレーズが含まれています。

交互ブロックが非常に一般的である理由の1つは、いくつかの欠点のない単純なレイアウトアプローチであることです。複数のセールスポイントを伝える必要がある場合は、ほとんどの場合、信頼できるレイアウトオプションです。.

もちろん、要件は異なる場合があるため、考慮すべきもう1つのオプションはカードベースのレイアウトです.

7.カードベースのレイアウト

カードベースのページレイアウトは、Web全体に表示されるもう1つの一般的なレイアウトアプローチです.

カードベースのレイアウトは、ユーザーが選択できる一連のオプションを人々に提供し、意思決定を行うのに十分な情報を各選択肢に提示するための優れた方法です.

そのため、eコマースサイトの商品リストページで人気の選択肢となっています。これにより、Webサイトは製品の画像、説明、および価格を表示できます。 「後で保存」などの機能を追加して、 AsosのWebサイト.

Asosのようなeコマースサイトは、製品リストを表示するためにカードベースのレイアウトを好みます。

ただし、ユーザーがリストから選択する必要がある状況では、カードベースのレイアウトを使用するWebサイトが見つかります。たとえば、別の典型的な用途は、ブログやニュースサイトに記事のリストを表示することです。.

カードベースのレイアウトでは、ストーリーの画像、タイトル、説明、および投稿したい投稿の詳細を表示できます. ぎこちない ブログは、この種の実際の使用例です.

Awwwardsはカードベースのレイアウトを使用して、ブログの投稿を一覧表示します。

何よりも、カードベースのレイアウトは応答性が高く、利用可能な幅が狭くなるにつれて、連続してカードの数が徐々に減少します。.

ただし、このアプローチにはいくつかの小さな欠点があります。まず、画像を含めるとカードが最適に機能します。つまり、リストの各アイテムに適した写真を見つけるのに苦労している場合は、デザインを変えた方がいいかもしれません.

もう1つのわずかな問題は、コンテンツの量が変動することです。 1つのカードに別のカードより多くのコンテンツがある場合、カード内または各行の間に空白を残すことができます.

カードのコンテンツの量が異なる場合、カード間にスペースを残すことができます。

この問題を軽減する1つの方法は、以下の例に示すように、カードを同じ列に配置しないことです。.

カードが空のスペースを埋めることを許可することにより、より美的に楽しいデザインになります。

それにもかかわらず、これはマイナーな問題であり、このレイアウトアプローチの広範な採用を説明しています.

同様に人気のある別のデザインは、ヒーローの画像レイアウトです.

8.ヒーローのレイアウト

ヒーローレイアウトの名前は、ヒーローの画像に由来します。これは、非常に多くのWebサイトのホームページを支配するテキストオーバーレイ付きの大きな画像です。 Appleは古典的なヒーロー画像をうまく利用しています.

アップルは古典的なヒーローのイメージをうまく利用しています。
Pixave for MacOSは、ホームページのデザインを支配することでヒーローのレイアウトをさらに進化させます.
Pixave for MacOSは、ホームページのデザインを支配することで、ヒーローのレイアウトをさらに進化させています。

ヒーロー画像が普及しているのは、レイアウトを可能にすることです 価値提案 あなたのウェブサイトの入り口でインパクトのある方法で.

あなたが見ることができるように ピクサーブ そして 林檎 上記のウェブサイトは通常、大きな背景画像、タイトルまたはストラップライン、および説明で構成されています。ヒーローのレイアウトには、多くの場合、行動を促すフレーズが目立ちます.

あなたがあなたのホームページやランディングページで提供するものを注意を引くような方法で明確に説明する必要があるなら、ヒーローのイメージは行くべき道かもしれません。しかし、それはおそらくそれらの使用の範囲です.

ときどき、次のページで使用されるヒーローレイアウトが表示されます。しかし、ほとんどの場合、ヒーロー画像は単により価値のあるコンテンツから注意をそらすだけです。注意して使用してください.

それとは別に、ヒーローレイアウトを使用することには少し欠点があります。はい、一般的ですが、ユーザーはそれらに精通しており、効果的です.

かなり一般的ではないレイアウトオプションは、分割画面レイアウトです。.

9.分割画面レイアウト

全画面レイアウトと同様に、分割画面は、ユーザーが最初にWebサイトにアクセスしたときに注目を集めるのに最適な方法です。 ウェブデザイン会社のホームページ 未満.

このサイトでは、分割画面レイアウトを使用して、2つの部分を提供しています。

上記の例が非常に効果的であるのは、分割画面レイアウトに明確な理由があることです。ウェブサイトは彼らのビジネスに2つの側面があることを明らかにしています–デザインと開発.

同様の例は、ユーザーに明確なバイナリ選択を提供する場合です。分割画面は、2つのオプション間で画面を均等に分割するので、この状況では非常に理にかなっています。.

たとえば、モデリングエージェンシーは 62マネジメント 分割画面を使用して、ユーザーが男性モデルか女性モデルのどちらを探しているかをユーザーに識別させる.

62経営陣は分割画面の設計を使用して、ユーザーが2つのオプションから選択できるようにします。

残念ながら、これらの限られた数のアプリケーションを超えて、分割画面設計を採用する理由はほとんどありません。これは比較的限定的なレイアウトオプションであり、適切なシナリオはそれほど多くありません。ただし、そうである場合、それは断然最良の選択です.

もう少し柔軟性を提供する同様のオプションは、非対称レイアウトです.

10.非対称レイアウト

分割画面レイアウトではビューポートの中央を均等に分割しますが、非対称デザインでは画面を分割できます.

このレイアウトが分割画面より優れている点は、ページの特定の面に強調を加えることができることです。一面の不動産が多いほど、それに集中することができます。これにより、一次コンテンツと二次コンテンツを識別できます.

1次列と2次列の前提が整っているので、このアプローチを複数の方法で使用できます。例えば, フェリックスレズフ 彼のサイトのメソッドを使用して、コンテンツとナビゲーションを分割します.

FélixLesouefは、非対称のレイアウトを使用してサイトのナビゲーションを強調しています。

対照的に、 栄養食 Webサイトは2番目の列を使用して、Webサイトの次のセクションを表示できるようにします.

Nourish Eatsはこのレイアウトアプローチを使用して、セカンダリコンテンツをより目立つように公開します。

多くの点で、非対称レイアウトは優れた選択肢です。柔軟性があり、実装が比較的簡単で、使用頻度も低いです。他の選択肢のいくつかに悩まされることなく、ウェブサイトの見た目を変える便利な方法です。.

レイアウトを選ぶ方法

この記事を読むことで、サイトに適したレイアウトを選択する最初のステップが完了しました。利用できるオプションの種類を学習した.

次に、どのオプションがサイトに適しているかを理解する必要があります。これを行う1つの方法は、競合他社を調べることです。しかし、私はそこで止まらないことをお勧めします。危険はあなたがそれらをコピーすることであり、それは常にあなたを一歩後退させるでしょう.

代わりに、関連するタイプのコンテンツを所有している他のセクターのサイトを見てください。あなたが持っている場合 B2Bオーディエンスを対象としたパンフレットウェアWebサイト, 他の同様のサイトを見てください。同様に、eコマースサイトがある場合は、他のセクターのeコマースを見てください。.

そこから、デザイナーと協力して、いくつかの異なるアプローチを試します。さまざまなレイアウトに基づいてアイデアをワイヤーフレーム化し、コンテンツに最適なものを確認する.

自分で判断できない、または正しい方向に自信がない場合は、一部のユーザーの前にオプションを配置して、反応を確認してください。どちらを好むかを尋ねるだけでなく、重要なコンテンツを見つけたか、会社の内容を理解しているかどうかも尋ねます。.

実際、おそらくあなたは自分のWebサイトのさまざまな部分に対してさまざまなレイアウトアプローチを選択していることに気付くでしょう。ウェブサイトのレイアウトに関しては、適切なタイミングで適切なものを使用することが重要であるため.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map