たまに見かける、
吹き出しを使ってキャラ同士を会話させて、
分かりやすく説明するブログありますよね。
今回、自分のブログでも作ってみたので、
参考にしてみてください。
会話形式のメリットデメリットとしては、以下のような感じでしょうか。
ワードプレスのテンプレートには、
会話形式で作れるものを最初から用意してくれているものも中にはありますが、
せっかくなので自分で作ってみました。
自分で作る利点としてはやっぱり、
自分の考えている通りに表現できるという点が大きいですね。
よかったら参考にしてみてください。
<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をいじって調整してみてください。
この記事を読んでいる方はもちろん、会話形式を取り入れたいと考えてる方だと思いますが、
正直、会話形式の記事を書いていて楽しいから
みたいな動機でも自分は全然アリだと思っています。
むしろそのモチベーションこそが大事みたいなところありますね。
でも一応ブログを書く一番の目的はユーザーに読んでもらうことなので、
それを踏まえた上でいくつか注意点を述べたいと思います。
あくまで個人の意見ですので、
良ければ参考にしていってください。
ブログのデザインを作っている側からすると、
テンション上がっていろんなデザインを思いついちゃうと思うのですが、
読者からすると、
「こっちは記事を読みに来てんだよ、デザインが派手過ぎて読みづれーよ」
となることがあります。
なので今回、
サンプルコードでもあったように、
吹き出しの色は薄めにしてあります。
読み手がストレス無く読めるために工夫しました。
これやりがちなんですけど、
2人のキャラが会話っぽくしてるように見せるために、
キャラを左右に配置しているブログありますよね。
具体的には以下のような感じです。
特に違和感無いという人もいると思いますが、
普段ブログを読むときはこんなに左右に目を散らせることは無いと思います。
つまり、無意識のうちに読み疲れが発生します。
なので、左寄せに統一して、普段ブログを読むのとなるべく変わらないような目線で読ませるのが、
スッっと頭に入ってくるコツだと思っています。
対比が分かりやすいという意味では、
左右に配置することはメリットになるので、
会話メインの記事だと左右配置は良いかもしれません。
当たり前っちゃ当たり前なのですが…
せっかくキャラを使うのに、
同じ口調だったら、読んでてもあまり面白くないですよね。
こんな感じの会話だと、
「そもそもキャラ要るの?」
って思っちゃいますよね。
メリットにも書きましたが、
記事が単調にならず、飽きづらくなる
というのが会話形式の利点の1つなので、飽きさせないためにもキャラに個性を持たせましょう。
今回で言うと、
みたいな感じです。