CAMP LP.
制作の目的
授業で制作した課題サイトの設計・構成を深く分析し、その意図を汲み取りながら、さらに独自のアイデアを盛り込んだリメイクサイトを制作しました。
リメイクサイト紹介
※ 新しいタブで開きます
Concept
サイト概要
Background
制作背景
デジタルデバイスに囲まれた現代の子どもたちへ、「本物の体験」を届ける教育キャンプのランディングページとして制作。単なるイベント告知に留まらず、森の呼吸や火の熱さを五感で想起させるような、情緒的で信頼感のあるデザインを目指しました。
Target
ターゲット
教育熱心な保護者層
「生きる力」や「自信」を育む教育に関心があり、質の高い体験活動を求めている方。
自然派・アウトドア志向の層
自身もキャンプが好きで、子どもにも不便さの中にある豊かさを教えたいと考える方。
Concept
サイトコンセプト
「野生の感覚を、呼び覚ます。」
余白を活かしたレイアウトと、温かみのあるアースカラーを採用。洗練されたタイポグラフィ（明朝体）を使用することで、野外活動の「力強さ」と、教育事業としての「知性・信頼感」が共存する没入型の体験サイトを目指しました。
Style Guide
デザインの構成要素
Concept
森の中の冒険
「自然との対話」をテーマに、子どもたちが森の中で本物の体験を通じて成長する様子を表現。落ち着いた色合いと温かみのあるレイアウトで、安心感と期待感を同時に演出しています。
Color Palette
#2D5016 (Deep Forest)
深い森の緑。サイトの基本カラー。
#E67E22 (Accent Orange)
アクセントカラー。CTAや強調に使用。
#F39C12 (Accent Yellow)
サブアクセント。バッジや装飾に使用。
Typography
Zen Kaku Gothic New
サイト全体の基本フォント。スタイリッシュな角ゴシック体。
Noto Sans JP
フォールバックとして使用される標準的な日本語ゴシック体。
Key Points
こだわりポイント
体験の臨場感を伝えるビジュアル
火起こし、野外炊飯、星空観察など、実際の体験シーンを大きく配置。写真を通じて「自分もやってみたい」という気持ちを引き出します。
情緒的な価値の可視化
「不便という贅沢」「野生の感覚を呼び覚ます」など、単なる遊びではなく、子どもの心の成長や人間力を育む体験であることを言葉と写真で表現しています。
使用ツール
Adobe Photoshop
画像編集
Adobe Firefly
画像生成AI
VSCode
コードエディタ
ChatGPT
AIアシスト
Gemini
AIアシスト
Claude AI
AIアシスト
Figma
UIデザイン
課題サイト
※ サムネイル画像のみ
実装時の学び
課題サイト分析
-
palette
デザイン
「静寂と光」をテーマにしたミニマリズム。広い余白と夕日の逆光を活かしたエモーショナルなメインビジュアルが特別感を演出。装飾を削ぎ落とすことで、写真そのもののストーリー性を引き立てています。
-
view_quilt
構成
感情に訴えかけるストーリーテリング型。「Message」「Precious Photo」「Access」と、ユーザーの導線に沿って情報が配置。文字数を絞り、筆記体のアクセントを用いることで上質さを表現しています。
-
verified
信頼性
地図の埋め込みと明確な項目分け。Googleマップの配置やFAQセクションのリスト化により、華やかな見た目だけでなく実用的な情報提供による安心感を両立させています。
-
groups
ターゲット
「質」を重視するカップル。派手な広告感よりもアーティスティックで落ち着いた雰囲気を好む層。一生に一度の思い出を静かに、美しく残したいと願う人々に深く刺さるデザインです。
技術的アプローチ
タイポグラフィの情緒的制御
CSS / Web Fonts
セリフ体（明朝体）と流麗な筆記体の混植。英字の見出しに気品を持たせる。
字間の美学
letter-spacing: 0.1em〜0.2em程度に広げ、高級ブランドのような余白を文字間にも実装。
ビジュアル・インパクトの最大化
画像アスペクト比の維持
aspect-ratio を活用し、デバイスサイズが変わってもメインビジュアルの黄金比を崩さない実装。
ヒーローセクションの背景処理
object-fit: cover; と薄いグラデーションオーバーレイによる文字の視認性確保。
情報の整理とコンポーネント化
アコーディオンUI
Q&Aセクションにおけるdetailsとsummaryタグの活用。情報を隠すことでページ全体のシンプルさを維持。
レスポンシブ・グリッド
display: flex; または grid を使い、ギャラリー写真がモバイル環境で美しく積み重なる挙動を制御。