WordPressデザインでの空白の効果的な使用
公開: 2022-03-09ウェブサイトは、イメージと意図の両方で異なります。 ある人にとってはうまくいくものが、別の人にとってはうまくいかない。 そうは言っても、すべてではないにしてもほとんどのサイトに適用されるレスポンシブデザインの要素がいくつかあり、すべてのデジタルマーケティングツールと戦略の不可欠な部分である必要があります。 これらの要素の1つは、「空白」の適切な使用です。
もちろん、ウェブサイトのデザインは、外観と効果の中間にあるスイートスポットを常に模索しています。 あなたがこれを達成しようとしている初心者のブロガーであろうと上級の開発者であろうと、挑戦は同じままです。
ただし、WordPressのデザインは、特に空白に適しています。 空白をうまく使用しているサイトの優れた例については、WPTavernを参照してください。 これにはブログのテーマを使用する必要はありません。 自由に実験してください。
WordPressのもう1つの優れた点は、WordPressがどれだけ広く使用されているかです。
その結果、ユーザーが圧倒的に多くの人が、理解しやすいWebサイトを作成するためのヒントを豊富に提供しています。
それは十分なオープニング情報です。 この段落を閉じて、このセクションと次のセクションの間に明確な線引きを作成するために、小さな空白を楽しんでみましょう。
ホワイトスペースとは何ですか?
ある程度、空白はそれが聞こえる通りです。 コンテンツがないページにあるものです。 ただし、このスペースは白でなければならないという考えに騙されないでください。 いいえ、好きな色にすることができます。 WordPressは、もちろん、決定した空白の色相など、プロジェクトで最適に機能するものに関する優れたカスタムカラーポインターを提供します。
例として、WordPressデザインで作成された国立アフリカ美術館サイトの空白部分でのカラーオプションのすばらしい使用法を確認する価値があります。 それらは、注目の画像を美しく補完するのに役立つ静かな背景を形成します。
したがって、空白とは、表面上、多くの機能がない、あらゆる色の空間です。
またはそれは?
顔の向こうを見ると、機能が現れます。 他のデザインアプリケーションと同様に、スペースは、明快さ、コントラスト、コンテキスト、およびフレーミングの観点から非常に重要になる可能性があります。 やがて空白を使用するこれらの理由(およびその他)を見ていきます。
空白の種類
まず、遭遇する可能性のあるさまざまな空白を見てみましょう。
ミクロとマクロ
前者は、基本的に理解を可能にする比較的少量の空白です。 これには、テキスト行間のスペースが含まれます。 これがなければ、ウェブサイトをデザインするべきではないことをユーザーに伝えることを除けば、サイトは明らかにコミュニケーションのツールとして機能しません。
後者は、表示されているコンポーネント間のより大きなスペースを指します。 したがって、ページの境界を形成するスペース、および明確に理解して理解したい画像やテキストのチャンクに呼吸の余地を与えるスペース。 そして、明確な理解があなたのサイトの成功の鍵です。
この分野でWordPressのデザインを合理化する方法を探るのは簡単です。
パッシブおよびアクティブ
受動的な空白は、設計者が意図したかどうかに関係なく表示されます。 行や段落を作成するときにテキストエディタが挿入するのは、スペースの自動存在です。
アクティブな空白は、以下で説明する理由により、デザイナーがページ要素の間に意図的により多くのスペースを与えた場所です。 原則として、要素が互いに明確であるほど、要素間にはより多くのスペースが必要です。 私たちは非常に初歩的な生き物であり、「羽の鳥がくっつく」という精神で働く傾向があります。
空白を使用する理由
それでは、Webデザインで空白が使用される理由を見てみましょう。
明瞭さ
これは非常に重要です。 ウェブサイトのデザイナーが犯す非常によくある間違いは、ページに詰め込みすぎて、伝えようとしている中心的なメッセージが乱雑になり、曖昧になることです。 クリーンなレイアウトが適切なレイアウトであることを忘れないでください。
設計要素が規律の欠如に苦しんでいるような状況では、ユーザーは困惑に直面する可能性が高く、その結果、サイトを時期尚早に離れる可能性があります。 このような貧弱なユーザーエクスペリエンスを提供する場合、高い終了率が期待できます。
乱雑さは、そもそも積載速度にも影響を与える可能性があり、積載速度が速い=放棄率が高い。
ありがたいことに、WordPressを高速化する方法はたくさんあります。
対比
画像やテキストのボックスは、対照的な色のスペースで囲むと、はるかに大きな影響を与える可能性があります。 この種の配色は、ユーザーが次の素材に出会う前に与えられているものをかみ砕くことができるように消化スペースを提供します。
空白を介したコントラストを使用して、サイトの特定の要素を強調表示することもできます。これにより、ユーザーは、たとえばCTAボックスをクリックして特定のルートをたどることができます。
コンテクスト
場合によっては、コンテキストの誤用を防ぐために、少しスペースを確立する必要があります。 不幸なことに、深刻な点とユーモラスなイメージを並置しても、どちらも有利にはなりません。

