【デザインの裏側】特設サイトの制作～デザインから撮影、イラスト作成、コーディングまでワンストップ～

今回は化粧品・入浴剤のOEMを手がけておられる会社様よりご依頼いただいた、入浴剤・化粧品のOEMに関するWebサイト制作のお話をいたします。

具体的にOEMでどのような製品ができるのか、会社の強みは何か、といったことを知ってもらうために、コーポレートサイトとは別に特設サイトを作りたいとのご要望でした。

【Web制作にあたってのポイント】
●コンセプト
トップページは架空の展示会をイメージし、アニメーションなども取り入れた遊び心のあるサイトに。
下層ページは伝えたい内容を分かりやすくすることに重点をおきつつも、イラストなどを使い、飽きさせない工夫をしたものに。

●デザインテイスト
化粧品や入浴剤など女性向けの商品を取り扱っているため、全体に女性らしいデザインにするが、実際のターゲットとなる製品開発担当者には男性が多いため、あまりに女性に寄りすぎたデザインになることは避ける。




【実際の制作過程】
■ページ構成・ワイヤーフレームの作成

まずはクライアント様と話し合いながら、トップページにはどのようなコンテンツを盛り込むか、下層ページの内容はどうするかなど、全体のページ構成を決めていきます。大まかな構成が決まったら、ワイヤーフレームを作成し、より詳しくページ構成を固めます。

■デザインラフの作成
先で出来上がったワイヤーフレームをもとに、デザインをしていきます。
今回は商品撮影やイメージ撮影も絡んできますので、どういった写真をどこに何枚入れるかも考えながらのデザインになりました。

■イラストの作成
今回は説明にイラストを多く使用しています。
全てを写真で説明するとどうしても単調なデザインになったり、物理的に撮影が難しいものもありますので、ひと工夫加えるのにイラストは有効な手段です。
最終的には簡単なアニメーションにすることで、よりわかりやすく、かつ動きのあるデザインになりました。

■商品撮影・イメージ撮影
撮影はデザインラフをもとに進めていきます。
今回の撮影は商品撮影からイメージ撮影まですべて弊社のワンストップスタジオで行いました。
入浴剤の撮影ということもあり、いい匂いに包まれた華やかな空間での撮影はとてもスムーズに進みました。またWebでは動画も使用するため、動画の撮影もワンストップスタジオで行いました。

■デザイン完成・コーディング・公開
撮影した写真と描き起こしたイラストをはめ込み、全体のレイアウトを調整したらデザインの完成です。
このデザインは最終的に弊社でコーディングまで行い、無事公開されました。完成したWebは、アニメーションがはじめに流れたり、展示会のCGがTOPのメインビジュアルになっているなど、様々な要素を盛り込んだものになりました。

JPCならデザインからWeb制作に関する全てがワンストップ
今回のようにデザインだけでなく、撮影、動画、イラスト、CG、アニメーションなど様々な要素が盛り込まれたWeb制作もすべてワンストップの作業体制で完成までサポートできるのがJPCならではの強みだと思います。

また、弊社はグラフィックセクションとは別にWebセクションがありますので、Webデザインはそちらの者が担当することが多いのですが、今回はイラストをたくさん使用するデザインということでグラフィックデザイナーの私が担当させていただくことになりました。

年々、グラフィックデザインとWebデザインの垣根がなくなり、弊社でも多くのスタッフがイラストレーターやファイヤーワークスを使って、Webも紙媒体も両方のデザインをこなしています。ひとくちにデザインといっても、紙とWebでは勝手が違うことも多く、はじめは戸惑うこともありますが、これからは紙のデザインでつちかったノウハウを、Webデザインに生かすことで、新しい切り口のデザインができるのではないかと思ってます。


最後まで読んでいただきありがとうございました。