「センスがない」という言い訳を葬った日
ポートフォリオ制作を始めた当初、私には一つの固定観念がありました。「デザインができる人は、Figmaを使いこなし、カラー理論を知り、ゴールデンレシオを意識できる人だ」と。そして私はそのどれも持っていなかった。 しかし、Antigravityとの最初の対話が、その固定観念を根底から崩しました。「暗くて、ガラスのような質感で、宇宙的な雰囲気のポートフォリオを作りたい」。この曖昧すぎる一文から、AIはカラーパレット、タイポグラフィのスケール、グラスモーフィズムのCSS実装案を一気に提示してきたのです。 私はそれを見て思いました。——「デザインの語彙は知らなくていい。感性があれば、AIがそれを翻訳してくれる」と。
「なぜそのデザインなのか」をAIに問いただす
最初のうち、私はAIの提案をそのまま受け入れていました。しかし途中からその習慣を変えました。「なぜこのカードの余白が1.5remなのか」「なぜホバー時のアニメーションは0.3秒なのか」——全てに「なぜ」を問い始めたのです。 AIの答えは、常に驚くほど論理的でした。「余白が広いほど、人間の視覚は情報を整理しやすくなります（ゲシュタルト心理学的見地から）」「アニメーションが速すぎると脳が追いつけず、遅すぎると間延びして感じます。0.3秒はその最適解として多くのHIGにも準拠しています」。 デザインは感性だと思っていた。でも実は、数学と心理学に裏打ちされた「客観的な最適解」だったのです。この発見は、私のものづくりに対する視点を根本から変えました。
グラスモーフィズムという「魔法」の正体
このポートフォリオの最大の特徴であるグラスモーフィズム（ガラスのような半透明レイヤー）。これを実現するためのCSSは、実際にはとても複雑です。
/* AIが提案したグラスモーフィズムの核心 */
.glass-card {
/* 半透明の背景：白を5%の透明度で重ねる */
background: rgba(255, 255, 255, 0.05);
/* ガラスの「すりガラス」効果を生み出すブラー */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* 光の屈折を表現する微細なボーダー */
border: 1px solid rgba(255, 255, 255, 0.1);
/* 浮遊感を演出するシャドウ */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}1pxの微調整を、深夜まで繰り返す理由
表面的なデザインが完成してからが、実は本当の戦いの始まりでした。「アイコンのホバー時のバウンドが少し硬い」「背景のグロー効果が主張しすぎている」「モバイルでこのカードのレイアウトが崩れる」——スクリーンを見るたびに、気になる点が次々と湧き出てきます。 通常、こうした細かな調整は「ほどほどのところで妥協する」ものです。しかしAIがパートナーにいると、その妥協への誘惑が消えるのです。どんな細かい要求にも即座に応えてくれるため、「もう一歩だけ詰めよう」が終わりなく続く。深夜2時、1pxのズレを直すためだけに30分かけた夜は、今でも笑いながら思い出します。 でも、その執念が生み出したのは、自分が心から「美しい」と感じられるデザインでした。
レスポンシブ対応という、もう一つの戦場
PCで完璧に見えるデザインが、スマートフォンに映した瞬間に崩壊する。これはWeb制作における永遠の試練です。特に複雑なグラスモーフィズムや多層的なアニメーションは、小さな画面での再現が難しく、何度もAIとレイアウトの検討を重ねました。 AIは「モバイルファースト」の観点から、大きな画面では美しい装飾を、小さな画面では情報の明瞭さを優先するという設計思想を丁寧に教えてくれました。デザインは「見た目」だけでなく、「誰がどこで見るか」という文脈を含むものなのだと、この経験を通じて深く学びました。
センスとは、磨かれるものだった
このポートフォリオのデザイン作業を通じて、私は「センス」に対する考え方が180度変わりました。センスとは才能ではなく、「良いものを見続けること」「なぜ良いのかを問い続けること」によって、誰でも磨けるものです。 AIはその「磨き石」として最高の役割を果たしてくれました。私の漠然とした美意識を言語化し、それをコードという具体的な形へと変換し、そして「なぜそれが美しいのか」の理由を丁寧に解説してくれる。 デザインの民主化が進む今、ツールを持たない人間にも、美しいものを作る権利がある。このポートフォリオは、その証明のために生まれました。
