基本的なウェブサイトのデザインの原則

Webサイトが必要なこと、またはWebサイトの再設計が必要なことはわかっていますが、HTML、CSS、およびJavaという言葉で叫び声を上げています。 結局のところ、それらは実際には英語の単語ではありません。 それらは、初心者にはアルファベットのスープのように見えるまったく異なる言語の名前です。 さて、リラックスしてください。 ここで取り上げるウェブサイトのデザイン原則はコーディングとは何の関係もないからです。

‌これらのガイドラインは、使用するWebサイトビルダーツールを最大限に活用するのに役立ちます。 覚えておくのに最適なテンプレート、画像、ルールを紹介します。

この記事の内容は次のとおりです。

• 視覚的な階層
• グーテンベルク、Z、およびFのレイアウト
• 黄金比
• 三分割法
• 色彩理論
• ゲシュタルト理論
• ネガティブスペースとミニマリズム
• モバイル向けに最適化されたデザイン

ブランドを開発する個人のWebサイトを作成する場合でも、中小企業向けのWebサイトのデザインを一新したい場合でも、これらの原則を念頭に置いてください。

視覚的な階層

視覚的な階層は、視聴者が視覚的に区別されたオブジェクトのセットに割り当てる相対的な重要性です。

それは、あなたがたくさんのものを見るとき、あなたは目立つものに集中する傾向があるということを言うための空想的な言い方です。 目立つオブジェクトにもっと注意を払います。

これはどのように機能しますか？ さて、さまざまなサイズの画像のグループを表示する場合、小さな画像よりも大きな画像を自然に重要視することになります。 黒でマゼンタで書かれた単語の束を見ると、マゼンタの単語に引き寄せられます。

いくつかの異なる要素で遊んで、視覚的な階層を確立し、視聴者の注意を必要な場所に引き付けることができます。 これらには以下が含まれます：

• サイズとスケール。 相対的なサイズは重要ですが、スケールも重要です。 何かが「あるべき」よりも明らかに大きいか小さい場合、あなたはそれに気付くでしょう。
• 集中。 焦点が合っていない写真やフォントは、はっきりと焦点が合っているものよりも遠くに感じます。
• 色。 色、色合い、または強度の変化はすべて目を引く可能性があります。
• 書体。 テキスト、フォント、および効果のサイズは、ページ上の情報をランク付けするのに役立ちます。
• 動き。 1つの画像が他の静的なページにバウンスすると、移動する画像に気付くでしょうが、注意してください。 動きが多すぎると、方向感覚が失われる可能性があります。
• ネガティブスペース。 重要な要素を分離して、ページの人口の多い領域から目立たせることができます。

これらのウェブサイトのデザイン原則の多くは、直感的な場所から始まっていることに気付くでしょう。 重要な情報とビジュアルを強調表示することにより、ビジュアル階層を活用します。

グーテンベルク、Z、およびFのレイアウト

組織化は、階層を確立するもう1つの方法です。 自然な視聴習慣を利用して、ブラウザが一時停止する可能性が高い場所に、eコマースマーケティング戦略に不可欠な電子メールサインアップフォームなどの最も重要な情報と機会を配置できます。

最も一般的に使用される3つのレイアウトは、グーテンベルクレイアウト、Zレイアウト、およびFレイアウトです。 それぞれが異なるウェブサイトのデザイン原則を利用しています。

グーテンベルクのレイアウト

3つのうち最も単純なものは、正しく使用すると非常に効果的です。 グーテンベルクのレイアウトは、ページを4つの象限に分割します。 左から右、上から下に読むため、各象限にそれぞれ相対的な重要度が割り当てられます。

‌最も重要な情報は、左上と右下の象限に配置する必要があります。 中途半端な重要性のある資料は、右上の象限に属しています。 左下には、すばやくスキャンしたり、完全に無視したりできる情報と画像のみを格納する必要があります。

Zレイアウト

Zレイアウトは、大量の情報を表示する必要のない最小限のページに最適です。 それは同じ一般的な読書慣行を利用しますが、それはそれらを通して異なるパターンを描きます。

ビューアは、ページの上部に沿って水平方向（左から右）にスキャンし、右上から左下に向かって斜めにカットしてから、水平方向に右下に移動します。

Zレイアウトでは、4つのコーナーのそれぞれと対角線の中央にマテリアルを配置します。

Fレイアウト

Fレイアウトは、より多くのテキスト、特により多くのテキストを含める場合に適しています。

より長く、より人口の多いページをスキャンする場合は、左から右、上から下にスキャンします。 情報は、水平線に沿って対称的に整理する必要があります。

黄金比

優れたウェブサイトのデザイン原則は、ウェブページの各セクションの比率を決定するのにも役立ちます。 黄金比（神の比率と呼ばれることもあれば、ギリシャ文字のファイと呼ばれることもあります）は、人々が自然に視覚的に魅力的または美しいと感じる比率を指します。

これは、線分が異なるサイズの2つのフラグメントに分割されている場合に発生します。 全体に対する大きなフラグメントの比率は、大きなフラグメントに対する小さなフラグメントの比率に等しくなります。

しかし、7年生からの二次方程式について覚えていることを調べようとする必要はありません。 覚えておく必要があるのは、 1.618という数字だけです（実際には、1.6で十分です）。

総面積Xがあり、大きい方の半分の大きさを知りたい場合は、Xを1.618で割ります。 簡単に簡単。

クイックヒント：画像の大きさを把握しようとしている場合は、画像を右クリック（Windows）またはControlキーを押しながらクリック（Mac）して、[検査]を選択します。 ページの右側には、「計算済み」の下のピクセル単位のサイズなど、画像に関する多くの情報が表示されます。

三分割法

