この記事で分かること

  • PaperModに「色を足しただけ」で終わった提案を、どう言語化して突き返したか
  • Hallmarkのトーン選択とKimi K2.6の起用理由、DETOURSというコピーに落ち着くまでの経緯
  • コミット後のQAで見えた、AIが同じ勘違いを繰り返す様子とその直し方

PaperModのままだと、他の技術ブログと見分けが付かない。 デザインの知識もセンスもないまま、AIエージェントにブログの刷新を頼んだ。 実際にできあがるまで、3回作り直すことになった。

PaperModに満足できなかった理由と、2回失敗した経緯

前回の記事 で書いたとおり、このブログはHugo + PaperModで作った。 ミニマルで読みやすく、ダークモードや検索も最初から揃っている。 不満はなかったが、シンプルすぎて他のPaperModブログと見分けが付かないとも思っていた。

自分にはデザインの知識もセンスもない。 配色理論もタイポグラフィの基礎も知らないまま、見た目を1から考えるのは無理だと分かっていた。

最初の2回も、AIエージェントに刷新を頼んだ。 結果はどちらも、PaperModの構造をそのままに色だけ変えたようなものだった。 悪くはないが、刷新と呼べるほどの変化もなかった。

3回目は、依頼の文言に「大胆な変化を取り入れたデザインであること」を明記することにした。 ライトテーマとダークテーマの両対応、レスポンシブ対応、個人ブログらしい遊び心のあるデザイン、という条件と並べて、大胆さを外せない要件として書いた。 過去2回の反省を先に言語化しておかないと、また同じ結果になると分かっていたからだ。

HallmarkとKimi K2.6を選んだ理由

3回目にどうするか考えていたとき、たまたまXでHallmark を紹介するポスト を見かけた。

ざっくりいうと、AIが作った感じを消すスキルなんだと思った。 日本語の文章でも、AIが書くとどうしても定型的になりがちな部分を、writing-ja というスキルで普段から直している。 同じことがデザインにも言えるはずで、AIに任せるとありきたりな見た目になりやすい。 Hallmarkはそれを避けるためのスキルだと理解し、使ってみることにした。

モデルにはKimi K2.6 を選んだ。 Webデザインやフロントエンド生成の評価が比較的良かったからだ。 Code Arenaでは、幅広いWeb開発カテゴリに対応できるモデルとして紹介されていた。

トーンは「brutalist × playful」

Hallmarkは設計を始める前に、必ず3つを尋ねてくるらしい。

  1. 読者は誰か
  2. トップページで最も促したい行動は何か
  3. トーンはどれか(editorial・brutalist・playful・technical・austereなど、極端な方向から選ぶ)

読者と促したい行動には、具体的に答えた。 トーンは単一の方向ではなく、「brutalist + playful」の組み合わせを選んだ。

この3つの答えから、HallmarkはMarquee Heroという構造(巨大なメッセージの直後にSNS導線、続けて記事一覧)と、Humというテーマ(クリーム、黄・シアン・コーラル、丸いサンセリフ)を選定した。 ナビゲーションは既存の5項目のメニュー構成に合わせてN7 Brutal slabという太い罫線のスタイルになった。

配色とテーマ名を渡されただけでは、それが自分の要望に合っているのか判断できない。 判断できたのは、できあがった画面を見てからだった。

「DETOURS」に着地するまでのコピーの往復

最初にAIが出してきたヒーローの見出し案は「技術の寄り道を、実装する。」だった。 悪くはなかったが、もっと選択肢を見たかったので他の案も出してほしいと伝えた。

いくつかの日本語案が出てきたところで、ふと英語の方が合うのではと思って聞いてみた。

英語の方が良いかもしれない。

AIからは「大きな英語の見出し + 補助の日本語」という組み合わせが提案され、複数の英語案が出てきた。 その中から「BUILD THE DETOURS.」と、補助文「技術の寄り道を、実装する。」の組み合わせを選んだ。

ビルドして実際の画面で見ると、補助文の意味が自分でもすぐには掴めなかった。

「技術の寄り道を、実装する。」とはどういう意味ですか?

AIの説明を聞いても、読者にとっては抽象的すぎるという結論になった。 代替案がいくつか出てきて、その中の「気になった技術を、試して書き残す。」を選んだ。 理由は単純で、ストレートに意味が伝わるからだ。

これが今もトップページに残っている見出しになった。

favicon、フォント、レイアウトバグ - 気に入らなければ何度でも言い返す

トップページのコピーが決まった後、favicon・OGP画像・フォントでも同じやり取りを繰り返した。

favicon画像はまず「!」のスタンプ風デザインになった。 黄色い四角に黒い「!」で、丸い輪郭が警告標識のように見えた。

apple-touch-iconとfaviconがダサい。

丸い輪郭をやめた案が出てきたが、それでも「!」は残ったままだった。

「!」がダサい。もっとオリジナリティがほしい。

どちらも、具体的な代案があって出した指示ではない。 気に入らないという以上のことは、自分でも言えなかった。

