URL
担当
コーディング
サイト制作の目的
このサイトは、架空の飲料メーカー「SPARK LINKS」のコーポレートサイトとして、ブランディングとユーザーへの情報提供を両立することを目的に制作しました。製品紹介を軸に、企業理念、キャンペーン、飲み方提案、CSR活動など多様なコンテンツを整理し、信頼感と親しみやすさのある企業像を伝える設計としています。特に「製品を知り、楽しみ、つながる」体験導線を重視し、ECやSNSへと自然に誘導できる構成を意識しました。本サイトの主なターゲットは、清涼飲料や炭酸飲料、健康系飲料に関心のある10代から50代の男女です。日常的にコンビニやスーパーで飲料を購入するような層を想定しており、ライフスタイルの中に自然と商品が溶け込むような提案を意識しています。また、ブランドとの接点としてWebサイトを訪れる初めてのユーザーから、継続的に製品を購入しているファン層まで、幅広いユーザーに対応できる構成としています。「健康」「楽しさ」「日常に寄り添う飲料体験」に価値を感じるすべての人に向けて、親しみやすく、信頼性のあるブランドイメージを伝えることを目指しました。
コーディングについて
HTML/CSSをベースに、レスポンシブ対応とユーザビリティを重視して実装しました。スマートフォン・タブレットでも快適に閲覧できるよう、グリッドレイアウトやカードUI、ボタンサイズ、テキストの可読性などを細かく調整し、モバイルファーストを意識した構成としています。 CSS設計にはBEM（Block Element Modifier）をベースに命名規則を統一し、保守性と拡張性を高めました。また、初期スタイルのリセットには、日本人のWeb制作者向けに最適化された「kiso.css」を使用し、安定した表示と開発効率を両立させています。 JavaScriptにおいては、ドロワーメニューやスムーススクロール、タブ切り替えといった基本的な機能を自作し、自身の知識を最大限活かす形で実装しました。さらに、製品スライダーやキャンペーンバナーなどの動的要素はSwiperを用いて視覚的な訴求力を高め、ブランドの魅力を直感的に伝えられるよう工夫しています。 ナビゲーションやフッターの構成は、企業サイトとしての信頼性と使いやすさを両立する定番パターンを参考にしつつ、視覚的に迷わない導線設計を心がけました。セマンティックなマークアップやアクセシビリティの配慮も行い、SEOの基本にも準拠した構築を意識しています。