MAPはやるよレシピ > 吹き出しで文章を会話風にして表現力アップ

若い人のブログなどで「吹き出し」が使われているのをよく見かけるようになりました。 LINEっぽくして親しみアップとか。テクニックとしては非常に簡単で、お手軽に使えるもんですから、やや氾濫ぎみ。 お使いになるなら乱用に注意。使いすぎるとかえって読みづらく、効果もありません。ワンポイントで挿入する程度がおすすめです。
「吹き出し」って 
 意外にお手軽!

吹き出しで文章を会話風にして表現力アップ

吹き出しをよく見かけるようになりました。
こんなやつです。

背景を緑色にして、
LINEっぽくしているやつとか。

いいですよね。
わたしのサイトはどれも、
もともとがしゃべり口調で書いてるくらいですから、
つい使ってみたくなるんです、
吹き出し
好きなんですね(*^_^*)
最初に見つけたときは、
なんか画像と重ねてあるんだろうと思って、
それだったら準備が面倒だからマネしないことにしたんですけど、
あまりにもよく見かけるので、
ちょっと調べてみたらずいぶん簡単でした。
吹き出しの部分は画像なんか使わずに
CSSだけでできるんですね。
背景色や罫線の太さや色、
角の丸みなど、
ちょこっと自在に変更できますから、
いちど覚えたらこれはなかなか愉快です。
ソースの記述は長いんですけど、
中味は簡単。
吹き出し活用の第1ステップ

さて、
スタイルシートとかHTMLとか、
ぜんぜんわからないっていうみなさんが、
吹き出しを使って文章表現力をアップするにはどうしたらいいか
ってことなんですけど。
ぜんぜんむずかしくないんですよ。
わけのわからん文字が並んでいるやつを、
どこそこからどこそこまで
あなたのページにコピペしてください。

と、
わたしに言われるがままにコピペしていただければよろしいので、
仕込みは5分で終わります。
ひとまず
右からと左からの2種類の吹き出しがあればいいでしょう。
セリフ部分の前後ソースをコピペすれば、
あとはセリフを入れ替えていけばいいだけ。
あっけないくらい簡単です。
バリエーションなんて
そんなにいらないんですから。
乱用すると読みづらくなって逆効果ですし。
ここぞっていうときの
アクセントに使えばいいだけですから。
吹き出しの形がどういうしくみで作れるかとか、
色や太さや大きさを変更するにはどうしたらいいかとか、
くわしく知っておく必要はないですよね。
楽しく使えて表現力がアップすればいいんですもんね。
ほんのちょっとバリエーション

いまご覧のこのページでは、
吹き出しに関係する記述をページ内に書いてます。
そこのところをコピペしていただくと、
とりあえずこのページと同じ吹き出しは使えることになります。
ひとつのファイル内で完結できる仕込みなので、
まちがってもお金がかかるもんだなんて早合点しないように。
つまり、
どこそこからツールをダウンロードして‥‥
アプリで‥‥
みたいなややこしい話ではぜんぜんないってことなんです。
なんども言うように、
吹き出し部分には画像を使わないので簡単なんですが、
ちょっとバリエーションがほしいとすれば、
発言している人の写真やイラストを入れたいってとこですね。
LINEでも
いつからか丸いプロフィール写真が入るようになったでしょ。
はやらせ太郎
このくらいのバリエーションは
使えるようになっときたいですかね。

右からと左からの2パターンを作っておくとよいでしょうか。
会社のスタッフブログに応用する場合なんかは、
社員さんそれぞれの顔写真を準備しておきましょう。
そうするとあとは
発言してる人の画像ファイル名を入れ替えるだけなので、
ちょっとだけ手間は増えますがむずかしくないんです。
人魚兵
イラストのサイズがばらばらの場合は
ちょっと面倒なことになるんちゃうか?

そうですねぇ。横幅の調整方法だけは知っておいたほうがいいかもですね。 ただ、長い会話で同じ顔が延々とくりかえすくらいなら、吹き出しなんて使わないほうがいいでしょうから、 おすすめは、あくまでワンポイントで使うことですね。 たくさん画像を用意するのも手間がかかりすぎますね。
ウェブマスター

ま、
そんなわけで、
吹き出しはあくまで小道具。
若いデザイナーの諸君は、
画像にマウスオーバーしたら表示される吹き出しとか、
吹き出しを写真に重ねて目立たせるとか、
いろんな小技を勉強しとくに越したことはないんだが、
肝心なのはそれを効果的に使うこと。
そして表現力が高まって、
伝えたいことが伝わること。
ことばに想いを
こめてください。
標準/ページトップ

UP