WordPressの記事を、もっと簡単にかわいくしたい。
そんなところから作り始めた「AIちいちゃんパレット Pro」ですが、気づけばできることがかなり増えてきました。
記事全体を一発で着せ替えたり、見出しだけデザインを変えたり、Q&Aや箇条書きをかわいくしたり、書体まで変更したり。
「できることが増えれば、もっと便利になる！」
そう思っていたのですが、実際に使ってみると、ちょっと違いました。
機能が増えたことで、逆に使いにくくなった部分が出てきたんです。
今回は、新しい機能を追加するのではなく、AIちいちゃんパレット Proの操作画面そのものを見直してみました。
結果として分かったのは、WordPressの装飾ツールは、できることの多さだけではダメだということ。
たくさん機能があっても、迷わず使えることの方が大切でした。
右が修正後
- AIちいちゃんパレット Proの機能がかなり増えてきた
- パーツ・文字・ちょい足しを押すたびにパレットの大きさが変わる
- パレットの大きさを固定して中身だけスクロールすることにした
- 記事セットの横スクロールも実際に使うと面倒だった
- 着せ替えセットは2列で並べて縦スクロールする方が簡単だった
- 「戻る」「やり直す」は固定したのに、まだ遠かった
- 「ちょい足し」もただのボタンから見本カードへ変更
- ちょい足しは「記事を自分でペイントする場所」になりそう
- 書体まで変えられるから記事全体の印象も変わる
- お気に入りが一瞬消える？でも同じ操作をすると再現しない
- WordPress装飾ツールは機能が多ければいいわけではなかった
- Level11まで来て、そろそろ「増やす」より「育てる」段階へ
- まとめ｜機能を増やしたからこそ「簡単に使える」をもう一度考えた
AIちいちゃんパレット Proの機能がかなり増えてきた
最初のころのAIちいちゃんパレット Proは、今よりずっとシンプルでした。
そこから実際にWordPressの記事で使いながら、
「こんなこともできたら便利かも」
「ここも一発で変えたい」
「書体まで変えられないかな？」
と少しずつ機能を増やしてきました。
現在は、記事全体をまとめて変更する「一発着せ替え」だけでなく、細かい部分を変更する機能もあります。
- 記事全体の一発着せ替え
- ブルーセット
- かわいいセット
- H2〜H6の見出し変更
- ボックス
- Q&A
- 箇条書き
- ボタン
- 文字装飾
- マーカー
- ゴシック
- 丸ゴシック
- 明朝
- お気に入り
- 戻る・やり直す
かなり増えました。
一発で全部変えたい人は「一発着せ替え」。
見出しだけ変えたい人は「パーツ」。
書体を変えたい人は「文字」。
文章の一部分へマーカーを入れたい人は「ちょい足し」。
使い方によって選べるようになってきたのですが、ここで別の問題が出てきました。
機能は整理できたのに、操作しているとなんとなく使いにくい。
そこで、実際に何度もパレットを触りながら原因を探してみました。
パーツ・文字・ちょい足しを押すたびにパレットの大きさが変わる
最初に気になったのが、パレットそのものの大きさでした。
「パーツ」を開くと、たくさんのスタンプが表示されます。
ところが「文字」を開くと、表示されるのはゴシック、丸ゴシック、明朝、元の書体など数個だけ。
「ちょい足し」も、まだそれほど種類が多くありません。
そのため、表示する内容に合わせてパレットの高さが変わっていました。
一見すると、これは合理的です。
中身が少ないなら小さくする。
中身が多いなら大きくする。
ところが実際に操作すると、これが意外と気になります。
パレットの大きさが変わると、その中にあるボタンの位置まで動いてしまうからです。
さっきまでここにあったボタンが、タブを切り替えた瞬間に違う位置へ移動する。
ほんの一瞬なのですが、
「あれ？」
となります。
WordPressの記事を装飾するときは、何度もパーツを切り替えます。
そのたびに操作位置を目で探し直すのは、少しずつストレスになります。
そこで考え方を変えました。
中身に合わせてパレットを動かすのではなく、パレットは動かさず中身だけ動かせばいい。
パレットの大きさを固定して中身だけスクロールすることにした
今回の改善では、AIちいちゃんパレット Proの外枠サイズを基本的に固定しました。
パーツを開いても、
文字を開いても、
ちょい足しを開いても、
パレットそのものの大きさは変わりません。
表示するものが少ない「文字」では、下に大きな空白ができます。
最初は、
「こんなに空いていていいのかな？」
とも思いました。
でも、実際に使ってみるとこちらの方がずっと使いやすい。
空白があっても困りません。
それよりも、ボタンの位置が毎回変わらない方が大切でした。
表示するものが多い場合は、パレットを大きくするのではなく、中の一覧だけ縦スクロールします。
つまり、
外側は動かない。中身だけ動く。
という作りに変更しました。
これだけでも、かなり操作しやすくなりました。
記事セットの横スクロールも実際に使うと面倒だった
もう一つ気になったのが、一発着せ替えの記事セットです。
ブルーセットやかわいいセットなどを横方向へ並べ、左右へスクロールして選べるようにしていました。
見た目は悪くありません。
横にカードが並んでいるので、なんとなくおしゃれにも見えます。
ところがPCで使ってみると、問題がありました。
横スクロールはマウスでスクロールバーを掴まなければならないんです。
縦スクロールなら、マウスホイールをクルクル回すだけ。
でも横スクロールの場合は、
スクロールバーへマウスを移動する。
掴む。
横へ動かす。
離す。
そしてセットを選ぶ。
一発で記事を着せ替えるための機能なのに、セットを探すところで操作が増えてしまいました。
これでは「簡単に着せ替える」というパレットの良さが薄れてしまいます。
そこで、横スクロールをやめました。
着せ替えセットは2列で並べて縦スクロールする方が簡単だった
現在は、ブルーセットとかわいいセットを2列のカードとして表示しています。
今後セットが増えたら、その下へ追加していきます。
たとえば、
ブルーセット・かわいいセット。
その下に、ナチュラルセット・シンプルセット。
さらにその下に、LP用セット。
というように縦方向へ増やせます。
セットがたくさん増えても、パレットの中でマウスホイールをクルクルすれば探せます。
スマホなら、普段Webサイトを見るのと同じように上下へスワイプするだけです。
これなら記事セットが増えても問題ありません。
むしろ一発着せ替えがAIちいちゃんパレット Proのメイン機能なので、いろいろなコーデがズラッと並んでいる方が選ぶ楽しさがあります。
クローゼットを開いて、
「今日はどれにしよう？」
と洋服を選ぶような感覚です。
パレットというより、本当にクローゼットっぽくなってきました。
「戻る」「やり直す」は固定したのに、まだ遠かった
パレットの大きさを固定したことで、もう一つ気づいたことがありました。
「戻る」と「やり直す」です。
これまではパレットの一番下に配置していました。
位置そのものは固定されたので、以前より迷わなくなりました。
ところが使っていると、
遠い。
記事セットを変更して、
「あ、さっきの方がよかった」
と思ったとき、パレットの下まで視線を移動して「戻る」を押す必要があります。
一発着せ替えと「戻る」は、かなり頻繁にセットで使います。
そこでさらに位置を変更しました。
現在は、
一発着せ替え
のすぐ下に、
戻る｜やり直す
を配置しています。
その下に、
パーツ｜文字｜ちょい足し
があります。
これがかなり使いやすい。
着せ替える。
見てみる。
違うと思ったら、すぐ戻る。
別のデザインを試す。
WordPressの記事を編集しているというより、服を試着している感覚に近くなりました。
「ちょい足し」もただのボタンから見本カードへ変更
今回もう一つ変わったのが「ちょい足し」です。
これまでは、
「イエロー」
「ピンク」
「ブルー」
「解除」
といった小さなボタンが並んでいました。
もちろん、それでも機能としては使えます。
でも、せっかく「パレット」という名前なのに、文字だけでは少し寂しい。
そこで現在は、カードの中に実際の装飾イメージを表示するようにしました。
黄色なら黄色いマーカー。
ピンクならピンクのマーカー。
ブルーならブルーのマーカー。
解除なら、マーカーが外れることが分かる見本。
これなら名前を読まなくても、
「これを押したらこうなるんだな」
と見た目で選べます。
カードの大きさもちょうどよく、2列で並べられるので、今後ここを増やしていくのも面白そうです。
ちょい足しは「記事を自分でペイントする場所」になりそう
一発着せ替えは、記事全体をまとめて変える場所です。
一方、ちょい足しは少し違います。
記事全体を変えるのではなく、
「ここだけちょっと目立たせたい」
というときに使います。
今はマーカーが中心ですが、今後はいろいろ増やせそうです。
- 色違いのマーカー
- 下線
- 波線
- 点線
- 文字色
- 太字
- 少し大きな文字
- 手書きっぽい強調
こういった装飾が見本カードとして並んだら、かなり楽しそうです。
一発着せ替えで全体のコーデを決める。
そこから必要なところだけ「ちょい足し」でペイントする。
記事全体の着せ替え＋自分好みのちょい足し。
パレットの使い方が少しずつ見えてきました。
書体まで変えられるから記事全体の印象も変わる
前回の実践記では、WordPressの記事の書体まで着せ替えられるようになりました。
現在は、
ゴシック。
丸ゴシック。
明朝。
元の書体。
などをパレットから切り替えられます。
装飾だけでなく書体まで変わると、同じ文章でも印象がかなり変わります。
かわいい記事なら丸ゴシック。
少し落ち着いた記事やLPなら明朝。
シンプルにしたければゴシック。
記事セットと組み合わせれば、デザインのパターンはかなり増えそうです。
ただ、今回の改善を終えてから一つ忘れていたことにも気づきました。
書体を変更しているときの表示です。
機能そのものは正常に動いているので、今回はそのまま。
次回の改善候補として、書体変更中だと分かる表示も追加してみようと思っています。
こうして実際に使っていると、完成したと思った直後にまた一つ見つかります。
お気に入りが一瞬消える？でも同じ操作をすると再現しない
もう一つ、少し不思議な現象もあります。
使っている途中で、
「あれ？お気に入りが表示されていない」
となることがあります。
ところが別のボタンを押すと、すぐ元に戻ります。
「今の操作が原因かな？」
と思って同じ操作をしてみても、今度は消えません。
お気に入りそのものが削除されているわけではなく、表示だけが一時的に更新されていないように見えます。
こういう再現できない小さな問題は、無理に直そうとしないことにしました。
原因が分からないまま大きくコードを触って、正常に動いているところまで壊してしまったら本末転倒です。
実際に使い続けて、
「この操作のあとに必ず起きる」
と分かったときに直せばいい。
直すことより、壊さないことも大事。
機能が増えてきた今だからこそ、そんなことも感じるようになりました。
WordPress装飾ツールは機能が多ければいいわけではなかった
今回の改善で一番大きかったのは、新しい機能ではありません。
むしろ、
すでにある機能をどう見せるか
でした。
できることが10個から20個になれば、単純に便利さが2倍になるわけではありません。
機能が増えれば、それだけ探す場所も増えます。
ボタンも増えます。
画面も複雑になります。
だから機能を増やすほど、
「使わない人には見せすぎない」
ことも大切になってきます。
現在のAIちいちゃんパレット Proでは、一発で済ませたい人なら「一発着せ替え」だけ使えば大丈夫です。
もう少し変えたい人は「パーツ」。
書体を変えたい人は「文字」。
自分で装飾したい人は「ちょい足し」。
細かく使いたい人は、お気に入りや検索まで使えます。
簡単に使いたい人は簡単なまま。
こだわりたい人だけ奥まで使える。
この形が、今のところ一番合っている気がします。
Level11まで来て、そろそろ「増やす」より「育てる」段階へ
AIちいちゃんパレット Proは、今回でLevel11まで来ました。
最初からLevel11まで作ろうと思っていたわけではありません。
実際に使って、
「ここ変えたい」
と思ったところを直す。
また使う。
新しいことに気づく。
また直す。
その繰り返しです。
だから、完成形を最初から全部決めるのではなく、使いながら育ってきたツールという方が近いかもしれません。
そして現在は、パレット本体へ何でも追加するより、
着せ替えセットを増やす。
ちょい足しのペイントを増やす。
そんな「中身を育てる」段階に入ってきた気がします。
ブルーセット。
かわいいセット。
その次はどんな服にしよう。
どんな線を引こう。
どんな文字にしよう。
WordPressの記事装飾なのに、だんだん洋服や画材を選んでいるみたいになってきました。
でも、それでいいのかもしれません。
難しいCSSを覚えなくても、
「これが好き」
で選べる。
それがAIちいちゃんパレット Proでやりたかったことだからです。
まとめ｜機能を増やしたからこそ「簡単に使える」をもう一度考えた
今回は、AIちいちゃんパレット Proの機能追加ではなく、操作画面を中心に改善しました。
パレットの大きさを固定する。
中身だけ縦スクロールする。
記事セットの横スクロールをやめる。
セットを2列で並べる。
戻る・やり直すを一発着せ替えの近くへ移動する。
ちょい足しを、見た目で選べるカードにする。
一つひとつは小さな変更です。
でも実際に使ってみると、こういう小さな部分の方が「使いやすさ」には大きく影響しました。
今回分かったのは、
機能が増えることと、使いやすくなることは同じではない
ということ。
だからこれからも、機能を増やすだけではなく、
かんたん。かわいい。迷わない。そして触っていて楽しい。
そんなWordPressの着せ替えパレットとして、少しずつ育てていこうと思います。
次は新しい着せ替えセットになるのか。
ちょい足しの新しいペイントになるのか。
それとも、また使っている途中で「あれ？」が見つかるのか。
たぶん最後のパターンもありそうです（笑）
