Clever Geek Handbook

サむトを䜜成するための数孊的アプロヌチ

「数孊は矎しい。」 これは、数孊の単なる蚀及で驚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デザむンに関する数孊の蚘事をお楜しみください。 数孊が蚭蚈䞊の決定を改善する機䌚であり、それがあなたの友人になるこずを願っおいたす。



英語のオリゞナル蚘事


More articles:


All Articles