Works

制作例

世界観をつくり分けたWebサイトサンプル 3種

異なるターゲットを想定し、それぞれの雰囲気に合わせてデザインしたコンセプトサイト

3つの個性、3つの届け方。

ホームページは情報を分かりやすく伝えるだけでなく、お店やサービスの雰囲気を感じてもらう場所でもあります。

今回はそれぞれ異なるターゲットと目的を設定し、世界観から設計した3種類のコンセプトWebサイトを制作しました。

親しみやすさと信頼感を意識した自動車整備店、やさしく前向きな空気を大切にした体験教室、個性的で遊び心のある雑貨店。

同じ「Webサイト」でも届けたい相手や目的が変われば、色・文字・レイアウト・見せ方も変わります。

見た目だけでなく、使いやすさまで。

それぞれの世界観を表現しながら、スマートフォン・パソコンのどちらでも見やすいように設計しています。

画面サイズに応じてレイアウトを調整し、情報の読みやすさや操作のしやすさにも配慮しています。

デザインの雰囲気だけでなく、「誰に、どんな印象を届けたいか」まで考えて制作したサンプルです。

下にスクロールすると各サイトのデザインをご覧いただけます。

01 / 自動車整備

HARBOR MOTOR WORKS

街の人が気軽に相談できる、親しみのある自動車整備店のコンセプトLP。

ターゲット

車に詳しくなく、整備や修理をどこに相談すればいいか迷いやすい地域の生活者。

狙い

「車屋さんは入りづらい」という心理的なハードルを下げながら、技術への信頼感もしっかり伝えること。
専門店らしさを残しつつ、初めてでも気軽に相談できる距離感を目指しました。

工夫

ヴィンテージ感のあるイラストとオレンジ×深いグリーンの配色で、ガレージらしい無骨さと親しみやすさを両立。
サービス内容を整理して見せるだけでなく「まず相談してみよう」と思えるよう、問い合わせまでの導線や言葉の温度感も意識して設計しています。

実際のサンプルサイトを見る→https://sample-lp-harbor.pages.dev


02/ 学び・体験

みちくさラボ

子どもの「好き」を入り口に、学びの選択肢を広げる体験教室のコンセプトLP。

ターゲット

学校以外の学びや体験にも興味があり、子どもの個性や好奇心を大切にしたい保護者。

狙い

「学ぶ=勉強」だけではなく、ものづくりや自然体験など好きなことから広がる学び方をやさしく伝えること。
保護者には安心感を、子どもには楽しそうと思える空気感をつくることを目指しました。

工夫

淡いイエロー・グリーン・ラベンダーを使い、教育サービス特有の堅さを抑えながら、やわらかく前向きな世界観に。
イラストやカード型レイアウトを使って、体験内容を直感的に理解できるようにしつつ、見学・体験申し込みまで自然に進める構成にしています。

実際のサンプルサイトを見る→https://sample-lp-michikusa.pages.dev


03 / 雑貨店

Ponne

都会に行かなくても可愛いものに出会える、地域のセレクトショップのコンセプトLP。

ターゲット

個性的な雑貨やファッションが好きな20〜30代。

狙い

商品を説明するだけではなく、街を歩いて偶然お気に入りのお店を見つけたような体験をWeb上で表現。

工夫

SPファーストで構成した中央カラムのみスクロール仕様。ネオンカラー・タイポグラフィと装飾のアニメーションで80'sを意識しています。

実際のサンプルサイトを見る→https://sample-lp-ponne.pages.dev