DogooBaco Loading

2016.12.04

美容室No.11様webサイト制作
〜第2回デザイン編〜

web

こんにちは、師走です!!!正直幻のような2016年でした。
今年を改めて振り返ってみると、例年より特にパンをたくさん食べた1年だったような気がしています。

 

 

さて11月26日に、個人で制作をさせていただいておりました、埼玉県川越の美容室「No.11 (ナンバージュウイチ)」様のwebサイトをリリースいたしました!

こちらのサイトの制作の記録を簡単にでも残しておきたいなと思い、5回にわたって制作ブログを書いております^^

今回は「第2回 デザイン編」です!

 

 

目次

前回記事のディレクション時に制作をしたWFと、お打ち合わせでヒアリングをしたデザインイメージなどをもとに、デザインカンプを作り始めます!

 

 

デザインヒアリング・すり合わせ

デザインのヒアリングでは、まず初めに下記のようなことを伺いました。

 

img_web-no11_2_02

 

  • どうしてお店を開かれたのか(独立をされたのか)
  • お店に込められ思い
  • お客さんにどう感じていただきたいか
  • お店ロゴのデザイン意図・オーダー内容
  • お客さんの年齢層など、どんな方がいらっしゃるのか
  • お店のこだわりポイント(内装など)
  • お店で流れている曲の選曲ポイント

…などなど。ざっくりまとめるとこんな感じです!

 

たっっっくさんのことをお話しをしながら質問をさせていただいて、

デザインのヒントになるようなことを引き出せるよう心がけました^^

 

 

こちらで伺ったことをもとに、次のお打ち合わせ時にはおおまかなデザインテイストの方向性を、下記のような資料を用いてすり合わせをさせていただきました。

 

 

img_web-no11_2_03 img_web-no11_2_04

 

 

いくつか参考サイトをピックアップ、4つの方向性に分類をし、各分類がそのようなイメージである所以・要素などを軽くご説明しつつ、こっちの方向性かな〜?このサイトのここが素敵ですね〜?などとお話しながら、デザインのイメージを詰めていきました。

 

 

デザインコンセプト・軸

上記のヒアリング内容をより噛み砕き、ワードをカテゴリ分けしたり、拡張したり、再構成をしながら、最終的なデザインの軸を下記の5つとしました。

 

  • 1.お店のコンセプトと同じく、ゆったりとした空間・時間の流れを感じてもらえるようなもの
  • 2.爽やかさ・清潔感のあるもの
  • 3.お店のロゴマークを印象づけられるようなもの
  • 4.店長さんのこだわりの詰まった手作りのお店であることを表現するもの
  • 5.手作りであるけれど、やぼったくなくスタイリッシュな面をもつもの

 

これらを表現できるようなビジュアル・UIを検討、落とし込みをしていきます!

 

 

デザインコンセプトのビジュアルデザインへの落とし込み

上記で決定したデザインコンセプトを、実際に一つ一つビジュアライズしていきます。

 

お店のコンセプトと同じく、ゆったりとした空間・時間の流れを感じてもらえるようなもの

img_web-no11_2_05

 

ゆったりとした余白をとり、アニメーションやエフェクトをいれることで時間の流れと、奥行きを表現しました。

余白の大きさについては、「Vertical Rhythm」の手法を取り入れてみました。

 

ベースの高さを6px(=1rem)として(文字サイズのベースは3rem/18px)、6の倍数で上下左右の余白、カラムの大きさなどを設計しました。

文字サイズ、行間を少し大きめに設定していますが、大きくゆったりとした雰囲気を持たせつつ、ちょこんとした可愛らしさ・そっとまとまった雰囲気を出したくてベースの文字は「游ゴシック」を使用しています^^

 

「Vertical Rhythm」、完璧に再現はできていない箇所もあるのですが…

少しでも気持ちよく・リズミカルに閲覧してもらえるように作りました。

 

あとは細かいところですが、下層ページのメインビジュアル部分をfixed固定にし、スクロールをするとコンテンツエリアがせり上がってくるようなUIにすることで、空間の奥行きを演出してみました。(PC版のみ)

 

 

爽やかさ・清潔感のあるもの

img_web-no11_2_06

 

白+薄いグレーをベースカラーに設定し、清潔感、明るいイメージと少し落ち着いたイメージを持たせています。

 

アクセントカラーには、ロゴマークの青色をベースに、文字を見やすくかつ、青色でありながらもクールで真面目すぎない、温かみを感じられるような青の色選びをしました。(ここが一番苦労した記憶)

 

サイト内の文字色をすべて青にしたのも初挑戦…!

青色というと、テキストリンクの色というイメージがかなり定着していると思われるので、リンクではない地の文字の濃さのバランス調整に苦労しました^^;濃すぎると重たい印象だし、明るいと読みにくい&リンクっぽい…など。何度も選び直しをしました。

 

 

お店のロゴマークを印象づけられるようなもの

ezgif-com-resize

お店のロゴマークが水色の枠線の正方形であることを印象づけられるよう、リンクボタンやクリッカブルな画像を正方形の形で統一をしました。

ユーザーのアクション(オンマウス)によってギミックが発動するボタンにすることで、よりユーザーの印象に残るのではと考えました^^

 

 

 

店長さんのこだわりの詰まった手作りのお店であることが表現するもの

img_web-no11_2_07

 

ここまでで水色+正方形という若干スタイリッシュ寄りなデザインになっていたところに、タイトル文字を手書きの文字にする、手書きのイラストを無造作に配置することで、「人」を感じられる、温かみのある雰囲気をプラスしています。

 

手作りのお店であること、こだわりを持ったお店であることを表現したく、手描きのイラストをサイト内に使用しようと決めました。

