Site Polish Log

ポートフォリオをリリースした直後から、Aboutページのプロフィールアイコンが気になり続けていました。「仮の画像」を使っている限り、そのページは「私について書かれたページ」ではなく「誰かのテンプレートページ」に見えてしまう。そんな感覚が拭えなかったのです。 「自分を最もよく表すビジュアルは何か」——何日も考えた末に出した答えは、ファイナルファンタジーIVのセシル（ダークナイト）を彷彿とさせる16ビット風ドット絵でした。厨二病と笑われても構わない。あの頃ゲームに夢中だった自分、いまもデジタルの世界を冒険し続けている自分、その両方を体現するキャラクターでした。 AntigravityにFF4のダークナイトの特徴を詳細に説明し、透過背景のピクセルアートを生成。それをサイトに組み込んで初めて、Aboutページが「生きた自己紹介」になったと感じました。

プロフィール画像の問題が解決すると、今度は記事ページのアイコンが目に入り始めました。各セクションの左端に配置したアイコンたちが、コンテナのボーダーにわずかに食い込んでいる——目を凝らさなければ分からない程度の「欠け」でしたが、いったん気づくと、もう気にならずにはいられませんでした。 「素人感」とは、こういう細部から滲み出るものです。コードは動いている。機能は揃っている。でも、1pxのズレが積み重なる場所に「作りました感」が漂う。AIとの対話でその原因が明らかになりました。グローバルなCSSとコンポーネント固有のスタイルが競合し、'overflow: hidden' がアイコンを微妙にクリッピングしていたのです。

AIとの調査で判明したのは、入れ子になったflexboxコンテナの中で 'overflow' の設定が意図せず伝播していたことでした。修正のアプローチをAIが複数提示してくれ、最もシンプルで副作用の少ない解決策を選びました。

/* 修正前：アイコンコンテナが親要素のoverflowに引きずられていた */
.icon-wrapper {
  display: flex;
  align-items: center;
  /* overflow が指定されておらず、親から hidden が伝播 */
}

/* 修正後：アイコンが確実に全体表示されるよう明示的に指定 */
.icon-wrapper {
  display: flex;
  align-items: center;
  overflow: visible;     /* 明示的にvisibleを宣言して伝播を遮断 */
  flex-shrink: 0;        /* 親がflexのとき、アイコンが縮まないよう固定 */
  padding: 2px;          /* クリッピング防止の最小マージン */
}

アイコンの欠けが直ると、次はアイコンと見出しテキストの垂直方向の整列が気になりはじめました。アイコンが数pxだけ高い位置にある、あるいは低い位置にある。Flexboxの 'align-items' を調整するだけで良さそうに見えて、フォントの内部マージン（ベースライン）が絡んでくると、思った通りに揃わないのです。 AIとの試行錯誤の末、'align-items: center' だけでなく、見出しテキスト側に微細な 'padding-top' を加えることで、視覚的に完璧に揃った状態を実現しました。「コンピューターが計算する中央」と「人間が感じる中央」はわずかに違う——このUXの原則を、実際のコードで体験した瞬間でした。

細部の修正を経て、ふと背景が「寂しい」と感じるようになりました。ガラスモーフィズムのカードは輝いているのに、背後の暗闇が単純すぎる。もっと「宇宙的な奥行き」が欲しい。 AIとの対話で生まれたのが、複数のradial-gradientを重ねて配置する「アンビエント・グロー」システムです。画面の特定の位置に光のにじみを配置し、スクロールしても常に絶妙な位置に光源があるように設計しました。これ一つで、全体の雰囲気が劇的にリッチになりました。

この更新を通じて学んだ最大の教訓。それは「完成したら終わり」ではなく「完成したら、真の観察が始まる」ということです。リリース前には見えなかった細部の問題が、実際に公開したページを見ることで次々と現れてきます。 AIという相棒がいれば、その全ての「気づき」は解決可能な課題に変わります。こだわりを形にするためのスピードが桁違いに速くなるため、「もっとよくしよう」という意欲に常に追いつくことができる。 このサイトは、私が満足したら更新が止まる「過去の記録」ではなく、私が成長し続ける限り変化し続ける「生きた自己表現」です。次の更新もお楽しみに。