AI割烹のつくりかた ～AI小説じゃねーよ！ ということで活動報告でAI使ってみる、AIにはHTMLタグを作ってほしいのです～
なろう民の皆様、こんにちわ～！ きゅうり植え楽しんでますか？
なろうチアーズプログラムが開始されて以来、AI小説が氾濫しているそうですね。まぁ、その辺の話題は最近のエッセイでさんざん議論され尽くしているので、今回はいいのです。
今回はAI割烹を広めたいなと、あとノウハウを明文化したいなと思っております。
（※念のため解説：活動報告＝活報＝割烹、です）
AI小説にイライラしている人も、AIでサクッと見栄えの良い割烹を作ってみたら、案外イライラが収まるかもしれませんよ？
「AI小説はもう勘弁！」というなろう民の皆さん、いっそAIを飼いならしてAI割烹を作りましょう！ アイデア絶賛募集中です～。
AI使わない割烹でもシンプルでいいじゃーんという方は、そっ閉じしてください！
・
・・
・・・
はい、では残った皆さんで『AI割烹』作っていきましょう！
ちなみにこの小技、活動報告だけでなく「ランキングタグ」なんかにも使えます。どんな風に仕上がるか、実例はこのページの下の方に置いておくので見てみてくださいね！
--------------------------------
■■ 作り方は超簡単！ プロンプトをコピペするだけ ■■
やることは簡単です。
以下のプロンプト（AIへの指示書）をコピーして、ご自身の作品情報や好みのデザインに書き換え、AIに投げるだけです。ね？ かんたんでしょう？
ただし、AIは放っておくと勝手にオシャレを始めます。
そして、活動報告で使えないタグを混ぜたり、妙に複雑なHTMLを出したり、やたら改行の多いコードを出してきたりします。
なので、こちらからルールを指定します。
「使えるタグはこれだけ」
「style属性はインラインで」
「JavaScriptは使わない」
「不要な改行を入れない」
「スマホでも読みやすく」
「作品ページへのリンクを入れて」
こういう制限をつけると、AIはかなり使いやすいHTMLを作ってくれます。
AIは自由にさせると走ります。制約を渡すとちゃんと仕事をします。たぶん。
--------------------------------
■■ 基本プロンプト ■■
▼ここから下のテキストをコピーしてください▼
あなたは「小説家になろう」の活動報告向けに、見栄えのいいHTMLを作るデザイナー兼編集者です。
以下の条件に従って、活動報告にそのまま貼り付けられるHTMLを作成してください。
## 変数（※ここを自分の作品に合わせて書き換える）
作品タイトル：
作品URL：
作品紹介：
画像URL：なくてもいい
作品タイトル：
作品URL：
作品紹介：
画像URL：なくてもいい
活動報告の目的：
デザイン：
カラーテーマ：
## 使用できるHTMLタグ
以下のタグだけを使用してください。
見出し：
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
文章・区切り：
<p>, <br >, <hr>, <blockquote>, <pre>
リスト：
<ul>, <ol>, <li>, <dl>, <dt>, <dd>
画像・リンク：
<img>, <a>
強調・装飾：
<strong>, <em>, <small>, <s>, <cite>, <q>, <dfn>, <abbr>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <i>, <b>, <u>, <span>, <ins>, <del>
レイアウト：
<div>, <table>, <tr>, <th>, <td>
## 使用できるstyle属性
style属性はインラインで指定してください。
使用できるCSSは以下に限定してください。
- color
- background
- background-color
- background-image
- background-repeat
- background-position
- font
- font-style
- font-weight
- font-size
- font-family
- line-height
- text-align
- vertical-align
- text-decoration
- white-space
- letter-spacing
- word-spacing
- width
- height
- max-width
- min-width
- max-height
- min-height
- margin
- padding
- border
- float
- clear
- list-style
- list-style-image
- list-style-type
- list-style-position
- table-layout
- border-collapse
- border-spacing
- bgcolor
画像では以下の属性も使用できます。
- src
- alt
- width
- height
## 禁止事項
以下は使わないでください。
- scriptタグ
- iframeタグ
- formタグ
- inputタグ
- buttonタグ
- CSSクラス
- id属性
- 外部CSS
- JavaScript
- display:flex
- display:grid
- position
- box-shadow
- border-radius
- animation
- webフォント
- 小説家になろうの活動報告で使えない可能性があるタグや属性
## デザイン条件
- 活動報告で崩れにくいHTMLにする
- スマホでも読みやすいように、横幅は最大680pxまでにする
- 画像URLが空、または「なし」の場合は、画像タグを使わず、文章中心のデザインにする
- 画像URLがある場合は、サイズを指定し、作品タイトルをaltに入れる
- 作品URLへのリンクを入れる
- タグの間に不要な改行、空行、インデントを入れない
- 意図的に本文内で改行したい場合だけ<br >を使う
## 出力形式
最終出力はHTMLのみ。
小説家になろうの活動報告では、入力欄の改行が<br >に自動変換される場合があります。そのため、最終HTMLは原則として1行で出力してください。タグの整形用改行や空行は入れないでください。
▲ ここまでコピペ ▲
--------------------------------
■■ 基本プロンプトの考え方 ■■
基本プロンプトに必要な要素は、大きく分けると次の4つです。
・作品情報
・活動報告の目的
・デザイン
・カラーテーマ
この4つがあれば、AIはかなり安定して活動報告用HTMLを作れます。
それぞれ説明していきます。
--------------------------------
■■ 作品情報の指定方法 ■■
作品情報には、タイトル、URL、紹介文、画像URLを入れます。
画像URLはなくても大丈夫です。ない場合は「なし」と書いておけばOKです。
AIに「画像URLがない場合は画像タグを使わないで」と指定しておくと、画像なしでも見栄えのするデザインにしてくれます。
たとえば、作品情報はこんな感じで書きます。
--------------------------------
作品タイトル：私は十年間、帳簿を整理し、場を整えてきた、不遇な令嬢ですが、突然婚約破棄されたので、この席から降ります。
作品URL：https://ncode.syosetu.com/
作品紹介：十年間。私は一人で王宮の帳簿を整理し、数字を整えてきた。だが、「お前は冷たい」と婚約破棄を告げられた。私は静かにうなずき、役を降りた。新しい場所で、寡黙な公爵に拾われる。「ああ。それでいい」。その二文字に救われた。元の職場は崩壊し、私に戻ってこいと言うが、もう遅すぎる。数字は嘘をつかない。これは、不遇な令嬢が真の場所を見つけ、すべてを渡す物語。
画像URL：https://22980.mitemin.net/userpageimage/viewimage/icode/i1145053/
--------------------------------
画像URLはhttps://<みてみんID>.mitemin.net/userpageimage/viewimage/icode/<iコード >/の形式にしましょう。URL形式の方がAIが認識しやすくなります。また挿絵形式だとサイズ指定ができませんので使いにくいです。
複数作品を紹介したい場合は、同じ形で作品を追加します。
--------------------------------
作品タイトル：無能だと追放された私ですが、実はすべてを見抜いていたので、裁判で証明します
作品URL：https://ncode.syosetu.com/
作品紹介：私は空気を整え、礼節を保ち、八年間尽くしてきた。しかし、義妹にすべてを奪われ、家を追い出された。ボロアパートのようなワンルームの小屋で、私はただ静かに数字を整える。そこに現れたのは、冷徹な第二王子。「構わない」彼は言った。彼と共に、私は真実の輪郭を持った裁判へと向かう。私の記録は、私が証明します。これは、感情ではなく整理で、嘘を暴く物語。
作品タイトル：銀木犀が香る夜、私はただの確認の言葉として、契約妻の役割を全うする。
作品URL：https://ncode.syosetu.com/
作品紹介：侯爵令嬢の私は、冷酷な王弟殿下と白い結婚をした。私は家宰として、ただ家を回す、削る、整える。そこに愛はない。「アンタでいい」殿下のその三文字に、私はただ静かに右足から一歩を踏み出した。だが、真実の愛を見つけたという殿下により、私は追い出される。私は数百ページの引継書を胸元から取り出し、家を去った。これは、感情の無い私が、新たな秩序を構築する物語。
作品タイトル：慰謝料の請求先は、義妹の親しい男友達の実家です。私は、ただ、帳簿をめくる。
作品URL：https://ncode.syosetu.com/
作品紹介：「お前は追放だ」と、父は言った。い、今度はちゃんとしてくれ、と父はどもる。私は、そうですか、と答え、引き継ぎ書十年分を胸元から取り出した。私は、古い家電のあるワンルームに引っ越し、ミネラルウォーターだけを飲みながら、新たな生活の場を整える。一方、実家は洪水で借金を負った。私は、その請求を義妹の友人の実家に回す。「困った時は助ける」と言っていたからだ。数字は、裏切らない。これは、裁定の物語。
--------------------------------
■■ 活動報告の目的の指定方法 ■■
AIには「なぜその活動報告を作るのか」を伝えた方がいいです。同じ作品でも、新作告知なのか、完結報告なのか、コンテスト応募作の紹介なのかで、書き方は変わります。目的を書かないと、AIはそれっぽいけど無難な紹介文を作りがちです。
なので、目的を指定しましょう。たとえば、こんな感じです。
例：
- 新作告知：読者の興味を引くフックを強める
- 完結報告：最後まで読める安心感と達成感を強める
- 連載中の宣伝：今から追いつける魅力と更新への期待を強める
- コンテスト応募作紹介：作品の個性、テーマ性、読みどころを強める
- 代表作ポートフォリオ：作者の作風、実績、世界観を伝える
- シリーズ紹介：読む順番、各作品の関係性、入口のわかりやすさを重視する
- 短編紹介：短時間で読めること、アイデアの切れ味を重視する
こういう指定を入れると、AIはリンク文言や紹介文の方向を合わせやすくなります。
--------------------------------
■■ デザインの指定方法 ■■
AIには、専門的なCSS用語を伝えるよりも「完成イメージ」を言葉で伝えた方が圧倒的に早くて正確です。「borderを何pxにして、background-colorを何色にして……」と細かく指定してもいいのですが、そこまでできる人はたぶん自分で作れます。
AIに頼むなら、まずは雰囲気で指定しましょう。たとえば、以下のような言葉が使いやすいです。
・文庫帯風：キャッチコピーを大きく見せ、出版物の帯のように作品の魅力を短く強く伝える。
・雑誌特集風：雑誌特集風。見出し、紹介文、読みどころを並べて、作品を特集記事のように紹介する。
・図鑑風：作品情報、ジャンル、特徴、読みどころを項目ごとに整理して、観察記録のように見せる。
・美術館キャプション風：余白を多めにし、落ち着いた雰囲気で作品性や余韻を伝える。
・レトロ広告風：枠線と強めの見出しを使い、昔のチラシのように楽しく見せる。
・シンプルカード風：画像、タイトル、紹介文、リンクを整えて、読みやすさを最優先にする。
・ダークファンタジー風：暗めの背景色、重厚な見出し、余韻のある紹介文で世界観を出す。
・ポップ告知風：明るい色、短い文章、目立つリンクで、軽く楽しく読者を誘導する。
・和風の掛け軸風：落ち着いた和色、縦書き風の雰囲気、余白を使って和風作品らしさを出す。
・喫茶店メニュー風：作品をメニューのように並べ、短編集や連作短編を気軽に紹介する。
--------------------------------
■■ カラーテーマの指定方法 ■■
カラーテーマも重要です。活動報告の装飾でありがちな失敗は色を増やしすぎることです。なので、使うカラーテーマを決めておきましょう。カラーテーマを決めればAIが適当に色付けしてくれます。
たとえば、こんな指定が使えます。
例：
- 色名指定：薄水色
- カラーコード指定：#f4efe6
- 詳細指定：背景は #0f172a、本文背景は #1e293b、文字色は #e2e8f0
- 雰囲気指定：明るい黄色とピンクを使った、ポップで楽しい配色。
--------------------------------
■■ 改行対策も大事です ■■
ここ、地味ですが重要です。小説家になろうの活動報告やランキングタグでは、入力欄の改行が<br >に自動変換される場合があります。
そのため、AIがきれいに整形したHTMLを出してくると、貼り付けたときに余計な改行が増えることがあります。
なので、プロンプトにはこれを入れておくといいです。
タグの間に不要な改行、空行、インデントを入れない。
最終HTMLは原則として1行で出力する。
意図的に本文内で改行したい場合だけ<br >を使う。
余白は改行ではなく、margin、padding、line-heightで調整する。
--------------------------------
■■ うまくいかないときの修正指示 ■■
AIに一回頼んで、完璧なものが出るとは限りません。というか、たぶん一回では微妙なこともあります。
それで大丈夫です。
AI活用で大事なのは、一発で当てることではありません。修正指示で近づけることです。
たとえば、こんなふうに頼めます。
- もっとシンプルにしてください。
- 色が強すぎるので、背景を薄くして落ち着いた雰囲気にしてください。
- スマホで読みやすいように、文字を少し大きくしてください。
- ランキングタグ用なので、文章量を半分にしてください。
- レトロ広告風を残しつつ、煽りすぎない紹介文にしてください。
- 活動報告で崩れにくいように、使用タグを減らしてください。
- リンクをもっと目立たせてください。ただし派手にしすぎないでください。
- 作品紹介文が硬すぎるので、もう少し親しみやすくしてください。
- デザインはいいですが、文章が長いので短くしてください。
- 複数作品の紹介を、表ではなくカード風に並べてください。
- 美術館キャプション風ではなく、雑誌特集風に変更してください。
- カラーテーマをダークテーマに変更してください。
- 最終HTMLを1行で出力し直してください。
AIに対しても、編集者になるのです。
「違う、そうじゃない」
「もう少し落ち着いて」
「そこは派手でいい」
「読者様が迷うからリンクを減らして」
「その色は目が死ぬ」
「改行するなと言ったでしょうが！何度言えばわかるんだ、この、くそAIがあ！」
こうして調整していきます。これはもう、AIとの共同制作です。
--------------------------------
■■ まとめ ■■
活動報告を彩るために、HTML/CSSを全部覚える必要はありません。もちろん、覚えればもっと自由に作れます。でも、最初の一歩としては、AIに頼んでいいと思います。
ということでAI割烹にチャレンジ！ランキングタグにサンプルおいておくよ！
いろんなノウハウを試してみよう！ 面白いものが作れたらぜひ共有してね！
よき割烹ライフを！
～こんな感じで進めていいですか、**編集長(笑)**？
