スタッフダイアリー

デザイン制作過程をご紹介します。

デザイン課のヨコスカです。

毎日暑い日が続いてますね!
暑い日には外に出て思いっきり遊ぶのもいいですが、涼しい家の中で音楽を聞いたり、DVDを観て過ごすのはどうでしょうか??
ということで、今回こちらのサイトをオススメします!
8月1日にOPENした人気韓流スターやK-POPアイドルの商品がもりだくさんな通販サイト「韓流☆通 online shop」。
韓流スター公式サイト公認ショップということで、オリジナル特典や限定商品なども取り扱う、ファンは見逃せないサイトになっています。



こちらのオープンにあたり、サイトのデザインを担当したので、その制作過程を少しだけご紹介したいと思います。
その時々の条件や、何を扱うサイトかにより制作の過程も違ってきますが、
今回は、自社案件でサイトロゴも含めた制作依頼だったので、はじめに全体のイメージを印象づけるロゴの制作し、その後、サイト周りをデザインしました。


まずは、担当者からヒアリングします。
ここでぶれるとチグハグなページになってしまうので、ターゲットやコンセプト、イメージをしっかり聞き出します。
イメージは「癒しとファンタジー」ということで、サイトはパステルカラーメインで、ロゴもそれに合わせて可愛らしい感じがいいけど子供っぽくはならないようにとのオーダー。
次に同じジャンルや、ヒアリングした内容とマッチしたサイト、販売する商品のデザインをなどをチェック。
情報収集して、ターゲットのユーザーが求めるデザインを考えていきます。


イメージが固まったら、いよいよ制作に入ります。
まずはサイトロゴから。
紙に思いつくままイメージをかきだし、それを組み合わせたり、弄くり回しながら絞りこんで形を決めます。
私の場合、この段階ではあまりかっちりは決めず、大体の形を決定した後、Illustratorを使用して仕上げていきます。





今回は、ラフの段階でベースに使いたいフォントが浮かんでいたので、そのフォントのやわらかい感じを残しつつ、アレンジを加えていく形にしました。
メインとなる「韓流☆通」部分にハングルのようなテイストを入れて韓国感を出しつつ、全体的に丸みを加えることでよりやさしさと癒し感をだしました。
デザイン、ラインの太さ、色を組み合わせ、数十のパターンから5つに絞って提出。
そして、最終的に決定したのがこちらです。





ロゴが決まったら次はサイト周りのデザインです。
今回はスマートフォンとフィーチャーフォン対応なので、それぞれワイヤーフレームと呼ばれるサイトの設計図を元に、デザインのラフ(デザインカンプ)を作成します。
私はphotoshopで作っていますが、illustratorやfireworksを使う人もいます。
ラフとデザインカンプ(完成版)を分けて作る場合もあります。
ここら辺のやり方やフローは制作会社や個人で様々です。



メインのカラーはパステルピンクと決まっていたのですが、一口にピンクと言っても実際はいろいろな種類がありますよね。
ちょっとした色の違いで全体的な雰囲気が変わるので細かく決めます。
今回は癒しを意識して、柔らかい印象になる黄みがかったピンクをメインに使うことにしました。
逆に青みがかったピンクだと少しシャープな感じになります。比較するとわかりますね。
このとき、きちんとカラーコードで指定しておくのが大切です。





それに合わせたサブカラーを決め、デザインに落としていきます。
ロゴの制作過程でイメージは大まかには固まっていたのでこちらはサクサク進めました。
こちらもロゴと同じく何パターンか提出し、ブラッシュアップを重ね最終的なデザインを作っていきます。





ここまででデザインの部分は終わりです。
サイトが出来上がるまでには、この後、コーディングをしたり、プログラムがはいったりと様々な行程を経て、ようやく形になり世にでることになります。


今回デザインに特化して紹介しましたが、機会があれば、デザイン課の他の作業も紹介していきたいと思います。