ノリでブログを始めたら、Webアプリを開発していた話

ブログを始めてみたい。 そう思い立ち、勢いでサーバーを借りてブログを開設した。

サーバーは個人ブロガーに人気のConoHaWING、テーマは定番のSANGOを使っている。思いつきで始めたブログだが、ここだけみれば、ごく一般的なWordPressブログだ。

その直後、AIエージェント「Antigravity」を導入した。今ではAntigravityは第二の自分のような存在になっている。

しかし、気がつけばブログ執筆よりも、ブログの作業環境を魔改造するのにハマっていき、サムネイル作成専用のWebアプリを開発するまでになっていた。

思いつきで始めたとはいえ、デザインにはそれなりにこだわりがある。今回の記事では、このブログのデザインについて書いていこうと思う。

JSONプロンプトと画像生成

そもそもJSONとは？

このブログのデザインは、JSONプロンプトによって作成されている。JSONとは、「JavaScript Object Notation」の略で、日本語に訳すと「JavaScript オブジェクト表記法」だ。JavaScriptはプログラミング言語のひとつ。

JSONで書かれたコードはこのようなものだ。

{ "userId": 1024, "userName": "tanaka_taro", "email": "tanaka@example.com", "isActive": true, "nickname": null, "profile": { "age": 28, "gender": "male", "location": "Tokyo" }, "roles": [ "admin", "editor" ], "preferences": { "theme": "dark", "notifications": { "email": true, "push": false } }
}

JSONの特徴

このJSONの特徴をまとめると、以下のようになる。

• テキストベースで軽量
  • プレーンテキスト形式のためデータサイズが小さい
• キー・バリュー形式
  • 連想配列（{ "key": "value" }）とリスト（[ ... ]）の組み合わせ
  • 扱えるデータ型がシンプル
• 主要プログラミング言語で互換性あり
  • JavaScript発祥だがPythonなどの他の言語でも読み込み可能
• API通信の標準規格
  • Web APIのデファクトスタンダード

画像生成にJSONが使われる理由

自然言語で指示を出すのと、JSONでは何が違うのか。

自然言語での指示は、普段の会話と同じように文章で表現するため、手軽で直感的に使えるのが最大の特徴だ。

一方、JSONでの指示は、被写体・背景・画風・サイズといった各要素を「キー（項目名）」と「値（内容）」の組み合わせで厳密に区切って渡す。

昔は自然言語で指示を出すと、その指示を正しく理解できないことがあったが、最新のAIは賢くなり、自然言語からも画像をうまく生成することができるようになっている。

なので、手軽さで言えば自然言語に軍配が上がる。だが、後述するようなプログラムによってプロンプトを一括で書き換える・生成するといった点ではJSONの方が適している。

また、自然言語による曖昧な指示からは、解釈の余地があり生成AIらしい絵が生まれやすいが、JSONで厳密に指示を出すと、生成AIらしくない絵を作り出すことができる。

AIエージェントとブログデザイン

最初はデザインの方向性も決まっていなかった

繰り返しになるが、このブログは勢いで開設した。何の準備もしておらず、最初に記事を数本投稿した段階では、ブログのロゴどころか、デザインの方向性すら決まっていなかった。

SANGOの配布されたテンプレートをそのまま使い、最低限の見た目にはなっていた。

はじめは記事を投稿するだけで精一杯だったのもあり、後回しにしていた。まともにデザインを考えたのは何本か記事を投稿してからだったので、最初からデザインに神経をとがらせていた訳ではない。

なるようになるさ、でやっています

どんなデザインにしたいかAIと相談

デザインの方向性を決めるにあたって、AIエージェントのAntigravityと相談することにした。

自分の場合、好きよりも嫌いで方向性を決定した。いかにもAI感のある、けばけばしいデザインは絶対に嫌。せっかく自分のサイトなのだから、YouTubeやnoteのサムネのような主張の強い画像は使いたくない。

Antigravityと相談し、シンプルさとゆるさを兼ね備えた北欧風デザインでサイト全体を統一するということになった。

生成AI×JSONでロゴ作成

デザインの方向性が決定した後は、Antigravity（とGemini）に以下の流れでロゴの作成を行ってもらった。

作成したロゴとアイコン

こうやって宇宙飛行士のロゴや、コーヒーカップのアイコン（ファビコン）、トップページのメイン画像は誕生した。 ファビコンは副産物的なもので、ロゴづくりの過程で生まれたものだ。

