サイトを作成するための数学的アプローチ

「数学は美しい。」 これは、数学の単なる言及で驚startする人々にとっては、ばかげているように見えるかもしれません。 しかし、自然と私たちの宇宙で最も美しいもののいくつかは、最小から最大までの数学的性質の投影です。 古代の哲学者の一人、アリストテレスは次のように語っています。「数理科学はすべてを対称性と限界に整然と並べる傾向があり、それらは美の主要な形態です。」

その自然の美しさのために、数学は芸術と建築の一部です。 しかし、実際にはサイトやアプリケーションの設計には使用されていません。 これは、多くの人が数学とデザインを比較しないという事実によるものです。 それどころか、数学は真に魔法のようなデザインを作成するためのツールになる可能性があります 。 ただし、作成物ごとに数学に頼るべきではありません。 事実は、数学をアシスタントと見なすべきだということです。 わかりやすくするために、この記事で説明した数学的原理を表すサイトをいくつか作成しました。 また、設計で使用できる推奨事項も作成しました。



ここで与えられたすべての推奨事項は、この記事とその例を書くプロセスでも使用されました。 執筆の過程で、この記事で示したすべての設計手法が数学的な性質を持っていること、つまり対称性を持っていることを確認しました。 また、記事Web Design Algorithmにも依存しました。 アプローチを複雑にしないために、私たちはミニマリストのデザインと、単一ページのレイアウトを優先することを試みました。 明らかに、この記事の例は、既成のソリューションではなく、プロジェクトの基礎として役立つはずです。

ゴールデンセクション「and」ゴールデンレクタングル

神の割合としても知られる黄金比は、約1.618033987の値を持つ無理な数学定数です。 黄金比（黄金比、極端および中期の区分）は、連続する値を2つの部分に分割することで、小さい部分が大きい値を大きい値として、値全体を表します。




Webデザインでの黄金比の使用方法を説明する非常に詳細な記事「Webデザインでの黄金比の使用」を既に公開しています。 今日の記事では、Webデザインで金色の長方形を使用する方法について説明します。 金色の長方形は、その側面が1：（1対1）の比率、つまり1:18に対応する場合です。

金色の長方形を作成するのは簡単です。 最初に、正方形を構築する必要があります。 次に、一方の辺の中央から反対側の角に線を引き、この線を円弧の半径として使用して、長方形の高さを決定します。 最後に、半径が描画される角度がセクションの右下隅であり、左上隅が円弧で区切られているセクションを完了することにより、長方形を完成させます。



例として、以下のミニマリストデザインを検討してください。 6つの黄金の長方形があり、各行に3つの長方形があります。 長方形は299 x 185ピクセルです。 したがって、これらの長方形の辺は黄金比、つまり299/185 = 1.616を形成します。 ゴールデンレクタングルを囲む大きな空きスペースが、各ブロックがその目的を果たす落ち着いたシンプルな雰囲気を作り出していることに注意してください。 少数の色のみが使用され、すべてのブロックは非常に似ていますが、ナビゲーションは明白でシンプルです。



ただし、一貫した設計を維持しながら新しいブロックを追加することは非常に困難です。 おそらく、唯一の賢明な解決策は、3行目にブロックを追加し、他の目的のために残りの水平スペースを使用することです。 下の画像をクリックすると、拡大版が表示されます。

可能な応用

このような長方形は、フォトギャラリー、プレゼンテーションサイト、製品カタログに適しています。 また、それらを異なるシーケンスで使用して、美しいデザインを得ることができます。 たとえば、このアプローチを使用して、サイドメニューを整理し、広告を表示できます。 当然、このアプローチはプロのサイトを作成するためには使用されません。 また、グリッドで作業し、配置、ブロックの比率を考慮し、サイトの主な目標に集中する必要があります。 たとえば、CSS / Jqueryベースのラバーデザインは、興味深いデザイン決定になりますが、この記事ではこの手法については説明しません。

PSDレイアウト

PSDモックアップを含むアーカイブを準備しました。これには、Golden SectionとGolden Rectangleに従って設計されたテンプレートが含まれています。 気軽に使用してください。

フィボナッチデザイン

