2015年のWebレイアウトの4つの新しいトレンド：スクリーンの分割、コンテナフリーのレイアウト、ブロックグリッド、シングルスクリーンのWebサイト

キーポイント：

• この記事では、2015年に出現(xiàn)した4つの主要なWebレイアウトのトレンドを指摘しています。スクリーンの分割、コンテナフリーのレイアウト、ブロックグリッド、シングルスクリーンのWebサイトです。
• 分割畫面レイアウトは、2つの等しく重要な機能または二重性の概念を強調(diào)するために使用されますが、コンテナフリーのレイアウトはコンテンツに焦點を當(dāng)て、色とタイポグラフィを使用して構(gòu)造自體ではなく階層を作成します。
• ブロックグリッドは、レスポンシブWebサイトを作成するための汎用性の高いツールであり、畫面サイズに応じて調(diào)整できるモジュールを備えています。ただし、このレイアウトを使用してコンテンツを區(qū)別することは課題です。
• シングルスクリーンのWebサイトは、主に畫面の背景畫像に応答的に適合しており、通常はミニマリストのデザインとスクロールバーがありません。スペースが限られているため、このレイアウトには明確なコンテンツ階層が必要です。

新しいWebデザインの概念が毎年登場しますが、いくつかの古いトレンドは徐々に消えています。今後數(shù)か月にわたって、ビデオの背景、タイル、アニメーションのストーリーブックの人気が一時的に増加していることは間違いありません。

一方、2010年に早く登場したレスポンシブWebデザインは、今後もかなり長い間デザインの中心に殘ることはほぼ確実です。

もちろん、これはすべてのWebページが共通の標(biāo)準化された構(gòu)造に頼る必要があるという意味ではありません。それどころか、以前よりも差別化、柔軟性、実験の余地があるかもしれません。

4つのトレンドまたは全體的な計畫を特定しました。これは、來年にレイアウトデザインを支配すると考えています。これらのモデルからインスピレーションを得ることができますが、創(chuàng)造性の出発點としてインスピレーションを使用すると、通常、最高のデザインが生成されます。

これらの傾向は次のとおりです。

スクリーンレイアウトの分割

「スプリット畫面」と呼ばれる場合、通常は畫面が2つの部分（通常は同じサイズ）に分割されるWebサイトです。

このようなページを分割する主な理由は2つあります。

2つの重要な機能を表示します。

1. 二重性の概念を表現(xiàn)します。
最初の狀況は、通常、企業(yè)が2つの同様に重要な特性またはバリアントを持つ製品またはサービスを宣伝する必要がある場合に発生します。この場合、Webサイトは重要な順に要素を積み重ねることが多いため、より伝統(tǒng)的なレイアウトは適切ではない場合があります。

一方、畫面を2つの列に分割することが、同じシステムの2つの異なる側(cè)面を紹介する最良の方法かもしれません（たとえば、出版社と読者の両方にとって有益な出版システム）。

このように、このようにして、主要な機能とマイナーな機能を區(qū)別する必要はなく、読者はすぐに重要なコンテンツに注意を払います。

2番目の理由は、デザイナーが二重性の概念を伝える必要がある場合があるという事実に由來しています。この場合、畫面を2つの部分に分割すると、2つのスペースが作成され、さまざまなトピック、または2つの異なる製品に焦點を當(dāng)てることができます。さらに、このスタイルを使用すると、特定の現(xiàn)実の反対の特徴を強調(diào)することができます。

desktimehttp://m.miracleart.cn/link/d45b6d92e35ff59d3f5a1861e431d581

最初に表示される例は、オフィス共有分野で営業(yè)している會社であるデスクタイムのホームページです。彼らはページを2つの部分に分割して、すでにオフィスを所有している人々とそれを探している人々の両方のニーズを満たします。

したがって、彼らは「垂直セグメンテーション」を使用して、サービスの2つの同様に重要な機能と同じ時間を取得します。彼らが採用するスタイルは効果的で実用的であり、非常に簡潔で明確です。よくやった！

