AI に画像で案を出させて、口で選ぶ：ポートフォリオのデザイン決め

出発点

このサイトのトップは、最初は「1 画面の要約」だった。名前、肩書、タグ、新着 3 件 × 2 の縦並び。作品と記事が入り始めたので作り直すことにした。

要望を先に書き出した。

• トップはハブにする。プロフィール、作品、ブログ、このサイトについて、GitHub へカードで飛ぶ
• ベースはダーク。黒地に黄と緑を主に、差し色で赤。応援しているジェフユナイテッド千葉の 3 色
• デジタル庁デザインシステムを基本にする。Noto Sans JP、8px グリッド、明確なフォーカス、装飾は控えめ
• 「エンジニア！」という自己主張は要らない。大きな文字は承認欲求が強そうで、自分で見て不快すぎる
• 実装は別。まずは画像で案を出し合って詰める

作業は AI（Claude Code）との壁打ちで進めた。AI が HTML と CSS でモックを作り、Playwright で撮影した画像を見て、自分が口で選ぶ。画像は 26 枚になった。

進め方：1 枚に 5〜7 案

1 案ずつ描かせて「違う」を繰り返すより、5〜7 案を 1 枚の画像に並べて比べる方がめっちゃ速い。並べると、どの要素が好みで、どの要素が嫌いかを言葉にしやすい。

3 段階で絞る

構成 3 案 → B

• A：ヒーロー＋2×2 カード。ハブとしてはわかりやすいが、見出しが大きい
• B：ベント型。大きいプロフィールカードに、作品数・最新記事・GitHub の小カード
• C：リスト型。番号と見出しと一言を縦に並べる。行政サイト寄りで静かだが、カード感が薄い

B にした。1 画面に収まり、情報量が多い。

B を 3 方向に → B3

• B1：元案を整えたもの。作品カードの中段に空きが出る
• B2：ヒーロー横長＋4 等分。整然としていて、デジタル庁らしさは一番あるが、作品が遠い
• B3：プロフィールと作品を同じ大きさで並べ、作品は 3 件のリストにバッジ

B3 にした。「作品が最初の 2 画面以内にある」という条件に合う。

自己主張を落とす → B3a

B3 でも、見出し文が大きかった。「エンジニアエンジニアって感じの自己主張は要らない」と伝えて、3 案。

• B3a：見出し文を無くし、名前は 16px、経験年数と言語を 1 行、説明を 2 文。緑のグラデーション背景を廃止し、小さな 3 色の正方形だけ残す
• B3b：さらに静か。英字ラベルと正方形も無くし、タグは枠線だけ、矢印は灰
• B3c：作品を 4 件に固定し、プロフィールの空きを「いま」の 1 行で埋める

B3a にした。B3b は静かすぎた。B3c の「いま」の行は不採用。プロフィールは内容ぶんの高さにし、段差は許容した。

ヘッダーは 9 往復

一番往復したのがヘッダー。文字ロゴもエンブレムも使わず、3 色だけで「らしさ」を出したかった。

1. 文字なしの 3 色マーク 5 案。なびく旗の SVG を選んだが、実際に載せると描画が微妙で、ヘッダーって感じがしない
2. 面で見せる 5 案。「斜めパネルがイメージに近い。太い帯はデザインが良い」と、2 つの案に評価が割れた
3. 黒地にラインだけ 6 案。「3 色が並んでいないとだめ」「上端の帯はいい」
4. 斜め線と帯を太くした 6 段階。12px がバランスがいい
5. 12px の帯の境目を斜めにした 5 案。ここで、クラブの旗の画像を AI に共有した。黄の地に、左上から赤、右下から緑の斜めの三角
6. 旗の幾何をそのまま帯に引き伸ばした 6 案。比率が崩れて筋になって、流石に嫌だった
7. 境目の角度を 60〜70° に固定した 7 案。左半分だけ旗で右へフェードする案がよかった
8. 左に 3 色（62°）、右へ黒にフェード 6 案。下辺にもフェードする案で PC は確定
9. スマホ用。同じ幾何を縮めると細くなって 2 色に見えるので、14px の帯＋ナビ行の別の形に。375px で折り返すナビは、帯と、「このサイト」を「サイト」に縮める対応の両方で収めた

割れたときは要素に分解する

2 往復目で、「イメージに近い案」と「デザインが良い案」が別の案になった。どちらかを選ぶのではなく、要素に分解した。斜め、帯、3 色、フェード。斜めパネルからは「斜め」を、太い帯からは「帯の太さ」を取り、3 色は必ず並べる、右と下は黒に溶かす、と組み直した。3 から 8 往復目は、この組み直しの詰め。

旗は色だけ借りる

クラブの旗の画像は、色と構図の参照にとどめた。画像そのものは載せない。エンブレムも文字ロゴも使わない。旗の幾何をそのまま引き伸ばす案（6 往復目）は筋状になって見栄えが悪かったけど、結果として角度と幅を自分で決めた帯になった。旗から借りているのは 3 色だけ。

CSS：mask 2 枚で黒に溶かす

実装は linear-gradient(62deg, …) で赤・黄・緑を px で区切って背景に置き、mask を 2 枚重ねる。横方向のグラデーション（420px から 640px で透明へ）と、縦方向のグラデーション（30% から透明へ）を mask-composite: intersect で掛け合わせる。これで旗が黒地に「差し込まれた」ように見える。

mask が効かない環境では、3 色が溶けずに切れるだけ。ナビは黒地の上にあるので読める。640px 以下では ::before を消し、上端に 14px の帯を出す。帯も右端だけ黒に溶かす。

一緒に直す点は見送った

確定の段階で、AI が「一緒に直す点」を提案してきた。英字ラベルの削除、タグの塗りの削除、高さ揃え、正方形の削除、赤い上辺の削除。全部見送った。今のイメージでいい。提案は提案として聞くけど、決めるのは自分。

AI との付き合い方

画像で出させて口で選ぶ、は思ったよりうまくいった。AI にデザインを決めさせたわけじゃない。AI は案を並べるのが速く、自分は「これは違う」と言うのが速い。その 2 つを組み合わせると、26 枚分の試行が 1 日で回るんだよな。

AI が出す案には、静かすぎる案や整いすぎる案が混ざる。B2 や B3b がそう。それが自分のイメージと違うなら、違うと言えばいい。要素に分解すれば、どの案からも使える部分は取れる。

次回は未定。作品ページに手を入れたら、そのときの話を書くかもしれない。