イラストのテイストは好き嫌いが別れるポイントかも知れないと思い、私の方でこんなイラストはどうかな?と思うイラストを予め幾つかピックアップ・分類し、下記のようなイラストイメージのすり合わせ用資料を作成しました。

 

img_web-no11_2_08

 

お打ち合わせの際に一緒にイラストイメージのすり合わせをさせていただきました。

 

また、正方形のグリッドに沿った、整列した清潔感のあるレイアウトをベースに、ところどころ崩しをいれることで、店長さんが楽しんでお店を作られているというような、遊び心を表現しました^^

店長さんのお店への愛、こだわりが表せているといいなと思います。

 

 

手作りであるけれど、やぼったくなくスタイリッシュな面をもつもの

こちらについては、3と4が重なり合って、結果的に実現できたかなと思います。

 

 

こういった形でデザインのコンセプト・軸を決めてデザインカンプ制作をしていきました!

これらは最初に全てをガッチリと決めてしまうのではなく、手を動かしながら考えながら作っていった部分もあります。

最初は、イラストや文字部分には手描きを入れて〜ロゴを印象づけたくて〜水色を前面に使いたくて〜くらいのスタートでしたw

 

 

 

作業環境・デザインカンプ作成

普段MacBookAir(13inchi)で作業をしているのですが、デザイン作成(特にPCサイト)となると、画面が小さく俯瞰してデザインを見るなどがなかなか難しい…そしてまとまった時間が取れないとはかどらない、、

 

そのためデザインカンプ作成フェーズは、主に休日に自宅のiMac(21inchi)にMBAをつなぎ、iMacをディスプレイとして使用する形で進めました。

画面が大きいとはかどり具合が全然違います^^^

 

 

デザイン作成使用ソフトはPhotoShopです!

普段お仕事での大きなプロジェクトでデザインを作る際は、「Creative Cloud ライブラリ」をゴリゴリ使用してボタンパーツやら色のパレットやらオブジェクトや文字設定をライブラリに入れていくのですが、今回は色数も少なく、ボタンパーツなどもほぼ統一された形のシンプルなデザインだったため、ライブラリもシンプルに。

 

 

img_web-no11_2_09

 

管理を怠ったとしか言えないようなライブラリに。参考にならないですね^^;(なぜ載せたのか)

 

 

各ページのデザインは、アートボードを分けて作成しました。

途中からファイルが重くなってきてしまったので、3ファイルに分けて12ページ分のデザインカンプを作成しました。

 

img_web-no11_2_10

 

最初にPC版トップページのデザインを作成・ご提出し、OKをいただいた後にSP版のトップページ、PC版下層ページへとデザイン展開をする形で進めました。

 

 

余談ですがこの制作の期間に、ついに憧れの液晶タブレット(液タブ)を購入しました^^

購入したものはwacomの「Cintiq 13HD」。これまでイラストは手描き(をスキャンなどで取り込み)orマウス(ベジェ曲線くらいでしか描けない)orペンタブ(ブラシが思うように動きについてこない)で作成をしていたのですが、

今回液タブを手に入れたことにより、PhotoShop上でイラストを描き放題・直し放題になりかなり作業がはかどりました^^^

買ってよかった〜〜^^^

 

 

 

デザインFB(フィードバック)方法

デザインへのFB方法は色々と悩んだのですが(pdf化して書き込んでもらう…など)、ディレクションの時に使用をした「Marvel」でお願いをしました。

 

img_web-no11_2_11

 

WFを作成した時とは別のデザインカンプ確認用のプロジェクトを作成し、お客さまをプロジェクトに招待、各ページのデザインで気になる箇所にコメントを書き込んで頂き、やり取りをさせていただきました^^

 

ディレクション時に決定した機能の詳細や、アニメーション方法などの細かいUIに関する説明もここのコメント機能内に書き込みました。

番号とコメントが連動しているのがとても見やすいです!

 

img_web-no11_2_12

 

こんな感じで気になった箇所にもお客さまにコメントを書き込んでいただき、

チャットのような形でFBについてはコミュニケーションをさせていただいておりました^^

 

 

以上!

こういった形でデザインカンプ制作、FBを進め、必要ページの全デザインカンプが完成しました!

 

デザインの期間は全部で約3ヶ月…!なかなかまとまった時間をとることができなかった、というのがこれだけの期間かかってしまった一番の要因ではあるのですが。。。

やはりデザインは落ちついた環境でじっくり集中するに限ります^^;

 

 

だいぶ端折ってしまった箇所はあるのですが、デザイナーがデザインをするときは、ビジュアルデザインに持っていくまでにも多くの工程があり、ヒントを集めてつなぎ合わせて形を作っていっているのです、ということが少しでも伝わったらいいな〜と思います^^

 

もちろん、実際にビジュアライズするときも何度も推敲をして、コンセプト・軸に沿わせつつ、実際に手を動かすことで見えてくる問題点を解決、新たな発展性を見つけてブラッシュアップしながら作り上げていきます^^

 

今回の記事だと、さらっとデザインをしていったように見えてしまったかもしれませんが、悩みに悩んでぐちゃぐちゃのゴミ箱に入る前の紙くずみたいな状態になりながらやっとこ生まれたデザインでした!

デザイン編、といいつつほとんどがアートディレクション的な記事になってしまいました。

アートディレクションと実際のデザイニング(って言わないか)は切っても切れない関係ですね!

 

 

次回は「写真撮影編」です!

 

 

制作ブログ目次

  • ディレクション編
  • デザイン編 【今回はこちら!】
  • 写真撮影編 ComingSoon
  • コーディング編 ComingSoon
  • WordPress編 ComingSoon