WordPressの記事をもっと見やすくしたい。
見出しをかわいくしたり、ポイントを囲ったり、Q&Aを読みやすくしたり。
でも、WordPress初心者にとってCSSを使った記事装飾って、ちょっと怖いものでもあります。
「CSSを変更したらデザインが崩れた。」
「元に戻したいけど、どこを直したのかわからない。」
「違うCSSを消してしまったらどうしよう。」
下手に触って、WordPressテーマまでおかしくなったら大変です。
AIちいちゃんパレット Proは、そんな難しいCSSをできるだけ触らずに、記事を楽しく装飾できるように作っています。
そして今回、たけおさんとの会話から新しく追加することになったのが、
「戻る」と「やり直す」
でした。
最初は便利な機能を一つ追加するくらいに考えていました。
でも、よく考えてみたら違いました。
これって、これからAIちいちゃんパレット Proでやろうとしている、
「記事を着せ替える」
ために、ものすごく大切な機能だったんです。
AIちいちゃんパレット Proは「着せ替え」へ進み始めています
これまでのAIちいちゃんパレット Proは、WordPressの記事に装飾を付けるツールとして成長してきました。
ブルー見出し。
ポイント。
購入者限定特典。
Q&A。
丸チェック。
ブルーボタン。
文章を書いたあと、使いたい装飾を選んで記事を見やすくしていきます。
これだけでも、CSSを自分で書いてWordPressの記事を装飾するより、ずっと簡単です。
ところが、パレットを使いながら私たちは次のことを考えるようになりました。
一度装飾して終わりじゃなくて、あとから違うデザインへ変えられたら面白くない？
例えば今日は、
ブルーセット。
しばらくして、
「この記事、もう少しかわいい感じにしたいな。」
と思ったら、
かわいいセット。
レビュー記事なら、
レビューセット。
Q&A中心の記事なら、
Q&Aセット。
洋服を選ぶように、その日の記事に合ったデザインを選ぶ。
そんなWordPress記事の「着せ替え」を考え始めました。
そして、その考えから生まれたのが、
AIちいちゃんクローゼット
です。
難しいCSSはもういらない。
記事を着せ替える新しい楽しさ。
これを本当に実現するため、AIちいちゃんパレット Proも少しずつ進化させています。
「戻る機能も欲しいね」
次のレベルアップについて、たけおさんと話していたときでした。
これから本格的に着せ替えられる仕組みを作っていこう。
一度装飾した記事でも、別の装飾へ変更できるようにしよう。
記事の背景まで変えられたら面白そう。
そんな話をしている途中で、たけおさんが言いました。
「戻る機能も欲しいね。」
あ。
確かに。
着せ替えられるようになったとしても、
着せ替えたデザインが気に入らなかったらどうするの？
という問題があります。
ブルーから、かわいいデザインへ変更してみた。
でも実際に記事全体を見たら、
「うーん。前のブルーの方がよかったな。」
そんなことは普通にあるはずです。
そのとき、
「じゃあ、もう一度ブルーに設定し直してください。」
では、あまり着せ替えらしくありません。
だったら、
↶ 戻る
でいい。
さらに、
「やっぱり、かわいい方にしよう。」
と思ったら、
↷ やり直す
でいい。
こうして次のレベルアップに「戻る・やり直す」を追加することになりました。
CSSだったら「元に戻す」だけでも初心者には怖い
そして機能が完成してから、たけおさんが言いました。
「よく考えたら、戻す機能もスゴい機能だよね。」
確かにそうなんです。
ボタンとして見ると、
↶ 戻る ↷ やり直す
たったこれだけです。
WordPressやパソコンを使っていれば、似たようなボタンはよく見ます。
だから最初は、それほど派手な機能には見えません。
でも、これをCSSによるWordPressの記事装飾として考えてみると、意味が変わります。
例えばWordPress初心者が、ネットで見つけたCSSを使って見出しを装飾したとします。
青い見出しができました。
「もう少しかわいくしたい。」
そこで別のCSSへ変更します。
すると、
あれ？なんか違う。
前の方がよかった。
じゃあ元に戻そう。
……。
前のCSS、どれだっけ？
ここから初心者には怖い作業が始まります。
元に戻そうとして別のCSSまで消したら大パニック
CSSに慣れている人なら、変更した部分を確認して元へ戻せるかもしれません。
でも初心者の場合、
「ここを消せばいいのかな？」
「これもさっき追加したやつ？」
「このカッコは消していいの？」
となることがあります。
そして、間違った場所を削除してしまう。
保存。
サイトを見る。
あれ？
見出しだけを戻したかったのに、別の装飾まで変わっている。
最悪の場合、
「さっきまで普通だったところまで崩れた！」
となります。
こうなると大パニックです。
元へ戻そうとしているのに、触れば触るほどわからなくなる。
初心者にとって怖いのは、CSSそのものだけではありません。
「失敗したときに元へ戻せるかわからない」
ことも怖いんだと思います。
だったら、最初から安心して戻せるようにしてしまえばいい。
気に入らなかったら「↶戻る」でいい
AIちいちゃんパレット Proでは、難しいことを考えなくていいようにしたい。
装飾してみる。
気に入らなかった。
だったら、
↶ 戻る。
元のデザインへ戻る。
「やっぱりさっきのデザインもよかったな。」
だったら、
↷ やり直す。
もう一度適用する。
ブルー。
↓
かわいい。
↓
↶ 戻る。
↓
ブルー。
↓
↷ やり直す。
↓
かわいい。
これなら、デザインを変更すること自体が怖くありません。
失敗しても戻れるから、とりあえず試せる。
ここが大きいと思いました。
「変えられる」だけでは本当の着せ替えじゃなかった
今回の開発で、私は一つ気付きました。
これまで、
「記事を何度でも違うデザインへ変更できれば、着せ替えになる」
と考えていました。
でも、それだけでは足りなかったんです。
本当の着せ替えなら、
気軽に試せること
も大切です。
洋服だったら、
青い服を着てみる。
鏡を見る。
「今日は違うかな。」
脱ぐ。
ピンクを着てみる。
「こっちかな。」
また青に戻してみる。
普通にできます。
ところがWordPressの記事装飾で同じことをしようとすると、CSSを書き換えたり、削除したり、元へ戻したりする必要が出てきます。
それでは気軽な「着せ替え」ではありません。
だから、
自由に変えられる。
だけじゃなく、
自由に戻せる。
この2つが必要だったんです。
戻れるからデザインで遊べる
これって、かなり重要だと思います。
失敗したら簡単に元へ戻せるとわかっていれば、
「これ試してみようかな。」
と思えます。
ブルー見出しを使ってみる。
1文字目を大きくしてみる。
ポイントを付けてみる。
Q&Aを装飾してみる。
気に入らなかったら戻す。
別のデザインを試す。
また戻す。
そうやって何度も試して、自分の記事に合ったデザインを探せます。
つまり「戻る・やり直す」は、単なる修正機能ではありません。
WordPress初心者でも怖がらずに記事装飾を試すための機能
でもあるんです。
これは実際に作ってから気付きました。
AIちいちゃんパレット Proに「戻る・やり直す」が付きました
そして今回、実際のAIちいちゃんパレット Proに、
↶ 戻る
↷ やり直す
が付きました。
一発変換ボタンのすぐ下です。
装飾を変更したあと、その場ですぐ戻せます。
戻していないときは「やり直す」が使えない状態になり、戻したあとに再び適用できるようになります。
見た目としては、とても小さな追加です。
でも私は、これからパレットが「記事を着せ替えるツール」へ進化していくうえで、大きな一歩だと思っています。
なぜなら、
「失敗したらどうしよう」
を一つ減らせたからです。
WordPress初心者だからこそ「壊さない」を大切にしたい
AIちいちゃんパレット Proを作るとき、ずっと大切にしていることがあります。
新しい機能を追加することだけではありません。
今、正常に動いているものを壊さないこと。
これは開発そのものでも同じです。
レベルアップするときも、
「この機能を追加してください。」
だけではなく、
「現在正常に動いている機能は壊さないでください。」
という条件を入れています。
今回の「戻る・やり直す」にも同じ考えがあります。
WordPressの記事を装飾したいだけなのに、
「サイトが壊れたらどうしよう。」
なんて心配したくありません。
記事をかわいくしたい。
読みやすくしたい。
ちょっとデザインを変えてみたい。
本来やりたいのは、それだけです。
だったら難しいところはパレット側に任せて、
使う人は、
「どれにしようかな？」
と選ぶだけにしたい。
それが、AIちいちゃんパレット Proで目指している形です。
「難しいCSSはもういらない」の意味が少し変わりました
AIちいちゃんクローゼットのキャッチコピーは、
難しいCSSはもういらない。
記事を着せ替える新しい楽しさ。
です。
最初にこの言葉を決めたときは、
「CSSを書かなくても装飾できる。」
という意味が大きかったと思います。
でも今回「戻る・やり直す」を追加して、少し意味が広がりました。
CSSを書かなくていいだけじゃない。
CSSを変更して失敗する怖さも減らしたい。
難しいコードを覚える代わりに、
パレットを開く。
好きなデザインを選ぶ。
試してみる。
違ったら戻す。
気に入ったらそのまま使う。
そんなふうにWordPressの記事装飾をもっと気軽にしたい。
「難しいCSSはもういらない。」
この言葉が、少しずつ本当の機能になってきています。
次はいよいよ「記事そのもの」を着せ替えたい
ブルー見出し。
ポイント。
Q&A。
丸チェック。
そして、
戻る・やり直す。
少しずつ必要な部品が揃ってきました。
でも、まだ完成ではありません。
私たちがやりたいのは、
一つずつ装飾を変更するだけではなく、
記事そのものを着せ替えること。
例えば、
ブルーセットを選ぶ。
記事全体がブルーを基調としたデザインになる。
次に、
かわいいセットを選ぶ。
同じ文章のまま、今度はかわいいデザインになる。
レビュー記事なら、
レビューセット。
実践記なら、
実践記セット。
そして、
「やっぱり前の方がいい。」
と思ったら、
↶ 戻る。
これができたら、本当に「記事の着せ替え」になってきます。
小さな「戻る」ボタンが、実は大きな一歩でした
今回追加したのは、
↶ 戻る
↷ やり直す
という、小さな2つのボタンです。
見た目だけなら、これまで追加してきた装飾より地味かもしれません。
でも、よく考えてみると、
失敗しても戻れる。
というのは、とても大きな機能でした。
CSSを触って、
「壊したかも！」
と慌てなくていい。
デザインを変えて、
「前の方がよかった……。」
と後悔しなくていい。
気になるデザインがあったら試してみる。
違ったら戻る。
もう一度見たくなったら、やり直す。
記事装飾を「失敗しないように慎重に触るもの」から、「いろいろ試して楽しむもの」へ。
AIちいちゃんパレット Proは、少しずつそんなツールになってきました。
次はいよいよ、本格的な着せ替えです。
クローゼットを開いて、
「今日はどのコーデにしようかな？」
そんな感覚でWordPressの記事を選べるところまで。
まだまだ作っていきます😊
内部リンクは明日でいいや…が消えた！WordPressの「つながる内部リンクAIちいちゃん」誕生｜AIちいちゃん実践記 #006
