よもぎクッション「りょく」
デザインコンセプト
よもぎを使ったハンドメイドの商品を取り扱っている、温かみのあるデザイン。よもぎ色をメインとしたアースカラーを意識しました。
ターゲットユーザー
- 30~50歳
- 女性
- 図病を抱え、民間療法を探している方
プロジェクトメンバー
3名体制で制作しました。
- ディレクター1名
- デザイナー（担当）
- コーディング（担当）
- バックエンド、コーダー（サポート）1名
担当領域
- デザイン・コーディング（WordPressをメインに使用）
- ディレクターとクライアントのヒヤリングに同席。クライアントの思いを大切に、デザイナーとして参加しました。
使用ソフト
- PhotoShop
- Illustrator
- WordPress
製作期間
3か月
打ち合わせからリリースまで携わりました。
制作のポイント・流れ
ポイントは、レイヤーカンプを作らず自社のHP作成テンプレートに直接デザインを実装した部分です。
ディレクターから頂いた情報を元にサイトマップの作成をしました。
ディレクターを介したクライアントのヒヤリング情報を元にテスト環境にてHPを仮作成しました。その時点でそろっている情報、素材、足りないものはフリー素材を当てはめました。ロゴ、ファビコンも仮作成しました。
エクセルシートにて不足情報の提供を依頼しました。
揃った情報をHPに落とし込みました。
最終チェック、クライアントに全体確認をして頂き、プロジェクトは終了しました。
情報提供の依頼
エクセルシートを使ってクライアントとのやりとりを行いました。
サイトマップの作成
簡単ではありますが、スプレットシートにてサイトマップを作成しました。
クライアントとの情報共有
HPを制作する上で、頂きたい情報をエクセルシートにまとめ、ディレクター
テスト環境にてコーディング
通常は、XD、Figmaにてデザインカンプを制作してからコーディング、及びコーダーへ実装を依頼していましたが、今回は自社のHP作成テンプレートに直接デザインを落とし込みました。レイヤーカンプは作成していません。
以下の自社雛形環境を作り変えました。こちらも私自身作成しています。
商品を多く販売したいというクライアントではなく、一品ものを本当に必要としている人へ届けたいという気持ちを尊重し、電話番号にリンクは貼らない等、コンバージョンに繋がるUXは最低限のものとしています。
商品ページへの誘導バナー作成
トップページから商品紹介ページへの導線でバナーを作成しました。PC用、スマホ用双方のバナーを作りレスポンシブに対応させています。使用ソフトはIllustratorです。
お問い合わせフォームの設置
コンタクトフォーム7を使用してお問い合わせページを作成しました。補助プラグインでサンキューページを作成し、最後は上司に協力して頂きメール受送信のテストを行いました。
https://ryokunomori.com/contact
デバイスチェック
各レスポンシブとブラウザ（iphone、Android、Chrome、Safari、Edge）にてレイアウト崩れが無いかを確認しました。Chromeのデスクトップブラウザにてレイアウト崩れが確認されたため、CSSハックを使い修正しました。
使用したCSSハック
上司とコーダーから助言を頂き、こちらのCSSをテーマファイルエディタにペーストしました。chatGPTを使いテストしました。
クライアントとのヒヤリング
クライアントが来社された際、レイヤーカンプを見てご意見頂くため、ヒヤリングに参加しました。
クライアントの懸念事項
電子レンジを使い温めて使うアイピローの販売について、長く温めると焦げることを懸念されていました。
お客様に対してどう説明しようか悩まれていた為、商品紹介ページにて注意喚起を促す項目を作成しました。実際に焦げてしまった商品の画像を添付することで、温めすぎの危険性が伝わります。
「火傷や焦げに注意してください。」の部分は赤字に、「温めのポイント」にマーカーを引いてみてほしい部分を強調しました。
お客様からの声ページの設置
販売商品はすでに使用しているお客様がいらっしゃったので、今までの使用者の声を載せたいとの要望がありました。「お客様からの声」をpdfで頂き、HPにページを作り掲載しました。
制作ポイント
クッション、アイピロー、ネックピロー、それぞれ使用された方のたくさんの声が届いていたので、コンテンツで分けました。キービジュアル直下にアンカーリンクを設置し、ユーザーが興味のある商品の声を見に行く時間を短縮できるようUIに配慮しました。
3商品の項目背景を色分けしました。商品の色合いに寄せたカラーリングにして、可愛らしさを表現しています。
商品撮影
商品紹介ページ作成の為、商品をお預かりして自社で撮影しました。
写真はプロダクトチームの写真撮影班に協力を仰ぎました。
- アイピローの大きさが分かるように撮影
- 商品の中身が分かるように撮影を工夫
納品
納品時は制作チームとクライアントが同席し、ヒヤリング・サーバー契約、ドメインの取得、デザインの最終確認を行いました。サーバー契約は、サポートで入っていただいたコーダーに実施して頂きました。
納品前チェックシートの作成（社内用）
レイアウト崩れやお問い合わせフォームのテスト、リキャプチャの設置等、やらなければならない項目を洗い出し、今後社内で使用できるスプレットシートを作成しました。
効率よく正確な納品を可能にしました。
クライアントから感謝の言葉。
「素敵なHPを作ってくれてありがとう」喜ばれました。
“ご自身の経験から辛い思いをされている方へ癒しを・・・”という気持ちに寄り添ったHP作成ができたと感じています。実際にクライアントともお会いし、デザインのコンセプトや商品への想いをヒアリングしました。納品時は、「理想のHPに仕上げてくれて嬉しい、素敵なHPを作ってくれてありがとう」との言葉を頂きました。デザイナーとしてのキャリアは3年目くらいでしたが、この仕事をやっていて良かったと久々に思える仕事でした。トラブルもありましたが、そのおかげで社内用のスプレットシートを作成し、今後の業務をより正確に効率よく行うための工夫に繋がりました。ディレクターをサポートしつつ、チームと連携してデザインから実装、納品までに至ったことに誇りを感じています。
