いわいサイクル様 公式Webサイト 制作過程

サイクルショップのWebサイト制作における設計書です。現状の課題を解決するため、ユーザーが欲しい情報に迷わず辿り着ける動線設計を重視して作成しました。

Transcript

1. いわいサイクル様 Webサイト制作 担当範囲： 企画 / 設計 / デザイン 制作期間： 2025年8月~10月(約2ヶ月) 使用ツール： Notion / Figma / Photoshop
2. 目次 01 プロジェクトの背景と現状分析 02 戦略とユーザー設計 03 サイト構造とビジュアル設計 04 運用・最適化戦略 05 成果と振り返り
3. 01 プロジェクトの 背景と現状分析 1. 要件定義 2. 市場調査 3. 現場調査 4. 周辺競合店舗との比較・強み 5. 課題抽出
4. 1. 要件定義 クライアント概要 1985年創業。福岡市南区横手エリアでで40年以上の歴史を持つ 地域密着型の自転車店。 Google口コミ「4.9」という圧倒的な 顧客満足度を誇り、伝統的な高い技術力と、PayPay導入などの 現代的な利便性を兼ね備えた「街の頼れる自転車屋」である。 依頼内容 新規およびリピート顧客の来店促進。 ネット購入車のトラブル やメンテナンス不足に悩むユーザーに対し、「ここなら安心・ 安全」という確信を提供ししたい。
5. 1. 要件定義 クライアントの想い 社会貢献・教育：整備不良による事故を防ぐため、適切な点検 の重要性を広げたい。 信頼の可視化：地域No.1クラスの「Google口コミ」の戦略的 アピールしたい。 コミュニティ： 「学習利用も可能なキッズスペース」の認知向 上。子連れの親御さんが気兼ねなく立ち寄れる環境を知ってほ しい。 ユニバーサル： 高齢者にも優しく、 SNSを使わない層にも、 検索から電話や来店へ繋がる導線を作りたい。 利便性の訴求：レンタサイクルや明朗な修理価格を整理して伝 えたい。
6. 地形 福岡市内は比較的平坦で自転車利用が非常に盛ん（平成29年の 分担率12.2%）。横手は全域が極端に坂だらけではないが、場 所によっては高低差があるエリア。 規律性 福岡県では自転車保険の加入が義務化されている。全世代にお いて「安全・点検」への関心が潜在的に高いエリア。 競合状況 周辺には大型量販店や他店もあるが、「いわいサイクル」は地 域密着型の高いレビューを維持しており、Instagram投稿で 「顔が見える安心感」で差別化できている。 2. 市場調査
7. 3. 現場調査 サービス・技術面 パンク修理の依頼に対し、根本原因（タイヤの劣化や空気圧不 足）を的確に診断している。 格安ネット通販車との違いが明確な、安全基準を満たした車体 を取り扱っている。 店舗環境・UX（ユーザー体験) 住宅街にあり、地域住民がふらっと立ち寄れる入店のしやすさ。 現金・PayPay割引など、ユーザーの利便性と家計への配慮が ある。 ラジオが流れる落ち着いた空間。修理を待つ間のコミュニケー ション。
8. 4. 周辺競合店舗との比較・強み 比較項目 大手サイクルショップ (量販店/チェーン) 老舗個人店 A (近隣・小規模) スポーツバイク専門店B (大橋方面など) いわいサイクル (自社) 主なターゲット 広域のファミリー層 近隣の常連高齢者 自転車愛好家・競技者 全世代 (学生・主婦・高齢者) 得意なサービス 既製品の販売・ マニュアル修理 昔ながらのパンク修理 高度なカスタマイズ・ 調整 原因究明型の修理・ 予防点検 修理のスタンス 効率重視 (持ち込みは断ることも) 経験則による修理 性能向上のためのチュー ニング 「安全教育」重視 (ネット車も歓迎) 支払い・利便性 各種決済対応 現金のみが多い 各種決済対応 PayPay/クレカ/ 現金割引あり 心理的障壁 普通 (店員により差がある) 高い (入りにくい・職人気質) 高い (初心者は気後れする) 低い (キッズスペースあり) ネット上の信頼 平均的 (3.0〜3.5程度) 情報なし (HPもない) 高い (コアなファンが多い) 極めて高い (Google口コミ 4.9)
9. 5. 課題抽出 現状の課題 Instagramでは「日常の断片」は見えても、「メニュー・料 金・手順」という実利的な情報がストックされていない。 店主の「安全へのこだわり」や「高い技術力」が、Web上で 「証拠」として提示されていない。 「学習もできるキッズスペース」や「BGMが流れる心地よさ」 など、競合他社にはない店内体験が認知されていない。 解決したいこと 新規来店の促進 1. 信頼と安心の可視化 2. 情報の透明化 3. 地域貢献と安全教育の促進
10. 02 戦略と ユーザー設計 1. 戦略 2. ターゲット設計 3. ペルソナ 4. カスタマージャーニーマップ
11. 1. 戦略 制作の目的 店舗の親しみやすい雰囲気と、充実したサービス・在庫情報を 可視化し、「Webで調べて、安心して実店舗へ足を運んでもら う」導線を作ること。 強みの最大化 高評価を得ている「Google口コミ」の信頼性をWebサイトでも 証明し、新規顧客の安心感に繋げる。 コストパフォーマンスの訴求 確かな技術を「適正価格（地域最安値圏）」で提供しているこ とを伝え、競合店との差別化を図る。 コンセプト 「買って終わり」じゃない、「ずっと安心」を。 〜福岡の街を走る、すべての人の伴走者〜
12. 2. ターゲット設計 ターゲット層 福岡市内・近郊に住む幅広い層 → 学生〜買い物利用のシニアまで ニーズ 「ネットで評判の良い店を探している」 「今すぐ修理が必要だが、いくらかかるか不安」 「初めてのスポーツバイクを、信頼できるプロから買いたい」 検索キーワード 福岡市 自転車 / 自転車通勤 / 自転車 修理 / レンタル自転車
13. 3. ペルソナ 修理代金が不安な大学生 名前：佐藤 健太(20歳) 属性：福岡市内の大学に通う一人暮らし。通学・バイトの移動 はすべて自転車。 お悩み：通学中にタイヤがパンク。 「自転車屋は高圧的なイメージがあって入りにくい」 「いくらかかるか分からないのが怖い」と感じている。 「急な出費は避けたい。でも明日も自転車に乗る」 スマホで「福岡市 自転車 修理 安い」と検索。
14. 4. カスタマージャーニーマップ
15. 03 サイト構造と ビジュアル設計 1. サイトマップ 2. ワイヤーフレーム 3. デザイン 4. 情報設計&UX設計
16. 1. サイトマップ
17. 2. ワイヤーフレーム
18. 3. デザイン デザインコンセプト 街に馴染む、レトロ・モダン カラーパレット メインカラー(トマトレッド) 1985年創業の歴史への敬意と、活気あるエネルギッシュな印象。 マスタード・セージグリーン 自然や街並みに溶け込む「安心感」と「柔らかさ」を補足。 ベース(アイボリー) 懐かしさを演出するレトロな質感を表現。 タイポグラフィ Kaisei Tokumin： 伝統的な活版印刷のような温かみと、モダン な読みやすさを兼ね備えたフォントを選定。 アイコンデザイン 親しみやすさを醸成するため、角を落とした丸みのあるデザイン で統一。直感的にサービス内容が伝わるUIに。
19. 4. 情報設計 & UX設計 ファーストビュー お店の顔である外観を大きく見せ、「ここにあるお店だ」とい う認知と安心感を即座に提供。 目的別ナビゲーション ユーザーのニーズが多い「商品情報」と「サービス内容」を上 位に配置。項目の多い「サービス内容」は4つのアイコンに分 類することで、一目で内容が伝わるUIに。 ユーザーの不安を解消する情報設計 不安要素になりやすい修理代金をカテゴリー別に整理し、画像 として明確に表記。信頼感の醸成に繋げる。
20. 社会的証明の活用 強みである「Google口コミ」の引用とリンクを設置。第三者の 評価を提示することで、新規客の心理的ハードルを下げる。 店舗のホスピタリティをWebで体験化 子供の遊び場や学習スペースがあることを、店内の写真ととも に紹介。子連れでも安心して来店できる「居心地の良さ」をア ピール。 顧客接点の導線設計 ユーザーの利便性を考え、電話・LINE・Instagram・メールの4 つのコンタクト手段を明示。使い慣れたツールで気軽に問い合 わせができる設計に。 4. 情報設計 & UX設計
21. 03 サイト構造と ビジュアル設計 1. SEO対策 2. ディレクション&運用設計
22. 1. SEO対策 ローカルSEOの基礎網羅 「福岡市南区」「横手」「井尻駅」など、集客に直結する地域 キーワードを適切に配置。 NAP情報（店名・住所・電話番号）の正確な記述により、 Googleからの信頼性を獲得。 ユーザーニーズ（検索意図）への合致 「パンク修理代金」や「他店購入車の対応」など、ユーザーが最 も知りたい情報をFAQで明文化。 E-E-A-T（信頼性）の提示 「創業1985年」の実績の明記により、プロショップとしての権威 性を担保。
23. 2. ディレクション & 運用設計 継続可能な運用フローの構築 「過去にWebサイトの更新が滞った」というクライアントの経 験から、 HP更新の心理的ハードルを下げるため、Instagram API連携に。日常のSNS投稿が自動で店舗情報として蓄積され る仕組みを構築。 マイクロインタラクション フッターに左へ流れる自転車のアイコンを配置。「お店の前を 通り過ぎる日常」を演出し、ユーザーがふっと笑顔になる遊び 心を取り入れた。 コーダーとのスムーズな連携 外部コーダーに対し、Figmaを用いた詳細な仕様定義とレスポ ンシブ設計を共有。手戻りを最小限に抑え、納期通りのデリバ リーを実現した。
24. 05 成果と 振り返り 具体的な成果 公開後、狙っていた「修理目的の学生」や「60歳以上の近隣住 民」の来店数が増加。Webサイトで事前に料金や店内の様子を 確認できるようになったことで、新規顧客の信頼獲得に繋がっ た。 制作を通じて磨いたスキル 課題解決型の提案力： クライアントの潜在的な悩みを汲み取り、 技術的な解決策を提示する力。 ディレクション能力： 外部パートナー（コーダー）へ意図を正 確に言語化し、プロジェクトを完遂させる推進力。 元看護師としてのホスピタリティ： ユーザーの不安（料金、入 りにくさ）を「安心」に変える、ターゲットに寄り添った設計 力。
25. Fin. ご覧いただき、ありがとうございます。