WordPressの記事を着せ替える「AIちいちゃんパレット Pro」。
最初は見出しやボックスなど、記事の装飾を簡単に変えるところから始まりました。
そこから箇条書き、Q&A、ボタンも着せ替えられるようになって、さらに「ブルーセット」「かわいいセット」のように、記事をまとめて着せ替える機能まで追加。
ここまで来ると、同じ文章なのにセットを変えるだけで記事の印象がかなり変わります。
ところが、また一つ気になるものを見つけてしまいました。
書体です。
見出しの色や形を変えるだけでも記事はかなり変わる。
でも、
文字そのものの形まで変わったら、もっと印象が変わるんじゃない？
そんな疑問から始まった今回のレベルアップ。
最初は、
「書体まで変えるのは、さすがに難しいんじゃない？」
と思っていました。
ところが実際に試してみたら……
できました。
しかも、CSSを毎回書き換える必要はありません。
ゴシック。
丸ゴシック。
明朝。
ボタンを押すだけで、同じWordPress記事の書体がその場で切り替わります。
今回は、AIちいちゃんパレット Proが「装飾の着せ替え」から、さらに一歩進んだお話です。
- font-familyを調べていたら、書体変更って意外と大変だった
- 書体も「選んで着せ替える」にしてみた
- 丸ゴシックにしたら記事が一気に柔らかくなった
- 同じ記事を明朝にすると今度は落ち着いた雰囲気になった
- 明朝体を見て「これLPに使えるんじゃない？」と思った
- 自分のブログに似合うLPを選べたら面白い
- 1文字ジャンボには「漢字ジャンボLP」も似合いそう
- 一発で着せ替えたい人も、細かく変えたい人もいる
- 書体を変えるたびにCSSを書き直す必要はない
- 色・形・書体まで変わるとデザインの組み合わせは一気に増える
- 「便利な道具」だけじゃなく、選ぶこと自体を楽しめるものにしたい
- WordPressの記事は「書体」まで着せ替えられた
font-familyを調べていたら、書体変更って意外と大変だった
きっかけは、WordPressで使える書体について調べていたときでした。
CSSには、
font-family
という指定があります。
これを使えば、WordPressの記事でも書体を変更できます。
でも調べてみると、単純に好きなフォント名を書けば終わり、というわけでもありませんでした。
Windowsで使える書体。
Macで使える書体。
iPhoneなどで使える書体。
環境によって利用できるフォントが違います。
さらに、最初に指定したフォントが使えなかった場合に備えて、次に使うフォント、その次に使うフォント……と候補を並べておく方法もあります。
つまり、
「記事の書体をちょっと変えてみたい」
だけなのに、初心者には意外と難しい。
CSSに慣れている人なら普通のことかもしれません。
でも、WordPressを始めたばかりの人が、
「今日は明朝体にしてみよう」
と思うたびにCSSを触るのは、ちょっと面倒です。
そこで思いました。
これもパレットで選べばいいんじゃない？
書体も「選んで着せ替える」にしてみた
AIちいちゃんパレット Proで大事にしているのは、難しい設定を増やすことではありません。
できるだけ、
見て、選んで、押す。
これだけで使えるようにすること。
記事セットも同じです。
ブルーセットがいいと思ったらブルーを選ぶ。
かわいいセットがいいと思ったら、かわいいを選ぶ。
だったら書体も同じでいいはずです。
そこで新しく、
🔤 書体を着せ替える
という機能を追加しました。
現在選べるのは、
ゴシック
丸ゴシック
明朝
元の書体
です。
難しいCSSの設定画面はありません。
フォント名を入力する必要もありません。
使ってみたい書体を選ぶだけです。
丸ゴシックにしたら記事が一気に柔らかくなった
まず試したのが、
丸ゴシック。
実際にWordPressの記事へ適用してみると、かなり印象が変わりました。
文章の内容は同じです。
見出しに書いてある内容も同じ。
それでも、文字の角が柔らかくなるだけで、ページ全体が優しい雰囲気になります。実際のテスト画面でも、パレット内に「ゴシック・丸ゴシック・明朝・元の書体」が並び、丸ゴシックを適用した状態を確認できました。
これなら、
かわいいセット＋丸ゴシック
はかなり相性が良さそうです。
ピンク系の見出し。
丸みのあるボックス。
かわいい箇条書き。
そこへ丸ゴシック。
今までは「色や装飾を揃える」という感覚でしたが、書体が加わると記事全体の雰囲気まで揃えられます。
ここで、
「書体も着せ替えの一部なんだ」
と気づきました。
同じ記事を明朝にすると今度は落ち着いた雰囲気になった
次に試したのが、
明朝。
これがまた面白い。
さっきまで柔らかかったページが、今度は落ち着いた雰囲気になります。
実際に明朝を適用したテスト画面でも、同じ記事内容のまま文字の印象が変化していることを確認できました。
文章は変えていません。
同じページです。
それなのに、
丸ゴシック → やさしい・かわいい
明朝 → 落ち着いた・上品
と、受ける印象が変わります。
これを見ていたら、別の使い道も思いつきました。
LPです。
明朝体を見て「これLPに使えるんじゃない？」と思った
LPを見ていると、明朝系の書体が使われているページを見かけます。
商品やサービスによっては、ゴシックよりも明朝の方が雰囲気に合うことがあります。
でも、すべてのブログに同じLPデザインが合うわけではありません。
普段はかわいいブログなのに、商品ページへ移動した瞬間、
真っ黒。
金色。
ものすごく大きな文字。
急に高級感たっぷり。
これでは、
「別のサイトへ来ちゃった？」
というくらい雰囲気が変わってしまうこともあります。
LPだからといって、必ず派手にすればいいわけではありません。
むしろ、
普段のブログに合ったLP
の方が自然な場合もあります。
そこでパレットです。
自分のブログに似合うLPを選べたら面白い
パレットで書体まで変更できるなら、LPセットにもいろいろな種類を作れそうです。
たとえば、
🌸 やさしいLPセット
かわいい配色＋丸ゴシック。
💙 シンプルLPセット
ブルー系＋読みやすいゴシック。
✨ 上品LPセット
落ち着いた配色＋明朝。
同じLP原稿でも、デザインと書体を変えれば印象はかなり変わります。
つまり、
「LPはこのデザイン」
と一つに決めなくてもいい。
洋服と同じように、
「このブログには、こっちのLPが似合う」
と選べるようにすればいいんです。
これならブログの記事からLPへ移動しても、急に世界観が変わりにくくなります。
1文字ジャンボには「漢字ジャンボLP」も似合いそう
さらに書体を見ていたら、もう一つアイデアが出てきました。
以前作った、
1文字目ジャンボ
のようなデザイン。
文字そのものをデザインとして見せる記事セットです。
だったら、そのブログに合わせるLPも普通のLPではなく、
漢字を太いゴシックで大きく見せるLP
なんて面白そうです。
漢字は太く大きく。
ひらがなは少し控えめ。
数字や価格はさらに目立たせる。
これは普通に font-family を変更するだけではできないので、まだ先の話です。
でも、パレットで文字まで扱えるようになったことで、
「文字そのものをコーデする」
という方向まで見えてきました。
最初は見出しの色を変えていただけなのに、ずいぶん遠くまで来ました（笑）
一発で着せ替えたい人も、細かく変えたい人もいる
パレットを作っていると、使い方にもいろいろあることに気づきます。
細かくデザインしたい人なら、
ここに赤線。
この文章にマーカー。
この見出しだけ変更。
この部分だけ太字。
そんな使い方が合うと思います。
一方で、
細かい設定は面倒。
できれば一発で全部変えてほしい。
という人もいます。
その場合は記事セットを選んで、
ポチッ。
これで終わり。
どちらが正しいということではありません。
だからパレットも、
一発で着せ替える機能
と、
細かく自分で調整する機能
の両方があった方がいい。
まず、かわいいセットで記事全体を着せ替える。
そのあと、
「書体だけ明朝にしてみようかな？」
と思ったら明朝を押す。
違うと思ったら丸ゴシック。
それでも違ったら元の書体へ戻す。
こういう使い方なら、細かいCSSを知らなくても自分好みに調整できます。
書体を変えるたびにCSSを書き直す必要はない
書体変更をパレットへ追加して感じたのは、
難しいことをできるようにするだけでは、簡単なツールにはならない
ということでした。
CSSを使えば書体を変更できる。
これは以前からできます。
でも、
「CSSを書けばできます」
と言われた初心者からすると、
そのCSSが分からない。
そこが問題です。
だったら、
ゴシック
丸ゴシック
明朝
と最初から見せてしまう。
そして押せば変わる。
気に入らなければ元に戻す。
これならCSSを覚えなくても使えます。
パレットでやりたいのは、CSSを教えることではありません。
CSSを知らなくても、記事のデザインを楽しめるようにすること。
書体も、その一つになりました。
色・形・書体まで変わるとデザインの組み合わせは一気に増える
ここまで来て、また困ったことがあります。
作りたいセットが増えました（笑）
今までは、
色。
見出し。
箇条書き。
Q&A。
ボタン。
こうしたパーツを組み合わせて記事セットを考えていました。
でも、ここへ書体が加わります。
同じピンク系でも、
ピンク＋丸ゴシック
なら、かわいい。
ピンク＋明朝
なら、少し上品。
同じブルー系でも、
ブルー＋ゴシック
なら、すっきり。
ブルー＋明朝
なら、落ち着いた印象。
つまり色が同じでも、書体が違えば別のコーデが作れます。
そこへ見出しの形やボタン、箇条書きなども加わる。
そう考えると、
記事デザインの組み合わせは、かなりの数になります。
AIちいちゃんクローゼットへ並べたい服が、また増えてしまいました。
「便利な道具」だけじゃなく、選ぶこと自体を楽しめるものにしたい
パレットを作り始めたころは、
WordPressの記事装飾を簡単にするツール
という感覚が強かったです。
でも最近は、少し違ってきました。
ブルーセットを試す。
かわいいセットを試す。
丸ゴシックにしてみる。
明朝にしてみる。
気に入らなければ戻す。
また別の組み合わせを試す。
こうなってくると、
作業を効率化するためだけの道具
ではなくなってきます。
洋服を選ぶように、
「今日はこの記事をどんな雰囲気にしよう？」
と選ぶこと自体を楽しめる。
簡単だから触れる。
かわいいから使ってみたくなる。
変化がすぐ見えるから、別のものも試したくなる。
そんなパレットになったら面白いと思っています。
WordPressの記事は「書体」まで着せ替えられた
今回は、
「書体まで変えるのは難しいんじゃない？」
というところから始まりました。
でも実際には、
ゴシック
丸ゴシック
明朝
元の書体
をパレットから選んで、その場で切り替えられるところまでできました。
見出しを変える。
箇条書きを変える。
Q&Aを変える。
ボタンを変える。
記事セットでまとめて変える。
そして今度は、
書体まで変える。
文章は同じなのに、見た目はどんどん変わっていきます。
ここまで来ると、
「WordPressの記事を装飾する」
というより、
「WordPressの記事を着せ替える」
という言い方の方がしっくりきます。
次はどんな服を作るのか。
かわいいセットをもっと増やすのか。
LPセットを作るのか。
それとも、漢字を大きく見せるような文字コーデまで作るのか。
書体まで着せ替えられるようになったことで、またパレットでできそうなことが増えてきました。
WordPressでデジタル商品を販売してみた！無料ダウンロードからクレジットカード決済まで成功｜AIちいちゃん実践記 #009