注：このスクリーンショットを撮影してから、8＆4が再設(shè)計されました。

http://m.miracleart.cn/link/ad100897c6f809081d942836af421f86

2番目の例は、デジタルマーケティング會社の8＆4から來ています。ホームページは2つの部分に分割されており、デザインは白色と平らな色のコントラストに基づいています。ここの部門は、會社が持っているすべての異なる機能を表現(xiàn)するために使用されます。

「垂直セグメンテーション」スタイルは、セグメンテーション効果を弱める「＆」の存在にも依存します。

コンテナレスレイアウト

デザインの開始以來、デザイナーはボックス、形狀、ラインなどの要素を使用して、デザインにコンテンツを分割して含めています。たとえば、タイトルまたはフッターが常に他のコンテンツと視覚的に分離するように設(shè)計されている方法を検討してください。

新しいトレンドが出現(xiàn)しており、グラフィック構(gòu)造を削除し、より無料でオープンなスタイルに目を向けるという中心的なアイデアがあります。

この傾向はミニマリズムとある程度の共通性を持っていますが、さらに一歩進んでいます。実際、ミニマリズムは通常、シンプルで線形構(gòu)造を使用しています。この新しい「コンテナレス」スタイルは、視覚的なパッケージを完全に取り除きます。

コンテンツ自體が注目の中心になり、情報の階層は、フレームや構(gòu)造ではなく、色の選択、場所、思慮深いタイポグラフィによって決定されます。

forewordhttp://m.miracleart.cn/link/93bb49ede783ed9c09b650c9234be21a

ホームページからわかるように、序文はニューヨークとパリに拠點を置くインタラクティブな代理店です。彼らのウェブサイトは、任意の要素をキャンセルし、ユーザーの注意はここで色とフォントに焦點を當(dāng)てています。

特に、彼らはタイポグラフィを巧みに使用して、最も重要な企業(yè)情報を提供します。色は、主に他のクリック可能なサウンドを強調(diào)するために使用されます。このウェブサイトがあらゆる點で反応することに加えて、非常に簡潔であることは明らかです。

ブロックグリッド

ここで、グリッド構(gòu)造がレスポンシブWebサイトを作成するための非常に効果的な方法になる可能性があることをここで指摘する必要はありません。この場合、各モジュールには、タイトル、畫像、テキストなどの特定のコンテンツが含まれます。

モジュールは通常、Webサイトのホームページで使用されますが、ニーズを満たすために他のページで開発できます。

各モジュールは柔軟になるように設(shè)計されており、畫面サイズに適応します。これにより、強力な「グリッドレイアウト」が非常に汎用性の高いツールになり、Webサイトやモバイルアプリケーションで等しく効率的に使用できます。

ただし、このアプローチの課題の1つは、同じサイズの多くのモジュールを作成する場合、最も興味深いコンテンツを古くて重要でないプロジェクトと區(qū)別することが困難であることです。

実際には、多くのブロックが同じサイズである場合、ユーザーの注意は特定のアイテムに引き付けられない場合があります。この問題を回避するために、新しいアプローチは、モジュールに含まれるものに基づいて、さまざまなサイズのモジュールを作成することです。

注：このスクリーンショットを撮影してから、偉人たちも再設(shè)計されました。

http://m.miracleart.cn/link/2fe37bd25993870f5a38563dd25b1d05

Greatsは、主にそのウェブサイトを通じてメンズシューズを販売するニューヨークに拠點を置く會社です。彼らのウェブサイトはディスプレイウィンドウなので、すべての詳細が慎重に研究され、考慮されています。

「greats」は、グリッドレイアウトの実用性を選択します。彼らはホームページをモジュールの行に積み重ね、それぞれに靴が含まれています。すべてのモジュールのサイズは類似しており、その形狀は暗黙的であり、厳密にマークされていません。実際、ユーザーは靴のディスプレイ以外のものを無視することをお勧めします。

