ウェブサイトのデザインの最も重要な部分であるサイトの背景は、ユーザーエクスペリエンスの向上に役立つさまざまな方法で使用できます。
今日、背景を適切に作成することは以前よりも困難であり、他の背景の可能性の一部を制限しながら、いくつかの新しい課題を提示しますwise 持っているでしょう。
たとえば、昔の背景をデザインの実用的な部分として実際に使用することもできます。 たとえば、視聴者の注意を重要なものに向けるために矢印を付けることができます。
物事が変わった理由は responsive デザイン、および人々が使用している可能性のあるさまざまな画面サイズと画面タイプの多様性。
その結果、背景は今日のサイトデザインではそれほど重要ではなくなり、かなりのサイトには公式の背景がまったくありません。
背景は本当に重要ですか? 見つけるために、上位30のランク付けされたWebサイト(リピートは含まない)を検査しましたが、その結果は非常に興味深いものでした。
上の画像からわかるように、上位にランクされた Web サイトは背景をまったく気にせず、ユーザーの受け入れに関して少しも害を与えていないようです.
これは、ウェブサイトのデザインに関する従来の考え方に反するものですが、冷酷な事実に反論することは困難です. 驚くべきことに、リストの最初の背景付き Web サイトは、10 番に到達するまで開始されません。 Twitter、その背景はログインしていない場合にのみ表示されます。
30年の上位2017のウェブサイトで、適切な背景を持つ唯一のサイトは次のとおりでした。
- Twitter、写真の背景付き(10位)
- ライブ(Outlook)、無地の背景(ランキング12位)
- NetFlix、コラージュ背景あり(21位)
- 単色の背景を持つWordPress(ランク26th)
- 写真付きの背景のBing(29位th)
- Tumblr、写真の背景(ランク30th)
したがって、トップ20のウェブサイトの30%だけが背景を持っており、そうしたものはリストのかなり下にありました。
サイトの背景の唯一の利点は、複数のページにわたってサイトのアイデンティティの感覚を維持するのに役立つことですが、この目的を同様に達成できる他の要素があるため、それは大きな利点ではありません.
短所はたくさんあります。 背景は、サイトに関しては追加の課題をもたらします responsive古くなるのを避けるために頻繁な更新が必要になる場合があります。
現代のデザイナーにとってのもうXNUMXつの課題は、静的な背景に加えて、ビデオの背景を作成することもできるようになったことです。 後者を選択する場合は、多くのユーザーが十分に考案されていないビデオの背景に煩わしいと感じるため、何をしているのかを知ることが重要です。
背景を使用しない理由が非常に多いため、これらのトップランクの Web サイトの足跡をたどって、背景のアイデア全体を完全に捨てることにするかもしれません。 しかし、ブリーフで、サイトには背景が必要であると主張されている場合は、どうすればよいでしょうか? それが、この記事の残りの部分で解決しようとしていることです。
背景を含める必要があります
コンテンツは、常にページの背景の上のレイヤーに配置する必要があります。 ページ要素を異なるレイヤーに分離しないと、何かを変更する必要があるときに問題が発生する可能性があります。
このレイヤー分離をできる限り使用することをお勧めします。 たとえば、サイトのロゴを本当に背景に直接組み込む必要がありますか? ほとんどの場合、ロゴを別のレイヤーに置く方が賢明です。 このようにして、ロゴを更新する必要がある場合、背景全体とは関係なく更新できます。
この方法でレイヤーを使用すると、作成側の作業が増えますが、保守側の作業は少なくなります。 また、いつでも必要に応じて、物事を非表示にしたり、移動したり、動作を変えたりできるため、最大限の制御が可能です。
この画像は、背景デザインテンプレートの理想的な構造を示しています。
各レイヤー内(ベースレイヤーを除く)には、必要に応じてさらに分離するために追加のレイヤーを作成するスコープがあります。
作成する分離度が高いほど、より多くの制御を得ることができます。 それは今の自分にとっては重要ではないように感じるかもしれませんが、後でそれが要因になることがよくあります.
理解しておくべき最も重要なことは、「背景」はコンテンツではないものであるということです。 したがって、ページ上にあることを意図しているがコンテンツとしてではないテキストまたは画像は、背景の一部としてカウントされますが、すべての人がそのように分類するわけではありません。
骨組み
Webデザインの初期の頃、フレーミングは、コンテンツが背景との関係でどこにあるべきかを理解するという単純な問題でした。 この日は responsive ただし、設計は通常、それよりも複雑です。
responsive デザインでは、フレーミングの問題に対処するための選択肢はXNUMXつだけです。 最初のオプションは、利用可能な画面サイズに関連してコンテンツと背景画像を拡大縮小することです。 これは、設計の整合性が最も重要な要素である場合に最適ですが、これは非常にまれな状況です。
XNUMX番目のオプションは、コンテンツの読みやすさがデザインの整合性よりも重要であるより一般的な状況で、背景のセクションまたは背景全体を段階的に廃止することです。
ちなみに、この「デザインの整合性」の問題は、どのような画面で表示されても、デザインが常に同じように見えることを意味します。 反対に、コンテンツがどのような種類の画面で表示されていても、コンテンツは常に(多かれ少なかれ)同じように見えます。
スケーリングの使用 responsiveネス
スケーリングを使用して、さまざまなデバイスの種類や向きでフレーミングを統一すると、デザインの整合性が維持されますが、特に写真の背景を使用する場合は、必ずしも期待どおりまたは希望どおりの結果が得られるとは限りません。
このテクニックの実際の例を見てみましょう。 ポートレートモードのSamsung Galaxy S5から始めます(これらの画像は記事に収まるようにスケーリングされているため、そこに表示されるテキストは実際にデバイス自体で判読できることに注意してください).
これは、横向きモードでの外観です (ほとんどの場合、電話をかける以外は横向きに携帯電話を保持する方が適切ですが、依然として携帯電話を縦向きに保持することを主張する人がいます.
ご覧のように、640 x 360ピクセルしか操作できない場合でも、拡大縮小するとレイアウトは完全に良好です。 次に、iPadを縦向きにします。
そして風景。
スケーリングを使用すると、ポートレート ビューで無駄な垂直方向のスペースが多くなる可能性があることを除けば、さまざまなデバイスと解像度の間でほとんど変化がないことがわかります。
メニュー項目が常に2×2のレイアウトのままではなく、1×4のグリッドにラップされるように、背景とコンテンツの部分で異なる方法を使用する方が実際には良いでしょうが、そうしない理由は利用可能な垂直スペースの量を予測することは不可能です。
したがって、スケーリングの利点は、状況に関係なく、一部のコンポーネントが常に表示されるようにしたい場合です。
段階的な非表示と表示の使用 responsiveネス
より実用的なシナリオであり、ほとんどのデザイナーがほとんどの場合に使用するシナリオは、背景 (またはその一部) を表示する十分なスペースがない場合に単純に段階的に廃止できるデザインです。そのため、サイトのコンテンツは常に最大の注目を集めます。
この方法を使用した場合の違いの例を次に示します。 説明するために、同じデバイスと向きを使用します。 まずはSamsung Galaxy S5のポートレート。
Samsung Galaxy S5の風景。
iPadポートレート。
iPadランドスケープ。
ここでは、デバイス間の大きな違いを見ることができます。 Samsung Galaxy S5 の小さな画面では、デバイスが縦向きまたは横向きのどちらで保持されているかに関係なく、背景を表示できず、表示される内容は使用可能なスペースに合わせて調整されます.
同じサイトをiPadで表示すると、背景は向きに関係なく常に表示されますが、表示されるものには多少の違いがあります。
背景デザインのベストコンセプト(順)
1.単色(または色なし)
2.写真(ストレッチ)
3.小さなタイル(完璧なシームレス)
4.大きなタイル(完璧なシームレス)
避けるべきことは、目立たないようにできる場合を除き、写真の背景をタイリングすることです。 ストレッチは、通常、写真の背景や事前定義されたスペース内にそれらを閉じ込めるのに最適です。
大きな派手な背景の時代は、オンラインでの閲覧のみを目的とした専門サイトを除いて、ほとんど死んでいます。 desktop. のために設計されたほとんどの背景 desktop携帯電話で見ると見栄えが悪くなります。
実行できる回避策は、CSSファイルに膨大な数のブレークポイントを設定してで設計することです。diviブレークポイントごとにXNUMXつの背景がありますが、通常どおり、デバイスタイプがわかっている場合でも、使用可能な垂直方向のスペースを計算できないという課題があります。
ヘッダー画像提供
コメント 0応答