ここで初めて「!」という記号そのものをやめる方向になった。 ブログ名の「DETOURS」から、障害物を避けて進む一本の経路をかたどったマークに置き換わった。 続けてトップページやOGP画像とモチーフが揃っているか確認を頼むと、Hallmark自身の監査で「トップは太い幾何学的なサンセリフ、OGPは縦長でレトロな書体」というモチーフの不一致が見つかり、OGPもトップに近い書体に統一された。

フォントでも同じことが起きた。 最初に指定されたのはJetBrains Monoだったが、これは自分が前から嫌いなフォントだった。

JetBrains Monoのようにゼロの真ん中に点が付いているフォントは嫌い。過去の記事にも書いているように斜め線のゼロが好き。

2026年の開発環境 で書いたとおり、自分は0の中心に斜め線が入っているデザインが好みで、点が入っているタイプは苦手だ。

AIはまずUDEV Gothicを提案してきたが、記事内でしか使っていないフォントをそのまま使い回すのも違う気がして、もっと一般的にCDNで配信されているものにしてほしいと伝えた。 次に出てきたSource Code Proは、確認してみるとゼロの字形が斜め線ではなかった。 指摘すると、AIは確認不足だったと認め、実際にブラウザ上でゼロの字形を見てからGeist Monoに差し替えた。

差し替え作業の途中で、配信元がjsDelivrになっていることに気づいた。

なぜGoogle FontsではなくjsDelivrを使っているの？

Google Fontsで配信されていました。私の判断ミスです。

Geist MonoはGoogle Fontsでも配信されていて、他のフォント(Noto Sans JP、Plus Jakarta Sans)と配信元を揃えたほうが理にかなっている。 指摘して初めて、AI自身がその事実に気づいた形だった。

デザインとは関係ない副作用も起きた。 トップページを全幅にするために追加したCSSが、記事ページや一覧ページにも効いてしまい、左右の余白が消える不具合が出た。

index.html以外のページの左右の余白がないのは意図的?

意図的ではなく、.mainという共通コンテナに対する指定がトップ以外にも及んでいたのが原因だった。 ホームページだけに限定するクラスを追加して直し、記事ページはPaperMod標準の余白に戻した。

コミット後のQAで見えた、AIが同じ間違いを繰り返す瞬間

一通りコミットした後、日を置いて改めてレビューを頼んだ。 最初の指摘は6項目あり、「全部」直してほしいと伝えるとPaperModのクレジット表記の消失や、キャッシュキーの設定ミスなど、細かい不備がまとめて直った。

そこからはスクリーンショットを見せながらの細かいQAが続いた。 モバイル表示で見出しの一部が孤立して折り返されている問題、ヒーローアイコンの配置、ダークモードでSNSアイコンにマウスカーソルを合わせると真っ黒になって見えなくなるバグを、それぞれ指摘して直した。

一番長引いたのは、ライトモードのコードブロックの境界線と影の色だった。 最初に「ライトモードのコードブロックのデザインがおかしい気がする」と伝えたところから、AIが色を変えるたびに納得できない状態が続いた。

薄すぎ

黒すぎ

ダークモードと見比べて明らかに枠線が違う。

AIは自分が変更したCSSの効果を、スクリーンショットの見た目だけで判断していた。 そのたびに解釈を誤り、同じような修正を繰り返した。

ダークモードにはbox-shadowはなく、ライトモードだけbox-shadowがある。つまり揃ってない。さっきから同じ内容を繰り返している。

ここでAIはようやくスクリーンショットの印象で判断するのをやめ、実際のCSSファイルを直接読みに行った。 原因は--color-strongという変数の値が、ライトモードでは背景色とほぼ同化してしまい、境界線や影として機能していなかったことだった。 何色に変えるかでもう数回のやり取りがあり、最終的には最初に試した--color-paper-altに戻る形で決着した。 ダークモードのテーブル枠線が薄すぎるという指摘も、同じように色変数を1つ変えるだけで直った。

遠回りに見えるやり取りだった。 それでも、スクリーンショットの見た目だけを判断材料にしていたAIに対して根気強く「違う」と言い続けたことで、最終的には実ファイルを確認するという正しい手順に戻らせることができた。

できあがったデザインと、言語化が鍵という結論

j1nn0 labのトップページ、ダークテーマ。ネイビー背景に「BUILD THE DETOURS.」の巨大な見出しと、黄色とコーラルの迂回経路モチーフのマークが並ぶ

j1nn0 labのトップページ、ライトテーマ。クリーム背景に同じ見出しとマークが並ぶ

最終的な仕上がりは、ネイビー・クリーム・イエロー・コーラルの配色と、「迂回経路」のモチーフでトップページからfavicon、OGP画像、記事一覧、タグページまで一貫している。 「brutalist + playful」というトーンの選択自体は、最初の質問への回答1つにすぎない。 そこにたどり着くまでの実装は、コピーの言い直し、favicon・OGPの作り直し、フォントの選び直し、レイアウトバグの発見、コミット後のQAでの根気強い指摘を積み重ねた結果だった。

AIに丸投げしても、無難な提案以上のものは出てこない。 最初の2回がそうだった。 自分の中にある好き嫌いを言葉にして伝え、違うと思ったら、たとえ代案がなくても、何度でも突き返すこと。 それが、センスのない自分でも納得できるデザインに辿り着くための、唯一のやり方だった。