WordPress デザインにおける空白の効果的な使用
Web サイトはイメージも意図も異なります。ある人にとってうまくいくものは、別の人にとってはうまくいきません。そうは言っても、レスポンシブ デザインには、すべてではないにしても、ほとんどのサイトに適用できる要素がいくつかあり、すべてのデジタル マーケティング ツールと戦略の重要な部分となるはずです。その要素のひとつが「余白」の上手な使い方です。
もちろん、Web サイトのデザインでは、見た目と効果の間のスイート スポットを常に探しています。あなたが初心者ブロガーであっても、これを達成しようとしている上級開発者であっても、課題は変わりません。
ただし、WordPress のデザインは特に、空白に適しています。ホワイトスペースをうまく使用したサイトの優れた例については、WPTavern を参照してください。これにはブログテーマを使用する必要はありません。気軽に実験してみてください。
WordPress のもう 1 つの優れた点は、それが非常に広く使用されていることです。
その結果、多くのユーザーが、わかりやすい Web サイトの作り方について豊富なヒントを提供することになります。
オープニング情報はこれで十分です。この段落を終わりに近づけて、このセクションと次のセクションの間に明確な境界線を作成するために少し空白を楽しみましょう。
ホワイトスペースとは何ですか?
ホワイトスペースは、ある程度、文字通りの意味です。それは、コンテンツが存在しないページにあるものです。ただし、このスペースは白でなければならないと考えないでください。いいえ、お好きな色で構いません。 WordPress は、プロジェクトに最適なものに関する優れたカスタム カラー ポインターを提供します。これには、もちろん、ユーザーが決定した空白の色合いも含まれます。
例として、WordPress デザインで作成された国立アフリカ美術館サイトの空白部分での色のオプションの見事な使い方に注目してみる価値があります。静かな背景を形成し、注目の画像を美しく引き立てます。
つまり、白色空間とは、一見すると、何の機能も持たないあらゆる色の空間のことです。
またはそれは？
顔の向こう側を見ると機能が見えてきます。他のデザイン アプリケーションと同様に、スペースは、明瞭さ、コントラスト、コンテキスト、フレーミングの点で非常に重要です。ホワイトスペースを使用するこれらの理由 (およびその他の理由) については、追って説明します。
空白の種類
まず、遭遇する可能性のある空白の種類を見てみましょう。
ミクロとマクロ
前者は、基本的に理解を可能にする比較的少量の空白です。これには、テキストの行間のスペースも含まれます。これがなければ、Web サイトをデザインすべきではないということをユーザーに伝えることを除いて、サイトは明らかにコミュニケーション ツールとして機能しません。
後者は、表示上のコンポーネント間のより大きなスペースを指します。つまり、ページの境界を形成するスペースと、明確に評価して理解してもらいたい画像やテキストの塊に余裕を与えるスペースです。そして、明確に理解することがサイトの成功の鍵となります。
この分野で WordPress デザインを合理化する方法を検討するのは簡単です。
パッシブとアクティブ
デザイナーが意図したかどうかに関係なく、受動的な空白が表示されます。これは、行や段落を作成するときにテキスト エディタによって自動的に挿入されるスペースです。
アクティブなホワイト スペースは、デザイナーがページ要素間に意図的に広いスペースを与えた場所です。その理由については以下で説明します。一般的な規則として、要素が互いに区別できるほど、それらの間にはより多くのスペースが必要になります。私たちは非常に初歩的な生き物であり、「羽の鳥がくっつく」ような考え方で仕事をする傾向があります。
空白を使用する理由
では、Web デザインでホワイトスペースが使用される理由を見てみましょう。
明瞭さ
これは非常に重要です。 Web サイトのデザイナーが犯す非常によくある間違いは、ページに多くのものを詰め込みすぎて、伝えようとしている中心的なメッセージが乱雑になり、見えにくくなってしまうことです。きれいなレイアウトが良いレイアウトであることを忘れないでください。
デザイン要素に規律が欠けているような状況では、ユーザーは困惑に直面する可能性が高く、その結果、サイトから早期に離脱する可能性があります。このように質の悪いユーザー エクスペリエンスを提供すると、高い離脱率が予想されます。
おそらく、乱雑すぎるとそもそも読み込み速度にも影響があり、読み込み速度が速い=放棄率が高くなります。
ありがたいことに、WordPress を高速化する方法はたくさんあります。
対比
画像やテキストボックスを対照的な色のスペースで囲むと、より大きなインパクトを与えることができます。この種の配色は、ユーザーが次の内容に出会う前に内容をよく理解できるように、消化の余地を与えます。
空白によるコントラストを使用して、サイトの特定の要素を強調表示することもできます。これにより、CTA ボックスをクリックするなどして、ユーザーが特定のルートをたどるよう促すことができます。
コンテクスト
場合によっては、コンテキストの誤用を防ぐために、少しスペースを確保する必要があります。深刻な論点とユーモラスなイメージの不幸な併置は、どちらの利益にもなりません。
フレーミング
これは純粋に美的です。フレームがあると画像がより美しく見えます。
そしてフレームは、他の刺激が忍び寄ったり侵入したりするのを防ぐための、効果的な画像の周囲のスペースです。
フレーミングは少し些細なことのように思えますが、非常に重要です。オンライン ストアを始めようとしている人にとって、取引全体の一部は必然的に製品の画像のコレクションになるでしょう。フレームを使用せずに、これらの画像を互いにしっかりと貼り付けてみてください。その結果、混乱が生じます。目の前にあるものを適切に認識するには、自然にフレームが必要です。ちなみに、WordPress のデザインには、優れたスタートアップ機能がいくつか用意されています。
うまくいけば…
ホワイトスペースは私たちにとって長い間存在しています。そのルーツは、20 世紀初頭の中国の書家や芸術家のアプローチにあります。インクとライスペーパーを使って作業するこれらの職人たちは、シートに何を追加するだけでなく、空のままにすることに意味を見出しました。同様に、会話中の沈黙はどんな言葉よりも表現力があり、適切なタイミングで適切な方法で使用されれば、ページ上のスペースは意味を伝えることができます。
この始まりから、ホワイトスペースは 20 世紀を通じて世界的に主流となったモダニズムを特徴づけるようになりました。このクールな新古典主義は今日でも反響を呼び、エレガンスと品質の略語です。これが、多くのブランドがイメージデザインに大きな効果をもたらしている理由です。 WordPress は、そのミニマルなテーマでそれを見事に実現できます。
テーマとテンプレート
世界中のテーマ デザイナーが、空白の使用に役立つ無数のカスタム テーマ オプションを WordPress ユーザーに提供してきました。 e コマース テーマ、クリーンなテーマ、純粋にエレガントなテーマ、または柔軟なテーマのいずれを使用したい場合でも、WordPress のデザインがどのようにさまざまなテーマ オプションを提供しているかを見てみる価値があります。
Total WordPress テーマには、サイト上のアクティブな空白スペースを追加およびカスタマイズするために使用できるさまざまな設定が用意されています。サイトの幅、列間隔、全画面行などのオプションを使用して、投稿やページに空白を追加します。
または、完全にミニマリストで多目的なテーマである Blank Canvas を全力で使用することもできます。
テンプレートも空白の展開に役立ちます。 WordPress は、ランディング ページ テンプレートが必要な場合でも、より一般的なテンプレートが必要な場合でも、デザイナーに使用できる美しいテンプレートを提供します。
バランスを正しく取る
ホワイトスペースで重要なのは、適切なバランスを実現することです。前述したように、一度に多くのものを表示して画面とユーザーに過負荷をかける危険を冒すことはできません。一方で、言いたいことや提供できるサービスを実際に持っているように見せる必要があります。
使用する空白の量は、Web サイトの内容によって大きく異なります。すべてのマーケティング ツールと同様に、何をマーケティングするかによって、そのマーケティング方法が決まります。説明には多くの必要がありますか？製品が非常によく知られている場合、ユーザーはそれほど多くのコンテキスト情報を必要としません。
たとえば、WordPress デザインを使用して作成された Walt Disney サイトは、ランディング ページに情報がほとんどないというルートをたどっています。画像の上にディズニーの名前が重なってインパクト大です。絶対に得られないし、必要もないのは、ディズニーが何者で、それが何についてのものかを説明する情報です。
新製品を開発した新興企業の場合、他にも検討すべき考慮事項や SaaS のアイデアが存在します。これらすべての情報がスクロールせずに見える範囲に簡単に表示されるのは魅力的です。
しかし、たとえ多くのことを伝えなければならないとしても、より多くを与えるよりも少なくするほうがよいと言えるでしょう。ユーザーが詳細を知りたいと思ったら、いつでも詳細が記載されたサブページを参照することができます。これが非常にうまくいった例については、WooCommerce ランディング ページを参照してください。
ウェブサイトは、見栄えの良さで注目を集め、有意義なコミュニケーションを促進することでその注目を有効に活用できるときに最高の状態になります。私たちが学んだように、情報の受け渡しはコンテンツの量だけに依存するわけではありません。リーダーにデータを取得するために一度にすべてを提供すると、過負荷が発生する可能性があります。
空白を使用してこれを合理化できます。また、エキスパートのデザイナーであっても、まだ始めたばかりの人であっても、空白スペースは WordPress で最大限の効果を発揮するために使用できます。
ホワイトスペースはスペースを与え、得点を決めるためにはそれが必要になる可能性があります。場合によっては、会話の中で最も雄弁に語るのは妊娠中の人かもしれません。一時停止。