WordPressサイトに自分だけのキャラクターを取り入れるときのポイント
- まずはキャラクターにサイト上で担ってもらう役割を決める
- 名前と記事だけだったサイトが違って見える瞬間
- 最初は代表的な場所1カ所と補助的な場所1カ所で十分
- 小さな画面でも見分けられる構造が長く使える
- 自分で装飾するときに最もつまずきやすいポイント
- キャラクターと記事の流れを一緒に整えるDecoBlocks
- かわいさで記事を邪魔しないための基準
- では、どこから始めればよいのか
- よくある質問
- Q. 個人ブログはどこから始めるとよいですか？
- Q. モバイルでキャラクターが本文を隠してしまう場合はどうすればよいですか？
- Q. この問題をツールで簡単に解決できますか？
- Q. キャラクターのステッカーと吹き出しを同じ記事に入れられますか？
- WordPress関連プラグイン
WordPressサイトにキャラクターを入れたいけれど、まずは絵を描けばいいのでしょうか。いざ始めてみると、ロゴに入れるのか、記事の途中に置くのか、小さな画面でも見えるのかなど、考えることは少なくありません。
答えはシンプルです。絵を描く前に、サイトの目的とキャラクターの役割を決め、代表的な場所と補助的な場所の1カ所ずつで試してみましょう。
かわいい絵を用意するだけでは十分ではありません。
まずはキャラクターにサイト上で担ってもらう役割を決める
サイトのキャラクターには、大きく分けて3つの役割があります。ロゴのようにサイトの個性を示すこと、記事本文やボタンの周辺で雰囲気をつくること、そして小さく表示してもそのサイトだとわかる目印になることです。
WordPressにおけるサイトロゴは、サイトを代表する画像です。一方、サイトアイコンはブラウザーのタブやブックマーク、モバイル画面でサイトを見分けてもらうための別の画像です。
ブロックテーマを使っている場合は、テーマの構成や設定によって、サイトタイトル、キャッチフレーズ、ロゴ、サイトアイコンを管理する場所も確認できます。
だから最初に考えるべきなのは、「どんなキャラクターがかわいいか」ではありません。「このキャラクターは訪問者に何を伝えるのか」に近い問いです。
まずは役割を決めることが大切です。
名前と記事だけだったサイトが違って見える瞬間
ネイバーやティストーリーから移行した後、記事一覧とタイトルだけが並ぶWordPressの画面を見て、「サイトは開設できたけれど、まだ自分の居場所という感じがしない」と思う人は少なくありません。
そんなとき、繰り返し登場する手描きのキャラクターは、単なる飾り以上の目印になります。記事を読む前から、サイトの雰囲気や運営者の印象を素早く伝えられるからです。
小さな店舗やメディアも同じです。店名だけが表示された画面よりも、同じキャラクターが紹介ページや案内文にも登場するほうが、訪問者はサイトの雰囲気をひと目でつかみやすくなります。
ただし、キャラクターを置けば検索順位が上がったり、訪問者が自動的に増えたりするわけではありません。キャラクターの役割は、見つけてもらうことよりも、覚えてもらい、見分けてもらうことにあります。
キャラクターが訪問者を連れてきてくれるわけではありません。
最初は代表的な場所1カ所と補助的な場所1カ所で十分
最初からサイトのあちこちにキャラクターを散りばめるのは避けましょう。誰にどんな印象を残したいのかを決めたうえで、代表的な場所と補助的な場所の2カ所だけに置くほうが現実的です。
個人ブログなら、紹介ページのプロフィールの横にキャラクターを置き、本文には小さな案内用のイラストを1点入れる程度でも十分です。まずは読者の読む流れを妨げないことを優先しましょう。
店舗や小規模メディアなら、ロゴやサイトアイコンのように繰り返し表示される場所を先に決めるのがおすすめです。そのうえで、必要になったら記事内の案内用イラストを追加します。
サイトアイコンとして使う場合は、より厳しい条件をクリアしなければなりません。正方形の画像が必要で、WordPress公式ドキュメントでは512×512ピクセル以上が案内されています。
横長の全身キャラクターをそのまま縮小すると、顔も特徴も見えなくなることがあります。サイトアイコン用には、顔やシルエットだけを切り出してシンプルにしたバージョンが必要です。
小さく表示するほど、デザインはシンプルにしましょう。
小さな画面でも見分けられる構造が長く使える
よいキャラクターは、1枚の完成度の高い絵というより、繰り返し使える構造を持っています。顔や輪郭が小さくなっても判別でき、いくつかの表情で記事の内容を補助できることが重要です。
明るい背景と暗い背景のどちらでも見た目が崩れないかも確認してください。ロゴでははっきり見えていたのに、本文に入れると線がぼやけるということは、意外と簡単に起こります。
本文に入れるときは、キャラクターが内容を説明する画像なのか、雰囲気を添えるだけの装飾なのかを分けて考えます。説明用の画像なら要点を代替テキストに記入し、装飾用なら不要な説明を加えないほうがよいでしょう。
WordPressの画像ブロックでは、画像の配置、サイズ、トリミング、キャプション、リンク、代替テキストを調整できます。ただし、実際の表示は使用するテーマや画面サイズによって変わります。
特に、固定した高さに合わせて画像を無理に調整すると、画面サイズが変わったときに不自然に切り取られることがあります。特別な理由がなければ、画像の高さは固定しないほうが安全です。
記事の横に大きなキャラクターを配置する場合も注意が必要です。デスクトップではかわいく見えても、モバイルでは本文の幅が狭くなり、読みづらくなることがあります。
まずはモバイルで確認しましょう。
自分で装飾するときに最もつまずきやすいポイント
手描きでキャラクターを作り、WordPressにアップロードする作業には、思った以上に多くの判断が必要です。元のイラスト、背景を透過した画像、小さなアイコン用の画像をそれぞれ用意しなければならず、配置場所ごとに同じキャラクターを切り抜き直すこともあります。
画像をアップロードした後には、「ロゴでは問題ないのに、記事では大きすぎる」という問題も起こります。配置やサイズを変えても、テーマの余白やモバイルでの表示方法によって結果が変わることがあるためです。
自分で調整する方法は、小規模なサイトで試すには向いています。しかし記事が増え、キャラクターを複数のページで繰り返し使うようになると、毎回サイズや余白を手作業で合わせる時間が増えていきます。
問題になるのは、絵よりも繰り返し発生する作業です。
この段階では、まず標準の画像ブロックで1〜2カ所を試し、本文の装飾を頻繁に調整する必要があるかを判断してください。装飾用のツールを使う場合も、キャラクターの配置や装飾など、実際に必要な機能だけを選ぶことが大切です。
キャラクターと記事の流れを一緒に整えるDecoBlocks
記事内でキャラクターを会話や強調表現と組み合わせたい場合、DecoBlocksでできることは明確です。インストールしたステッカーパックのキャラクター画像をInsert Character Stickerで挿入し、吹き出しを使ってキャラクターの発言と本文の説明を分けられます。関連する内容はSection Boxにまとめ、重要な文はHighlightで示すことで、装飾と情報を区別できます。
これらの機能は、Block EditorのブロックとClassic Editorのショートコードで利用できます。ただし、希望するステッカーパックがマーケットプレイスで常に提供されているとは限らず、実際の表示結果はテーマや他のプラグインによって変わることがあります。モバイル画面の確認や代替テキストの判断は別途行い、記事に必要な装飾だけを適用するのが適切です。
かわいさで記事を邪魔しないための基準
キャラクターを大きく、頻繁に表示したからといって、サイトがより親しみやすくなるとは限りません。すべての段落の間に感情表現を入れると、読者は本文よりも装飾に目を奪われてしまいます。
情報を伝える場面で、キャラクターが説明もなく驚いたり泣いたりしていると、かえって信頼感を損なうことがあります。特に案内や重要な手順を扱う記事では、表情よりも内容を優先すべきです。
キャラクターの名前や一般的なアイデアと、具体的に描かれた表現とでは、権利の範囲が異なる場合があります。他人のイラストや有名キャラクターを無断で使用せず、名前やロゴの使用についても別途確認してください。個別の判断は専門家に相談するのが安全です。
個人ブログなら、まずはキャラクター1体と2〜3種類の表情から始めましょう。小規模な店舗やメディアなら、小さくしても見分けられる形を先に作り、その後で本文の装飾を加える順番がおすすめです。
結局のところ、基準になるのは絵の華やかさではありません。ロゴやアイコンで見分けられるか、本文の邪魔をしていないか、情報を伝える画像に代替テキストを入れているかを確認すればよいのです。
本文の装飾が目的なら、DecoBlocksでインストールしたステッカーパックのキャラクター画像を記事内に挿入できます。キャラクターが登場する会話はSpeech Bubbleで、別途強調したい文はHighlightで示し、それぞれの役割を分けられます。
Block Editorではブロックとして、Classic Editorではショートコードとして処理します。ただし、この機能がロゴやサイトアイコン用の画像まで用意してくれるわけではありません。サイトを代表する画像と本文用のステッカーは、別々に考える必要があります。
基準にするのは、識別しやすさと読みやすさです。
では、どこから始めればよいのか
個人ブログなら、紹介ページのプロフィールの横を代表的な場所にし、本文中の小さな案内用イラストを補助的な場所にしましょう。キャラクター1体と2〜3種類の表情があれば、初期運営には十分です。
店舗や小規模メディアなら、ロゴやサイトアイコンのように繰り返し表示される場所から使い始めてください。サイトアイコンにする場合は、顔やシルエットを中心にした、シンプルな正方形のバージョンを別に用意するのがおすすめです。
本文に入れるときは、画像ブロックでサイズと配置を調整したうえで、デスクトップと実際のモバイル画面で本文の幅や読みやすさを確認しましょう。情報を伝える画像には要点を代替テキストに記入し、装飾画像では説明を控えめにすれば十分です。
キャラクターは少なめに始め、必要になったときだけ増やしましょう。
よくある質問
Q. 個人ブログはどこから始めるとよいですか？
A. 紹介ページのプロフィールの横と、本文中の小さな案内用イラストから始めてください。キャラクター1体と2〜3種類の表情があれば、初期運営には十分です。
Q. モバイルでキャラクターが本文を隠してしまう場合はどうすればよいですか？
A. まず画像を小さくし、本文の横に配置するのを避けてください。画像ブロックの配置とサイズを調整したうえで、実際のモバイル画面で本文の幅や読みやすさを確認する必要があります。
Q. この問題をツールで簡単に解決できますか？
A. 標準の画像ブロックだけでも、アップロード、サイズ、配置、キャプション、リンク、代替テキストを設定できます。配置を頻繁に変更する必要がある場合は、使用中のテーマに合う装飾用ツールを比較し、必要な機能から確認してください。
Q. キャラクターのステッカーと吹き出しを同じ記事に入れられますか？
A. 可能です。
DecoBlocksのInsert Character Stickerでインストールしたステッカーパックのキャラクター画像を挿入し、Speech Bubbleでキャラクターの吹き出しを作成できます。Block Editorではブロックとして、Classic Editorではショートコードとして使用できますが、モバイルで本文を隠さないかどうかは、公開後に別途確認してください。
