Math World Lab
🎨
Web & UI Design

Webフロントエンド・UIデザイン

ベジェ曲線、CSSイージング、黄金比レイアウト、幾何学模様、視覚・錯視の幾何

ほかの目的を見る

滑らかなマイクロインタラクション、美しいグリッドレイアウト、ベクターフォントやSVGの描画など、Webブラウザ上でユーザーを魅了するUI/UXの背後にある幾何学を実践します。

なぜこの数学を学ぶと実務に役立つのか?

CSSの `cubic-bezier()` やCanvas/SVGのパス描画の原理を直感的に操り、デザイナーとエンジニアの共通言語として数学を活用できるようになります。

実践プロダクトでの実装スタック例

高付加価値インタラクティブUI&ジェネラティブアート

3次ベジェ曲線を用いたカスタムイージングライブラリと、三角関数・極座標による滑らかなSVGパーティクル描画エンジン。

使用する数学コア:媒介変数表示(ベジェ曲線)極座標系三角関数の合成線形補間(Lerp)

Webフロントエンド・UIデザインでマスターすべき 7 つの単元

B(t) 媒介変数CSS cubic-bezier
高校数学
未習得

ベジェ曲線とデザイン幾何学(フォント・UIの数理)

「制御点を引っ張ると曲線が曲がる理由」線分内分が創り出す美しきグラフィックス

身につくスキル武器

高校数学の「線分の内分」だけで、IllustratorのペンツールやCSSアニメーションの滑らかな曲線を自在にデザイン・実装できるようになる。

#高校数学#工学応用#幾何
スキルを体感・習得する
Optical Illusion (Müller)
中学数学
未習得

幾何学的錯視と視覚心理学・脳の幾何情報処理

同じ長さが違って見え、平行線が波打つ — ミュラー・リヤー錯視とカフェウォール錯視の数理

身につくスキル武器

画像処理のエッジ検出フィルタ(Sobelフィルタ・ガウス・ラプラシアン)の数理直感、サイズ恒常性と射影幾何学の理解、UIの視認性向上設計力

#知的好奇心#幾何学#心理物理学
スキルを体感・習得する
高校数学
未習得

極座標とパラメータ曲線(サイクロイドとリサージュ)

直交座標(x, y)の呪縛を解き放ち、回転・周期・弾幕の軌道を自由自在に操る幾何学

身につくスキル武器

「原点からの距離 r」と「回転角 θ」で考えることで、円・回転・弾幕・螺旋の軌道を極めてシンプルかつ美しく記述できるようになる。

#高校数学#極座標#媒介変数表示
スキルを体感・習得する
高校数学
未習得

加法定理と波の干渉(ノイズキャンセリング)

「なぜ逆位相の音をぶつけると騒音が消えるのか?」三角関数の合成と音響工学の秘密

身につくスキル武器

複雑に入り組んだ波形をシンプルなサイン波の足し引きに分解・合成し、逆位相によって騒音を相殺する高度な波動制御の思考が身につく。

#高校数学#三角関数#加法定理
スキルを体感・習得する
中学数学
未習得

一次関数とグラフ

傾きと切片を動かすと、直線はどう変わる?

身につくスキル武器

「初期値(切片)」と「1単位あたりの変化量(傾き)」の2つで将来の数値を予測する、最も基本的で強力なモデリング力が手に入る。

#関数#中学数学#グラフ
スキルを体感・習得する
小学校・算数
未習得

線対称・点対称と敷き詰め模様

図形を鏡に映すと、もう半分はどう決まる?

身につくスキル武器

図形を鏡に映すと、もう半分はどう決まる?。この考え方を身につけることで、複雑な課題を単純化して数理モデルとして解く力が養われる。

#算数#小学校#図形
スキルを体感・習得する
小学校・算数
未習得

時計の針の角度と時刻計算

長針と短針がつくる角度は、時刻からどう求まる?

身につくスキル武器

長針と短針がつくる角度は、時刻からどう求まる?。この考え方を身につけることで、複雑な課題を単純化して数理モデルとして解く力が養われる。

#算数#小学校#角度
スキルを体感・習得する