ビジネス成果を最大限に発揮するPORTFOLIO

制作事例や制作にあたっての思考プロセスをまとめたものとなっております。

Transcript

1. ビジネス成果を 最大限に発揮する PORTFOLIO UI/Web Designer 分析× リサーチ× デザイン
2. Section 01 Profile 私について P.03 Section 02 Survice サービスの特徴 P.07 Section 03 Works 制作実績 P.12 Category UI サーフボードECサイト P.13 Category HP 理容室のホームページ P.26 Category LP 医療脱毛クリニックのLP P.37 Category BANNER 医療脱毛クリニックのLP P.48 Section 04 Flow ご契約の流れ・料金 P.54 Section 03 FAQ よくあるご質問 P.57 Section 03 Contact お問い合わせ P.59 Section 00 CONTENTS
3. Profile Contents Service Works Section01 私について next page 03
4. Section 01 PROFILE Takumi Arai 04 新井 拓海　(あらい たくみ) 宮崎県都城市 出身　千葉県船橋市 在住 名前 出身 略歴 趣味 2015年3月　北海道　陸上自衛隊　真駒内駐屯地　入隊 2021年3月　千葉県　習志野駐屯地　第１空挺団　配属 2024年7月　フリーランスデザイナーとして活動開始 2025年3月　陸上自衛隊　退職 サーフィン、筋トレ、掃除
5. Section 01 SKILLS 05 使用可能ツール、スキル figma Webサイトデザイン、UIデザイン、バナー、その他資料作成 photoshop 写真加工、生成、レタッチ illustrator バナー、名刺、簡単なアイコンデザイン、チラシ作成 HTML 基本的なコーディング、読解 CSS 基本的なコーディング、読解 Wordpress 基本的なサイト構築
6. Section 01 MISSION 課題解決と 使い易さを 追求するデザイン 「アート」と「デザイン」は混同されることがありますが、本質は全く異なるものです。デザイン本来の目的である 「課題解決」を行動理念とし、お客様の現在抱えている課題を共に考え、デザインで解決できればと思います。 06
7. Service Profile Works Flow Section02 サービスの概要 next page 07
8. このようなお悩みをお持ちではありませんか？ デザインを依頼したけど、思っていたイメージと違う 頭ではイメージがあるけど、うまく伝えられない こまめに連絡が途絶えないか不安 価格設定が分からない 08
9. 徹底した から導き出す、 “ ”を ご提案します ユーザーリサーチ 成果につながるデザイン ・迅速かつ、丁寧に対応。「即応態勢」でコミュニケーションコストを局限 ・徹底的にリサーチし、ベネフィットに繋がるデザインをご提案 ・機能性を兼ね備える細部まで整ったデザイン ・先着３社様限定でFVを無料でご提案 09
10. 10 Section 02 SERVICE 01 迅速かつ、丁寧に対応。「即応態勢」でコミュニ ケーションコストを局限 陸上自衛隊での訓練や災害派遣での経験をもとに、お客様の要望を最大限 発揮できるよう速やかに、そして丁寧に「即応態勢」でデザイン制作をス ムーズに進めます。 ⁨ ⁩ 進捗状況及び工程管理の共有 こちらでプロジェクトの進捗状況が分かるもの をご用意しておりますのでご安心ください。ま た、こちらから週３回の状況報告も行います。 ヒアリングシートの活用 契約の際、事前に記入いただくヒアリングシー トや、デザイン修正の際の依頼用のチェックリ ストをご用意しております。 02 徹底的にリ サー チし、 ベネフィットに 繋がるデザ インを ご提案 競合や 事業内容、 現状課題に ついて 徹底的に リサー チします。 マー ケ視点 でのデザインでお客様に 満足して いただけるよう、 リサー チにお いて 手を 抜きま せん。 事 業内容や ター ゲット 層、 競合をリ サーチし、 ヒアリング 内容に 基づいて 要件定義 リ サーチに 基づいて、 複数パターンの 構成を 書 き出して ブラッシ ュアップ
11. 11 Section 02 SERVICE 03 機能性と美しさを両立した、こだわりのデザイン ユーザー視点での操作性や導線を意識し、ブランドイメージや目的に合っ たビジュアルを構築。ただ見た目が良いだけでなく、「しっかり伝わる」 「使いたくなる」そんな実用性を両立したデザインを目指しています。 字間調整を行い、全体バランスを見て、見栄え の良いデザインをします。 各要素間の余白を統一し、見栄えだけでなく、 見やすいデザインへ 04 先着３社様限定でFVを無料でご提案 5営業日以内に、対象のFVを無料でご提案いたします。 まずはデザインの クオリティで判断していただいて、納得していただけましたら、正式なご 依頼をお願いいたします。 提案イメージ
12. Works Service Flow FAQ Section03 制作実績 next page 12
13. UI 13 01 サーフボードECサイトの UI/UX改善 制作区分 自主制作 ツール Figma 制作期間 2週間 参考：ルービックサーフ(https://rubiksurf.com/) 本改善は、ルービックサーフ様の公式見解やサイトとは関係のない、個人の自主制作としての提案です。
14. OVERALLVIEW OVERALLVIEW OVERALLVIEW 14
15. 15 Section 03 WORKS サイト作成にあたり、以下の内容を分析 市場全体像 サーフボードは一般的に店舗で購入する場合が多く、通販での購入は浸透していない傾向にある。 そのため、多くのユーザーはサーフボードの通販サイトに対して、やや不安に感じるという声が散見される。 ・体重や技量によってボードの長さや厚さなどのスペックが人それぞれ異なるため、直接目で確かめたい。 ・初心者で自分にどんなボードが合っているのか分からないから、店員のアドバイスをもとに選びたい。 yahoo知恵袋 自社分析 主にサーフボードを 取り扱っている通 信販 売が 主体の 事業。 「高品質なサーフボードを、 低価格に販 売」を コン セプトとして 挙げている。 ・ 競合 他社の 同一サーフボードを 比較した 結果、 15,400円安く販 売して おり、 コスト 面で カットしている ことが 見 受けられる。 ・ 低価格の 背景として、 大きくは 海外買い 付けが 理由として 挙げられる。 例として、サーフ ィンの 本場 オースト ラリアでは、 商品の 国外持ち出しによ りGST(日本での 消費税)が 免税される 制度がある。 (引用：日本貿易振興機構GST　商品サービス税：オーストラリアよ り) (引用：ルービックサーフ　About Rubik Surf since 2013 より) 他社分析 サーフボード 以外にも、ボードス ポー ツ全般、 他にもア パレルグッ ズを 取り扱っている 事業。サーフ ィンに 関し ても全般的に 幅広く 取り扱って おり、 在庫も 豊富。 ・店舗 受け取りサー ビスを 展開して おり、 在庫がある店舗に直接 受け取りがで きるのが 強み。 ・ユーザーが 過去に購入したボードを店舗で 下取りして 中古販 売して おり、安 価でサーフボードを購入する こと がで きる。 (引用：ムラサキスポーツ SHOPNEWS より) ムラサ キス ポー ツ 現状課題 サーフボードの 商品一 覧への 遷移フ ローが長く、ユーザーにとってスト レスがかかる 恐れ ・ TOP→ブランド一 覧→ボード 詳細→商品一 覧 実際の購入者の レビューが分か り辛く、 本当に購入している人がいるのか分からないという 口コミから、ユー ザーにとって不 信感の 懸念あ り ボードが長さ ごとに 商品が 区分分 けされて おり、 同じ 商品が 何個も 並んでいる 状態のため、ユーザーの 注文ミス を 誘発する 恐れ X(旧Twitter) ルー ビックサーフ
16. Section 03 WORKS 16 分析内容をもとに、ペルソナ設計の実施 坂口 龍太郎 年齢 32歳 職業 飲食店経営 年収 600〜700万円 家族構成 妻(26)、息子(８)の3人構成 住まい 千葉県東金市 休日の過ごし方 犬の散歩、サーフィン 行動パターン ・スマホを見ることが多く、仕事の合間にYoutubeをよく見ている ・毎朝波のチェックのついでに、犬の散歩で近くの海沿いを歩いている ・料理の仕込みのため、朝早く行動することが多い 職務内容 ・オーガニック系ダイニングカフェのオーナー ・食材の仕入れ、調理を担当 ・事務やホール対応は妻に一任 ・アルバイト採用、面接 価値観 ・ 人と 話すのが 好きで、 誰とで も仲良くで きる 。 ・ 自然に 触れ合 うのが 好きで、 都会の 喧騒が 嫌い 。 ・ ボブマー リーを 尊敬している ・ 新しい ものが 好きで ミー ハー な一面 も 暮らし ・ 都内から移住したことによ り、 仲間の 勧めで 去年からサーフ ィンを 始めた 。 ・ 元々、海の近いとこ ろに 住むのが 夢とい うの もあり、海の近くで 店を 経営することに なった ・早朝や 休日は サーフ ィンをすることが多く、 頻度は 週に 1回から3回程度通っている 。 ・ 移住して 日数が 浅く、 あまり土地勘が ない 。 ・ 店が 繁盛して おり、仕事は 忙しい 。 課題 ・ス テッ プアッ プのため 新しい ボー ドを 買いたいが、 身近に 詳しい 人がい ない 。 ・ サーフ ショッ プで ボー ドを 買ってみたいが、 どこが 良い かわからない 。また、 知っている 人がい ない 。 ・ サーフ ィンを せっかく 始めた から、 サーフ ボー ドは 新しくて 良い ものを 選んでみたい 。
17. 17 Section 03 WORKS ユーザー体験の可視化に伴う現状課題の洗い出し 態度 顧客行動 顧客接点 思考 課題感 対応策 認知 ・検索エンジンでのキーワード検索 ・動画サイトでの最新ボード情報 ・google ・yahoo検索 ・youtube ・新しいボードを買いたい ・上手くなりたい ・最新のボードを知りたい ・ブランドを知らない ・ボードのトレンドを知らない ・instagramやXでの認知度向上 情報収集 ・最新ボードのチェック ・自分に合ったボードを確認 ・ブランド一覧 ・有名ブランドが置いてある、良いな ・商品一覧はどこにあるのか ・商品一覧へのページまでが遠い ・売れ筋の商品が分からない ・商品一覧までの遷移を簡略化 検索・閲覧 ・有名ブランドをチェック ・商品 詳細から商品一覧を確認 ・商品 詳細ペー ジ ・商品一覧 ・ボードが合っているのか分からない ・ 他の 通販より 安いから良いか も ・売れ筋の商品が分からない ・商品の 詳細が 専門的過ぎる ・レ ビューがなくて 不安 ・ランキン グ形式で売れ筋を 可視化 ・商品一覧までの遷移を簡略 化 ・ 初心者ユー ザーに 配慮した情報 設計 購入 ・ 欲しかったボードを 購入 ・ 購入ページ ・ 倉庫引渡サー ビスが 安いな ・ 到着が 楽し み ・買 えて よかった ・ 倉庫引渡はどこで 申し 込めば良い か わからなかった ・ 発送方法の 選択方法をボ タン 等で 明記
18. 05 DESIGN 18 Section 03 WORKS デザインフロー 01 要件定義、リサーチ 02 競合比較・分析 03 ラフ案の書き出し 04 ワイヤーフレーム
19. Section 03 WORKS 19 競合・参考サイト一覧 ムラサキスポーツ https://www.murasaki.jp HOKA ONE ONE https://www.hoka.com/jp NIKE https://www.nike.com/jp Amazon https://www.amazon.co.jp
20. Section 03 WORKS 20 デザインルール ベースカラー #FFFFFF/White メインカラー #000000/Black アクセントカラー #FFEE57/Yellow #FF7305/Orange #6681F4/Blue トーンは明るめのブライトトーンを使用し、健康的で華やかな印象にしました。ま た、色相はトライアドで単調になりすぎないよう工夫し、ルービックサーフのコンセ プトである「ルービックキューブ」のようなカラーと「ポップさ」を意識して配色し ました。 欧文書体 Geist サイトコンセプトを汲み取り、幾何学的な書体で、かつ読みやすくシンプルに設計さ れたサンセリフフォントを選定しました。 和文書体 Noto Sans JP サンセリフフォントと親和性の高いゴシック体の可読性の高いフォントを選定しまし た。
21. 改善点について 01 競合優位性でもある価格の安さと、数値の明確化 スライドビューから、固定ページに変更し、ユーザーの目に留まるよう演出。 また、セール品目の割引率を表示させることにより、お買い得であることをア ピール。 02 配色を増やし、余白やレイアウトを見直してより ポップな印象に ルービックサーフのコンセプトである、「いつもの波乗りをもっと面白く、 もっとポップに、もっとアグレッシブに！！」から着想を得て、ルービック キューブを想起させるような配色、レイアウトに変更しました。 02 ユーザーが最短距離で商品にアクセスできるよう 情報設計を改善 従来の商品一覧までの遷移は「ブランド一覧」から「商品詳細ページ」を介し て遷移していたため、新着商品を表示するようして、アクセスの容易さを追 求。 Before After Section 03 WORKS 21
22. After Section 03 WORKS 22 Before POINT01 商品詳細一覧の一番下までスクロールして、やっと商品一覧のページへ辿り着く仕様。 このため、ユーザーは商品の詳細をわざわざ見てから商品の在庫を確認しなければならない。 POINT02 商品の区分分けが長さごとになっており、なおかつ同じ種類のボードが並べられているため、 ユーザーの誤注文を誘発する恐れがある。 POINT01 ブランド一覧から商品一覧に遷移するよう情報設計を見直し。ユーザーの誤注文を防ぐため、 ボードごとの区分分けにし、スムーズに目的の商品に辿り着けるよう改善。 POINT02 ページ滞在時間を増やし購入に誘導する意図として、レコメンド機能を追加し、直近で閲覧し た商品をページ下部に記載。 1 2 1 2
23. After Section 03 WORKS 23 Before POINT01 ボタンアイコンが背景と同色のため、どこまでの範囲がボタンの領域なのか分かり辛くなって おり、やや視認性に欠けるデザイン。 POINT02 レビューが別ページ(ABOUTの一番下の項目)に記載されており、商品とリンクしておらず実際 に買った人の声が分かり辛い。 POINT01 商品ページでボードサイズを選択出来るよう変更し、ボタンを目立つ配色に改善。また、在庫 数を表示することより、購入意欲をアップさせる意図。 POINT02 購入者がいるかどうか分からないという口コミから、購入者のレビューを商品ページに記載 し、ユーザーに対し安心感を与えるよう設計。 1 2 1 2
24. After Section 03 WORKS 24 Before POINT01 ボードサイズやスペックがアバウトで、初心者や知識が浅い人に対しては難しい内容となって しまっており、購入者層が限定されてしまう恐れがある。 POINT01 ボードサイズによって、それぞれの厚さや浮力を算出できるサイズチャートを設計し、ボード 選びの判断基準である長さやボリュームを見やすく改善。 POINT02 ボードスペックによって合うシーンはそれぞれ異なるため、初心者に配慮しボードのスペック をグラフチャート表示で記載。自分に合ったボードをより選びやすいよう配慮。 1 1 2
25. After Section 03 WORKS 25 Before POINT01 ボタンアイコンが背景と同色のため、どこまでの範囲がボタンの領域なのか分かり辛くなって おり、やや視認性に欠けるデザイン。また、カテゴリ表示がないため誤注文の恐れがある。 POINT02 ルービックサーフが行っている倉庫引き渡しサービスがどこで手続きできるか分からないた め、ユーザーが混乱してしまう。 POINT01 ボタンを目立つ配色に改善し、ブランド表示、個数、サイズを別の行に記載し注文内容を分か りやすいように改善。 POINT02 配送方法に指定用のボタンを配置し、倉庫引き渡しサービスを受けたいユーザーに対して、ス ムーズに誘導できるよう改善。 1 2 1 2
26. 26 02 理容室のWebサイト 制作区分 自主制作 ツール Figma、photoshop 制作期間 2週間 参考：マコトヘアー(https://www.makoto-hair.com/) 本制作は、マコトヘアー様の公式見解やサイトとは関係のない、個人の自主制作としての提案です。
27. 27 OVERALLVIEW OVERALLVIEW OVERALLVIEW
28. 28 Section 03 WORKS サイト作成にあたり、以下の内容を分析 市場全体像 美容室業界の市場規模は2021年からほぼ横ばいとなっており、2024年の規模は13,543億円である。一方、理容 室の業回規模は2,762億円、美容室業界との規模の差はありつつも、こちらも同様横ばいの結果となっている。 ・バーバースタイルの特徴としてサイドを短く刈り上げる為、他のスタイルより利用回数が多い傾向にある。 ・バーバースタイルは2010年から現在にかけて広まり今でも根強い人気のあるスタイルの一つである。 yahoo知恵袋 (引用：ホットペッパー 美容マーケットの今、知っていますか？数字で見る美容業界 より) 自社分析 主に ヘアー カットを 専門としている理容室。 競合他社の業 務体 系と 異なる 点は、 女性や子供、 シニア層を 取り 入 れており、 オール ジャンルのスタイルを 再現で きるのが強 み。ま た、サー ビスの 価格帯も他と 比較して 安めに 設 定しており、 「気 軽に 安く 通える 」を 売りにしている。 ・ ベンチマー クの 価格( カット コース： ¥7,700) マコト ヘアー( カット コース :¥2,600 ) ・ 老若男女問わず利用で きるが、 実際の利用 者の オー ダーはバーバースタイルが多い傾向にある goo gle goo gle 他社分析 バーバースタイルに特 化している ため、ター ゲットを 男性に 絞って 事業 展開をしている。知 名度も 高く、 主要都 市に 店舗を 構えており、 海外では シンガポールと アメリカに 事業を 拡大している。 ・ 技術力は 高く 評価されており、バーバースタイルでの知 名度は 圧倒的に 高い ・ SNSやYo utubeでの 宣伝を 積極的に 行っている ため、 どのよ うなスタイルなのか分かり やすい (引用：MR.BROTHERS CUT CLUB) insta gra m 現 状課題 ・ FVの 訴求が 弱く、 何をしているサイトが分かり づらい 印象を 与える。 ・ メニュー 表の 注意書きが 長く、 追加料金等の 記載を 見落としてしまい、 認識の 齟齬が 生ま れる リス ク
29. Section 03 WORKS 29 分析内容をもとに、ペルソナ設計の実施 古賀　壮一 年齢 45歳 職業 インフラ設備管理 年収 400〜500万円 家族構成 妻(48)、娘(19)の3人構成 住まい 千葉県船橋市 休日の過ごし方 競馬、ジョギング 行動パターン ・仕事は車出勤で、電車を使うことがあまりない 職務内容 ・シフト制(日勤、夜勤) ・設備点検、修理対応 ・レール交換、軌道検測 ・鉄道系のインフラ整備のため、夜勤が多い 価値観 ・娘にあまり懐かれていない ・美意識はそれなりにはあるが時間をかける暇があまりない ・健康診断に引っかかってから、ダイエットを始めた 暮らし ・ 工業系の 高校を 卒業してから 地元で 就職して おり、 休日は 近くの 中山競馬場で よく競馬を 見てい る ・仕事の 不規則さ故に 生活習慣が 乱れが ちな 生活を 送って おり、 ジョギン グを始めたりとダイエットを意 識 ・ ヘル メットを 被る仕事が多いので、 短髪の ヘアスタイルが多 く、 1000円カットに 行きが ち 課題 ・時間はあまりかけた くないが、 ヘアスタイルに もこ だわりたい ・美 容室に 行くような 柄ではないが、 おしゃれな ヘアスタイルに して みたい
30. 30 Section 03 WORKS ユーザー体験の可視化に伴う現状課題の洗い出し 態度 顧客行動 顧客接点 思考 課題感 対応策 認知 ・検索エンジンでのキーワード検索 ・google ・yahoo検索 ・youtube ・髪を切りたい ・イケオジになってみたい ・時間がない ・あまりお金をかけられない ・instagramやXでの認知度向上 情報収集 ・付近の男性向け理容室を探す ・ホームページ ・ここ良さそうかも ・イメチェンしてみたい ・客層はどうなのだろうか ・場違いだったらどうしよう ・ターゲット層の明確化 ・訴求内容のアピール 閲覧 ・サロンのメニュー一覧をチェック ・場所をチェック ・メニュー ・アクセス ・ 他の理容室より 安い な ・近 くて 自分で も通いやすいか も ・ 追加サー ビスが 分かり 辛かった ・メニュー一覧の 体系を 簡略化 ・金 額が 変動す るサー ビスは 分けて 表示 予約 ・ 予約フォームサイトに 遷移 ・ 予約ボタン ・ とりあ えず予約してみよ う ・髪を切 るのが 楽しみ ・ 注意書きが 長くて 分かり 辛かった ・ 記載内容の 簡略化
31. Section 03 WORKS 31 競合・参考サイト一覧 MR.BROTHERS CUT CLUB http://mr-brothers-cutclub.com/ THE FADE https://the-fade.jp/ MILLOR https://www.millor.jp/ CADENZA+ https://cadenza-salon.com/
32. Section 03 WORKS 32 デザインルール ベースカラー #E9E8E6/Gray メインカラー #3A5768/Navy アクセントカラー #000000/Black #E9E1CF/Ivory ベースカラーに明度の高いグレーを選定し、清潔感を与えつつ、メインカラーのネイ ビーは、信頼、誠実、知性、上品さといった様々な印象を与える色であり、ビジネ ス、フォーマル、カジュアルなど、様々なシーンで活躍する万能な色のため、老若男 女問わず通える理容室のイメージに合うと思い選定しました。 欧文書体 Futura 世間の連想する理容室の少し古臭いイメージを払拭したいという思いから、モダンで シンプルなこのフォントを選定しました。 和文書体 FOT-筑紫B丸ゴシック Std 本文から 見出しまで、 幅広い 用途で 利用で きる オー ソドックスなフォントを選定しま した。
33. 改善点について 01 FVにキャッチコピーを追加し、サイトの目的を明 確化 店名である「Makoto hair」を強調し、取り入れたい客層に対してのキャッチ コピーっを追加し、どのようなサイトなのかをアピール。 02 余白やレイアウト、文字サイズを見直して、可読 性を追求 改善前は店名のフォントが小さく、どんなサイトか分からずユーザーが混乱し てしまう恐れがあるため、調整。また、FVのスライドがデバイスのvhを大きく 超えており、アンバランスな表示になっていたため改善。 03 ユーザーに対して予約をスムーズに出来るよう情 報設計に配慮 電話番号と、予約フォーム遷移先のボタンを配置し、CTAによるユーザーのエ ンゲージメントを向上させる意図。 Before After S ecti on 03 WORKS 33
34. Section 03 WORKS 34 Before POINT01 店舗外のイメージのみで、店内のイメージが湧き辛い印象となっており、どのような店舗なの かユーザーが判断し辛い印象を受ける。 POINT02 画面サイズと比較して、テキストが小さく文字が見辛い印象を受けてしまう。 After POINT01 店内のイメージを背景に貼り付け、どのような店舗なのか分かりやすいように改善。 POINT02 文字サイズを調整し、可読性の高い配色に改善しCTAでユーザーの興味を惹きつける意図。 1 1 2 2
35. Section 03 WORKS 35 Before POINT メニューの注意書きが長く、追加料金やサービスの見落としの恐れがある。また、似たような 記載を繰り返しているため分かり辛い。 After POINT メニュー表をそれぞれ価格変動がある場合のパターンをサービスのカテゴリごとに分割し、明 確化。オーダーの混乱を防止するとともに、メニュー表を見やすく改善。
36. Section 03 WORKS 36 Before POINT 予約の際の注意書きが全て中央揃えになっており、可読性の低いレイアウトになっているた め、予約の際の注意事項を見落としてしまう恐れがある。 After POINT 予約フォームへのCTAを一番上に配置し、アクセスを記載することによりユーザーがスムーズ に来店できるよう情報設計を配慮。また、予約時の注意事項は重要なものだけ抽出し、テキス トを左揃えに統一させ、可読性をの向上とデザインとしてのまとまりを持たせる意図。
37. 37 03 医療脱毛クリニックの LPリニューアル 制作区分 自主制作 ツール Figma、illustrator 制作期間 2週間 参考：ぜぜ駅前ひふ科・形成外科クリニック(https://zeze-clinic.com/medical/%E5%8C%BB%E7%99%82%E8%84%B1%E6%AF%9B/) 本改善は、ぜぜ駅前ひふ科・形成外科クリニック様の公式見解やサイトとは関係のない、個人の自主制作としての提案です。
38. OVERALLVIEW OVERALLVIEW OVERALLVIEW 38
39. 39 Section 03 WORKS サイト作成にあたり、以下の内容を分析 市場全体像 近年脱毛サロンの倒産が相次いでおり、2024年12月時点で過去最多を更新している。それにより、近年は医療 機関が施術する安心感と高い脱毛効果から、美容クリニックも医療脱毛に参入している傾向にある。 ・競合が多く、業界内での競争は激化している状況 ・近年の大手の経営破綻から、信用が低下したことにより事業が困難になるケースもある (引用：帝国データバンク 「脱毛サロンの倒産動向(2024年1-11月) より) 自社分析 皮膚科が 母体の 膳所駅付近にある 開業医のクリニック。その 背景から医療脱毛のサー ビス だけでなく、美容 皮膚 科としてのサー ビスを 展開しており、医療脱毛 以外にも 豊富なサー ビスを 展開している。 ・ 皮膚科由来の医療脱毛 後の アフターケ アがで きるのが 強み ・医療脱毛 だけでなく、 皮膚疾患や美容 形成にお けるサー ビスがあり、競合 他社と 比較してサー ビスが多い ぜぜ駅前ひふ科・ 形成外科クリニック 他社分析 創業1 5周年の全 国展開している美容 系クリニック。 男女問わず医療脱毛サー ビスを 展開しており、 価格設定やプ ランな ど、 要望に合 わせて多 岐の施術 プランがある。 ・ 乗り 換え割や紹介割引な どのサー ビスを 展開することにより、 追加顧客の参入に 力を入れている。 ・全 国展開のた め、 知名度が高く 比較的長い機関事業を 継続しており信用 度も高い。 リ ゼクリニック 現状 課題 皮膚科の医療脱毛とい う競合 他社にはない事業体 系であり、 差別化を 図るた め訴求を 強くする 必要性がある。 ・ FVでの 訴求が 弱い ・競合との 差別化 (皮膚科ならではのケ アやサー ビスを 訴求) ・ 付近に競合大手が 所在していないことから、 通い やす さを アピー ル google ぜぜ駅前ひふ科・ 形成外科クリニック
40. Section 03 WORKS 40 分析内容をもとに、ペルソナ設計の実施 吉田　みのり 年齢 20歳 職業 短期大学生(滋賀短期大学) 年収 100万円未満 家族構成 一人暮らし 住まい 滋賀県大津市 休日の過ごし方 旅行、スイーツ巡り 行動パターン ・大津駅近辺にアパートを借りており、大学は電車で通学している。 ・SNSは⁨ ⁩ 毎日チェックしている 職務内容 ・生活学科所属 ・製菓・製パンコース(2年次) 価値観 ・目標や目的を達成するためには努力を惜しまないタイプ ・美容に気を遣っており、最近友達が始めた医療脱毛に興味を持っている 暮らし ・ 週に ３回程度カフェでア ルバイトをしており、生活 費は 仕送り とバイト 代で 賄っている。 ・ 金銭に 余裕のある 家庭で 育ち、 仕送り もある ので 不自由ない学生生活を 送っている 。 課題 ・脱毛をして みたいが、いまい ち効果が 分からな い ・ ちゃんと脱毛 効果が ある のか不安 ・ 有名な脱毛ク リニックが近 くにない から、 どこに通 えばいい か分からない
41. 41 Section 03 WORKS ユーザー体験の可視化に伴う現状課題の洗い出し 態度 顧客行動 顧客接点 思考 課題感 対応策 認知 ・検索エンジンでのキーワード検索 ・google ・yahoo検索 ・脱毛してみたい ・近くに脱毛クリニックってあるのかな ・あまりお金をかけられない ・近くに有名クリニックがない ・instagramやXでの認知度向上 情報収集 ・大津近辺のクリニックを探す ・医療脱毛サービスの比較 ・google ・yahoo検索 ・エステ脱毛より医療の方が効果高いな ・全身脱毛のコースもあるんだ ・値段ってどうなんだろう ・効果ってあるのかな ・医療とエステの効果の違いをアピール 閲覧 ・脱毛プランを見る ・料金、効果を見る ・場所を見る ・LP ・ 皮膚科がやってるん だ ・近くて 自分でも 通いや すいか も ・全身だとやっ ぱり高いな ・ レー ザーって 痛そう ・どんなプランが 良いのかな ・ 割引プランと 通常プランの比較を 明示 ・ 人気プランのアピール カウン セリン グ ・ カウン セリン グの 予約 ・ 予約ボタン ・ カウン セリン グを 受けて 話を 聞こう ・ 自分に 合ったプランが見 つけたい ・ カウン セリン グの 流れが 分かり 辛い ・ フローの 明確化
42. Section 03 WORKS 42 競合・参考サイト一覧 リゼクリニック https://www.rizeclinic.com/ ルシアクリニック https://lucia-c.com/ 東京中央美容外科 https://aoki-tsuyoshi.com/tcb-datsumou/ エミナルクリニック https://eminal-clinic.jp/
43. Section 03 WORKS 43 デザインルール ベースカラー #FFFFFF/White メインカラー gradation/Pink アクセントカラー #000000/Black #ED5B9E/Pink ベースカラーはクリニックに必要不可欠な要素である清潔感を演出。メインカラーで あるピンクで女性らしさを表現し、また、多幸感や安らぎを連想させ、心の安らぎを 促し安全性をアピールする意図があります。 欧文書体 Avenir モダンな印象を与えつつも、柔らかさや優しい印象を与えるフォントを選定しまし た。 和文書体 りょうゴシック PlusN サイトの特徴から、サービスを訴求する説明文が多くなるため、文字の太さが変わっ ても全体の幅が変わらず、長文でも読みやすいフォントを選定しました。
44. 改善点について 01 キャッチコピーをより競合優位性の高いものにア ピール 従来FVでは具体性が低く、訴求が弱い印象から改善。形成外科医が常駐してい るという権威性をアピールしつつ、皮膚科であるという安心感を持たせる意図 を込めて制作。 02 配色を明るめに変更し、クリニックの清潔でクリ アなイメージを演出 従来のデザインはクリニックのアイコンに似た色でトンマナを選定していたた め、クリニックの印象とはややかけ離れたくすんだ配色になっていたため、女 性的で明るいトーンに配色を改善。 02 価格表の具体的なプランや割引の表示 従来のFVのプラン表は平日料金にも関わらず、注意書きの記載がない。そのた め、契約率の高い人気プランをFVに表示し、どのくらいお得なのかをパーセン テージで表示し、お得さをアピール。 Before After S ecti on 03 WORKS 44
45. Section 03 WORKS 45 デザイン意図(FV) POINT 本改善はターゲット層を女性に 絞っており、その背景としてその 他美容に関するサービスの多さ から、FVの写真に女性を選定。 POINT 形成外科医の常駐をアピール し、競合優位性の強調を図る意 図。 POINT 背景カラーを目立つピンクのグ ラデーションを選定し、脱毛プ ランのアピールをするととも に、女性らしいイメージを演 出。 POINT テキストをアンダーラインで強 調し、脱毛効果と権威性をア ピール。 POINT バンドワゴン効果を活用し、契 約意欲の促進。 POINT 平日プランでの料金が、通常プ ランと比較して安く設定されて いるため、お得感を出しつつ人 気プランへの興味を惹きつける 意図。 PATTERN:A PATTERN:B
46. Section 03 WORKS 46 デザイン意図(各セクション) POINT おすすめをランキング化し、ユー ザーに対して利用率の高いプランと いう安心感を持たせる意図。また、 アイコンを目立つ配色に変更し、可 読性の改善をしました。 POINT 医療脱毛サービスは比較的高価であ るため、情報の優先順位を高く設定 し、テキストを目立たせるよう工 夫。また、脱毛範囲の多さをアピー ルするため、脱毛箇所を数字で記 載。 POINT 従来サイトでは、プランの記載が長 く、ページ自体のボリュームを多く 占有していたため、もっと詳しく見 たい人向けに別ページに遷移させる よう配慮。 POINT エステ脱毛との差別化を図るため、 違いを視覚的に表示させ、購買意欲 を向上させる狙い。 POINT 医療脱毛の 特徴について 強調するた め、目立つ配色を 選定。
47. Section 03 WORKS 47 デザイン意図(各セクション) POINT 従来のテキストのみのカウンセリン グフローからイメージ付きで横スラ イドするフローに改善 POINT テキストの記載量が多く、縦のボ リュームが大きかったため、横スラ イドで閲覧できるように POINT 大手の競合他社が付近に所在してい ないことから、立地の良さをアピー ルし、新規顧客を獲得する狙い。 POINT 一連の流れを知ってもらった後に、 スムーズにカウンセリングの予約で きるようCTAを配置。 POINT 駅名とアクセスの良さをアンダーラ インを用いて強調。
48. BANNER 48 04 短期大学のバナー リニューアル 制作区分 自主制作 ツール Figma、photoshop 制作期間 1週間 参考：四條畷短期大学(https://jc.shijonawate-gakuen.ac.jp/) 本改善は、四條畷短期大学様の公式見解やサイトとは関係のない、個人の自主制作としての提案です。
49. 49 Section 03 WORKS サイト作成にあたり、以下の内容を分析 市場全体像 短期大学（短大）は2〜3年制の高等教育機関であり、主に高校卒業後の女性が進学するケースが多く、全学生 の約90％以上が女性を占める。教育分野は、保育・幼児教育、看護、栄養、ビジネス・観光・語学など実務的 な分野が中心j Y 学生数の減少：1990年代にピークを迎えたが、現在は少子化・大学進学率の上昇により減少傾向j Y 学校数の減少：ピーク時の600校以上から現在は約300校前後に減少j Y 男女比の偏り：女性中心であることが変化せず、男子学生の取り込みは限定的。 自社分析 大阪府に所在する短期大学。1926年創立、1964年大学設置。大学の略称はなわたん。ライフデザイン科と保育 学科の２つの学科から履修が可能で、高い就職率を強みにしている。 ・就職率について：ライフデザイン科98%、保育学科100% ・取得できる資格：ライフデザイン学科38、保育学科11 ・教員などのキャリアを目指す学生向けに編入学サポートを行っている 四條畷短期大学ライフデザイン 総合学科 四條畷短期大学保育学科 他社分析 東京都稲城市に所在する2年制の短期大学。学科は保育学科となって おり実 習は1年 次から 始まり、 付属のこ まざ わ幼 稚園や近隣の保育 施設での実 践的な 経験を 通じて、 乳幼児 一人ひとりの 成長を 支援する 力を養 う。2年 次に は3 週間の 「責任実 習」があり、保育 者としての実 践力を 身につけら れるのが強み。 駒沢女子短期大学 現 状課題 ・キャッチコピーに対して、人物の服が白ベースのため、可読性が低くなっている。 ・記載されている情報の関連付けが低く、結果何を伝えたいのか分からない ・キャッチコピーを希望に溢れた学生に向け、明るい未来に対する憧れを目指すようなニュアンスで訴求 四條畷短期大学 バナー
50. Section 03 WORKS 50 分析内容をもとに、ペルソナ設計の実施 羽田　加奈子 年齢 18歳 職業 学生 年収 100万円未満 家族構成 父(51)、母(47)、妹(12) 住まい 大阪府大阪市 休日の過ごし方 音楽鑑賞、寝ること 行動パターン ・受験シーズンのため、課外は学習塾に通っている。 ・友達が多く、塾も友達が多いところを選んでおり、塾帰りも友達と過ごすことが多い。 ・進路に悩んでおり、受験校を探しているがやりたいことが見つからないでいる 職務内容 ・高校３年性 ・帰宅部 価値観 ・主体性はないが、周りに合わせるのが得意なタイプ。 ・特にやりたいことがあるわけではないが、将来は堅実に安定した職業に就きたいと思っている。 暮らし ・ 週に 5回学習塾に通っている。 ・ 休日は友達と過ごすことが多く、 仲の 良い メン バーで よく 大阪市内で 遊んでいる。 課題 ・やりたいことが見つからなくて、進路を 決めるのに悩んでいる。 ・やりたいことは 無いが、就職は堅実に 考えたい。 ・ 良い 大学が見つからない
51. Section 03 WORKS 51 Before After
52. Section 03 WORKS 52 デザイン意図(Aパターン) 01 キャッチコピーを改善しターゲットを明確化 「編入学で大学卒業」は、短大卒業後に大学への編入を目指す学生への訴求を 強調し、「あなたの夢を叶える」「なわたんの編入学サポート」といったコ ピーで、感情に訴えかけ、自分の未来を具体的に想像しやすくしています。 02 視認性を重視しインパクトのある配色へ 青系の背景色は信頼感・誠実さを表し、安心感を演出。赤・ピンク系の文字は 注目を集め、感情に訴える要素（夢・サポート）を強調しました。 03 具体的な数値情報を提示し、サポートの手厚さを アピール 「 30の指 定校」「 58の学 部か ら選べる」な ど、 視覚的に も印象に 残りやすい 数 字を強調する ことで、 選択肢の 多さ・信頼 性を 伝える 意図。
53. Section 03 WORKS 53 デザイン意図(Bパターン) 01 資格、就職に強い短大としてアピール 「資格に強い短大。」というキャッチコピーで、学歴よりも「実務力」や「資 格取得」に価値を置く受験生のニーズに訴求し、「49の資格が取れる」「就職 率100％」といった具体的な数値を用いて信頼性と説得力を強化。 02 視覚的効果による訴求 赤・ピンク系の強調色は、「資格」「100％」などの重要情報を目立たせるた めに使用し、対照的に青・白の背景は、安心感と信頼を演出し、読みやすさを 確保する意図。また、「詳しくはこちら」ボタンをオレンジ色で目立たせ、閲 覧者の行動（クリック）を促す設計にしました。 03 ターゲットを意識した人物写真の選定 明るく 前向きな 印象の 若い 女性と 桜の背景で、「 春＝入学 シーズン」や「 新し い スター ト」の イメージを 想起させる意図。
54. Flow Works FAQ Contact Section04 ご契約の流れ・料金 next page 54
55. Section 04 FLOW 55 ご提案の流れ お問い合わせ STEP 01 各種コミュニケーションツールに て、お気軽にご相談ください。 ヒアリング STEP 02 事前に記入していただいたヒアリ ングシートをもとに、最適なデザ インの方向性を検討します。 お見積もり STEP 03 5営業日以内に希望デザインのFV の提示及び、こちらで算出したお 見積もりを提示します。 ご契約 STEP 04 提案内容に納得していただけまし たら、契約を締結し、本制作に取 り掛かります。
56. Section 04 FLOW 56 料金設定 WEBサイトデザイン制作 ホームページ / コーポレートサイト / 採用サイト / ECサイト　etc. 3社様限定キャンペーン TOPページ ¥100,000 〜 / ページ ¥50,000 〜 / ページ 下層ページ ¥50,000 〜 / ページ ¥25,000 〜 / ページ LPデザイン制作 コーポレートLP / 採用LP / 集客用LP　etc. 3社様限定キャンペーン TOPページ ¥150,000 〜 / ページ ¥120,000 〜 / ページ バナー制作 ホームページ用バナー / WEB広告用バナー　etc. ¥3,000 〜 / 枚
57. FAQ Works Contact Contents Section05 よくあるご質問 next page 57
58. Section 05 FAQ 58 よくあるご質問 Q 制作実績が少ないようですが、依頼を任せても大丈夫なのでしょうか？ A 実績は記載の通り多くはございませんが、お客様にご満足いただけるよう真摯に対応させていただきます。まずは 無料で提案イメージやサンプルをご覧いただき、信頼に足りうる制作物と判断して頂いた場合は、正式にご依頼い ただければと思います。心よりお待ちしております。 Q デザイン修正は有料でしょうか？ A お客様にご安心いただけるよう、デザイン完成後も大幅な変更を除き、修正は無料で誠実に対応いたします。 Q 画像素材の用意やテキストの作成は可能でしょうか？ A 基本的には、お客様にご 用意いただいた 画像や テキストを 使用いたしますが、ご 希望に応 じて 写真 素材のご提案 や、 有料にて テキスト作成のサ ポー トも 可能です。
59. Contact FAQ Contents Profile Section06 お問い合わせ next page 59
60. Section 06 CONTACT 60 最後に 最後までご覧いただき、ありがとうございました。 ご相談・お見積もりは無料です。どうぞお気軽にお問い合わせください。 gmail X(旧twitter) instagram