URL
担当
コーディング/デザイン/ディレクション
使用ソフト
Figma / Cursor / Photoshop / Illustrator
プロジェクト概要
このサイトは、架空の飲料メーカー「SPARK LINKS」のコーポレートサイトとして、ブランディングとユーザーへの情報提供を両立することを目的に制作しました。製品紹介を軸に、企業理念、キャンペーン、飲み方提案、CSR活動など多様なコンテンツを整理し、信頼感と親しみやすさのある企業像を伝える設計としています。特に「製品を知り、楽しみ、つながる」体験導線を重視し、ECやSNSへと自然に誘導できる構成を意識しました。本サイトの主なターゲットは、清涼飲料や炭酸飲料、健康系飲料に関心のある10代から50代の男女です。日常的にコンビニやスーパーで飲料を購入するような層を想定しており、ライフスタイルの中に自然と商品が溶け込むような提案を意識しています。また、ブランドとの接点としてWebサイトを訪れる初めてのユーザーから、継続的に製品を購入しているファン層まで、幅広いユーザーに対応できる構成としています。「健康」「楽しさ」「日常に寄り添う飲料体験」に価値を感じるすべての人に向けて、親しみやすく、信頼性のあるブランドイメージを伝えることを目指しました。
事業概要
| 社名 | スパーク・リンクス株式会社（Spark Links Inc.） |
|---|---|
| 設立 | 2005年4月 |
| 資本金 | 20億円 |
| 従業員数 | 720名（2025年3月時点／研究・製造部門含む） |
| 所在地 | 東京都渋谷区渋谷1-1-1 スパークリンクスタワー |
| 代表取締役 | 神﨑 勝弘 |
| 売上高 | 300億円（2024年度実績） |
| 取引銀行 | 三井住友銀行、みずほ銀行 |
| 拠点 | 東京本社／北海道工場／静岡工場／福岡営業所／台湾支社 |
| 関連会社 | スパーク・リンクスR&Dラボ株式会社、SLロジスティクス株式会社 など |
企業理念
「日常に、ひらめきと繋がりを」という企業理念のもと、革新的な飲料製品とサービスを通じて、
人々の生活に喜び、活気、そして健康的な選択肢を提供することを目指しています。
コア事業である炭酸飲料を軸に、消費者の多様なニーズに応える多彩な飲料展開と、
サステナビリティを重視した持続可能な社会づくりに積極的に取り組んでいます。
事業内容
1. 健康志向層 年齢：20〜40代 特徴：オーガニックや低糖質、機能性表示食品に関心が高い。健康や美容を意識して、飲料選びにもこだわりがある。 行動例：SNSで健康トレンドをチェック、口コミやレビューを参考にする。
ターゲット
1. 健康志向層 年齢：20〜40代 特徴：オーガニックや低糖質、機能性表示食品に関心が高い。健康や美容を意識して、飲料選びにもこだわりがある。
2. アクティブライフ層 年齢：20〜40代のスポーツ愛好者やフィットネスユーザー 特徴：運動後のリカバリーや水分補給に適した飲料を求める。エナジードリンクやスポーツドリンクを好む。 行動例：ジムやランニングイベント参加、専門ショップやECで購入。
3. ファミリー層 年齢：30〜50代の子育て世代 特徴：子どもも安心して飲める安全な商品を重視。家族みんなが楽しめるフレーバーやパッケージを求める。
4. 環境・サステナビリティ意識層 年齢：20〜40代の環境意識が高い層 特徴：リサイクル容器や環境負荷の少ない製造過程に価値を置く。企業のサステナビリティ活動を重視。 行動例：SNSで環境活動をフォロー、関連イベント参加。
5. コスト重視・現実型層 年齢：全年代（特に30〜50代） 特徴：価格重視で近所のコンビニやスーパーで気軽に購入。ブランドへのこだわりは低い。
理想型ペルソナ（収益性・拡散性の高い層）
スパーク・リンクスでは、ブランドの方向性に合致した理想的な顧客像を10名設計。その中でも特に収益性や拡散性の高い5名のペルソナを中心に、商品やプロモーションを展開しています。
| 氏名 | 年齢・職業 | 特徴 | ニーズ | ウォンツ |
|---|---|---|---|---|
| 田中 美咲 | 28歳・IT企業マーケター | 健康志向／SNS発信力高い／トレンドに敏感 | オーガニック・低糖質 | 映えるパッケージ・デザイン重視 |
| 鈴木 大輔 | 35歳・営業職 | 子育て中／家族の健康を重視／無添加志向 | 子どもも安心して飲める商品 | EC購入・定期購入 |
| 山本 明子 | 42歳・管理栄養士 | 栄養知識が深い／信頼性を重視 | 科学的根拠のある健康成分 | 専門家の推薦・解説コンテンツ |
| 佐藤 拓也 | 30歳・フィットネストレーナー | アクティブ／運動後の栄養補給を重視 | 電解質豊富・低カロリー | 飲みやすい味・携帯性 |
| 中村 恵 | 25歳・環境NPO職員 | 環境意識が高い／サステナビリティ重視 | リサイクル容器・CO2削減 | 環境活動キャンペーンへの参加 |
現実型ペルソナ（既存顧客に多い層）
現在すでにスパーク・リンクスの製品を購入・利用していると思われる典型的なユーザー像を5名想定し、ペルソナとして整理。日常的な利用シーンや購買傾向を把握することで、リピート促進・ファン育成施策につなげます。
| 氏名 | 年齢・職業 | 特徴 | ニーズ | ウォンツ |
|---|---|---|---|---|
| 田村 真由 | 40歳・事務職 | 健康志向だがこだわりは強くない。コンビニ利用多め。 | 甘さ控えめ・低カロリー | 見慣れたブランドで安心感があること |
| 佐々木 洋介 | 50歳・公務員 | 価格重視で毎日炭酸水を飲む習慣がある。 | 手頃な価格・継続しやすい | スーパーやドラッグストアで買える |
| 伊藤 沙織 | 32歳・派遣社員 | 仕事中や休憩時にリフレッシュ目的で微炭酸を飲む。 | 爽快感があるが強すぎない味 | コンビニ・自販機で手に入る |
| 木村 貴文 | 27歳・大学院生 | 夜間の勉強にエナジードリンクを利用。成分表示を気にする。 | 集中力を保てるカフェイン飲料 | コスパのよいパッケージ |
| 中田 美穂 | 36歳・パート主婦 | 家族で飲める飲料を重視。子ども向けと大人向けを使い分け。 | 家族全員が飲みやすい味 | まとめ買い・セール対象になりやすい |
コンセプト
ブランド価値や企業理念、環境への取り組みをユーザー・投資家・パートナー企業へ分かりやすく伝える 商品や技術開発の情報を信頼感あるビジュアルで紹介し、企業としての専門性・革新性をアピール ESG・SDGs対応を軸としたサステナビリティ情報や社会貢献の発信によって共感を醸成 採用・IRなど企業活動の多面的な情報を整理し、適切に届ける
コンバージョン（サイトの最終目的）
- 1. 商品購入・ECサイト誘導 自社ブランドの飲料を公式オンラインショップで購入してもらう 新商品・限定品の購入促進キャンペーン実施
- 2. ブランドファンの獲得・リテンション メールマガジン登録（新商品情報やキャンペーン情報配信） SNSフォロー・シェア促進（ブランド認知拡大） サンプル請求フォーム（無料お試しセットなど）
- 3. 企業・取引先からの問い合わせ獲得 取引・販売代理店・OEM・コラボレーション希望の法人問い合わせフォーム
- 4. 採用応募促進 採用情報ページからのエントリー・問い合わせ
- 5. ブランドの社会的価値向上への参加 環境保護や地域貢献活動への参加申込みフォーム
サイトマップ・ワイヤーフレーム設計 PC / SP 比較
レスポンシブ対応を意識し、情報の優先順位や視認性に配慮しながら、PC版とスマートフォン（SP）版で最適な構成設計を行いました。 PCでは横幅を活かしたレイアウトで情報をバランスよく配置し、視線の流れを意識した導線設計を採用。 一方SP版では、縦スクロールに最適化したシングルカラム構成とし、重要情報を上部に集約することで、閲覧時のストレスを軽減しています。 各デバイスに応じたワイヤーフレームをFigmaで作成し、構成や導線の違いを明確にしながら、ユーザー体験の向上を目指しました。
ブランドコンセプトを体現するファーストビュー
本サイトは「自然のチカラで、気持ちにひと息。」というメッセージのもと、健康的で爽やかな世界観を表現したコーポレートサイトです。 トップページでは、4つのキャッチコピーを縦に連ねることで、静かで心地よいリズムと清涼感を演出しています。
迷わない情報設計と視覚的な訴求
全体構成は「お知らせ → 商品紹介 → キャンペーン → コラム → レシピ → 企業情報 → フッター」という順で設計。 注目商品やキャンペーンのエリアでは、写真とテキストのバランスに配慮し、ユーザーの視線を誘導しやすい構成にしています。
配色と余白設計による“呼吸感”のあるレイアウト
ホワイトと淡いミントブルーを基調に、アクセントカラーとしてビタミンカラーを使用。余白を意識的に取り入れ、やさしさと信頼感のあるトーンを実現しました。
モバイル対応とユーザビリティ
スマートフォン表示では、情報の優先順位やUIのタップ操作性を見直し、誰でも快適に閲覧できるレスポンシブ設計を意識しています。
コーディングについて
HTML/CSSをベースに、レスポンシブ対応とユーザビリティを重視して実装しました。スマートフォン・タブレットでも快適に閲覧できるよう、グリッドレイアウトやカードUI、ボタンサイズ、テキストの可読性などを細かく調整し、モバイルファーストを意識した構成としています。 CSS設計にはBEM（Block Element Modifier）をベースに命名規則を統一し、保守性と拡張性を高めました。また、初期スタイルのリセットには、日本人のWeb制作者向けに最適化された「kiso.css」を使用し、安定した表示と開発効率を両立させています。 JavaScriptにおいては、ドロワーメニューやスムーススクロール、タブ切り替えといった基本的な機能を自作し、自身の知識を最大限活かす形で実装しました。さらに、製品スライダーやキャンペーンバナーなどの動的要素はSwiperを用いて視覚的な訴求力を高め、ブランドの魅力を直感的に伝えられるよう工夫しています。 ナビゲーションやフッターの構成は、企業サイトとしての信頼性と使いやすさを両立する定番パターンを参考にしつつ、視覚的に迷わない導線設計を心がけました。セマンティックなマークアップやアクセシビリティの配慮も行い、SEOの基本にも準拠した構築を意識しています。