フレーミング
これは純粋に美的です。 画像はフレームを使用すると見栄えが良くなります。
また、フレームは、他の刺激が忍び込んで侵入するのを防ぐために、事実上画像の周りのスペースです。
フレーミングは少し些細なことのように聞こえますが、非常に重要です。 オンラインストアを始めようとしている人にとって、取引全体の一部は必然的に製品の画像のコレクションになります。 これらの画像をフレーミングなしで互いに強く貼り付けてみてください。 混乱は結果として生じるものです。 目の前にあるものを正しく認識するためには、当然、目にはフレームが必要です。 ちなみに、WordPressのデザインにはいくつかの素晴らしいスタートアップ機能があります。
うまくいけば…
ホワイトスペースは長い間私たちと一緒にいました。 それは20世紀初頭の中国の書記家や芸術家のアプローチにそのルーツを持っています。 これらの職人は、インクとライスペーパーを使って、シートに追加したものだけでなく、空のままだったものにも意味があることに気づきました。 同様に、会話の沈黙はどの単語よりも表現力があり、ページ上のスペースは、適切なタイミングで適切な方法で使用された場合に意味を伝えることができます。
この初めから、空白は20世紀を通して世界的に支配的になったモダニズムを特徴づけるようになりました。 このクールな新古典主義は今日も響き渡り、優雅さと品質の省略形です。 これが、多くのブランドが画像デザインに大きな効果をもたらすためにそれを使用している理由です。 WordPressは、ミニマリストのテーマでスペードで配信できます。
テーマとテンプレート
世界中のテーマデザイナーは、WordPressユーザーに無数のカスタムテーマオプションを提供しており、空白の使用に役立ちます。 eコマーステーマ、クリーンテーマ、純粋にエレガントなテーマ、または柔軟なテーマのいずれを使用する場合でも、WordPressデザインがさまざまなテーマオプションをどのように提供するかを確認する価値があります。
Total WordPressテーマには、たとえば、サイトのアクティブな空白を追加およびカスタマイズするために使用できるいくつかの設定が用意されています。 サイトの幅、列の間隔、全画面の行などのオプションを使用して、投稿やページに空白を追加します。
または、完全にミニマリストで多目的なテーマであるBlankCanvasを使用してすべてを実行することもできます。
テンプレートも、ホワイトスペースの展開に役立ちます。 WordPressは、ランディングページテンプレートまたはより一般的なものが必要かどうかにかかわらず、デザイナーに使用するいくつかの美しいテンプレートを提供します。
バランスを正しくする
空白で重要なことは、バランスをうまくとることです。 前述のように、画面とユーザーが一度に過負荷になるリスクを冒すことはできません。 一方で、あなたは実際に何か言いたいことがあり、提供するサービスがあるように見える必要があります。
使用する空白の量は、Webサイトの内容に大きく依存します。 すべてのマーケティングツールと同様に、あなたがマーケティングしているものはあなたがそれをマーケティングする方法を形作ることができます。 解説の面で多くが必要ですか? 製品が非常によく知られている場合、ユーザーはそれほど多くのコンテキスト情報を必要としません。
たとえば、WordPressのデザインを使用して作成されたWalt Disneyサイトは、ランディングページのほとんど情報のルートをたどりません。 ディズニーの名前が画像に重なっていて、大きな影響を与えています。 あなたが絶対に得られない、そして必要としないのは、ディズニーが誰であるか、そしてそれが何であるかを説明する情報です。
新製品を扱う新興企業の場合、他の考慮事項やSaaSのアイデアを検討する必要があります。 このすべての情報が折り目の上に簡単に表示されるのは魅力的です。
しかし、あなたが与えるための大衆を持っているとしても、あなたはより多くではなくより少ない側で誤りを犯すべきであると言っても過言ではありません。 ユーザーが詳細を知りたいと思ったらすぐに、ユーザーに詳細なサブページを紹介することができます。 これが本当にうまくいった例については、WooCommerceのランディングページを参照してください。
ウェブサイトは、見栄えの良いもので注目を集め、有意義なコミュニケーションを促進することでその注目を有効活用に向けるときに最高の状態になります。 私たちが学んだように、情報の受け渡しはコンテンツの量だけに依存しているわけではありません。 リーダーにデータを取得するためにすべてを一度に指定すると、過負荷になる可能性があります。
これを空白で合理化できます。 また、空白は、エキスパートデザイナーであろうと、出発したばかりの人であろうと、WordPressで最も効果的に使用できます。
ホワイトスペースはスペースを与えます、そしてそれは家に着くためにポイントを得るために必要であるかもしれません。 時には、会話の最も雄弁な部分は妊娠している可能性があります…。 一時停止。