名前が示すように、フィボナッチ設計はフィボナッチ数列に基づいています。 定義により、最初の2つのフィボナッチ数は0と1であり、後続の各数は前の2つの合計に等しくなります。 一部のソースは0を省略し、2つのユニットでシーケンスを開始します。 したがって、最初の2つのフィボナッチ数は0と1であり、後続の各数は前の2つの合計に等しくなります。 フィボナッチ数列の数値が大きいほど、それらは「黄金比」に従って互いに関連しています。 フィボナッチ数列は次のとおりです。

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...

音楽では、フィボナッチ数が設定に使用されることがあり、視覚芸術ではコンテンツまたは要素の長さまたはサイズを決定するために使用されます。

JürgenSchmidhuberは、彼のブログで、フィボナッチ数の方法論の設計の基礎を見ています。 ただし、彼が作成したデザインを研究する場合、おそらく理解するのが難しく、操作するのが少し難しいでしょう。 確かに、数学に創造的なアプローチを適用する必要があり、盲目的にルールに従うことはありません-数学は私たちに適用できる機会を与えてくれます。



おおよその真のゴールデンスパイラル。 緑のスパイラルは、各正方形の角に接する円の四分の一から構成され、赤のスパイラルは、特殊な対数スパイラルを使用して構成されます。 オーバーラップは黄色です。

この設計の主なアイデアは、メイン領域とサイド領域のサイズと内容を決定するときにフィボナッチを使用することです。 そしてフィボナッチと黄金比はこの文脈では同等であり、設計者は彼らにとってより便利なものに頼ることができます。

一般に、レイアウトはフィボナッチ数列を使用して構築するのがかなり簡単です。 最初のブロックのベースに特定の幅、たとえば90pxを選択します。 次に、コンテナのサイズを決定するときに、ベース幅にフィボナッチ数列のブロック番号（1,2,3,5,8 ...）を掛ける必要があります。 計算に応じて、レイアウトのブロックの幅である値を取得します。 例を見てみましょう。 以下は、フィボナッチWebデザインに基づいた最小限のレイアウトです。



ページが3つの列に分かれていることがわかります。 各列はフィボナッチ数に対応しています。 この設計では、90ピクセル幅のベースを使用しました。 次に、このベース幅にフィボナッチ数を乗算して、列の合計幅を取得します。 たとえば、最初の列の幅は180ピクセル（90 x 2）、2番目の列の幅は270ピクセル（90 x 3）、3番目の列の幅は720ピクセル（90 x 8）です。 フォントサイズはフィボナッチ数にも対応しています。 ページタイトルのサイズは55ピクセルです。 記事タイトル34px; メインテキストは21ピクセルです。



ただし、フィボナッチ数列を使用するために固定幅テンプレートを適合させるのは十分に困難です。 ただし、これは幅を選択する場合のみです（たとえば、1000px）。 この状況では、黄金比の比率を使用する方が簡単です。 1000pxの幅に0.618を掛けると、コンテンツブロックの理想的な幅になる618pxが得られます。 ただし、フィボナッチ数列で同じ結果を達成しようとしている場合は、まず1000に最も近い数を見つける必要があります。

フィボナッチ数列計算機によると、 数列は...,610, 987, 1597...なり...,610, 987, 1597...また、987は選択した数1000に最も近い適切な数であり、数列の前の数を使用して他のブロックの幅を決定できます。 ただし、レイアウトの幅が固定幅である場合は、おおよその値を使用する必要があります。 問題はラバーテンプレートで発生する可能性がありますが、固定テンプレートでは発生しませんが、％を使用すると、より多くの自由が得られます。

可能な応用

フィボナッチデザインは、ブログや雑誌のレイアウトに最適です。 フィボナッチ数に応じてレイアウトを異なるように配置できます。 Nombre d'orの記事、 フィボナッチスイートとオートレグリルデミスオンページフォーデザインウェブ （フランス語）は、フィボナッチ数がウェブデザインでより深く使用されていることを説明しています。 繰り返しますが、フィボナッチ数列を使用して作業する場合、創造性に依存する必要があることに注意してください。そうしないと、レイアウトが硬くなりすぎて、使用およびナビゲートが困難になります。

PSDレイアウト

フィボナッチ数列に従って設計されたテンプレートを含むPSDモックアップを含むアーカイブを準備しました。 どんな形でもお気軽にご利用ください。

5つの要素、またはKundliデザイン

