親しみやすく、物語として魅力的な「漫画」を、普段から読まれている方は多いのではないでしょうか。
効果線やふきだしなど、大人でも子供でも読みやすい独自の表現方法は、ホームページ作りにも応用できます。

今回は、漫画の表現方法を応用したホームページのデザイン事例と、漫画の手法をデザインに取り入れたい時に使えるツールをご紹介します。
ユーザーの目をひくホームページを作りたい」「親しみやすいデザインにしたい」とお考えの方はぜひ活用してみましょう。

漫画の手法を利用したデザイン事例

イラストと文章で構成された漫画では、独自の表現手法が用いられてきました。
こういった手法はホームページのデザインにも取り入れられています。

「ふきだし」「効果線」「擬音(オノマトペ)」という3つの代表的な手法ごとに、デザイン事例を紹介しましょう。

1.ふきだし

ふきだしは言葉を丸く囲うことで、人物が話しているように表現する手法です。
画面のアクセントとなるだけでなく、会話形式のデザインを作成することもできます。

ママンカ市場

ママンカ市場_下北沢×野菜×子育て___子供と一緒に行ける下北沢の産直市場.png
http://www.mamanqa.com/

東京・下北沢で開催されている農作物の直売市場である「ママンカ市場」のホームページでは、ふきだしを活用した商品紹介を行っています。

商品名や人物の言葉など、ページの各所にアクセントとして盛り込まれているので、親しみやすさを感じさせます。

経済産業省ミライーノひろば

「これ、かわいい!」っていう気持ちは、海外の人にも分かってもらえるのかな?|経済産業省キッズページ.png
http://www.meti.go.jp/intro/kids/interview/kawaii/

子供向けに経済産業省の取り組みを紹介している経済産業省ミライーノひろばでは、インタビュー形式のコンテンツにふきだしを利用しています。

このようにふきだしを用いることで、話している人物誰かわかりやすい会話形式の表現が可能です。

2.効果線

登場人物のセリフに勢いをつけたい時や人物の動きを表現したい時、漫画では線を活用した表現を行います。
こういった動きや感情を表す線は「効果線」と呼ばれ、「集中線」や「スピード線」などの種類があります。

コロコロスカイツリータウン

コロコロスカイツリータウン.png
http://www.corocoro.tv/coro40/index.html

東京スカイツリーと漫画雑誌『コロコロコミック』のコラボイベントである「コロコロスカイツリータウン」では、告知ページ上で効果線を用いています。

上記のような、中心に線が集まっていく効果線を集中線といい、線の中心にいる人物から覇気が発せられているかのような表現が可能です。

3.擬音(オノマトペ)

「壁を『ドン』と叩く」や「顎を『クイッ』と指であげる」というような、動作や実際に発生する音を文字にしたものを「擬音」または「オノマトペ」と言います。

文章とイラストという限られた表現のなかでリアリティを出すため、漫画では擬音が用いられます。

株式会社カヤック(面白法人カヤック)

スクリーンショット_2017-05-10_16.31.40.png
https://www.kayac.com/

Webを中心としたコンテンツ制作を行っている株式会社カヤック(面白法人カヤック)の公式ホームページでは「ゲーム風」や「漫画風」といった複数の画面切り替え機能を提供しています。

なかでも「漫画風」の画面に切り替えると、上部のタブなどにマウスオーバーしたのに合わせて「カッ」「ゴゴゴゴ…」といった擬音が表示されます。

サイトを見ている人にとって楽しさを感じつつも、思わず他のページも見たくなる仕掛けとなっています。

