プロフェッショナルおよび非プロフェッショナルのウェブデザイン

1. レイアウト

Web デザインではまずページのレイアウトを行います。 「ページレイアウト」は、実は古代中国の絵画理論における「ビジネスポジション」です。 Web ページは、テキストと画像の両方を含むレイアウトです。文字の大きさは大きかったり小さかったり、タイトルや本文があったり、画像も大きさが違ったり、水平方向と垂直方向の違いがあったりします。画像とテキストの両方を同時に視聴者に表示する必要があります。 1 つのページに単純にリストすることはできないため、煩雑になることがよくあります。コンテンツのニーズに応じて、これらの画像とテキストは、有機的な全体を形成し、幅広い視聴者に提示できるように、合理的に整理され、特定の順序でレイアウトされる必要があります。

1. 主線と副線が明確に区別され、中心が目立っています。ページ上では、視覚的な中心を考慮する必要があります。視覚的な中心は通常、画面の中央または上部の中央部分にあります。したがって、一般的には重要な記事や写真をこの位置に配置し、それほど重要でないコンテンツを視覚的な中心の外側に配置することができます。このようにして、ページ上の重要なポイントが強調表示され、主要なコンテンツと二次的なコンテンツが区別されます。

2. 互いに補完し合うようにサイズを合わせます。長い記事やタイトルは一緒に配置せず、一定の間隔を空ける必要があります。同様に、短い記事も一緒に配置しないでください。画像の配置についても同様です。画像同士の間に一定の距離ができるようにずらして配置します。これにより、ページがずらして見えるようになり、重心のずれを防ぐことができます。

3. 写真とテキストは互いに補完し合います。テキストと画像は視覚的に補完的な関係にあります。ページ上のテキストが多すぎると、ページが退屈で活気のないものになってしまいます。ページ上の画像が多すぎたり、テキストが不足したりすると、必然的にページの情報容量が減少します。したがって、最も理想的な効果は、テキストと画像が密接に連携して互いに補完し合うことであり、これによりページが生き生きするだけでなく、Web ページに豊富なコンテンツを持たせることができます。

2. 線と形

テキスト、タイトル、画像などの組み合わせにより、ページ上にさまざまな線や形が形成されます。これらの線と形状の組み合わせが、Web ページの全体的な芸術的効果を構成します。ページの芸術的な魅力を高めるには、これらの線と形状を芸術的に一致させるように注意する必要があります。

1. 直線（長方形）の応用。直線の芸術的効果は、滑らかで、直立し、規則的で、すっきりしており、いわゆる輪郭と輪郭を持っています。ページ上で直線と長方形を繰り返し組み合わせると、整然とした明確な視覚効果を生み出すことができます。一般的には、厳粛で真面目な Web ページのテーマに使用されます。

2. 曲線（円弧）の応用。曲線の効果は流動性、活気、ダイナミズムです。ページ上で曲線と円弧を繰り返し組み合わせることで、滑らかで軽快、そしてダイナミックな視覚効果を生み出すことができます。一般的に若々しく活気のある Web ページのテーマで使用されます。

3. 曲線と直線（長方形と円弧）の包括的な応用。上記の 2 種類の線と形状を組み合わせると、Web ページの表現力が大幅に向上し、よりカラフルな芸術的な効果をページに表現できます。この形式の Web ページは適応範囲が広く、さまざまなトピックの Web ページに適用できます。ただし、ページのレイアウトはより難しくなり、適切に処理しないと乱雑な効果が生じます。最もシンプルなアプローチは、ページ上の主な特徴として 1 種類の線 (図形) を使用し、ローカル領域でのみ他の線 (図形) を適切に使用することです。

3. 色処理

色は人間の視覚にとって最も敏感なものです。 Web ページの色を適切に処理すると、半分の労力で 2 倍の効果が得られます。色の適用の一般的な原則は、「全体の調和、局所的なコントラスト」です。つまり、Web ページの全体的な色彩効果は調和がとれていて、局所的かつ小さな領域にのみ強い色のコントラストを持たせることができます。色の使用においては、Web ページのコンテンツのニーズに応じて、さまざまなメインカラーを使用できます。色は象徴的であるため、たとえば、薄緑、エメラルドグリーン、金色、灰茶色はそれぞれ春、夏、秋、冬を象徴します。第二に、軍隊や警察にはオリーブグリーン、医療やヘルスケアには白など、職業の象徴的な色があります。色には、冷たい感じや暖かい感じ、前進や後退の効果など、明らかな心理的感情もあります。また、色にも国民性があり、環境、文化、伝統などの影響を受けて、民族によって色の好みは大きく異なります。色のこれらの特性を最大限に活用することで、Web ページに深い芸術的意味合いを与えることができ、Web ページの文化的趣向を高めることができます。よく使用される配色を以下に示します。

1. 暖色系。つまり、赤、オレンジ、灰色、黄土色などの組み合わせです。この色調を使用すると、Web ページに暖かく、優しく、熱狂的な雰囲気を与えることができます。

2. クールな色。つまり、シアン、緑、紫などの色の組み合わせです。この色調を使用すると、Web ページに穏やかでクール、かつエレガントな雰囲気を与えることができます。

3. 対照的な色調。それは、まったく反対の色を同じ部屋に置くことです。たとえば、赤と緑、黄色と紫、オレンジと青などです。

この色の組み合わせは強い視覚効果を生み出し、人々に明るくカラフルで楽しい雰囲気を与えます。もちろん、対照的な色を適切に使用しないと、逆の効果が生じ、安っぽく、ぎらぎらした、望ましくない効果が生じます。これには、「大調和、小対照」という重要な原則を把握する必要があります。つまり、全体的な色調は統一され調和している必要がありますが、局所的には小さな強い対照があってもかまいません。

最後に、Web ページの背景色の深みと明るさも考慮する必要があります。ここでは、写真用語「ハイキー」と「ローキー」を借用します。明るい背景はハイキーと呼ばれ、暗い背景はローキーと呼ばれます。背景色が暗い場合は、テキストの色を明るくして、暗い背景で明るいコンテンツ (テキストまたは画像) を引き立てます。逆に、背景色が明るい場合は、テキストの色を暗くして、明るい背景で暗いコンテンツ (テキストまたは画像) を引き立てます。この色合いの変化は、色彩科学では「明度変化」と呼ばれます。一部のウェブページの背景は黒ですが、テキストには暗い色が使用されています。色の明るさが近いため、読むときに読者の目が疲れてしまい、読みやすさに影響します。