第7回 のんびり研究所構築日記｜Cocoonの吹き出しを作る

前回は、カテゴリを作成して、日記と神社の記事を公開しました。

記事の本文にはCocoonのインフォボックスも入れてみましたが、のんびり研究所では、きょろぽんとAI研究員たちの会話も記事へ入れていく予定です。

そこで今回は、Cocoonに用意されている「吹き出し」機能を使い、きょろぽん、ノン、アマデウス、鈴羽の4人を登録します。

登録した吹き出しを記事へ追加し、人物、向き、吹き出しの形などを変更するところまで確認してみます。

Cocoonの吹き出しとは

Cocoonには、人物の画像と会話文を組み合わせて表示できる吹き出し機能があります。

文章だけで説明するよりも、質問と回答、迷った点、気付いたことなどを会話形式で見せたい場面に向いています。

のんびり研究所では、主に次のような場面で使う予定です。

• きょろぽんが疑問に思ったこと
• ノンが操作方法や考え方を説明する場面
• 実際に試して分かったこと
• 失敗や勘違いから解決するまでの流れ
• 少しふざけた会話や、研究員同士のやり取り

会話や思考の流れを見せたいときは吹き出し、要点・注意・結論を整理して残したいときはインフォボックス、という形で使い分けてみます。

吹き出しに使う画像を準備する

最初に、吹き出しへ表示する人物画像を準備します。

今回は、次の4人分を登録します。

• きょろぽん
• ノン
• アマデウス
• 鈴羽

吹き出しでは人物画像が小さく表示されるため、顔や表情が分かりやすい正方形の画像を用意しておくと使いやすそうです。

画像の周囲に余白が多すぎると人物が小さく見えるため、必要に応じて顔の周辺を切り抜いておきます。

画像に本名、メールアドレス、管理画面のユーザー名など、公開したくない情報が含まれていないか確認してからアップロードします。

Cocoon設定から吹き出しを登録する

吹き出しの設定画面を開く

WordPressの管理画面を開き、左側のメニューから「Cocoon設定」を選択します。

Cocoon設定の中にある「吹き出し」を開きます。

吹き出しの一覧画面がメイン画面に表示されています。

初期状態では、Cocoonに用意されているサンプルの吹き出しが登録されている場合があります。

新しい吹き出しを追加する

新しい人物を登録するため、「新規追加」を選択します。

吹き出しの登録画面が表示されたら、タイトル、名前、アイコン画像などを設定していきます。

タイトルを入力する

タイトルは、記事の編集画面で吹き出しを選択するときに使う管理用の名前です。

誰の吹き出しか分かる名前を付けておくと、後から探しやすくなります。

今回は、人物名が分かるように次のようなタイトルで登録します。（今回は「きょろぽん」を登録）

• きょろぽん
• ノン
• アマデウス
• 鈴羽

タイトルを空欄にすると、記事編集画面の人物選択で見分けにくくなる可能性があります。管理しやすいタイトルを入力しておきます。

表示する名前を入力する

名前の欄には、吹き出し画像の下へ表示する人物名を入力します。

記事の中で名前を表示したくない場合は、空欄で使う方法もあります。今回は会話している人物が分かりやすいよう、4人とも名前を表示する予定です。

アイコン画像を設定する

アイコン画像の選択ボタンを押し、準備しておいた人物画像をメディアライブラリから選択します。

まだアップロードしていない場合は、ここで画像をアップロードします。

メディアライブラリから、画像を選択します。

画像選択後の状態

吹き出しの形や位置を設定する

登録画面では、吹き出しの形、人物の位置、アイコンの形などを設定できます。

最初から細かく作り込まず、まずは基本的な設定で登録し、記事へ入れた状態を見ながら調整することにします。

会話形式にする場合は、人物によって左右を分けておくと読みやすくなります。

今回は、仮に次のような配置から試します。

• きょろぽん：左側
• ノン：右側
• アマデウス：右側
• 鈴羽：右側

実際の記事で会話の流れを確認し、必要であれば人物ごとの位置や吹き出しの形を変更します。
今回はそのままの設定で進めています。

設定を保存する

必要な項目を入力したら、画面下部の保存ボタンを押します。

吹き出しの一覧へ戻り、登録した人物が追加されていることを確認します。

残り3人分の吹き出しを登録する

同じ手順を繰り返して、ノン、アマデウス、鈴羽の3人分を登録します。

ノン

のんびり研究所の女性AI研究員です。サイト運営、記事制作、アイデア整理などを一緒に進めます。

アマデウス

FXや相場分析を担当する研究員です。必要に応じて、少し厳しめの確認役として登場します。

鈴羽

Unity、C#、アプリ開発などを担当する研究員です。技術的な記事や開発記録で登場する予定です。

