ツール名・アイコン・OGPをAIで作った話
ツールの中身が動くようになると、次に待っているのが「顔」の問題です。名前・アイコン・SNSで共有されたときのサムネイル画像（OGP）。これが決まらないと、どこにも出せません。
私はデザインツールをほぼ使えません。世の中にあるデザイン用のソフト（プロのデザイナーが使うようなもの）は名前すら知らず、Canvaをかろうじて知っている程度。それでも今はサイト上の各ツールにちゃんと名前とアイコンがついています。AIとやり取りしながらなんとかなった話を書きます。
ツール名の付け方
ネーミングが一番迷いました。
初期に作ったホテル検索ツールは「何かカッコいい名前をつけたい」と思ってClaudeに相談したこともありました。「全国のホテルを部屋の広さや設備で絞り込めるツール。旅好きな個人向けのシンプルなイメージで、短い日本語名にしたい」——そう伝えると、いくつかの候補が出てきました。
ただ、出てきた案を眺めても、どれもピンと来なかったのです。凝った名前をつけるよりも「何のツールか一目でわかる方が大事」という気持ちに落ち着き、結局そのまま「ホテル検索ツール」という機能名のままにしました。Claudeとの相談を経て「無理に名前をつける必要はない」と気づけた、という意味では収穫でした。
一方で「○×トラッカー」という名前は、Claudeに「シンプルで機能がそのまま伝わる名前を5案ください」と頼んで出てきた案をベースに選びました。習慣を○か×で記録するツールなので、説明不要な名前になったと思っています。
このやり取りで気づいたのは、AIは「案を出す機械」で、決めるのは自分という当たり前のことでした。候補を眺めることで「自分が何を大事にしているか」が見えてくる感覚があります。
faviconとアイコン
faviconはブラウザのタブに表示される小さなアイコンで、ごく小さなサイズに「らしさ」を込めなければなりません。
「Canvaで適当に作るか」と思っていたとき、Claudeに 言葉で説明するだけでシンプルな図形ならアイコンの形にしてくれる ことに気づきました。「工具箱をイメージした、紺色のシンプルなアイコン」と伝えると、そのままサイトに貼り付けられる形で出てきます（厳密には画像ではなく「数式と座標で図形を表すコード」として出てきますが、結果としてブラウザでちゃんと絵に見えます）。手書きでもなく、デザインソフトでもなく、ただ会話で済むという感覚は新鮮でした。
ただし最初の数案はピンとこないことが多かったです。「もっとすっきり」「文字を入れて」「もう少し丸くして」とやり取りを重ねるうちに、少しずつ自分のイメージに近づいていきました。会話の過程で、自分の好みを言語化するトレーニングをしている感覚がありました。
OGP 画像（SNSで共有されたときのサムネ）
X（旧Twitter）やLINEでURLを誰かに送ったとき、リンクの下にプレビュー画像とタイトルが表示されることがあります。あの横長の画像のことを OGP画像 と呼びます。これがないと、URLだけがぽつんと貼られた素っ気ないリンクになってしまいます。サイズは 1200×630ピクセル が一般的によく使われる目安で（サービスごとに最適サイズは多少違います）、それなりに作り込まないと「ちゃんとしたサイト感」が出ません。
解決策は、Canvaの無料テンプレートで枠を作り、テキストと色だけをClaudeと相談して決めるという方法でした。レイアウトはテンプレートに任せ、キャッチコピーと配色の組み合わせをAIと決めていく流れです。
各ツールのOGP文言をClaude主導で考えると、「短くてキャッチーな一言」が出やすいです。私が一人で考えると長々と書いてしまうところを、「30文字以内で言い換えて」と頼むだけで要点に絞った言葉が出てきます。
やってみて分かったこと
名前・アイコン・OGPの3点セットは、コードを書くよりも地味に時間がかかる作業でした。「動くか動かないか」という判断基準がないぶん、どこで「これでいい」と決めるかが難しい。
ただ、完成したときの達成感は独特でした。URLだけの素っ気ないリンクが、ちゃんとした「作品」に見えてくる瞬間があります。
AI活用において大事だと感じたのは、「なんかダサい」では伝わらないということです。「もっと余白を増やして、文字サイズを大きくして、色をネイビーに」と具体的に分解して伝えることで、少しずつ納得のいく方向に動いていきます。自分の美的感覚を言語化する力が、AIとのやり取りの中で少しずつ身についてきた気がしています。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