WordPressの記事を装飾するとき、見出しを変えて、箇条書きを変えて、Q&Aを整えて、ボタンを付けて……。
一つずつ装飾するだけでも、記事全体を整えるとなると意外と手間がかかります。
だったら、
「この記事は今日はブルーでいこう。」
と決めたら、洋服を選ぶようにセットを一つ選ぶだけで、記事全体のデザインを着せ替えられたら面白くないでしょうか。
そんな話から作り始めたのが、AIちいちゃんパレット Proの**「記事まるごと着せ替え」**です。
前回の実践記では、着せ替えたあとに気に入らなかったときのために、
↶ 戻る
↷ やり直す
まで追加しました。
そして今回。
いよいよ、
「ブルーセット」
を実際に記事へ適用してみるところまで進みました。
構想だけだった「記事を着せ替える」が、本当に動き始めたんです。
ただし……。
実際に使ってみたら、
「おお！着せ替わった！」
で終わりませんでした。
見出しを見て、
「あれ？」
箇条書きを見て、
「あれ？」
ボタンを見て、
「あれ？」
また始まりました（笑）
今回は、AIちいちゃんパレット Proの着せ替え機能が初めて動き、そこから次々と見つかった問題を修正していったお話です。
- 「今日はこの記事をブルーコーデにする」を実現したい
- AIちいちゃんクローゼットも、このために作りました
- いきなり全部のセットは作らない
- ついに「ブルーセット」が動いた！
- あれ？H2もH3もH4も、あまり変わらない（笑）
- 同じブルーでもH2からH6まで役割を変える
- 見出しを直したら、今度は箇条書きが変わってない
- 認識できなければ着せ替えられない
- WordPressの普通の箇条書きも一発変換へ
- 箇条書きもブルーになった！
- そして今度はボタンだけ変わらない（笑）
- 作る→動く→「あれ？」→直す（笑）
- 「着せ替え」の意味が少しずつ分かってきた
- マーカーは勝手に色を変えない方がいい？
- 洋服とアクセサリーは別にする
- 「戻る・やり直す」を先に作っておいてよかった
- まだブルーセットは完成ではありません
- 難しいCSSはもういらない。その意味がまた一歩近づいた
「今日はこの記事をブルーコーデにする」を実現したい
これまでのAIちいちゃんパレット Proには、いろいろな記事装飾を追加してきました。
ブルー見出し。
1文字目ジャンボ。
ポイント。
購入者限定特典。
Q&A。
丸チェック。
ブルーボタン。
使いたい装飾を選べば、難しいCSSを書かなくてもWordPressの記事を装飾できます。
これだけでも便利です。
でも、使っているうちに新しいことをやりたくなりました。
一つずつ選ぶんじゃなくて、記事全体をまとめてコーデできないかな？
例えば、
「今日はこの記事をブルーでまとめよう。」
と思ったら、
👗 ブルーセット
を選ぶ。
すると、記事の中にある見出しやQ&A、箇条書き、ボタンなどが、統一されたブルーデザインになる。
別の記事なら、
🌸 かわいいセット。
レビュー記事なら、
⭐ レビューセット。
ランキング記事なら、
🏆 ランキングセット。
記事の内容に合わせてデザインを選ぶ。
これが、私たちが考えている**「記事の着せ替え」**です。
AIちいちゃんクローゼットも、このために作りました
この「着せ替え」という考え方から、新しく作ったのが、
AIちいちゃんクローゼット
です。
キャッチコピーは、
難しいCSSはもういらない。
記事を着せ替える新しい楽しさ。
クローゼットの中から洋服を選ぶように、記事に使いたいコーデを選ぶ場所にしたい。
そして実際に記事へ着せ替えるのが、
AIちいちゃんパレット Pro
です。
つまり、
AIちいちゃんクローゼットでコーデを見つける。
↓
AIちいちゃんパレット Proで記事へ着せ替える。
そんな形を考えています。
でも、そのためには当然、
本当に記事を丸ごと着せ替えられなければいけません。
そこで今回、まず一つだけ実際に動くセットを作ることにしました。
それが、
ブルーセット
です。
いきなり全部のセットは作らない
最初から、
ブルー。
かわいい。
レビュー。
ランキング。
Q&A。
実践記。
全部作ることも考えられます。
でも、それはやめました。
着せ替えの仕組み自体がまだ完成していないのに、デザインだけ増やしても仕方ありません。
まず、
ブルーセット一つで、本当に記事全体を着せ替えられるのか？
ここを確認することにしました。
ブルーセットを選ぶ。
記事の中にある装飾を認識する。
見出しなら見出し。
Q&AならQ&A。
箇条書きなら箇条書き。
ボタンならボタン。
そして、それぞれをブルーセット用のデザインへ変更する。
これができれば、次からは同じ仕組みに、
かわいいセット
レビューセット
などを追加していけばいい。
まず洋服をたくさん作るのではなく、
着せ替えられるクローゼットそのものを完成させる。
そんな考えで進めることにしました。
ついに「ブルーセット」が動いた！
そして、ブルーセットを実装。
実際の記事で試してみました。
パレットからブルーセットを選ぶ。
適用する。
すると……。
おお！変わった！
記事の見出しがブルー系のデザインへ変わりました。
今まで一つずつ装飾を選んでいたものが、セットを選ぶことでまとめて変更される。
まだ完成ではありません。
でも、
「記事を着せ替える」
という考え方が、初めて実際の機能として動きました。
これは結構うれしかったです。
ところが。
記事全体を眺めていると、すぐに気になるところが出てきました。
あれ？H2もH3もH4も、あまり変わらない（笑）
ブルーセットを適用した記事を見ていて、たけおさんが言いました。
「上から見出し、H2〜H6。あまり変わりないね。」
確かに（笑）
全部ブルーにはなっています。
ブルーセットとしての統一感はあります。
でも、
H2
H3
H4
H5
H6
を並べてみると、見た目の差があまりありません。
これでは、記事を読んだときに、
「ここが大きな章なのか。」
「その中の小さな見出しなのか。」
が分かりにくくなります。
特に長い記事ほど、見出しの階層は大切です。
そこで、さっそく修正することにしました。
同じブルーでもH2からH6まで役割を変える
ブルーセットだからといって、全部同じデザインにする必要はありません。
むしろ、
同じブルーの世界観を保ちながら、階層ごとに強さを変える。
これが必要でした。
そこで、
H2は一番強い見出し。
H3はH2より少し軽く。
H4はさらにシンプルに。
H5は下線やライン中心。
H6は最も軽い装飾。
という形へ変更することにしました。
イメージとしては、
H2 → 主役
H3 → 大きな補助
H4 → 小見出し
H5・H6 → 文章の流れを整理する目印
です。
同じブルーコーデでも、全部同じ洋服ではありません。
役割によって少しずつ変える。
これも「着せ替え」を実際に使ってみたから気付いたことでした。
見出しを直したら、今度は箇条書きが変わってない
見出しの問題が見つかったあと、記事をさらに見ていました。
すると、今度は箇条書きです。
普通のWordPressの箇条書きが、そのまま残っています。
ブルーセットを適用したのに、何も変わっていない。
「あれ？」
ここで、もう一つ大事なことに気付きました。
そもそも現在のAIちいちゃんパレット Proでは、箇条書きは、
パレットから箇条書き装飾を出す。
↓
その中へ文章をコピペする。
という使い方でした。
つまり、
WordPressですでに作ってある普通の箇条書きを、パレットが認識していなかったんです。
認識できなければ着せ替えられない
ここで、着せ替え機能の大事な仕組みが見えてきました。
デザインを作るだけではダメなんです。
パレット側が、
「これは見出しです。」
「これは箇条書きです。」
「これはQ&Aです。」
「これはボタンです。」
と認識できなければ、着せ替えることができません。
見出しは認識できた。
だからブルーへ変わった。
でも普通の箇条書きは認識できなかった。
だから何も変わらなかった。
ものすごく単純ですが、実際に使ってみるまで気付きませんでした。
そこで、
WordPress標準の箇条書きをパレット側から認識できるようにする
修正を追加しました。
WordPressの普通の箇条書きも一発変換へ
ここは着せ替えだけ直すのではなく、
一発変換
にも対応させることにしました。
これまでは普通の箇条書きを書いても、一発変換では何も起きませんでした。
それを、
普通の箇条書き
↓
パレットが「箇条書き」と認識
↓
⚡ 一発変換
↓
パレット用の箇条書きデザインへ変換
という流れにします。
さらに、変換したあとも、
「これは箇条書きだった」
という情報を失わないようにします。
そうすれば、
ブルーセットならブルー系。
将来かわいいセットを作ったら、かわいい系。
別のセットなら、そのセットに合った箇条書き。
同じ文章のまま、デザインだけ着せ替えられます。
箇条書きもブルーになった！
そして修正。
もう一度、普通の箇条書きが入った記事へブルーセットを適用しました。
今度は、
変わった！
普通の箇条書きだった部分も、ブルーセットのデザインへ変換されました。
見出し。
箇条書き。
少しずつ、記事全体が同じコーデへ揃っていきます。
ここで、
「着せ替えエンジンって、こういうことなんだ。」
とかなり分かってきました。
着せ替えエンジンで重要なのは、派手なデザインを大量に作ることではありません。
その前に、
WordPressの記事の中に何があるのかを正しく認識すること。
ここが土台なんです。
そして今度はボタンだけ変わらない（笑）
見出しが変わった。
箇条書きも変わった。
よし。
と思って記事を見てみると……。
今度は、
「詳しくはこちら」
というボタンだけ、そのままです。
また、
「あれ？」
です（笑）
おそらく、このボタンはWordPressまたはCocoon側で作られた標準のボタン。
AIちいちゃんパレット Pro自身が作ったブルーボタンではありません。
そのため、
パレット側が「これは着せ替え対象のボタンだ」と認識できていない
可能性があります。
箇条書きと同じです。
認識できなければ、着せ替えられません。
次は、
WordPress標準ボタンやCocoonのボタンを、どこまで安全に認識できるか。
ここが新しい課題になりました。
作る→動く→「あれ？」→直す（笑）
今回の開発、ずっとこれです。
ブルーセットを作る。
↓
「おお！動いた！」
↓
H2〜H6を見る。
↓
「あれ？全部似てない？」
↓
修正。
↓
箇条書きを見る。
↓
「あれ？変わってない。」
↓
修正。
↓
箇条書きが変わる。
↓
「できた！」
↓
ボタンを見る。
↓
「あれ？これだけ変わってない。」
（笑）
でも、私はこの進み方でいいと思っています。
最初から完璧な仕様を考えるより、
実際の記事で使う。
そして、
「ここ変じゃない？」
を見つける。
そこを直す。
また使う。
こうやって少しずつ、本当に使えるツールになっていきます。
「着せ替え」の意味が少しずつ分かってきた
最初に「記事を着せ替えたい」と考えたときは、
デザインセットを作ればいいと思っていました。
ブルーのCSS。
ピンクのCSS。
レビュー用CSS。
ランキング用CSS。
それを切り替えれば、着せ替えになる。
でも実際に作り始めると、それだけでは足りませんでした。
必要なのは、
記事の中身を理解すること。
見出しなのか。
箇条書きなのか。
Q&Aなのか。
ボタンなのか。
強調なのか。
それぞれの役割を認識したうえで、
文章は変えず、見た目だけを変更する。
これが本当の着せ替えエンジンなんだと思います。
マーカーは勝手に色を変えない方がいい？
さらに話していると、まだ追加していなかった機能にも気付きました。
文章へマーカーを引く機能。
黄色マーカー。
ピンクマーカー。
ブルーマーカー。
こういう文字装飾もパレットにあったら便利です。
最初は、
「ブルーセットならマーカーも青にすればいいかな？」
とも考えました。
でも、これは少し違う気がしました。
例えば、ユーザーがわざわざ、
「この文章は黄色で目立たせたい。」
と思って黄色マーカーを引いたとします。
そこへブルーセットを適用しただけで、
勝手に青へ変更されたらどうでしょう。
それは「着せ替え」というより、
ユーザーが決めた装飾を勝手に変更している
ことになります。
そこで、文字装飾については別に考えることにしました。
洋服とアクセサリーは別にする
記事全体のセットは、
洋服。
マーカーや下線など、ユーザーが個別に付けた文字装飾は、
アクセサリー。
そんなふうに分けると分かりやすそうです。
ブルーセットへ着替えたからといって、身につけていたアクセサリーまで全部青くする必要はありません。
だから基本的には、
個別に指定した文字装飾は、そのまま残す。
一方、
「クレヨンセット」
のように、文字装飾そのものを変更することが目的のセットなら話は別です。
クレヨンセットを選んだら、文字の強調をクレヨン風にする。
そんな専用の着せ替えなら面白そうです。
こうして、
記事全体のコーデ
と
文字装飾のアクセサリー
も分けて考えるようになりました。
「戻る・やり直す」を先に作っておいてよかった
そして今回、改めて感じたのが、
前回追加した、
↶ 戻る
↷ やり直す
です。
ブルーセットを適用して、
「やっぱり違う。」
と思ったら戻せる。
もう一度見たければ、やり直せる。
記事全体の着せ替えを何度も試すなら、これはやっぱり必要でした。
前回の記事で、
「自由に変えられるだけじゃなく、自由に戻せることも必要だった。」
と書きました。
実際にブルーセットを動かしてみて、その意味がさらに分かりました。
着せ替えは、
試してみる
ことが前提だからです。
まだブルーセットは完成ではありません
今回、
記事まるごと着せ替え
は動き始めました。
見出しも変わる。
普通の箇条書きも認識できるようになった。
一発変換にも対応し始めた。
でも、まだ完成ではありません。
WordPressやCocoonの標準ボタンをどう認識するか。
マーカー機能をどう作るか。
どこまでを記事セットで変更して、どこからをユーザーの個別装飾として守るか。
まだ考えることがあります。
でも、それでいいと思っています。
今回一番大きかったのは、
「着せ替えたいね。」
と話していたものが、
本当に記事を着せ替え始めたこと。
です。
難しいCSSはもういらない。その意味がまた一歩近づいた
AIちいちゃんクローゼットのキャッチコピー。
難しいCSSはもういらない。
記事を着せ替える新しい楽しさ。
最初はイメージとして作った言葉でした。
でも、
パレットで装飾できるようになり、
一発変換ができるようになり、
戻る・やり直すができるようになり、
そして今回、
ブルーセットで記事全体を着せ替える機能が動き始めました。
少しずつ、キャッチコピーに機能が追いついてきています。
まだクローゼットの中には、ブルーの洋服が一着あるくらいです。
でも、その一着を実際に着られるようになった。
だったら次は、
かわいいセット。
レビューセット。
ランキングセット。
少しずつ増やしていけばいい。
ただし、その前に。
まだブルーセットで認識できていないボタンがあります（笑）
まずはそこから。
作る。
使う。
「あれ？」を見つける。
直す。
AIちいちゃんパレット Proは、今日もそんな感じで育っています😊
WordPressのCSS装飾で失敗しても大丈夫？「戻る・やり直す」をAIちいちゃんパレット Proに付けた理由｜AIちいちゃん実践記 #007
WordPressでデジタル商品を販売してみた！無料ダウンロードからクレジットカード決済まで成功｜AIちいちゃん実践記 #009
