前回の実践編では、公開中の仕組みの見た目を、AIアシスタントに頼んで変える手順を紹介しました。
「好みのホームページの画像を見せて、『この形にして』と頼む」というやり方です。
あの後、この仕組み自体に、デザインの指定方法が正式に入りました。
今回は、その追加の紹介です。
デザインの指定が、Markdownファイルになりました
新しく入ったのは、デザインをMarkdownファイルで指定する方式です。
デザイン用のフォルダに、テーマごとのファイルが置いてあります。
中身は、色や文字の大きさ、余白といった値の指定と、そのテーマがどんな雰囲気なのかを書いた説明文です。
用意したテーマは、apple、dala、dope、midnight、notion、exampleの6種類です。
名前のとおり、白くて余白の大きいもの、夜のような暗いもの、書き物アプリのような落ち着いたものなど、雰囲気の違うものを揃えました。
大事なのは、サーバーの設定も、変換（ビルド）の仕組みも、いじっていないことです。
変わったのは、ファイルが増えたことだけです。
この仕組みの本体は「ただのファイル」だと、ずっと書いてきました。
デザインまでファイルになった、ということになります。
AIに渡せば、「会話」で変えられます
この方式の狙いは、AIに読ませることです。
デザインのファイル（DESIGN.md）をAIに渡して、「この感じで」「もっと明るく」と言葉で伝えれば、AIが値を直して、試しの表示を作ります。
前回の実践編でやっていた「画像を見せて頼む」やり方に、もうひとつ入口が増えた形です。
画像は雰囲気を伝えるもの、ファイルは値を正確に伝えるもの。
両方あると、行き来が楽になります。
サンプルの中には、AIとデザインをやり取りした記録そのものを記事にしたものも入れました。
どんな会話で、どこまで変わるのか。
読んでもらうのが一番早いと思います。
サンプルサイトで、切り替えて試せます
公開しているサンプルサイトには、テーマの切り替え機能を付けました。
ページの上でテーマを選ぶと、その場で見た目が切り替わります。
文章は同じまま、着せ替えるように雰囲気が変わる様子を見てもらえます。
ただし、この切り替えは「任意」です。
サイトの設定で、有効にも無効にもできます。
読者に切り替えを楽しんでもらいたいサイトもあれば、見た目は固定でよいサイトもある。
だから、仕組み側で押し付けず、サイトごとに選べる形にしました。
詳しい手順は、ガイド文書にまとめてあります。
細かい試みも、少し
せっかくなので、遊びも入れました。
空港の案内板のような、パタパタとめくれる見出しのアニメーションや、テーマごとの見出しの収まりの調整です。
実用というより、ファイルで指定できる範囲が広がると、こんなこともできる、という試みです。
仕組みは公開中です
この仕組みは、GitHubで公開しています（MITライセンス）。
持って行って、自分のサイトで試してもらって構いません。
文章はファイル、見た目もファイル。
書くことと整えることが、どちらも同じ土俵に乗った。
その感じを、サンプルサイトで触って確かめてもらえればと思います。