ルシア・ラッシュ

オンライン上で個人の価値観を表現する。Lucia Lashは、まつ毛エクステをはじめとする美容サービスを提供する、小規模な女性経営の企業です。

期間

2023年2月~4月

クライアント

ルシア・ラッシュ

サービス

#

UXデザイン

#

Webデザイン

#

エンドツーエンドの設計・開発

Lucia Lash プロジェクトのバナー

挑戦

口コミが今なおサロン探しを後押しする一方で、今では簡単なウェブ検索もその流れの一部になっています。地域密着のまつげエクステサロンにとって、古いWeb上の存在感は、検索されたその瞬間に見込み客を逃すリスクがありました。来店してもらう前の段階で、機会損失につながりかねない状況でした。

Luciaのオリジナルサロンのウェブサイト
ウェブサイトリニューアルのサイトマップ案
提案されたサイトマップに基づくナビゲーション操作

画像をクリックすると拡大表示されます。 (左)クライアントの既存ウェブサイトは、情報が少なく、古い印象でした。 (中央)現代的な競合サイトとクライアントのニーズを踏まえて提案したサイトマップです。 (右)低忠実度のプロトタイプは、再設計後のサイト全体における提案ナビゲーションを示しています。

プロセス

研究とコンセプト検証

競合調査としてサロンのウェブサイトを分析し、その結果をもとに、2人のデザインチームで初期のサイトマップと低忠実度プロトタイプを作成しました。対象ユーザーである、20代半ばでサロンを頻繁には利用しない女性に対して早期にコンセプトテストを行ったことで、使いやすさの課題を早い段階で把握でき、問題領域を具体的に捉えることができました。彼女のフィードバックにより、Webデザインの品質が持つ重要性が明確になりました。彼女の経験では、スタジオが自社サイトにどれだけ手間をかけているかが、そのスタジオ自体の品質を示す指標になるのです。

ブランド開発

並行して、共同デザイナーがファッション・ビューティーブランドのホームページ参考事例を収集し、クライアントのビジュアルの方向性に合わせました。クライアントとの打ち合わせを通じて、彼女の好みが明確になりました。中立的な色使い、大胆なタイポグラフィ、そしてテキストよりもビジュアルを重視することです。そこから、ファッショナブル、明快、オーガニックという3つのブランドキーワードが導き出されました。私はこれらを4つのスタイルタイルに落とし込み、各自がそれをサイト内で最も情報量の多いページであり、ブランドシステムを文脈の中で示す最適な場であるサービスページのフルページモックアップに適用しました。

デザインの反復

クライアントはモックアップの中で明確な好みを示しましたが、参考として提示したホームページの1つにも再び関心を示したため、そのデザイン言語を取り入れた追加コンセプトを検討しました。彼女は当初の方向性を支持し続けたため、そこからさらに反復を重ね、配色の重み、ビジュアル要素、ロゴ案を洗練していきました。共同デザイナーは、クライアントがハチドリを好むことを織り込みながら、ワードマークと組み合わせたラインアートのアイコンにたどり着きました。その後、さらに14回のビジュアル反復を経て、レスポンシブデザインへ移行しました。

レスポンシブデザインとユーザビリティテスト

ブレークポイントは分担し、私はモバイル、共同デザイナーはデスクトップを担当しました。同時並行で作業を進めるなかで、一部のレイアウト案は別の文脈のほうがより効果的であることが分かりました。サイト全体で互いのデザインを再活用することで、相手の作業を「無駄にする」ことなく進められました。3回の反復を経て高忠実度プロトタイプを完成させ、両ブレークポイントで3名の参加者によるユーザビリティテストを実施。その結果、さらに3回の改善サイクルにつながりました。

Luciaのリブランディングの参考として取り上げた、他の美容系ウェブサイトのホームページ
ルシアさんのビジュアルの好みとブランド刷新のビジョンに着想を得たスタイルタイル
Luciaのリブランディングを定義するワードクラウド
提案されたリブランディングのビジュアルを示すモックアップ
Luciaのリブランディングの参考として取り上げた、他の美容系ウェブサイトのホームページ
Luciaのリブランディングを定義するワードクラウド
ルシアさんのビジュアルの好みとブランド刷新のビジョンに着想を得たスタイルタイル
提案されたリブランディングのビジュアルを示すモックアップ

画像をクリックすると拡大表示されます。 (左上) 類似業界のウェブサイトを、クライアントのリブランディングのインスピレーションとして活用しました。 (右上) クライアントのブランドアイデンティティを表現するキーワード。 (左下) ブランドおよびビジュアルデザインのアイデア出し。 (右下) さまざまなブランディングとビジュアルデザイン要素を取り入れたメインコンテンツページのドラフト。

成果

Webflowで2週間かけてサイトを構築し、デザインからコーディングへの翻訳をすべて独自に担当しました。公開後は、クライアントからのフィードバックを2回の技術的な調整に反映し、ブランドのビジョンに沿った洗練されたレスポンシブサイトとして納品しました。

Create a free website with Framer, the website builder loved by startups, designers and agencies.