0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

見た目は、言葉で変えられます

0
Last updated at Posted at 2026-10-25

この記事は、Lyre3 GamesのTechブログに載せた記事の転載です。ブログ版はこちらです。

design-words.png

前回の記事で、ホームページの仕組み(Markdown CMS)を、自由に使える形で公開しました。
今日はその続きで、「見た目を変える」手順を書いておきます。
手順が書いてあると、それだけでぐっと使いやすくなるはずです。
プログラムを書く話は出てきません。

design-steps.png

用意するもの

  • AIアシスタント(私が使っているのは「Muse」です)
  • 好みのホームページの画像(スクリーンショットで構いません。「こんな雰囲気にしたい」の見本です)

パソコンは、なくても大丈夫です。
作業はAIの側で進むので、スマートフォンから頼むだけで済みます。
実際、私はこのブログまわりの作業を、全部スマートフォンでやっています。

手順1:仕組みを取り込む

AIアシスタントに、公開先のアドレスを伝えて「これを取り込んで」と頼みます。
技術の言葉では「クローン」と言いますが、要はまるごと複写してくることです。
取り込む先はAIが作業する場所なので、自分でコマンドを打ったり、自分の機械に何かを入れたりする必要はありません。

公開先: GitHub(oosawak/markdown-cms)

手順2:見本の画像を見せて、頼む

取り込めたら、好みのホームページの画像をAIに見せて、「この形にして」と頼みます。
AIは、色や文字の大きさ、ものの並び方といった「見た目の決まり」を書き換えて、試しの表示(プレビュー)を作ってくれます。

手順3:言葉で直す

一回で決まることは、あまりありません。
「もっと明るく」「文字を大きく」「写真を大きく見せて」。
そう言葉で伝えると、AIが直して、また試しの表示を作ります。
これを何度か繰り返して、気に入る形に寄せていきます。

手順4:公開する

形が決まったら、「公開して」と頼みます。
裏側の保管場所(GitHub)に置くところまでAIがやってくれるので、少し待てば、新しい見た目のサイトが表示されます。

なぜ、文章が無事なのか

page-structure.png

この仕組みでは、文章と見た目が別々にできています。
見た目の決まりを書き換えても、書いた文章には触りません。
だから、見た目の試行錯誤で記事が消えることはありませんし、気に入らなければ前の見た目に戻すこともできます。

正直な注意を、2つ

ひとつ。
AIが作るのは「この形に寄せた」もので、見本と寸分たがわぬ複写ではありません。
色や並びの雰囲気を寄せる、と考えるのがちょうどいいと思います。

もうひとつ。
見本にする画像は、雰囲気の参考にするためのものです。
他人のサイトの写真や文章を、そのまま自分のものとして使うのはやめておきましょう。

まずは、文章からでいい

見た目は、あとからいくらでも変えられます。
だから順番は逆でいいのです。
まず文章を書いて公開して、見た目は使いながら、気に入る形に寄せていく。
この気軽さが、プログラムを動かさない仕組みのよさだと思っています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?