DESIGN THINKING / IMPLEMENTATION
見た目の、その先を。
設計と実装のこと。
新しい3作品で、誰に何を伝え、どんな行動へつなげるか。実装した範囲と、実案件で別途確認する範囲をご紹介します。すべて自主制作であり、売上・予約数などの成果実績はありません。
CASE 01 / 店舗集客・体験相談LP
PACE
実際のサイトを開く
想定するユーザー
運動を始めたいが、通い方や続け方に不安がある初心者。
設計のゴール
広告などで訪れた人が、雰囲気・サポート・費用を確認し、体験相談を検討できること。
デザイン・構成の判断
- 初心者とトレーナーの写真を主役にして、厳しさだけを強調しない印象に。
- コンセプト→支援内容→初回の流れ→料金→FAQ→相談という順序で、不安を段階的に解消。
- 料金を回数で比較できる切替を設け、選んだプランをフォームへ反映。スマホでは下部に相談導線を配置。
試せる操作と、実装の範囲
実装済み：料金の月4回・月8回切替、FAQの開閉、入力チェック、確認画面、修正画面への戻り、デモ完了画面。
含まれない範囲：実店舗の予約枠、カレンダー、メール配信、個人情報の保存、外部予約サービスは未接続。実在のスタッフや口コミ、効果を示す情報は掲載していません。
CASE 02 / 商品比較・相談LP
LUNE
実際のサイトを開く
想定するユーザー
使い心地や使う順序を理解してから、スキンケア商品を選びたい人。
設計のゴール
写真の世界観だけで終わらず、商品間の違いと購入条件を確認できること。
デザイン・構成の判断
- ローズ・アイボリーと明朝体を用い、既存のダークな作品と異なる表現を展開。
- 商品名、役割、容量、サンプル価格を同じ場所に集め、比較の負担を軽く。
- 好みの使い心地から選ぶ操作を用意。肌の診断や未確認の効能表現に置き換えず、商品選びの手がかりとして設計。
試せる操作と、実装の範囲
実装済み：3商品の表示切替、好みの使い心地による案内切替、選んだ商品の相談フォームへの反映、入力・確認・デモ完了。
含まれない範囲：ECカート、決済、注文受付、実在庫、メール配信は未実装。実商品の成分・効能を示す作品ではなく、サンプル価格・購入条件は架空の設定です。
CASE 03 / 6ページのブランドHP
ATELIER SOLE
実際のサイトを開く
想定するユーザー
革靴のデザインと詳細を確認し、じっくり比較検討する人。
設計のゴール
ブランドの印象を保ちつつ、一覧→詳細→サイズや購入前情報へ迷わず進めること。
デザイン・構成の判断
- 暗い商品写真と明るい紙のような背景を組み合わせ、余白とタイポグラフィで高級感を表現。
- トップ、一覧、3モデルの詳細、ストーリーを別ページに分け、メニューとパンくずで現在地を把握できる設計。
- 商品詳細には画像の切替、サイズ選択、サイズガイドを設置。実際の検討場面に近い操作を追加。
試せる操作と、実装の範囲
実装済み：6ページ間の移動、商品一覧のスタイル絞り込み、同一画像の表示切替、サイズ選択、サイズガイドの開閉。
含まれない範囲：商品は3モデルです。各商品詳細の画像切替は、それぞれ1枚の生成画像の拡大・トリミングです。CMSや管理画面、決済・注文・在庫管理、実店舗情報は未実装です。
DELIVERY / WORKING TOGETHER
制作範囲を、明確に。
ご相談時
目的、ページ数、必要機能、素材、公開先、納期、修正範囲を確認します。
制作時
HTML・CSS・JavaScriptで実装。画像と文章を分けて管理し、画面幅に応じたレイアウトを用意します。
納品時
HTML・CSS・JavaScript・画像一式をお渡しできます。公開作業や外部サービスの接続は、環境と権限を確認してご相談します。
| 項目 | 今回の作品 | 実案件で確認する内容 |
|---|---|---|
| フォーム | 入力・確認・デモ完了まで | 送信先、外部サービス、通知、個人情報の扱い |
| 公開 | 静的ファイル一式 | 指定サーバー、ドメイン、アップロード権限 |
| 更新 | HTML・画像の差し替え | 更新担当者、更新頻度、管理画面の要否 |
| 確認 | 内部リンク・ファイル参照・コードの確認 | 指定端末・ブラウザでの表示、フォーム送信の確認 |
| デザインデータ | HTMLで制作したサイト | Figma・PSD等が必須かどうか |
画像はオリジナルの生成素材を使用しています。生成AIを禁止している案件には、そのまま応募・流用できません。今回の制作環境では、実ブラウザ・スマートフォン実機での表示確認は未実施です。
クラウドワークスで相談する（新しいタブ）