画像自体のウェブサイトのデザイン原則を見てみましょう。 あなたはそれらをどこに置くべきか、そしてそれらがどのようなサイズであるべきかをすでに学びました。 三分割法は、写真の構成に関する単純な規則です。

画像を垂直方向に3つの等しいセクションに分割し、水平方向に3つの等しいセクションに分割すると、グリッドが作成されます。 三分割法によれば、これらの線に沿って、および/またはそれらの交点に視覚刺激を配置する必要があります。

黄金比を美しくするようにプログラムされているのと同じように、三分割法を使用して動的で興味深い写真を見つけるようにプログラムされています。

色彩理論

色彩理論を正しく理解する方法はたくさんあるので、色彩理論は圧倒される可能性があります。つまり、適切な印象を伝えるまとまりのある配色にすることです。 これは、さらに深く探求できるトピックの1つです。

この初心者向けの概要については、カラーホイールを手元に置いておくとよいでしょう。

調和するブランドとウェブサイトの色を選択する4つの異なる方法は次のとおりです。

1. 単色になります。 退屈である必要はありません。 さまざまな色合いと色合いを使用して、コントラストを作成します。
2. 補完的になります。 原色を、カラーホイールの反対側の極から描かれたアクセント（たとえば、紫や黄色）と一致させます。
3. 類似してください。 カラーホイール上で隣り合っている3つの色を選択します。
4. トライアドに行きます。 カラーホイールに正三角形（3つの等しい辺を持つ三角形）を描き、3つのポイントで見つけた色を使用します。

あなたが色を選ぶとき、あなたはそれらの暖かさについても考える必要があります。 かっこいい色には青が多く含まれています。はっきりとした色や悲しい色に出くわす可能性がありますが、落ち着きもあります。 温かみのある色は赤と黄色が多くなります。情熱的でエキサイティングな気分になりますが、特定の用途では攻撃的な色に出くわすこともあります。

ゲシュタルト理論

ゲシュタルト理論は、実際には、認知処理を理解するためのフレームワークとして心理学者によって開発されました。

‌本質的に、ゲシュタルト理論は、複雑なビジュアルのセットを見るとき、次の2つのいずれかを行うと言っています。

• 最初に一貫性のある全体を見てから、その部分を見てください
• 最初に紛らわしい全体を見てから、それをより単純な部分またはグループに分解してみてください

その基本理論から引き出された7つのウェブサイトデザイン原則があります：

1. 類似性の法則。 似顔絵で物事をグループ化します。 同様のことが一緒に行きます。
2. 近接の法則。 共通の領域またはそれらの間の相対距離に従って物事をグループ化します。 近くにあるものは一緒に属します。
3. 単純さの法則。 人々は、あいまいなオブジェクトを可能な限り単純な言葉で見ます。 たとえば、重なり合う円は、円弧の集合としてではなく、まさにそれとして認識されます。
4. 連続の法則。 人々は物事を別々ではなく継続的に見る傾向があります。 パスまたはカーブに沿ってオブジェクトをたどります。
5. 知覚の法則。 人々は人物（または焦点）と背景を見ます。 物事は他のものとの関係で立っています。
6. 閉鎖の法則。 人々は物事を理解するために不足している情報を記入します。 破線はまだ線です。
7. 対称性の法則。 人々は対称的なものを関連していると見なします。

これらの原則を使用して、視聴者が提供した情報を解釈できるようにします。

ネガティブスペースとミニマリズム

どちらも整理整頓されたウェブサイトのデザイン原則であるため、これら2つは一緒に属します。

ネガティブスペースは、ウェブサイトをすっきりとエレガントに見せるための白いスペース、または空白のスペースです。 視覚刺激で視聴者を圧倒しないでください。 スペースを空けるためにたくさんの白があることを確認してください。

また、情報が多すぎたり、選択肢が多すぎたりして、視聴者を圧倒したくはありません。 少ないほど確実に多くなります—ミニマリズムを受け入れます。

情報が多すぎると、重要なアイテムが失われます。 与えるコマンドやオプションが多すぎると、訪問者がそれらを選択する可能性が低くなり、代わりにサイトから跳ね返ります。

モバイル向けに最適化されたデザイン

最も重要なウェブサイトのデザイン原則の1つは、サイトがすべてのデバイスで魅力的でユーザーフレンドリーであることを確認することです。

訪問者に、デスクトップで表示されるのと同じ静的ページの周りをドラッグしようと強制しないでください。 スクロールしやすいインターフェースを備えたモバイルユーザー向けにWebサイトを簡単に適応させるツールを使用します。

‌これは訪問者のフラストレーションを防ぐだけでなく、検索エンジン最適化（SEO）の重要な要素でもあります。 Googleのアルゴリズムは、モバイルの最適化を確実に考慮に入れています。

‌新しい顧客に有機的にリーチしたい場合は、しっかりしたSEO戦略が必要です。 それで、あなたを正しい軌道に乗せるウェブサイトのデザイン原則に注意を払ってください。

ウェブサイトのデザインの原則—あなたはそれを行うことができます！

実際、一度始めたら、それはとても楽しいです。 これは、スマートなビジネス戦略とアート＆クラフトのプレイタイムの完璧な融合です。

完璧なサイトを作成するのに役立つウェブサイトのデザイン原則がたくさんありますが、最も重要なポイントは次のとおりです。

1. 視覚的な階層は、視聴者の注意を必要な場所に引き付けるのに役立ちます。
2. 少ないほうがいいですね。
3. モバイルフレンドリーはもう十分ではありません。 モバイルに最適化する必要があります。

だからそれに飛び乗ってください！ あなたがウェブサイトのデザイナーではないという抗議はもうありません。 あなたはすぐにできるし、そうなるでしょう。 始めましょう。