指先の儀式：Apple 流ボタン体系

ボタンは、ページ上で唯一「押される」もの

これまでは、このサイトのボタンはすべてテキストリンクだった。青い文字とシェブロン。機能はする——でも指先が触れた瞬間、何も起こらなかった。

Apple の哲学はこうだ：押せるものには、すべて儀式が価値ある。

三本の曲線、ひとつの体系

体系は三つの決断だけ：

• 980px のピル角丸——Apple.com の象徴的な数字。24px でも 999px でもなく、形状を溶かすほど大きな数字
• #0071e3 のストアブルー——ソリッドなピルは、最も重要なひとつのアクションだけに与えられる
• iOS のスプリング曲線 cubic-bezier(0.32, 0.72, 0, 1)——シートからキーボードまで共有される、システム級のイージング

押した時の反発：工学的な譲歩

本当の物語は手触りにある。押した瞬間 0.96 に縮み、離すと弾き戻る——transform: scale 一行で済む話に聞こえる。

しかし、このサイトは GSAP でマグネティックを実装しており、それはインラインの transform を書き込む。CSS の transform を加えれば、二つのチャネルが戦争を始める。

解法は独立した変換プロパティ：scale プロパティと transform プロパティは、ブラウザ内で別々の合成チャネルを行き、互いに上書きしない。scale: 0.96 の一行で、磁力の位移と押下の反発が同時に成立する。

高次元の美しさは、時に書いたコードの量からではなく、回避できた戦争から生まれる。

丸いボタンの柔光

お問い合わせセクションの円形 GitHub ボタンは、このサイト最初の構図を保ったまま、Apple Watch のクラウン待遇だけを加えた。ホバーで淡い白の輪が広がり、青い靄が浮かび、アイコンが 2 ピクセル浮かび上がる。

構図は不変、呼吸が加わった。

ひとつの軍規

ボタン体系は四つのバリアントだけ——ソリッド、グラス、リンク、アイコン。ページ上の新しいインタラクションは、この四つから生まれる。五つ目は決して発明しない。