JSONプロンプトでの画像生成に興味がある人向けに、その3つを生成するときに使ったコードをここに載せておく。

{ "id": "concept_C_floating_astronaut", "name": "新案C：ぷかぷか浮遊するキャラクター", "description": "宇宙空間や水中にのらりくらりと浮きながら、ノートとペンを持っているゆるくて愛らしいキャラクター。", "prompt": "A minimalist flat vector logo design in a Scandinavian style on a solid white background. Features a cute, simple line art character (like a tiny astronaut or a penguin) floating peacefully, holding a tiny notebook and pen. Outlines are in #2B2D42, with flat color accents of #4F6D7A and #E07A5F. Cozy, playful, and minimalist. No text, no gradients, 1:1 aspect ratio." }

{ "id": "concept_A_coffee_steam", "name": "新案A：湯気で遊ぶコーヒーカップ", "description": "マグカップの湯気が「F（Freestyle）」の形になっている、隠し要素のある知的で可愛いデザイン。", "prompt": "A minimalist flat vector logo design in a Scandinavian style on a solid white background. Features a simple outline of a ceramic coffee mug. The steam rising from the mug is creatively shaped like the letter 'F'. Outlines are in #2B2D42, with flat color accents of #4F6D7A and #E07A5F. No text, no gradients, clean vector art, 1:1 aspect ratio." }

{ "id": "visual_option_2_minimal_illustration", "concept_name": "余白の多いミニマリストイラスト（新案②）", "description": "グラデーションやごちゃごちゃしたコラージュを避け、極限までシンプルに描いた北欧モダン調のイラスト。背景の余白が多く、ブログのタイトル文字を重ねるのにも最適です。", "aspect_ratio": "16:9", "prompt": "A minimalist flat vector illustration with maximum negative space. A quiet corner of a room showing a single wildflower in a ceramic vase and a closed simple notebook on a table. Very clean lines, calm earthy color palette (mute beige, soft gray, slate blue). No text, no gradients, no complex details, peaceful and clean design, 16:9 aspect ratio."
}

サムネイルの見た目を整えたい

ロゴを設定してもデザインが締まらない

JSONで画像を生成し、さっそくWordPressの設定をいじってロゴとメイン画像を変更したが、どうにもブログのデザインが締まらなあった。なんとなく、コレジャナイ感。

その原因はサムネイルだった。

記事のサムネイル（アイキャッチ画像）に統一感がない。それに、設定したロゴの雰囲気にも合っていない。

そこで、サムネイルの見た目を整え、ロゴの北欧風の雰囲気に合わせる仕組みを作ることにした。

最初はCanvaを使っていた

サムネイルに統一感がなかったのは、Canvaを使っていたのが原因だ。Canva自体は優秀なデザインツールだが、その自由度がアダとなった。

テンプレートが大量にあり、自分で色も調整できる。普通はそのおかげで手軽に自分のデザインを作ることができるが、別の視点からはそのせいでデザインの統一感がなくなるとも言える。

• 文字と画像のレイアウト
• 背景色・文字色
• 使用するフォント

何となくデザインの雰囲気が似ていても、上の3つがバラバラでは統一感は感じられない。

専用のWebアプリ開発

レイアウトのパターンや、カラーパレット、使用できるフォントをはじめから最小限にしてしまえば、いいのでは。

そこで、自由度をそぎ落とし、統一感のあるサムネイルを作れるWebアプリを開発することにした。

このWebアプリは自力で開発したわけではなく、AntigravityというAIエージェントに相談し、調整を重ねて完成させたものになっている。

画像生成に使ったJSONを共有してデザインの方向性を固め、Antigravityが提案する機能を、必要かどうか、実際に触りながら判断し、必要な機能だけを残すことにした。

Webアプリを使ってみた感想

自分にとって必要な機能で構成されたアプリだけあって、思い通りにサムネイルを作れる。その点は高評価だが、まだまだ改善していく余地は残されている。

具体的には、サムネイルの情報もJSONに保存できるようになれば、作業を途中で中断できるし、過去のサムネイルを簡単に検索できるようになる。

他にも、サムネイルだけでなく、ブログ記事内で使う説明用の画像も、Webアプリを作成して統一的なデザインにできれば、サイト全体の質が上がるのではと考えている。

これは今後チャレンジしていこうと思います！