LEMON DESIGN

課題と目的

現状ではインスタグラムと口頭紹介のみで集客力が弱い点と、競合との差別化が計れないためクライアントの強みにマッチする案件が増えない点が課題でした。そのため新規サイトを制作することにより、サイト経由でのお問い合わせ件数を増やすことと、ブランディングを重視した名刺代わりのホームページの完成を目指しました。

ターゲット設定・ペルソナ分析

クライアントへのヒヤリングから、メインターゲットを

1. 店舗経営を始めるにあたり内装設計をしてくれる会社を探している方（＝新装）
2. 既存の店舗を改装したい店舗経営者（＝改装）

上記の2タイプに設定しています。両者それぞれのペルソナ分析を行い、ペルソナ心理の深堀りと具体的コンテンツの整理を行いました。

【ペルソナ心理】

1. 顧客に自分たちと同じような飲食店経営者が多いことが分かると、相談しやすいと感じる
2. 施工は長期に渡ることが多いので、分かりやすさに加えクライアントへの信頼感や親しみもwebサイトから得たい
3. 安い買い物ではないため簡単に発注はできないので、気軽に問い合わせがしやすいフォームだと嬉しい
4. クライアントの人柄や、大切にしているコンセプトがしっかり分かるコンテンツやテキストがあると、高い買い物でも安心ができる

【具体コンテンツ】

1. どのような案件を担当してきたのか
2. サービス内容はどのようなものか、どのようなバリエーションがあるのか
3. 相談～引き渡しまでの流れ
4. シンプルでハードルの低い問い合わせフォーム

競合分析

上記ペルソナ分析を踏まえ、7つの参考サイトを分析し、クライアントへの提案事項をまとめていきました。

参考サイトの選択基準は、

1. 同業他社
2. 競合ではないが高価なプロダクトを親しみあるデザインで扱っているサイト
3. ペルソナ像が好みそう且つ万人受けもしているサイト
4. 使用したい雰囲気のフォントや配色が効果的に使われており、且つデザイン性実用性共に高いサイト

としました。

このサイト分析から導いた結果は以下の通りです。

1. コンテンツや装飾が多く賑やかなサイトよりも、シンプルな構造のほうがターゲットユーザーにとってはストレスフリーでアクションを起こしやすい。
2. 新しく店舗を開くターゲットユーザーにとっては依頼自体が不慣れのため、発注フローが見やすく簡潔にまとまっていたり、問い合わせフォームも項目が少なかったりするとハードルが下がり、安心感を与える。
3. 実績や業務内容だけ押し出すのではなく、コンセプトを自分の言葉でしっかり伝えているサイトは、信頼や親しみを感じさせると同時にブランディング効果も期待できる。
4. スクリプト体フォントや手描きイラストは、ユーザーにとって馴染みのないコンテンツにも親しみを与える効果がある。
5. 「押させる」意図が露骨な追従ボタンは抵抗感を生みそうなので避ける。

上記のサイト分析結果をまとめて、これ以降のデザイン・情報設計両方におけるクライアントへのご提案を行いました。

提案事項

「デザインの力でレモンをレモネードに。」というクライアントのキャッチコピーが魅力的なので、そこに込められた思いは視覚的にしっかりと打ち出してブランディングを図るべきだとご提案しました。

建築内装設計以外にもグラフィックやインテリアなど多岐に渡るデザインをされていますが、最もアピールしたい「内装設計デザイン」を目に留まる場所にいくつか表記し、主に何に特化しているのかユーザーにも伝わりやすくすべきと考えました。

デザインコンセプト

既存のクライアントロゴのカラーを踏襲し、テーマカラー「黄色」、ベースカラー「白」、アクセントカラー「紺」としています。

業界共通ともいえる「シンプル」「スタイリッシュ」な雰囲気をベースとして踏襲しつつ、クライアントが大切にしている丁寧で温かみのある仕事への姿勢を表現するために、そして高いお買い物なのでユーザーが安心感と信頼感を抱きやすいように、手描きイラストやスクリプト体フォントをちりばめて全体的に親しみのあるデザインを作りました。

サービスや実績紹介以上にブランディング確立を目的としたサイトなので、文字が多くなることを恐れず、メッセージを込めたコピー文をメインビジュアル直下に置くことにしました。テーマカラーのイエローとスクリプト体フォントのアクセント効果もあり、クライアントの思いをユーザーに印象付けるエリアとなりました。クライアントご自身も気に入ってくださっています。

情報設計

メインターゲット層のインスタグラム利用率が高いため、webサイトもモバイルファーストとしています。

問い合わせ件数を増やすことが目的なので、煩雑でボリュームのあるメールフォームによってユーザーが離脱してしまわないように、問い合わせハードルの低いミニマルなフォームのカスタマイズをご提案しました。

また、サイト閲覧中のストレスを極力発生させないよう、可能な限りスクロールで完結できる作りにしています。

挑戦したこと

js/jQueryが苦手だったので、今後も汎用性が高そうな基本の動き（ハンバーガーメニューのアニメーション、フェードイン、スムーススクロール、チェックボックスと連動した送信ボタン、スライダーなど）は卒業制作中にマスターしておきたいと思い、コーディング時に積極的に実装しています。

クライアントが文を書くのが苦手とのことでしたので、デザインフェーズにおいてライティングの大部分を担当しました。この過程により、クライアントの仕事内容の詳細や大切にされているものへの理解を深めることができました。

デザインの段階からコーディングのしやすさを意識しながら手を動かすことで、後続のコーディングフェーズにかかる期間を予定よりも大幅に減らす（2週間→1週間）ことに成功しました。

サーバーアップ後の実機テストにおいて、ドメインのSPF・DKIM・DMARC設定も対応しました。自分にとってかなり難解な部分ではありましたが、サーバーやメール設定の知識が深まりました。