シングルスクリーンのWebサイト

過去6か月間に見た最後のトレンドは、レスポンシブに焦點を當(dāng)てており、常に畫面の背景畫像に適応するサイトです。多くの場合、これらのサイトは非常に簡潔であり、確かにミニマリストのデザインの感觸に向かう傾向があります。

このデザイントレンドの象徴的な特徴は、スクロールバーの欠如です。つまり、これらのサイトはほとんどの場合、ほとんどの場合、UIに対して「シングルページアプリケーション」アプローチを採用しています。

利用可能なコンテンツスペースが限られているため、設(shè)計者は非常に明確なコンテンツ階層を念頭に置いておく必要があり、関連性の低い情報を含めると特に目が肥えている必要があります。

ほとんどの場合、畫像（またはビデオ）がデザインを支配し、他のデザインのアイデアのための非常に限られたスペースを殘します。それは製品を紹介するか、単に感情的で映畫のような雰囲気を呼び起こすために使用することができます。

シャムバラの寶石 http://m.miracleart.cn/link/885ca3d99fd35f509a2aa0130e8bf64f

「シャムバラの寶石」は、さまざまなジュエリーを販売する會社です。ウェブサイトには、作品の一部を表示するユニークなページで構(gòu)成されるホームページがあります。スクロールバーはありません。Webサイトのナビゲーションは、畫面の上部にあるメニューで提供されます。

私がこのサイトで本當(dāng)に気に入っているのは、背景が常に変化していることです。実際、スペース全體に適した畫像は、垂直分割畫面で交互に表示されます。

上記の例は、優(yōu)れた効果的なデザインが、表示される4つまたは5つの最も一般的なレイアウトパターンにバインドする必要がないことを示しています。それぞれが、私たちが見る人気のあるグリッド/フレームの親しみやすさとセキュリティから始めたいという衝動に抵抗し、結(jié)果として素晴らしい結(jié)果を得ることができます。

これは、より一般的なWebレイアウトが機能しないことを意味しますか？

もちろん

そうではありません。しかし、マーク?トウェインが言ったように、「ハンマーを持っている人のために、すべてが釘のように見えます。」

爪が見えていることを確認してください。

（以下は、元のFAQパーツの擬似オリジナル作業(yè)であり、元の意味を維持し、ステートメントの調(diào)整と単語の代替を行っています）

Webレイアウトのデザインに関するよくある質(zhì)問

Q：最新のWebレイアウトデザインの傾向は何ですか？

A：最新のWebレイアウトデザインの傾向は、常に進化し、変化しています。いくつかの一般的なトレンドには、ミニマリストのデザイン、非対稱レイアウト、スプリットスクリーンレイアウト、モバイルファーストデザインが含まれます。これらの傾向は、シンプルなナビゲーションと魅力的なコンテンツを提供するユーザーフレンドリーなエクスペリエンスの作成に焦點を當(dāng)てています。また、大膽な色、ユニークなタイポグラフィ、高品質(zhì)の畫像やビデオを使用して、視覚的な魅力を強調(diào)しています。

Q：ウェブサイトのレイアウトをより魅力的にする方法は？

A：ウェブサイトのレイアウトをより魅力的にするには、ユーザーエクスペリエンスに注意してください。これは、ウェブサイトが簡単にナビゲートできるようにし、クリアメニューとリンクを確保することで実行できます。高品質(zhì)の畫像とビデオを使用して、ユーザーの注意を引き付けます。また、コンテンツがターゲットオーディエンスに関連して楽しいことを確認してください。クイズや投票などのインタラクティブな要素を組み込むことも、エンゲージメントを高めることができます。

Q：Webレイアウトにおけるモバイルファーストデザインの重要性は何ですか？

