数学は美しい、というと少し奇妙に思えますが、私も最初にデザインを始めたときはそう思っていました。数学はとても退屈です。最も美しいデザイン、芸術作品、物体、さらには人々にさえ、数学的な共通点があることに驚かれるかもしれません。特に、ギリシャ文字Φ (ファイ) で表される黄金比は、神聖な比率としても知られています。このチュートリアルでは、Web サイトのレイアウトと、それを黄金比に分割する方法について説明します。
Webページのスケルトン
これらは Web ページの主な要素です。整理するにはさまざまな方法がありますが、おそらくこのレイアウトが最も一般的に使用されます。
容器
すべての Web ページは、主に同じ目的、つまりいくつかのページ要素を含めるためにコンテナを使用します。ただし、このメソッドの実装方法は異なります。たとえば、body タグや最も一般的に使用される div などです。過去に一般的に使用されていたテーブルも同様です (テーブルをコンテナとして使用しないでください。これは壊れた方法です)。コンテナは、寝室、キッチン、リビング ルームなどを含む家の外壁と考えてください。
コンテナの種類:
液体: ブラウザの幅に応じて塗りつぶします。
固定: 指定された幅はブラウザの幅に応じて変わりません。
ヘッダ
ヘッダーは実際には特定の要素ではありませんが、ヘッダーは特定の要素であると主張する人もいます。これは、ロゴ、ナビゲーション バー、キャッチフレーズを配置する Web ページのトップレベルでよく使用されます。多くの人は、ページ スタイルとコンテンツを分離しやすくするために、これらの要素を div で囲むことを好みます。ヘッダーは容器とみなされますので、前述の液体と固定の 2 種類のオプションがあります。
ロゴ
ロゴはあなたのアイデンティティでありブランドです。最も一般的に使用される方法は、ヘッダーの左上隅にロゴを配置することです。私たちの読書習慣は左から右、上から下です。そのため、ログは訪問者が一目でわかる場所に配置する必要があります。
ナビゲーション
ページ ナビゲーションは、訪問者がサイトを使用するために必要な最も重要な要素の 1 つです。 見つけやすく、使いやすいものでなければなりません。そのため、ほとんどの人はヘッダー セクション、少なくともページの上部近くにこれを配置します。
ナビゲーションの種類:
水平: 水平表示、「ナビゲーション」と呼ばれます。
垂直: 垂直表示、「メニュー」と呼ばれます
主な内容
コンテンツが王様だということは、誰もが知っているはずです。人々があなたのサイトを訪れるとき、彼らが見たいのはコンテンツです。訪問者が探しているものをすぐに見つけられるように、Web ページの中心となるべきです。
サイドバー
サイドバーは、一部の広告、サイト検索、購読リンク (RSS、Twitter、電子メールなど)、連絡方法などの二次コンテンツを配置する要素です。この要素は必須ではありませんが、多くのサイトで使用されています。通常は右側に配置されますが、メイン コンテンツの閲覧を妨げない限り、左側や両側に配置することもできます。 Web サイトでは水平または垂直のナビゲーションが使用され、サイドバーでは垂直のナビゲーションが使用されることがよくあります。
フッター
Web ページの最後には常にフッターがあり、訪問者に Web ページの最後に到達したことを知らせます。ヘッダーと同様、フッターは特別な要素ではありません。著作権、法的通知、および主な連絡先情報をフッターに含めます。ホームページ、連絡先ページなど、いくつかの重要なリンクを含めることをお勧めします。一部の Web サイトでは、関連資料やその他の重要な情報を提供するためにこの領域が使用されます。
「ホワイトスペース」
これらのページの空白を埋めたいと強く思うかもしれませんが、やめてください。 「余白」も非常に重要です。 NetTuts Web サイトが空白スペースを効果的に使用してページのバランスを作り、良い雰囲気を与えていることがわかります。
上記は Web ページの骨格です。次に、これらの要素を黄金のセクションに分割する方法を見てみましょう。
黄金分割とグリッドの使用
数学は美しいと私が以前言ったことを覚えていますか? 私たちは視覚的な魅力は比率 (黄金分割など) に基づいていると考えています。何千年もの間、アーティスト、デザイナー、建築家などは、作品の美しさを高めるために意識的または無意識的に、共通の比率を使用してきました。この魔法の数字 1.62 (実際には 1.618...) とは何ですか? この数字の由来については説明しませんが、その使い方については説明します。
黄金分割の使い方はとても簡単です。たとえば、メイン コンテンツとサイドバー リストの幅を調べたい場合があります。コンテンツ領域の合計幅を 1.62 で割ると、555.55 ピクセルになります。そこまで正確にする必要はないので、そのまま 555 ピクセルを使用します。これで、メインのコンテンツ要素の幅が 555 ピクセル、サイドバーの幅が 345 ピクセルであることがわかりました。どれだけ簡単かわかりますか？
しかし、待ってください。楽しみはそれだけではありません。黄金分割を他の要素の幅と高さに適用することもできます。
グリッドの使用
あなたもほとんどの人と同じように、毎回電卓を持って黄金比を計算する必要はありません。次に、最も簡単な方法はグリッドを使用することです。したがって、幅または高さを3分の1に分割する必要があります。
より詳細なグリッドを作成するには、グリッドを 3 等分し続けます。前回の記事「ブループリント CSS フレームワークとの密接な関係」を読むと、ブループリント CSS フレームワークが詳細なグリッド システムを使用していることがわかります。 グリッドのデザインが簡単かつ迅速になるだけでなく、美しいレイアウトも作成できます。まだグリッド デザインを使用したことがない場合は、この機会にぜひ試してみてください。花火、フォトショップ、その他のソフトウェア用のグリッド テンプレートを http://960.gs からダウンロードできます。
ご覧のとおり、NetTuts は黄金比に非常によく準拠しています。ページの上から 3 分の 1 は、黄金比に非常に近い 3 つに分割されています。 NetTuts のデザインが非常に魅力的であるのも不思議ではありません。
新しいデザインを作成する場合は、人気のあるサイトをいくつか見つけて、そのレイアウトと黄金比とグリッドの適用方法を確認することを強くお勧めします。次に、時間をかけてレイアウトでの黄金分割の使用とグリッドの使用を練習してください。