yusk -ユースク-

  • WordPress
  • Twitter
  • RSS
  • Facebook

201107-16

華やかで上品なデザインをしたレポート

flower

最近、友人伝いでWEBサイト制作をしたので少し打合せからリリースまでを紹介します。

商業デザインも少し久々な感じだったけど、やっぱり民間のWEBサイトは良いよね。制作してて改めて楽しいと思った。

ブーケを加工してくれます!

ティファニーフラワー

ブライダルブーケ加工・保存専門 | 札幌のティファニーフラワー

さて、早い話が上記WEBサイトを全て1人でリニューアルしました。

この会社さんはブライダルのブーケを挙式の後に加工してくれるサービスを行ってます。よくあるプリザーブドフラワーと違う技術で、かなり手間隙かけて保存できるように加工してくれます。こういうのって職人技ですよね。しかもブライダルとは、なんて華やかなんでしょう。

話の段階で、特にプログラムは必要としなかったので入れてないです。非常にスタティックでシンプルなWEBサイトです。

今回は友人からの紹介でご紹介を受けて、まずは打合せを行いました。
実は今回は初回の打合せ1回で済んでいるんですよね。よく何度も何度も打合せを行うことを信条としている人がいますが、僕は基本的に必要最低限にしてます。

もちろん要望があればしますが、コンセプトや掲載内容が決まっていれば初回に集約できるはずなのです。相談ベースならまだしも、昨今は色々と効率化が求められているので、結構お客様も解ってくれるのです。でも別にサービスの質を落とすわけではなく、むしろ電話やメールではこまめなフォローはします。ようは「やりよう」だと思ってます。

ご要望

  • デザインを一新したい
  • 新商品があるので、それを載せたいギャラリー
  • 上品さ・高級感を出したい

上記ご要望と事前に参考サイトがありましたが、比較的お任せでした。「お任せ」って制作側からすると結構怖い場合もあるけど、楽しんで出来ることも多いよね。

デザインコンセプト

色は特に指定はなかったが、コーポレートカラーはサーモンピンクとのこと。

なんとか活かしたいけど、実は個人的にオレンジ系が唯一苦手な色なのです。。auのようなバリっとしたオレンジは好きなんだけど、少しでも明度が狂うと映えない色になるし、彩度落として大人の色のように表現するにも難しいし、グラデーションかけたら綺麗に思えないし、いえ、全部個人的な意見ですよ?w 個人的にそう思ってるから苦手なのです。

なのでメインカラーにはせず、アクセントとしてオレンジを使用することに。

高級とか上品なデザインって実は好きな分野で、前によく美容室やネイルサロン、エステとかのサイトをデザインする時はかなり力が入ってた位好きなのです。なんか繊細な様子を表現するのが好きなんですよ。女の子ウケするような繊細なデザイン(カワイイ系ではないけど)って、僕の目指すものの1つでもあるので。

今回は高級感を前面に出すのですが、ブライダルに関わる商売でもあるため、こってりとした重厚感よりもライトで繊細な上品さを目指そうと思ってメインカラーはホワイトとグレーで提案。これだと多彩な花の写真が入っても違和感が無い。参考サイトもその系統だったので、デザインは気に入ってもらえました。ちなみに自分的なデザインのこだわりは模様の“透かし”だったりします。

設計・注意点

一番注意したのはやっぱり花を入れた時のイメージ。華やかで綺麗な写真を活かすようにバランスを取りました。あと、“透き通る印象”も与えたかったので、ポイントで透かしを入れました。

コーディングにおいては、ギャラリーページは後にお客様が更新できることも考えてライブラリを選定。TOPのスライドショーに関しても、見せ方とかで結構悩みました。本当言うとFlashを使ってしまいたかったけど、まぁJqueryで実現したほうが何かと良いのでやめました。

あまりSEOSEO言っても、デザインの融通が効かなくなるなら意味がないので、今回はそこまで内部キーワードにこだわってません。
というか、最近のGoogleロボットの傾向とかだと、もっと違う箇所に力を入れたほうが良いですよね。

完成と今後の展望

無事リリースできて、大変満足してくれました。
実は作ってるうちに僕自身がどんどん色々導入したいことも出てきましたけど、今はこれでリリースです。

このお客様は写真を自分で撮影して加工もするので、写真へのこだわりは強いのですが、PhotoShopで加工した状態で送ってくれるので僕としても助かりました。
今後も色々と継続した展望もあるそうで、僕も出来る限り協力したいと思います。

以上、レポートでした!

トラックバックURL

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">