A：モバイルファーストデザインは、モバイルデバイス、デスクトップまたはその他のデバイスの設(shè)計を優(yōu)先する設(shè)計戦略です。これは重要です。なぜなら、ますます多くの人々がモバイルデバイスを使用してインターネットにアクセスしているからです。モバイルファーストデザインにより、ウェブサイトが見栄えが良く、すべてのデバイスでうまく機能し、ユーザーエクスペリエンスが向上します。

Q：Webレイアウトデザインで色を効果的に使用する方法は？

A：色は、Webレイアウト設(shè)計で重要な役割を果たします。感情を設(shè)定したり、感情を伝えたり、ユーザーの行動に影響を與えることができます。色を効果的に使用するには、ブランドアイデンティティとターゲットオーディエンスを検討してください。ブランドを反映し、視聴者を引き付けるパレットを選択してください。対照的な色をテキストと背景として使用して、読みやすさを確保します。さらに、色を使用して、Webサイト上の重要な要素や情報を強調(diào)します。

Q：Webレイアウトデザインにおける統(tǒng)合の役割は何ですか？

A：TypeTtingは、Webレイアウト設(shè)計の重要な要素です。情報を伝えるだけでなく、ウェブサイトのトーンと性格も設(shè)定します。読みやすく、ブランドスタイルを反映したフォントを選択してください。さまざまなフォントサイズと厚さを使用して階層を作成し、ユーザーの注意を誘導(dǎo)します。また、読みやすさを確保するために、テキストと背景の間に十分なコントラストがあることを確認してください。

Q：マルチメディア要素をWebレイアウトデザインに追加する方法は？

A：畫像、ビデオ、オーディオなどのマルチメディア要素は、ユーザーエクスペリエンスを向上させ、ウェブサイトをより魅力的にすることができます。コンテンツに関連する高品質(zhì)の畫像とビデオを使用します。バックグラウンドビデオやアニメーションを使用して視覚的な関心を高めることを検討してください。さらに、オーディオを慎重に使用し、ユーザーに再生、一時停止、または調(diào)整などの制御機能を提供します。

Q：避けるべきWebレイアウトデザインの一般的な間違いは何ですか？

A：Webレイアウト設(shè)計で避けるべき一般的な間違いには、亂雑なレイアウト、ナビゲーションの低下、過剰なフォントまたは色が含まれ、モバイルデバイス用に最適化されていません。また、低品質(zhì)の畫像やビデオを避け、インテリアが読みやすく理解しやすいことを確認してください。

Q：ウェブサイトのレイアウトの使いやすさを改善する方法は？

A：Webサイトのレイアウトの使いやすさを向上させるには、ウェブサイトが簡単に移動できることを確認し、メニューとリンクをクリアしていることを確認してください。ウェブサイト全體で一貫したレイアウトとデザイン要素を使用します。さらに、ウェブサイトが高速でロードされ、モバイルデバイス用に最適化されていることを確認してください。畫像の代替テキストやビデオの字幕など、障害を持つユーザーにアクセシビリティ機能を提供します。

Q：Webレイアウトデザインにおける空白の役割は何ですか？

a：空白またはネガティブスペースは、デザインの要素間のスペースです。バランスを取り、ユーザーの注意を誘導(dǎo)し、読みやすさを改善するために使用できます。空白のスペースを離れることで、デザインをシンプルでモダンに見せることもできます。ただし、ホワイトスパースを戦略的に使用し、デザインを不完全に見せないようにあまりスペースを殘さないようにしてください。

Q：Webレイアウトのデザイン小説と最新の狀態(tài)を維持するにはどうすればよいですか？

A：Webページのレイアウトデザイン小説を維持するには、最新のデザインのトレンドとテクノロジーをお知らせください。コンテンツを定期的に更新して、視聴者に関連性と楽しいものにします。また、數(shù)年ごとにウェブサイトを再設(shè)計して、モダンで魅力的に保つことを検討してください。

以上が2015年の新しいWebレイアウトのアイデアの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。