あっきーの教材工房 あっきーの教材工房
サイトバナー

AstroプロジェクトをAIに参照させてHTML/CSSチラシを作った話

公開日: 2026/05/28
タグ: Astro,AI
🖨️

はじめに

あれもこれもな個人事業主

個人事業主という形で活動していると、メインの業務である開発や現場支援の他にも、問い合わせ対応や経理、広報、営業といった業務も一人で回す形になります。
しかしながら、中には不得意だったり不慣れだったりして、必要性を感じながらも放置してしまっている業務もチラホラ…

私にとっては広報業務がその一つ。
展示会に呼んでいただく機会が年間通してあるのですが、実機を展示するだけで持ち帰っていただける資料、チラシやフライヤーと呼ばれるようなものは準備できていませんでした。

そんな業務上の課題を、イマドキの流れに乗ってAIで解決してみよう、というのが今回の記事です。
「AIの勉強にもなる」という理由を添えることで、ようやく重い腰を上げることができました。

AIが提案してきた想定外のチラシ作成法

チラシ作成といえば、正攻法ではデザインツールを使うのかもしれません。
私の場合のデザインツールはもっぱら「パワポ」です（笑）。アプリアイコンも実は全てパワポだったり。

AIに相談したところ、返ってきたのは「それ、HTML/CSSで作れますよ」との回答。

てっきり画像生成で案を出してきたりするのかと思いましたが、HTMLというのは意外でした。
一瞬戸惑いましたが、すぐに「いいかも！」と思い直しました。

すごくオシャレなものにはならないかもしれないけど、情報としてまとまったものは作れそうです。

自分の場合、WebサイトはAstroというフレームワークで作っていて、そのプロジェクト、ブログ記事の原本はローカルファイルとして全て手元にありました。
これを丸ごと情報ソースとして渡せれば、ブランドとして統一感のあるチラシを早く楽に作れるんじゃないか、と思い立ち。
そして実際、半日ほどでチラシを完成させることができました。

AIエージェントとのチラシ作り

AIに渡すWebサイトの情報を整える

このあっきーの教材工房のWebサイトはCSSファイルにカラーパレットの情報を記載しています。
AIとの作業セッションでこのファイルを指定して読み込んでもらうことで、サイトのブランドカラーや文字色を反映したチラシが作れるはずです。

また、ブログ記事へのパスも伝えます。
私の場合はアプリに関するチラシを作成したかったので、関連する記事が集まったディレクトリの情報も整理しました。

AIに投げる

今回は「iPadアプリのラインナップを紹介するチラシ」を作ってもらいました。

依頼した要件はざっくり以下のようなもの：

  • 開発・販売しているiPadアプリのチラシを作りたい
  • A4縦サイズ2ページ分（印刷可能なHTMLとして出力）
  • 載せたいアプリはA、B、C…
  • 各アプリのタイトル/アイコン/URL/概要/価格/スクショを掲載
  • ○○のディレクトリにWebサイトのプロジェクトがあるから、アプリの情報はそこで調べて
  • デザインもWebサイトに合わせて（カラーパレットは○○に記載あり）
  • シンプルで読みやすいレイアウトで
  • アプリアイコンはWebサイトと同じ画像を使って、スクショは後から追加するからプレースホルダーを置いといて

ファイルの置き場所はある程度しっかり記述しましたが、それ以外の指示はかなり適当でした。

あっという間に出てきたHTMLファイル

AIが出力してくれたのは、1枚もののHTMLファイル。
head部のスタイルにちゃんとブランドカラーが使われていました。
角丸や影の感じもWebサイトでの表現に近く、Webサイトをそのままチラシにしたような印象でした。

その他、break系のプロパティ指定だったり、@page のルールだったりと、A4印刷に必要なスタイル定義も実装されていました。

この辺りまでを一発目からバシッと出してきましたね。本当にすごいです。

情報を並べただけで面白みには欠ける構成かとは思いましたが、自分でゼロから作ってもこれ以上にオシャレになることはないので問題ナシです。

微調整のやりとり

最初の出力をブラウザで開いてみると、「タイトルが小さい」「余白が詰まっている」という点が気になりました。
2〜3回のやりとりで、だいぶ満足のいく仕上がりに。

1ページに掲載するアプリ数を3つから4つに増やした時はさすがに時間がかかりましたが、これもお願いするだけで対応してくれました。

実際にやってみて

よかったこと

  • デザインの一貫性が保てる：カラーパレットをAIが把握しているので、サイトと統一感のあるチラシになった
  • 内容の一貫性も保てる：アプリ名やリンク先など、プロダクトに関する細かな情報を改めてまとめなくて良い（AIがサイトから見つけてくるから）
  • コーディングの手間が大幅に減る：HTML/CSSの細かい書き方を自分で調べなくて良い
  • 修正の反映が速い：「ここをこう変えて」と自然言語で伝えるだけで対応してくれる
  • トークンの消費が少ない：画像生成ではなくHTMLだったため、速いしトークンも浪費しない

気をつけたこと

  • ブラウザによって見た目が変わる：印刷プレビューはブラウザごとに差異があります。SafariではなくChrome必須。
  • 画像はこちらで：画像はプレースホルダーで出力してもらい、こちらで差し替えました。チラシ作成はメイン業務ではないので、トークンの節約も大事。
  • box-shadowが出ない：PDF出力時に一部シャドーが正しくレンダリングされないということがありました。ここだけはAIによる解決が難しく、自分で調査して filter: blur(); を加える方法でクリアしました。

まとめ

AstroプロジェクトをそのままAIに渡すことで、サイトのデザイン・内容と一貫性のあるHTMLチラシ（の土台） がほぼ会話だけで作れました。

実際には、文面や画像を人の手でチェックするため、完成には半日ほどかかっています。
ですが、これまで億劫がっていたタスクをクリアできたことは大きな収穫でした。
PDF出力してプリントサービスに入稿、あとは到着を待つだけ！

：
：

到着！🚚

印刷されたチラシ

「チラシ作りたいけどデザインツールは使いたくない（使えないw）」「でもサイトと同じように作りたい」という場面では、この方法はかなり手軽でおすすめです。

修正のサイクルも速いので、「なんとなくこんな感じ」という曖昧なイメージを形にするのにも向いていると思います。
（ ← おそらく、私にはこの部分の心理的な負荷が高くて手がつけられなかったのかと…）

タグ: Astro,AI