ブログで吹き出しを使ってキャラ同士を会話させる方法【コードあり】
- この記事の結論
- メリットを理解すれば会話形式は効果的
- キャラや吹き出しは目立たせ過ぎない。あくまで目的はユーザーに文章を読んでもらうこと
- 今回使うコードはこちら(コピペ使用可)
たまに見かける、
吹き出しを使ってキャラ同士を会話させて、
分かりやすく説明するブログありますよね。
- こういう感じのやつでしょうか。
- あーこれね。見たことある。
- 会話形式は、うまく使えばユーザーの心を掴めますね。
- (俺らいきなり登場して、読者混乱してねーかな…)
今回、自分のブログでも作ってみたので、
参考にしてみてください。
キャラ同士を会話させるメリット・デメリット
会話形式のメリットデメリットとしては、以下のような感じでしょうか。
- メリット
- キャラに説明の補助をしてもらうことで話の流れがつかみやすくなる
- 記事が単調にならず、飽きづらくなる
- キャラで感情を表現できるので、共感を得やすくなる
- ラフな感じになるので気兼ねなく読める(固くならない)
- デメリット
- 文章だけを淡々と読みたい人にとっては邪魔になる
- 文章だけの記事より見た目がごちゃごちゃしやすくなる(視線が散らばる)
- 記事が縦長になり、ユーザーのスクロール量が増える
- マンガをよく読む人にとっては、
会話形式の記事のほうが読みやすくなるんじゃないかな - たしかにオレ、文章だけの記事だと途中で飽きてゲームしちゃうよ
コピペでOK 実際に会話形式をHTMLとCSSで作ってみる
ワードプレスのテンプレートには、
会話形式で作れるものを最初から用意してくれているものも中にはありますが、
せっかくなので自分で作ってみました。
自分で作る利点としてはやっぱり、
自分の考えている通りに表現できるという点が大きいですね。
よかったら参考にしてみてください。
<ul class="chara-talk">
<li class="unitone"><span></span>これで記事が賑やかになりますね</li>
<li class="fukkun"><span></span>荒らしてやるぜ</li>
<li class="unitone"><span></span>やめなさい。</li>
</ul>
.art-cont .chara-talk {
margin: 50px 0;
padding: 0;
}
.art-cont .chara-talk li {
width: 75%;
margin-left: 100px;
padding: 15px;
background-color: #f3f6f9;
border: solid 2px #c3d2de;
border-radius: 7px;
box-shadow: 0px 2px 8px -1px rgba(0,0,0,0.2);
position: relative;
}
.art-cont .chara-talk li:nth-child(2n) {
background-color: #fff9f1;
border: solid 2px #ffddaa;
}
.art-cont .chara-talk li + li {
margin-top: 40px;
}
.art-cont .chara-talk li:empty {
margin: 0;
padding: 0;
height: 0;
}
.art-cont .chara-talk li:before {
position: absolute;
top: 19px;
left: -7px;
width: 10px;
height: 10px;
margin: auto;
background-color: #f3f6f9;
border-top: 2px solid #c3d2de;
border-right: 2px solid #c3d2de;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
content: '';
}
.art-cont .chara-talk li:nth-child(2n):before {
background-color: #fff9f1;
border-top: 2px solid #ffddaa;
border-right: 2px solid #ffddaa;
}
.art-cont .chara-talk li span {
display: block;
position: absolute;
top: -5px;
left: -78px;
width: 50px;
height: 50px;
}
.art-cont .chara-talk li span:before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 50px;
height: 50px;
border: solid 2px #555;
border-radius: 50%;
overflow: hidden;
background: no-repeat center center;
background-size: 54px 66px;
content: '';
}
.art-cont .chara-talk li span:after {
display: block;
position: absolute;
bottom: -22px;
left: 0;
right: 0;
margin: 0 -10px;
font-size: 11px;
text-align: center;
}
/*** キャラクター ***/
.art-cont .chara-talk .unitone span:before {background-image: url(ここにキャラ画像のパス);}
.art-cont .chara-talk .unitone span:after {content: 'キャラの名前';}
.art-cont .chara-talk .fukkun span:before {background-image: url(ここにキャラ画像のパス);}
.art-cont .chara-talk .fukkun span:after {content: 'キャラの名前';}
- これで記事が賑やかになりますね
- 荒らしてやるぜ
- やめなさい。
画像によっては歪んだりする可能性があるので、
cssをいじって調整してみてください。
会話形式導入にあたっての注意点
この記事を読んでいる方はもちろん、会話形式を取り入れたいと考えてる方だと思いますが、
正直、会話形式の記事を書いていて楽しいから
みたいな動機でも自分は全然アリだと思っています。
むしろそのモチベーションこそが大事みたいなところありますね。
でも一応ブログを書く一番の目的はユーザーに読んでもらうことなので、
それを踏まえた上でいくつか注意点を述べたいと思います。
あくまで個人の意見ですので、
良ければ参考にしていってください。
1. キャラや吹き出しを目立たせ過ぎない
ブログのデザインを作っている側からすると、
テンション上がっていろんなデザインを思いついちゃうと思うのですが、
読者からすると、
「こっちは記事を読みに来てんだよ、デザインが派手過ぎて読みづれーよ」
となることがあります。
- 大げさですが、このようにデザインを派手にしてしまうと、
肝心な文章が伝わりづらくなります。 - たしかに、読む気失せるかもな
- あくまで目的は文章を読んでもらうことですからね。
なので今回、
サンプルコードでもあったように、
吹き出しの色は薄めにしてあります。
読み手がストレス無く読めるために工夫しました。
2. キャラを左右に置かない(左寄せで統一)
これやりがちなんですけど、
2人のキャラが会話っぽくしてるように見せるために、
キャラを左右に配置しているブログありますよね。
具体的には以下のような感じです。
- これは色んなブログでよく見ますね。
- いかにも会話っぽくて良いじゃん。何がだめなの？
特に違和感無いという人もいると思いますが、
普段ブログを読むときはこんなに左右に目を散らせることは無いと思います。
つまり、無意識のうちに読み疲れが発生します。
なので、左寄せに統一して、普段ブログを読むのとなるべく変わらないような目線で読ませるのが、
スッっと頭に入ってくるコツだと思っています。
対比が分かりやすいという意味では、
左右に配置することはメリットになるので、
会話メインの記事だと左右配置は良いかもしれません。
3. キャラに個性を付ける
当たり前っちゃ当たり前なのですが…
せっかくキャラを使うのに、
同じ口調だったら、読んでてもあまり面白くないですよね。
- キャラには個性を付けたほうが良いですね。
- そうですね。同じ口調だと読んでても飽きますよね。
- 今のこの会話はまさに「個性が無い」状態ですね。
- 何のための会話でしょうかね。必要性が感じられませんね。
こんな感じの会話だと、
「そもそもキャラ要るの？」
って思っちゃいますよね。
メリットにも書きましたが、
記事が単調にならず、飽きづらくなる
というのが会話形式の利点の1つなので、飽きさせないためにもキャラに個性を持たせましょう。
今回で言うと、
ふっくん → 口調が少し荒く、思ったことをバンバン喋るタイプのキャラ
みたいな感じです。
まとめ
- ブログを書く目的はユーザーに読んでもらうこと。それを踏まえた上で会話を使う
- とは言え記事を書くためのモチベーションも大事なので、キャラを会話させるのが楽しいからという動機で導入するのは個人的にアリ。
- メリットデメリットを踏まえた上で会話形式の記事を書くことは興味を惹かせる点でとても効果的
- 何事もユーザー目線に立つことが大事ですね。
- なるほどな。
そういえば、せっかくキャラ使ってるんだから、
喜怒哀楽の画像用意したらもっと面白くなるんじゃねーか？ - (きっと筆者は複数の画像を用意するのが面倒だったんじゃないですかね…。)
