こんにちは！三重県菰野町のデザイン制作会社、エコムクリエーションです。
私たちは、地域に根ざしたデザイン制作会社として、さまざまな企業・個人商店のブランドイメージや、顧客体験の向上をサポートしています。
さて、今回のブログ記事では、イラストレーター ヒビユウさんのウェブサイト制作についてご紹介します。
CONTENTS
はじめに-ヒビユウさんの魅力と制作の背景
三重県を拠点に活動するイラストレーター、ヒビユウさん。
家族との日常を描いたInstagramや、出版物・商品パッケージなどのイラストを手がけており、心がほっと温まるような作風が人気を集めています。
当社は、ヒビユウさんのポートフォリオとなるウェブサイトを制作させていただきました。
この記事では、制作の裏側やデザインに込めた想いを、クリエイターの視点からご紹介します。
この記事を読むと得られること
- ウェブサイト制作の裏側を知ることができます。
- デザイン制作を依頼する際のヒントを得ることができます。
- エコムクリエーションのデザイン制作に対する考え方を知ることができます。
こんな人におすすめ
- 会社や団体、事業のデザイン制作を検討している方
- ウェブサイト制作を検討している方
- ヒビユウさんや、エコムクリエーションのことが知りたい方
ぜひ最後までお読みください！
ヒアリング-想いを深掘りした対話
ヒアリング
今回は、ヒビユウさんのポートフォリオを兼ねたウェブサイトを制作します。
そこではじめに、デザイナーがヒビユウさんの想いをヒアリングしました。
主に次のような内容です。
- イラストを描き始めたきっかけ
- 現在、描いているイラストについて
- これから、どんな仕事に取り組んでいきたいか
私たちは、単にご要望を伺うだけでなく、クライアントの過去・現在・未来を深掘りするような対話を重ねていきます。そうすることで、クライアントが求めていることや、今回制作するウェブサイトが果たすべき役割が、より明確になるからです。
ヒアリングは、デザイナーがクライアントを理解し、ともに方向性を擦り合わせていく大切なプロセスです。
２つのテイスト
ヒアリングを経て、とくに着目したのは、ヒビユウさんが描き分けている２つのイラストのテイストでした。
ひとつめは、シックで落ち着いたテイスト。
個展やパッケージデザインなどはこの作風がメインです。
ふたつめは、ポップで親しみやすいテイスト。
Instagramに投稿しているマンガや絵本など、日常感やキャラクター性のある作品ではこの作風が用いられています。
幅広いテイストを描けるのは、ヒビユウさんならではの強みです。
この強みを最大限に表現するため、今回のプロジェクトでは「２つの異なるテイストを、ひとつのサイトの中でどちらも魅力的に伝えること」が重要だと感じました。
企画・コンセプト設計-２つのテイストを両立した表現方法
コンセプト設計
ヒアリングをもとに、ウェブサイトのコンセプトを固めていきます。
「２つの異なるテイストを、ひとつのサイトの中でどちらも魅力的に伝えること」を念頭に置いて、いくつかの方向性を検討しました。
その結果、たどり着いたのは、シックなテイストをベースにしつつ、ポップなキャラクターたちが随所に登場する、という表現方法でした。
そこで、最初にヒビユウさんにご提案したコンセプトはこちらです。
ヒビユウさんのイラストレーター活動・個展をヒビユウ家みんなでお手伝い！
〜楽しさと作家性を両立したデザイン〜
このポートフォリオサイトを一つの「個展」に見立てて、家族みんなで設営をお手伝いしているようなデザインイメージです。
基本的には、作家活動のような少しシックで作家的な雰囲気のデザイン。
だけど、家族マンガに出てくるヒビユウ家のみんなが、ママのイラストレーター活動・個展の展示をお手伝いしているというイメージで、サイトの色々な場所でぴょこぴょこと出てきては引っ込む。こうすることで、作家の雰囲気と家族マンガの雰囲気を両立できるのではないかと考えました。
ヒアリングを通して、２つのテイストをバランスよく出しつつも、ストーリー性を感じられるウェブサイトこそが、ヒビユウさんらしさにフィットするのではないかと感じたのです。
コンセプト設計で意識していること
今回の制作では「ヒビユウさんの世界観に寄り添うこと」を意識しました。
最終的にウェブサイトは作家さんのものになるからこそ、「エコムクリエーションが作った」ではなく、「ヒビユウさんが作った」と言われても違和感のないものを目指したい。そんな気持ちで提案させていただきました。
このコンセプトは、ヒビユウさんにも共感いただき、ウェブサイトの方向性は確定しました。
さらにアイデアを出し合った結果、「ヒビユウさんの絵本作品のキャラクターたちが、個展を支える」というイメージで制作を進めることになりました。
イラスト制作
コンセプトが固まり、次は、キャラクターたちのイラストを描き下ろしていただくことになりました。
個展を支える、複数のキャラクターたち。
「こっそり応援していたけど、個展の様子が気になって思わず飛び出してきてしまった」という可愛らしい様子が伝わるように、404ページや、ページの下部など、ウェブサイトのさりげない場所に登場させます。
まずはデザイナーがラフ案を作成し、全体の雰囲気やポーズ、配置のイメージを決めます。それをヒビユウさんに共有し、イラストを描いていただきました。
ワイヤーフレーム
ウェブサイト全体の構成を決めるため、ワイヤーフレームを作成しました。ワイヤーフレームとは、どのページにどんな内容を載せるか、ページごとのレイアウトを表した構成図です。
デザイン制作-全体のデザインとキャラクターの動き
デザインのベース
ワイヤーフレームが確定し、ウェブサイト全体のデザインを進行しました。
全体的には「個展」をテーマに、ヒビユウさんの制作実績が引き立つ構成を目指します。
ワイヤーフレームをもとに、シックで落ち着いたテイストをベースにしつつ、ヒビユウさんのイラストがもつ柔らかな雰囲気が馴染むよう、配色やフォントなどのバランスにも気を配りました。
キャラクターの配置と動き
キャラクターたちの配置や、動きについても検討を重ねました。
彼らはあくまで個展を支える存在として、主張しすぎず、そっと顔を出すような登場を意識しています。
たとえば、ふとした瞬間にひょっこり現れる動きを設定し、表示タイミングや出現時間、アニメーションのスピードを細かく調整しました。制作実績を邪魔せず、むしろ空気感をやさしく補う存在として、全体の流れに溶け込ませています。
最終確認と公開
デザインの最終確認
デザインが仕上がり、社内チェックを終えて、ヒビユウさんに最終確認をしていただきました。
２つの異なるテイストが自然にまとまっていることや、全体的にほど良い余白があることを気に入っていただけました。
コンセプトや、ワイヤーフレームなどのご提案を通して、完成までに何度もイメージを共有してきたので、この段階での修正はほとんどなく、納得のいく仕上がりになりました。
制作実績の入力作業・公開
ウェブサイトは、公開して終わりではなく、更新して育てていくことが大切です。
とくに今回は、ポートフォリオとしての役割を担うため、最新の情報を作家自身で追加できる仕組みが必要でした。
そこで、専門的な知識がなくても扱いやすい、ノーコードWeb制作プラットフォーム「Studio」を採用しました。直感的に操作ができ、表示を見ながら編集できるので簡単にウェブサイトを更新できます。
更新の練習も兼ねて、公開前にヒビユウさんご自身で、ウェブサイトに制作実績を追加していただきました。
豊富な作品が揃い、制作スタートから約３ヶ月後、ついにウェブサイトを公開しました。
公開後-ヒビユウさんや周囲の反響
ウェブサイトを訪れた方からは、「ところどころに登場するキャラクターが可愛らしく、動きがあるのでほっこりする」とのお声をいただきました。また、ヒビユウさんのご友人やお客様からは「ヒビユウさんらしさがよく表れている」というご感想も寄せられたそうです。
制作実績の魅力がしっかり伝わり、ヒビユウさんの世界観が感じられるウェブサイトに仕上がったと思います。
ヒビユウさんのウェブサイト
今回制作させていただいたウェブサイトはこちらです。
【ヒビユウ（hibiyuu）ウェブサイト】 https://hibiyuu.com
エコムクリエーションのデザイン制作
当社では、クライアントに寄り添ったご提案を大切にしています。制作実績はこちらからご覧いただけます。
【エコムクリエーション 制作実績】 https://creative.eccom.jp/works
ヒビユウさんについて
三重県を拠点に活動するイラストレーター・ヒビユウさん。
家族との日常を切り取ったInstagramや、出版物・商品パッケージなど、多岐にわたり活躍されています。
「伝わりやすいシンプルさ」を大切にしながら、ご自身の人柄がにじむような、やわらかなイラストを届けてくれます。
イラストや制作実績は、Instagramとウェブサイトでご覧いただけます。