全員を登録すると、吹き出しの一覧に人物が並びました。

記事に吹き出しを追加する

投稿の編集画面を開く

吹き出しを登録できたので、実際の記事へ追加してみます。

新しい投稿を作成するか、吹き出しを試したい記事の編集画面を開きます。
今回は、前回使った「ブログを始めました」の記事に入れていきます。

吹き出しブロックを追加する

吹き出しを入れたい位置で、ブロック追加の「＋」を押します。

ブロックの検索欄へ「吹き出し」と入力し、Cocoonの吹き出しブロックを選択します。
（ブロック追加の「＋」を押し、「すべてを表示」→左メニューのcocoonブロックから追加してもOK)

記事の中に吹き出しブロックが追加されます。

登録した人物を選択する

吹き出しブロックを選択し、右側の設定欄から使用する人物を選びます。

先ほど登録した、きょろぽん、ノン、アマデウス、鈴羽が一覧に表示されるか確認します。

ノンを選択した状態

会話文を入力する

ノンからきょろぽんに人物変更し、吹き出しの中をクリックし、表示したい文章を入力します。

実際の吹き出しブロックはWordPress上で作成し、以下の会話例と差し替える

きょろぽん：これで、記事の中にノンたちを登場させられるのかな？

ノン：うん。登録した人物を選んで、吹き出しの中に文章を入力すれば使えるよ。

1会話につき「吹き出しブロックを1つ」使用します。
上記の例では、きょろぽんの吹き出しブロック、ノンの吹き出しブロック、計2個のブロックを追加して文字を入れ込んでいます。会話が続くたび、その都度ブロックを追加していく流れになります。

吹き出しの見た目を変更する

吹き出しブロックを選択すると、右側の設定欄から見た目を変更できます。

利用しているCocoonやWordPressのバージョンによって表示される項目が異なる可能性がありますが、主に次のような内容を調整できます。

• 登録した人物
• 人物を表示する左右の位置
• 吹き出しの形
• アイコンの形
• 背景色
• 文字色
• 枠線（ボーダー）の色

人物の位置を左右へ変更する

会話する人物を左右に分けると、誰が話しているのか分かりやすくなります。

きょろぽんを左、ノンを右に配置して、会話の見え方を確認します。

吹き出しの形を変更する

吹き出しの形を変更し、記事の雰囲気に合うものを探します。

人物ごとに形を変えすぎると統一感がなくなるため、基本の形はそろえ、特別な場面だけ変更する方法もよさそうです。

上記は、きょろぽんが「考え事」、ノンが「フラット」を使用

色を変更する

必要に応じて背景色、文字色、枠線の色なども変更できます。

色を増やしすぎると記事全体が見づらくなるため、最初は標準に近い状態で使い、必要になってから調整します。

プレビューで表示を確認する

編集画面で吹き出しを追加できたら、プレビューを開いて実際の表示を確認します。

パソコン表示

パソコン表示だけでなく、スマートフォンでも次の点を確認します。

• 人物画像が小さくなりすぎていないか
• 名前が読みやすいか
• 吹き出しの文章が窮屈になっていないか
• 左右の配置が分かりやすいか
• 長い文章を入れても崩れないか
• インフォボックスや画像と並べても違和感がないか

編集画面では問題なく見えても、公開ページやスマートフォンでは印象が変わることがあります。最後に実際の表示を確認してから公開します。

吹き出しとインフォボックスを使い分ける

前回使ったインフォボックスと、今回の吹き出しは、どちらも文章を目立たせるための機能ですが、役割は少し違います。

のんびり研究所では、次のように使い分けてみます。

機能	主な用途
吹き出し	質問、回答、気付き、失敗、考え方など、会話や思考の流れを見せる
インフォボックス	ポイント、結論、注意、エラー、補足などを整理して強調する

説明をすべて吹き出しにすると会話が長くなり、反対にすべてインフォボックスにすると少し堅い記事になりそうです。

実際の記事で使いながら、読みやすいバランスを探していきます。

今回のまとめ

今回は、Cocoonの吹き出し機能へ、きょろぽん、ノン、アマデウス、鈴羽の4人を登録し、記事の中で使う方法を確認しました。

一度人物を登録しておけば、投稿の編集画面から選ぶだけで、同じ画像と名前を繰り返し利用できます。

吹き出しを使うことで、操作手順だけでなく、迷ったことや解決までの流れも会話形式で残しやすくなりました。

これからは、要点を整理するインフォボックスと、会話の流れを見せる吹き出しを使い分けながら記事を作っていきます。

次回は、シリーズの記事が増えるたびに、すべての記事を修正しなければならない問題が発生します。WordPressの同期パターンを使い、1か所の変更を全記事へ反映できるようにしてみます。