WordPressの記事を、もう少しおしゃれにしたい。
見出しを変えたり、POINT枠を作ったり、記事全体の雰囲気を変えたり。
でも、そのたびにCSSを書くのは面倒。
そこで私は、
WordPressの記事を服みたいに着せ替えられたらいいんじゃない？
と思って、AIと一緒にAIちいちゃんパレット ProというWordPress装飾プラグインを作っています。
そして最近、新しい機能ができました。
あとから新しいコーデを追加できる機能。
よし。
じゃあ最初の追加コーデは、
クリスマスにしよう！
となったんです。
クリスマスなら分かりやすい。
赤とか緑とか。
ツリーとか。
雪とか。
AIに作ってもらえば、すぐそれっぽいものができるだろう。
そう思っていました。
ところが。
全然できない（笑）
正確には、作れるんです。
ちゃんと動く。
見出しも変わる。
囲み枠も変わる。
色も変わる。
でも、
なんか違う。
何度見ても、
これ、クリスマスか？
となりました。
今回は、WordPress装飾プラグインをおしゃれにしようとして失敗したことで、逆にデザインで大事なことが分かった話です。
WordPressの記事を装飾する方法はいろいろある
WordPressの記事をおしゃれにする方法はいくつかあります。
たとえば、
- WordPressテーマに入っている装飾を使う
- ブロックエディターの機能を使う
- CSSを追加してデザインを変える
- 装飾用のWordPressプラグインを使う
などです。
テーマによっては、見出しやボックス、ボタンなどが最初から用意されています。
CSSが分かる人なら、自分で細かくデザインすることもできます。
でも私は以前から、
記事を1か所ずつ装飾するんじゃなくて、記事全体を一気に着せ替えたい
と思っていました。
今日はブルー。
次はかわいい感じ。
クリスマスになったらクリスマス。
春になったら桜。
洋服を着替えるみたいに、
「今日はこのコーデ」
で変えられたら楽しいじゃん。
そこから作り始めたのが、AIちいちゃんパレット Proです。
AIちいちゃんパレット Proは記事を一発で着せ替える
AIちいちゃんパレット Proには、記事全体を一発で着せ替えるセットがあります。
現在は、
ブルーセット
かわいいセット
などがあり、ほかにもパーツ単位の変換や書体の着せ替え、マーカーなどのちょい足しができます。
私は専門のプログラマーではありません。
実際にWordPressで使いながら、
「ここ使いにくいな」
「このボタンもっと近くに欲しい」
「記事全部まとめて変えたい」
みたいなことをChatGPTに話します。
そこから仕様を考えて、AIに開発してもらう。
使ってみる。
また直す。
ずっとそんな感じです。
最近完成したVer.1.2では、さらに、
パレット本体を更新しなくても、新しいコーデをあとから追加できる仕組み
が入りました。
「👗 コーデを追加」からコーデファイルを読み込むと、新しいコーデがセット一覧に追加されます。
WordPressを閉じても残る。
あとから削除もできる。
別のコーデへ着せ替え直すこともできる。
これで、
パレット本体＝着せ替える道具
コーデ＝あとから増やせる服
という形が、かなり見えてきました。
動作確認用にクリスマスコーデを作ってみた
新しいコーデを追加できるなら、当然試したくなります。
何にしようかな。
夏？
桜？
レビュー記事用？
いろいろありますが、
クリスマスが分かりやすいじゃん。
ということで、テスト用のクリスマスコーデを作りました。
コーデファイルを読み込む。
セット一覧に表示される。
押してみる。
記事が着せ替わる。
おお！できた！
ちゃんと動きました。
Ver.1.2の追加コーデ機能そのものは成功です。
ところが、着せ替えた記事を改めて見てみると、
……ん？
なんか違う。
クリスマスっぽいと言えば、クリスマスっぽい。
冬っぽい。
雪っぽい。
ちょっと北欧っぽい。
でも、
「これなーんだ？」
とデザインだけ見せたら、
「クリスマス！」
より、
「冬？」
と言われそうなんです。
それじゃダメじゃん（笑）
おしゃれだけど「何のデザインか分からない」
ここで、ちょっと面白いことに気づきました。
Webデザインとしてキレイかどうかと、
テーマがちゃんと伝わるかどうかは別なんです。
色がまとまっている。
余白もある。
文字も読める。
なんとなくおしゃれ。
でも、
クリスマスに見えない。
AIちいちゃんクローゼットで作りたいのは、単に色を変えたセットではありません。
クリスマスコーデなら、
説明を読まなくてもクリスマスに見える。
お正月コーデなら、
見た瞬間にお正月だと分かる。
それが大事。
ところが今回のデザインは、
「おしゃれにしよう」
を考えすぎて、
「クリスマスに見える」
が弱くなっていました。
原因は「オリジナル」にしようとしすぎたことだった
なんでこうなったんだろう。
何度もデザインを見ながら考えていて、途中で気づきました。
たぶん、
他と違うものを作ろうとしすぎた。
クリスマスといえば赤と緑。
ヒイラギ。
ツリー。
オーナメント。
プレゼント。
ゴールド。
でも、それをそのまま使ったら普通すぎるんじゃない？
他にもありそう。
もっとオリジナルにした方がいいんじゃない？
そんな方向へ行っていました。
その結果、
クリスマスじゃなくなった（笑）
いやいや。
そこじゃないだろ。
クリスマスのデザインが似るのは当たり前だった
改めて世の中のクリスマスデザインを見てみると、やっぱり似ています。
赤。
緑。
白。
ゴールド。
ツリー。
ヒイラギ。
雪。
オーナメント。
リボン。
プレゼント。
もちろん全部が同じデザインではありません。
でも、
クリスマスだと認識するための共通部分
はかなりあります。
考えてみれば当たり前なんですよね。
たとえばセブン‐イレブン。
赤・緑・オレンジの組み合わせを見ると、
「あ、セブンっぽい」
と分かります。
もし突然、
「他とは違うコンビニにしよう！」
と言って、全部紫色にしたらどうなるんだろう。
たぶん、
何のお店か分からなくなる。
クリスマスも同じでした。
世の中にはすでに、
「この色、この形、このモチーフを見るとクリスマス」
という共通のイメージがあります。
だったら、そこは避けるところじゃなかった。
むしろ、
ちゃんと使うところだった。
もちろん、誰かのデザインをそのままコピーするわけではありません。
でも、
赤や緑を使う。
ヒイラギを使う。
オーナメントを使う。
それ自体は「真似」じゃない。
クリスマスをクリスマスとして伝えるための共通言語みたいなものなんですよね。
クリスマスを新しく発明しなくてよかった
ここで、ようやく分かりました。
AIちいちゃんクローゼットの独自性は、
誰も見たことがないクリスマスを発明すること
じゃない。
クリスマスは普通にクリスマスでいい。
その代わり、
そのクリスマスらしさを、WordPressの記事として使いやすい形にする。
ここなんです。
たとえばH2。
クリスマスっぽくても、文字が読みにくかったらダメ。
装飾が大きすぎて、本文より目立ってもダメ。
スマホで見たらゴチャゴチャするのもダメ。
H3、POINT枠、Q&Aなどと一緒に使ったとき、全部バラバラでもダメ。
つまり考えるのは、
クリスマスらしさ
だけじゃない。
- 配色
- 余白
- フォント
- 文字サイズ
- 枠線
- モチーフ
- 背景
- 視線の流れ
- スマホでの見え方
- 記事としての読みやすさ
全部まとめて、
「クリスマスの記事として読みやすいか？」
を見る必要があります。
ここがWordPress装飾プラグインとしてのデザインなんだと思います。
色を変えただけでは「着せ替え」にならない
これは今回かなり大事だと思いました。
たとえば通常のブルー系デザインを、
赤と緑に変更する。
それだけでも、一応クリスマスカラーにはなります。
でも、
それだけでクリスマスコーデなのか？
というと、私は違うと思います。
AIちいちゃんクローゼットでやりたいのは、
単なるカラーバリエーションではありません。
服で考えたら分かりやすい。
普段着を赤く染めただけで、
「はい、クリスマス衣装です！」
と言われても、
いや、違うだろ（笑）
となる。
クリスマスなら、クリスマスらしい形や小物がある。
お正月なら、お正月らしい雰囲気がある。
だからWordPressの記事でも、
色＋見出し＋囲み枠＋ライン＋文字＋モチーフ
みたいに、複数の要素を組み合わせて初めて「コーデ」になる。
もちろん、やりすぎて記事が読みにくくなったら意味がない。
このバランスが難しい。
そして今回、そこに思いっきりハマりました（笑）
失敗から「季節・行事テーマのデザイン原則」ができた
せっかくなので、今回の失敗をそのままルールにしました。
クリスマス。
お正月。
ハロウィン。
桜。
夏祭り。
こういう、世の中ですでに「それらしい」と認識されるデザインがあるものは、
無理に定番から外さない。
まず、
一目で何のテーマか分かること。
その次に、
読みやすくする。
その上で、
AIちいちゃんクローゼットらしく整える。
この順番です。
以前は、
「他にはないもの」
から考えようとしていました。
でも逆でした。
まず伝わること。
オリジナルはそのあと。
これはクリスマス以外のコーデを作るときにも使えそうです。
クリスマスコーデはボツになったけど、
デザインルールが1個増えました（笑）
AIなら一発でおしゃれなデザインができるわけじゃなかった
AIを使うと、
何でも一瞬で作れるように見えます。
確かに、作るスピードはものすごく速くなりました。
私はコードを全部書けません。
デザインソフトでゼロから全部作っているわけでもありません。
「こうしたい」
とAIに伝えれば形にしてくれます。
でも今回改めて分かったのは、
AIが出したものをそのまま使えば完成するわけじゃない
ということ。
作ってもらう。
見る。
なんか違う。
直してもらう。
また見る。
まだ違う。
何が違うのか考える。
配色？
余白？
文字？
モチーフ？
配置？
そこをAIと話して、また作る。
私の場合、この繰り返しです。
コードを書けなくても、
「このボタン押しにくい」
は分かります。
プロのデザイナーじゃなくても、
「これクリスマスじゃない」
は分かる。
最初はただの、
「なんか違う」
でもいい。
その違和感をAIと一緒に分解していけば、少しずつ良くなっていきます。
これもAIと一緒にものを作る面白さなのかもしれません。
やっと分かった！と思ったところでWorkの上限（笑）
よし。
原因が分かった。
じゃあ今度は、
赤。
緑。
白。
ゴールド。
ヒイラギ。
オーナメント。
ちゃんとクリスマスらしいものを使う。
でもWordPressの記事としては読みやすくする。
今度こそいけそう。
そう思って作業を続けようとしたら、
画面に表示されました。
上限に達しました。
え？
（笑）
Workが使えなくなりました。
しかも、リセットは明日の1時20分。
ここで強制終了です。
いや、いいところだったのに（笑）
結局クリスマスコーデは完成しなかった
というわけで、この記事を書いている時点では、
クリスマスコーデはまだ完成していません。
ここは間違えないでください（笑）
完成したのは、
新しいコーデをあとから追加できる機能。
テスト用クリスマスコーデを使って、
追加。
保存。
セット一覧への表示。
一発着せ替え。
ここまでは正常に動きました。
でも、
クリスマスコーデそのものはボツ。
さらに作り直そうとしたところでWork上限。
今日は終了です。
でも、完成しなかった割には収穫がありました。
最初は、
「もっとオリジナルにしよう」
と考えていた。
今は、
「誰が見てもクリスマス。それをWordPressの記事としておしゃれにする」
に変わりました。
たぶん、次はかなり違うものになると思います。
たぶんね（笑）
WordPressの記事を「装飾する」から「着せ替える」へ
私は、WordPressの記事装飾を難しい作業にしたくありません。
CSSを何行も書いて、
どこへ貼る？
何を消す？
崩れたらどうする？
ではなく、
今日はこのコーデ。
ポチッ。
記事が着替わる。
新しいコーデが欲しくなったら、クローゼットへ見に行く。
見つけたコーデを自分のパレットへ追加する。
そんな仕組みにしたいと思っています。
そのために作っているのが、
AIちいちゃんパレット Proと、
**AIちいちゃんクローゼット**です。
AIちいちゃんクローゼットのキャッチコピーは、
「難しいCSSはもういらない。記事を着せ替える新しい楽しさ。」
です。
今回のクリスマスコーデは、その「新しい楽しさ」の第1歩になる予定でした。
予定でした（笑）
まだボツです。
でも、こういう失敗も含めて、実際に作って使って直していくところを残していこうと思います。
次こそ、
見た瞬間に「クリスマス！」
となるコーデを作ります。
……Workの上限が戻ったら（笑）