Webフロントエンド・UIデザイン
ベジェ曲線、CSSイージング、黄金比レイアウト、幾何学模様、視覚・錯視の幾何
滑らかなマイクロインタラクション、美しいグリッドレイアウト、ベクターフォントやSVGの描画など、Webブラウザ上でユーザーを魅了するUI/UXの背後にある幾何学を実践します。
なぜこの数学を学ぶと実務に役立つのか?
CSSの `cubic-bezier()` やCanvas/SVGのパス描画の原理を直感的に操り、デザイナーとエンジニアの共通言語として数学を活用できるようになります。
高付加価値インタラクティブUI&ジェネラティブアート
3次ベジェ曲線を用いたカスタムイージングライブラリと、三角関数・極座標による滑らかなSVGパーティクル描画エンジン。
Webフロントエンド・UIデザインでマスターすべき 7 つの単元
ベジェ曲線とデザイン幾何学(フォント・UIの数理)
「制御点を引っ張ると曲線が曲がる理由」線分内分が創り出す美しきグラフィックス
高校数学の「線分の内分」だけで、IllustratorのペンツールやCSSアニメーションの滑らかな曲線を自在にデザイン・実装できるようになる。
幾何学的錯視と視覚心理学・脳の幾何情報処理
同じ長さが違って見え、平行線が波打つ — ミュラー・リヤー錯視とカフェウォール錯視の数理
画像処理のエッジ検出フィルタ(Sobelフィルタ・ガウス・ラプラシアン)の数理直感、サイズ恒常性と射影幾何学の理解、UIの視認性向上設計力
極座標とパラメータ曲線(サイクロイドとリサージュ)
直交座標(x, y)の呪縛を解き放ち、回転・周期・弾幕の軌道を自由自在に操る幾何学
「原点からの距離 r」と「回転角 θ」で考えることで、円・回転・弾幕・螺旋の軌道を極めてシンプルかつ美しく記述できるようになる。
加法定理と波の干渉(ノイズキャンセリング)
「なぜ逆位相の音をぶつけると騒音が消えるのか?」三角関数の合成と音響工学の秘密
複雑に入り組んだ波形をシンプルなサイン波の足し引きに分解・合成し、逆位相によって騒音を相殺する高度な波動制御の思考が身につく。
一次関数とグラフ
傾きと切片を動かすと、直線はどう変わる?
「初期値(切片)」と「1単位あたりの変化量(傾き)」の2つで将来の数値を予測する、最も基本的で強力なモデリング力が手に入る。
線対称・点対称と敷き詰め模様
図形を鏡に映すと、もう半分はどう決まる?
図形を鏡に映すと、もう半分はどう決まる?。この考え方を身につけることで、複雑な課題を単純化して数理モデルとして解く力が養われる。
時計の針の角度と時刻計算
長針と短針がつくる角度は、時刻からどう求まる?
長針と短針がつくる角度は、時刻からどう求まる?。この考え方を身につけることで、複雑な課題を単純化して数理モデルとして解く力が養われる。