昨日、弊社サービスの「ノミトモ」が念願のリニューアルを果たしました。
初夏の頃から打ち合わせを重ね、9月よりずっと作業していたのでずいぶんと力の入ったリリースですね。PC版とスマホ版同時だったので結構ボリュームあって連日奮闘しておりました。

さて、それでは毎度サービスリリース後の制作過程お披露目と参りたいと思います。
そもそもノミトモってサービスの主旨を簡単に説明しておきますと、新しく飲み友達を探したい人のために向けた、マッチングサービスです。
「一人で飲むのは寂しいので明日暇な人を募集します」「合コンの欠員が出たので女の子一人ｶﾏﾝ！！」と言ったような感じです。

ロゴの制作過程

リリース当初は30代以降くらいの男性をターゲットに運営していたのですが、以外に女性ユーザーが増えてきていたのと、若い方も多くなってきていたので、運営方針の見直しと同時にデザインを一新しました。
今回のリニューアルは、女性ユーザーの獲得も視野に入れているので、とにかく「老若男女親しみやすく」をコンセプトに制作しています。

決定稿がこちら。

まずお酒が主体のサービスなのでビールをモチーフに、会話・コミュニケーションの意味を込めてフキダシの形に変形させました。
安直なんですが、分かりやすくて気に入っています。

ここにたどり着くまでに今回は3稿行いました。
▼まずは1稿目。


勢いと女性らしさを兼ねたデザインをと思い、乙女ゲーのロゴを見漁りながら制作しました。諸事情により色をつける前に提出。ちょっと方向性が間違ってました。
▼そして2稿目。


キャッチーなロゴマークが欲しいとのことになり、4案ほど。突然ひらめいた3つ目のフキダシビールマークに情熱を注ぎすぎ、他が若干弱くなってしまい反省しています。
予想通り3案目のロゴに決まり、これをブラッシュアップしていくことに。
▼最後の3稿目。



残念なことに、ここで一度迷走が起こります。（クリックで拡大します。）
ここから紆余曲折東奔西走満身創痍、濃厚なストーリーの一日を経て、こちらの決定稿になりました。ここまででだいたい3日ほどです。


うーん。ちょっと美味しそうなロゴ。

ページデザイン

こちらが今回の構成資料。（クリックで拡大します）


とにかく文字が多くなるので、見やすく・分かりやすく仕上げましょう、とのことで制作しました。
動的なサイトは文字の量が内容によって変わったり、縦幅が可変だったりと頭を使って考えないといけないことがたくさんあるので大仕事です。ちょっと大変。

そしてデザインなのですが、実は私どうも色を配置するのが苦手で、それが永遠の課題になっています。
人にお見せできる段階になるまで、時間かかります。日々精進です。。。
今回は制作過程も残してあるので、いくつかお見せしたいなと思います。

▼まず形を作る
（クリックで拡大します）



▼色をつけていく。うーん。。。







▼試行錯誤あり、これで落ち着く。



実際には本番のユーザーさんの写真やら名前やらを入れてみて考えてるんですが、今回はダミーにして載せています。基本はメイリオを使用しました。
こんな感じです。今回はPIE.htcを使用し、ふんだんにCSS3で表現して制作しました。角丸やら細かいところのグラデーションの背景やらはCSS3ですね。

本番のサイトで見ると美しく映っているので、よければぜひ見てみてほしいです！
ノミトモはこちらから！

さて、それでは今日はこのへんで。
今週はあと2日、週末はポケだんの発売日なので楽しみです。お仕事がんばります。