別の興味深いレイアウトテクニックは、 Kundliとも呼ばれるインドのホロスコープから来ています。 一般に、Kundliは3つのステップで実行できる非常に単純な図です。 正方形を描きます。 2つの対角線で交差させます。 側面の隣接する中点を接続します。 そして、Kundliを取得します。 図には4つの長方形のひし形があります。 それらは私たちの設計の基礎になります。




以下に示す設計は、Kundliの幾何学的レイアウトに基づいています。 チャクラにも数学的特性があることは注目に値します（証拠は見つかりませんでした。およそPer。） 。



これは1ページのレイアウトです。 さらに、jQueryまたはテキストヘルプでいくつかの簡単なアニメーションを使用して、より有益な観点からサイトを表示できます。 別のオプションは、スライドを使用することです。ここでは、アニメーションを使用してブロックのさまざまなコンテンツを表示します。また、各領域の背景画像を変更して、互いに異なるようにすることもできます。



次の図では、デザインが非常にシンプルであることがわかります。ヘッダー、3列、フッターです。

可能な応用

この設計は、製品情報の表示またはプロファイルの表示に最適です。 JavaScriptテンプレートをアニメーションで装飾できます。 たとえば、Raphaelライブラリを使用してチャクラの色を変更することで色変換の可能性に目を向けたり、 jsAnimライブラリを使用して他のアニメーションを追加したりできます。 ユーザーが「地球」要素をクリックしたときに木の芽を表示したり、「水」をクリックして海洋生物を表示したりできます。 これらのJavaScriptライブラリを使用したアニメーションに関しては制限がありません（ただし、約Laneを気にしないでください） 。

PSDレイアウト

PSDモックアップを含むアーカイブを用意しました。これには、Kundliの設計に従って設計されたテンプレートが含まれています。

正弦波設計

数学に関しては、黄金比やフィボナッチ数列に固執したくない場合。 物理学、化学、その他の科学の数式を試すか、プロジェクトで一般的な数式を使用できます。



たとえば、 サイン波またはサイン波を見てみましょう。 これは、滑らかな繰り返し振動を記述する数学関数です。 シンプルでオリジナルのデザインの基礎として、シンプルな正弦波レイアウトを使用しました。 もちろん、グラフィックやインフォグラフィックなどのサイトを作成するときだけでなく、他のデザインでも同じアプローチを使用できます。



レイアウトも非常にシンプルで、見出し、5列、フッターで構成されています。 jQueryを使用して、設計をよりインタラクティブにすることができます。

可能な応用

この波のパターンは、海の波、音波、光の波など、自然界でよく見られます。 さらに、毎日の平均気温を作成すると、おおまかに表された正弦波の画像を見ることができますが、グラフは逆波、つまり余弦に似ている場合があります。 イベントの年表を表示するためにも使用できます。 水平ナビゲーションで見栄えがよくなります。 すべて同じjQueryを使用して、よりインタラクティブにすることができます。

PSDレイアウト

PSDモックアップを含むアーカイブを用意しました。これには、正弦波設計に従って設計されたテンプレートが含まれています。

その他の方法

サードのルール

この規則は 、画像を9つの等しい部分で表示する必要があることを示しています。 等距離にある2本の等距離の水平線と2本の垂直線を作成しています。重要なことは、これらの線またはその交点に沿って構成要素を配置することです。 また、レイアウトを左から右、上から下の3分の1に分割する単純化された数学的アプローチとして表すこともできます。

音楽的論理

楽曲のリズミカルまたはテーマ構造を使用して、レイアウト内の要素（ABA、ABACなど）間の距離を決定できます。 このウィキペディアの記事で音楽と数学の詳細をご覧ください。

役立つリンクとリソース

ウィキペディアの記事

• 神聖な幾何学
• 割合
• ページ構築のカノン

記事

• 芸術と建築の数学
• デザインと神の割合
• 素晴らしい幾何学的デザイン 、ミャオットを作成する
• 写真家は数学を愛し、彼女の画像をグラフ化する
• タイポグラフ：スケールとリズム
• マイケル・パンカー-芸術と数学

本

• デザインの幾何学
• ユークリッドの要素
• 自然界の数学

Webデザインに関する数学の記事をお楽しみください。 数学が設計上の決定を改善する機会であり、それがあなたの友人になることを願っています。

英語のオリジナル記事