産学協同プロジェクト vol.3 ~Web編~

プロジェクト内容
1.企業の新しいVIの制作
2.新商品のパッケージとキャラクター制作
3.企業のWebサイト制作

 

企業のWebサイト制作 (制作期間 : 2015.06.04 ~ 2016.04.12)

Webも企業のVI制作、パッケージ制作と同時進行で進めていました。
企業ロゴが決まっていない段階だったので、
もしこのロゴになったらどのようなサイトになるかを想定して進めました。

エコバンクロゴ

 

このロゴを制作した時に
作ったWeb案です。
ecobank web案

丸をキービジュアルに、「繋がり」を連想させるWebとなっています。
こちらは企業理念を前に出した構成となっています。

 

エコバンクロゴ

 

同じく、このロゴを制作した時に
作ったWeb案です。ecobank web案

「!」をモチーフにしたダイナミックなWebデザイン案です。
こちらは商品を前に出した構成となっております。

企業サイトを作る際に
商品情報を前におくべきか?
企業理念を前におくべきか?
どちらを優先するべきかを聞き出す為に、いくつものWeb案を提案しました。

 

産学協同プロジェクト

Webの提案に関しては、企業側がどういったサイトにしたいのかを聞き出さないといけません。
しかし、サイトの方向性を聞き出しても、最終的に更新するのは企業側となります。
相手がHTMLを編集できない場合、更新ができないのでサイトの意味が無くなってしまいます。
なので、更新性を意識したサイト制作に取り組むことにしました。

 

エコバンクロゴ

企業ロゴが正式に決まった際に、
ロゴの特徴を取り入れたサイトを提案しました。
ecobank web案
この案は、tumblrを埋め込んで更新、というのを前提にデザインを考えています。

また、TOPページにSNSを埋め込むことで更新されるサイトとして見られるということを提案するために、twitterを入れてみました。

 

バン「tumblrって埋め込みできるの?」
モトジマ「う~~ん・・・そういうjsがあった気がする(笑)」

そこでモトジマがひらめきます。

モトジマ「じゃあ、Bloggerを使ってみよう!」

カスタマイズ性が高く広告が表示されない
そしてブログのように簡単に更新できるBloggerを目に付けてみました。

ecobank web案

 

 

 

 

 

Blogger案A
ecobank web案

A案は商品重視でインデックスにBlogger
B案は企業理念重視で商品一覧のみBlogger(更新はtwitter)

という提案になってます。

産学協同プロジェクト

モニターを通して、サイトの構成と、Bloggerを使うにあたってのシンプルさをプレゼンしました。
提案と同時に、Bloggerを使うにあたってのマニュアルも制作しました。

産学協同プロジェクト

社長「企業サイト内で買い物できるようにしたいなぁ」

バン&モトジマ「(カート・・・・・・・・・・・!!!(汗)」

ショッピングカートを付けるには敷居がとても高く、
Javascriptを習得する必要があります。
また、消費者とお金のやり取りをしなければならないため、消費者の信用を得るための工夫を考えなければなりません。

「だったら既に使ってる楽天の方がショップサイトとしては成り立ってるよなあ・・・」
カート設置方法を考えている時にひらめきました。

モトジマ「そうだ!BASEはどうだ!!」

Blogger案を全て没にし、
ネットショッピング制作サイト「BASE」案に転換しました。BASE

ネットショップサイトということで、商品が映えるテンプレートが揃っており、
購入後のやり取りもBASE側に任せられます。
HTML編集も可能なため、カスタマイズ性もあります。

ですが、テンプレートはBASEの独自タグで組まれているため、
一からオリジナルデザインを制作するには少々時間が必要でした。

エコバンクさんはfoodex japan 2016に商品を出展する予定があったため
イベントまで間に合わせるよう、有料テンプレートからカスタマイズしていくという方向で決まりました。

ecobank web案

ecobank web案

BASEの有料テンプレートを使用した2案を提案しました。

提案した結果…[B案]が選ばれたので
あとはコンテンツを埋めて完成です!

 

Web用の商品写真撮影

楽天に上がっている商品画像は、画像に文字が入っていたため
再度こちらでWeb用に商品を撮り直す機会をいただけました。

買い出し

 

 

 

 

 

 

写真を撮るために急きょお買い物。

 

 

 

 

写真撮影

 

教室で撮影室を作りました。商品は前々からエコバンクさんから郵送していただきました。
バンは写真を撮るのがとても上手です。
モトジマは写真の中の手の役をしたり、ライトを支えたりなど、サポートをしてました。

web用写真

web用写真

掲載する商品分の写真が撮れたので、
Web用にトリミングをして商品一覧を制作しました。

最終的にWebはこのようになりました!

ecobank web完成

エコバンクさんらしい健康的で温かみのある配色になりました。
残念ながら有料テンプレートを利用したフィックスとなってしまいましたが、
エコバンクさんの要望通り、ショッピング機能を持つWebサイトを提案することができました。

 

パッケージ編でお伝えしたように
プロジェクトはまだ進行してますが、引き続き頑張ってます。
ここまで見て下さりありがとうございました。