参考:
[たった数文字で顧客に「おっ」と思わせる!コピーに使える「オノマトペ」とは]
(https://ferret-plus.com/6231)

漫画の手法を取り入れたい時に便利なツール

ここまで紹介してきたような表現手法を取り入れたいと思っても「一から作成するのは大変そう」と感じる方もいるかもしれません。
そういった方のために、簡単に漫画の手法を取り入れられるツールを紹介します。

1.ふきだし

WordやPowerPointの図形ツールの中にも「ふきだし」は含まれています。
ですが、実際にデザインに盛り込むには、さまざな枠や色合いの中から選びたいところでしょう。

そんな時に役に立つのが、ふきだしのデザイン素材を提供しているサイトです。

フキダシデザイン

吹き出し素材専門サイト「フキダシデザイン」.png
http://fukidesign.com/

「フキダシデザイン」はふきだしに特化した素材サイトです。
すべて無料で商用可能なので、ホームページやビジネス資料など様々な場面で利用できるでしょう。

Speech Bubble

WordPressでホームページを管理している方は、プラグインを用いてふきだしを表現する方法もあります。

スクリーンショット_2017-05-10_16.48.44.png
https://wordpress.org/plugins/speech-bubble/

「Speech Bubble」は、9パターンのふきだしを用いて会話文を表現することができるプラグインです。
画像でふきだしを作成するのとは異なり、テキスト情報のままふきだしに含めるので、ページの読み込み速度が遅くなってしまうリスクを軽減できるでしょう。

2.効果線

効果線の中でも、画面に勢いをもたせる「集中線」は使いこなしたいところでしょう。
ですが、大量に線を描くとなると手間がかかります。
集中線を手軽にデザインに組み込めるツールを利用して、作成の手間を省きましょう。

集中線追加ツール

集中線追加ツール.png
http://neutralx0.net/tool/line/

「集中線追加ツール」は、画像に対して集中線を入れたデザインを作成できるツールです。
線の太さや色、本数などを選択できるので、自分のイメージに合わせた集中線を作成できます。

ギザギザジェネレーター

ギザギザジェネレーター__画像に集中線を入れよう_.png
https://syncer.jp/gizagiza-generator

「ギザギザジェネレーター」は画像に対して、集中線を追加できるツールです。
線の色や中心の場所を変更できるほか、線の透明度も調整できます。

3.擬音(オノマトペ)

漫画では独自の描き文字で擬音を表現します。
しかし、いざ自分で描こうと思っても、すぐにイメージ通りの文字を描くのは難しいでしょう。
そういった時にはすでに描かれている文字を利用するのも一手です。

【無料・商用可能】マンガ素材 イラレ用epsとpng画像素材集

スクリーンショット_2017-05-10_17.26.37.png
http://www.manga-sozai.com/data/

上記のホームページでは、ふきだしや擬音などのマンガ風の素材が提供されています。
「ドドドド」や「ドン」といった基本的なものから「ヌメヌメ」「パチコーン」のような、普段使う機会の少ないものまで豊富な種類を揃えているのが特徴でしょう。

【商用OK】漫画風フリー素材_擬音編【PNG・Ai(Illustrator)】

【商用OK】漫画風フリー素材_擬音編【PNG・Ai(Illustrator)】___小樽総合デザイン事務局|ホームページ制作・デザイン・LINEスタンプ制作.png
http://otarunet.com/it/webdesign/comic-material-onomatopee/

「ポップな擬音」と「奇妙な擬音」という2種類の描き文字を無料で提供しています。文字ごとにつなぎ合わせて利用できるので、自分の欲しい擬音を作成できるでしょう。

参考:
漫画風の加工をしたいとき使える無料素材サイトまとめ(フォント、吹き出し、集中線、擬音など)

まとめ

漫画は、現実の人物や出来事を省略・変形・誇張することで、わかりやすく魅力的な表現を可能としています。
言葉を吹き出しの形式で表記するだけで、誰が話しているのかが明確になり、読者としてもて抵抗感なく読み進めていけるでしょう。

今回紹介したツールを利用すれば、こういった漫画特有の表現を手軽にデザインに取り入れられます。よりわかりやすく、親しみやすいデザインにするために活用してみてはいかがでしょうか。