個人ポータルを Apple のイベント発表会にした話

出発点：一文きかりの要件

「個人ポータルサイトを作って。GitHub のプロジェクトを見せられるように。」——要件はこれだけでした。初版はすぐできました：暗い背景、パーティクルの球、巨大なタイポグラフィ。綺麗かと言えば、確かに綺麗。

しかし「綺麗」と「正しい」の間には、審美の体系がひとつ丸ごと横たわっています。

最初の脱線：「かっこいい」を目的にする

lusion.co を見て、自分が求めている感覚が分かったつもりになり、追いかけ始めました：Three.js のパーティクルフィールド、ブルームポストプロセス、銀河形態、流星、クリックの衝撃波……バージョン番号は 17 まで転がりました。

そしてユーザー（つまり私自身）が致命的な一言を吐きました：「なんかサイファイじゃないんだよな。ナイトクラブみたい」

この一言は千金の価値があります。エフェクトの積み重ねの根本問題を暴きました：エフェクトは加算であり、上品さは減算である。カラフルなノイズパーティクル ＋ 全面ブルーム ＋ あらゆるものが動く ＝ すべての要素が叫んでいる ＝ 主役がいない。

物差しの交換：「Apple ならどうするか」

物差しを替えると、すべての決定が単純になりました。

• 1 ページに許される視覚の主役は 1 つ → パーティクルはカラフルなノイズから銀白のすりガラス惑星へ。ライトを当てられた実体のように
• ページ全体で残す色は 1 つ → Apple ブルーのオービタルリング。他はすべて白黒灰
• エフェクトは構造的な意味を持たねばならない → 呼吸、オービタルリング、スクロールモーフィングは残す。流星と衝撃波は削除
• 文字は装飾ではなくコンテンツ → 流れるグラデーションを外し、HUD の角ラベルや座標表示も撤去

変えた後に 17 版を見返すと、「シンプルになった」のではなく、初めて製品らしく見えたのでした。

途中で寄り道もした

「より Apple らしく」の直感がすべて正しかったわけではありません。一時期、作品セクションをフルスクリーンのカード送りにしました——すると一言で却下されました：「これ PPT みたいになってる」。本当の問題はここにありました：Apple のページは連続して流れるものであり、『めくる』という離散的な動作は存在しない。最終的には連続するエディトリアル配置に：大きな余白、髪の毛のような罫線、スクロールに合わせて浮かび上がるコンテンツ、その背後を終始流れ続けるパーティクルフィールド。

沈殿した 3 つの軍規

1. 1 画面に主役は 1 つだけ——他の要素は脇役の論理で暗く、小さく、後ろへ
2. モーションは構造的意味を持つべし——視線を導くか、状態を説明するか。ただの見せびらかしはすべて削る
3. 抑制は循環する通貨である——色とモーションを抑制し、貯めた注意力を本当に重要な一瞬に注ぐ

このサイトはまだ迭代を続けますが、この 3 つはもう変わりません。