漫画の手法を使って印象的なホームページに！代表的な3つの手法を用いたデザイン事例＆デザイン制作に役立つツールまとめ

更新日: 2018年01月31日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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