疑似クライアントワーク
架空のワインバー「MyFirstWine」のWebサイトです。
設定背景
2002年創業のワインインポーターである株式会社MyFirstWineが、事業拡大のためワインバーを初出店することとなり、それに際して新規Webサイトを開設する。
オフィス街や都心などの競争が激しい地域を避け、新規需要を開拓する。「ワイン初心者、お酒の弱い人でも楽しめるワインバー」を謳い、お酒をあまり飲まない人に向け、新たな発見と楽しみを提供する。
サイト制作の流れ
- 要件定義
- ワイヤーフレームの作成
- カンプデータの作成
- コーディング
- アップロード・確認・修正
メインターゲット
- 2,30代の男女
- 会社帰り
- お酒の弱い人
クライアントの要望と解決方法
店舗紹介、宣伝、イメージの定着
- ワイン、店舗のイメージカラーである赤紫を軸に、彩度を合わせたカラーリングで統一し、サイトに説得力や信頼感を持たせた。
- サイト上部に店内画像を表示し、来店のイメージを持ってもらう。
- ファーストビューはヒーローヘッダーとロゴでスッキリとしたデザインに。情報をいきなりたくさん表示しないことで、安心感を与える。
- メインターゲットとなる20〜30代の男女に訴求すべく、パララックスを利用しスタイリッシュなサイトを目指した。
- 会社帰りに検索し立ち寄ってもらうため、スマホでの閲覧を想定。レスポンシブ対応させた。
- AOSを使用し、退屈せず読み進めてもらえるよう動きをつける。
ワインの普及、敷居を下げる
- ワインが初めての方、お酒に弱い方も利用しやすいお店であることをアピールする文言を多く取り入れた。
- ワインの面白さや魅力を伝える文章を入れた。
- どんな属性の人でもすぐに試せる「１分間ワイン診断」と銘打ち、簡単な診断機能を実装。
- ワインはとっつきづらいというイメージを取り払うため、サイト内での白色の占める割合を多めにし、明るさや親しみを表現している。
1,要件定義
掲載コンテンツ
- AboutUs
- AboutWine
- Menu
- Access
ページ構成
- メインページ
- Menuページ
デザイン、カラーマネジメント
- スタイリッシュかつ明るめにまとめる
- トップページはヒーローヘッダーに、画像にはイメージカラーのパープルををオーバーレイする。全面の文字を主役にするため粒状のエフェクトを追加。
- バックグラウンドカラー:#FFFFFF ホワイト
- メインカラー：#A3457B パープル(ワインのイメージ)
- サブカラー:#C8C185 淡いイエロー(柔らかさ、親しみやすさ)
※サブカラーについては、インパクトを高めるべく、#45a36dグリーンを検討したが、メインカラーとの対比がかなりきつい印象になってしまったため、イエローに変更した。
UI設定
- スクロールアニメーション(プラグイン)
aos - パララックスデザイン(プラグイン)
simpleParallax - スムーススクロール
- ハンバーガーボタン
- 10秒ワイン診断
ロゴ作成
illustlatorにて作成
MyFirstWineの頭文字を四角く配置した。同じモチーフを使うことや整然と並べることで 信頼感を、丸みをもたせることで親しみやすさを表現した。
一見何のロゴかわからなかったため、ワイングラスのモチーフをあしらった。補色のグリーンと組み合わせたが、浮きすぎてしまったため、イエローを選んだ。
何度かの試作を繰り返し、現在の形に至った。
ファビコンにも同アイコンを縮小して使用する予定だったが、テストしたところ小さくなりすぎて視認性が低かったため、右下の文字のみ使用した。
2,ワイヤーフレームの作成
3,カンプデータの作成
4,コーディング
AOSを読み込み、画像、説明文をポップアップするように設定。
jQueryにて、スクロールトップを取得し、ヘッダー部分を抜けるとハンバーガーメニュー・トップへのスクロールボタンを表示するよう設定した。
コピーのリズムを2文に区切り、すべて「も」で終わらせることで、テンポよく読めるように工夫した。
パララックスで横への動きをつけ、スタイリッシュにセグメントの境目を明確にした。
jQueryにて簡単なワイン診断を実装した。「はじめる」ボタンを押すと、2択×2択×3択の選択肢が順に表示される。それぞれの選択ボタンに1の位、10の位、100の位のdata属性を設定し、クリックするごとに足してゆき、最終的に12通りの一意の数になり、それに応じた各結果画像を表示する設定。
ワイン診断というものはありふれているため、直感的に、誰でも、すぐにできる、というところで差別化を図るため「10秒」ワイン診断という攻めた名称にした。
また、テストをしたところ、ボタンであることが分かりづらく、スルーされることが多かったため、矢印と点滅でクリックを促すよう変更した。
メニューページのみ別ページの予定だったが、作成コストの軽減のため、1ページに纏めた。
MapはGooglemapを埋め込む方法も検討したが、サイト全体のトンマナを守るために、illustlatorにて作成した。目的地が分かりづらかったため、
1,目的地を点滅させる
2,ロゴをサブカラーで配置する
の改良を経た。
コーディング中に改良を行っているため、ワイヤー、カンプとは一部異なる部分があり。
5,アップロード・確認・修正
PC、スマホ、タブレットからテスト。
丸ゴシックであったが、子供っぽいという意見をもらったため、テストを実施、
丸ゴシック・角ゴシック・明朝で比較した結果、明朝が良いという意見が多かったため、変更した。
架空のサイトであるため、検索に引っかからないよう、Robots.txtを設定。
感想
こんなお店があればいいなと思いながら作成。
作成までの大まかな流れを体験することができたこと、また、設計→｛実装→テスト→改善｝×ｎを何度も繰り返し行えたことで、大変良い練習になった。わずか1文字違うことで動作しなかったり、エラーの原因が思わぬところにあったりして、より広い可能性を探る習慣がついた。
ローカルのエディターが賢すぎて、サーバーでは別の挙動をすることもあり、実機テストの重要性もわかった。
予期せぬエラーも多く、検証ツールを使用する練習にもなった。
jQueryで作成したワイン診断は、はじめ冗長なコードになってしまっていたが、できる限り可読性向上と軽量化を図ってミニマイズした結果、現在の形になっている。
ご意見を頂いた皆様には感謝したい。