Project Overview
架空の猫向けサブスクリプションサービス「Nekstim」のランディングページを企画・制作しました。
サービスのコンセプトは、「獣医師監修」と「北欧雑貨のような温かみ」を掛け合わせた、安心感のあるキャットケアブランドです。
AIを活用してブランド全体のデザインイメージやビジュアルを制作し、それをもとにワイヤーフレームの設計、UIデザイン、コーディングまで一貫して担当しました。 モバイルファーストを前提に、商品の魅力だけでなく安心感や信頼性が伝わる構成を意識しています。
Target
・完全室内飼いの猫と暮らす20〜40代の飼い主
・フード選びや運動不足など、日々の育猫に悩みを感じている方
・価格だけではなく、品質や専門性を重視して商品を選ぶユーザー
Role
ブランドコンセプト・ターゲット設計 / 情報設計 / AIを活用したブランドビジュアル・デザインイメージの制作 / UIデザイン / コーディング / レスポンシブ対応 / AIで制作した画像素材を活用したデザイン制作
Duration
制作期間：40時間
Challenge
制作で最も苦労したのは、デザインの再現性と実装のしやすさを両立することでした。
背景画像には装飾まで含まれているセクションが多く、デザインの雰囲気を保ちながらも、テキスト量や画面サイズが変わっても崩れないレイアウトを考える必要がありました。
また、料金プランから申込フォームまでの導線では、ユーザーが選択した内容を迷わず確認できるよう、色や表示内容の統一を意識して設計しました。
Thinking Process
制作の初期段階では、AIを活用してブランド全体の世界観や各セクションのデザインイメージを作成し、配色やレイアウトの方向性を検討しました。
その後、生成されたビジュアルをそのまま使用するのではなく、実装しやすいように「背景画像として扱う部分」と「HTML・CSSで構築するUI要素」を整理し、レイアウトを設計しました。
背景画像とコンテンツを分離することで、デザインの再現性とレスポンシブ対応の両立を図り、完成後もデザインカンプとの差分を確認しながら細かな調整を繰り返しました。
Idea & Design
「専門性」と「親しみやすさ」を両立できるデザインを目指しました。
カラーはテラコッタ、オリーブグリーン、クリームを基調としたアースカラーで統一し、安心感や温かみを表現しています。
また、丸みのあるフォントやアーチ型のカード、手書き風の装飾を取り入れることで、北欧雑貨のようなやさしい雰囲気を演出しました。
情報量の多いランディングページでも読み疲れしないよう、余白やメリハリを意識しながら、雑誌のように楽しんで読み進められるデザインを目指しています。
What I Learned
今回の制作では、AIをアイデア出しやビジュアル制作のツールとして活用しながら、人の手で設計・実装・調整を行う制作フローを経験しました。
AIで制作したデザインをそのまま使用するのではなく、実装しやすい形へ落とし込み、ユーザーが使いやすいUIへ調整する工程が重要であることを学びました。
また、デザインの再現性だけでなく、保守性やレスポンシブ対応まで考慮した設計の重要性を実感し、AIとデザインツールを組み合わせた制作フローへの理解を深めることができました。