Case Study / Remake

STUDY HP.

Purpose

制作の目的

授業で制作した課題サイトの設計・構成を深く分析し、その意図を汲み取りながら、さらに独自のアイデアを盛り込んだリメイクサイトを制作しました。

Remake

リメイクサイト紹介

Remake Site
open_in_new サイトを見る

※ 新しいタブで開きます

Concept

サイト概要

Background

制作背景

「おうち時間を大冒険に」をテーマに、子どもの好奇心を刺激するストーリー型LPとして制作。オンライン完結という利便性と、手元で何かが完成するライブ感を、弾むようなタイポグラフィと親しみやすいビジュアルで表現しました。

Target

ターゲット

palette

教育・知育に関心の高い保護者層

共働きなどで送迎の時間は取れないが、子どもにはクリエイティブな体験をさせたいと願う方。

rocket_launch

工作や実験が好きな5歳〜小学生

画面の向こう側の世界にワクワクし、自分も「何かを作ってみたい」という初期衝動を持つ子どもたち。

Concept

サイトコンセプト

「日常のガラクタが、冒険のアイテムに変わる場所」

廃材や100均アイテムといった身近な素材を主役に据え、あえてデジタルな清潔感よりも「図工室のワクワク」を感じさせる、賑やかで没入感のある体験を目指しました。

Style Guide

デザインの構成要素

Concept

わくわくする冒険

「工作＝冒険」をテーマに、子どもたちの好奇心を刺激するデザインを目指しました。カラフルな色使いと動きのあるレイアウトで、まるで宝探しをしているような体験を提供します。

Color Palette

#FF9800 (Orange)

元気、活発、創造性。

#EC407A (Pink)

自由、広がり、信頼感。

#1A1A1A

テキスト。可読性を高める引き締め色。

Typography

Zen Maru Gothic

角のない丸みのあるフォントを使用することで、親しみやすさと安全なイメージを醸成。

Inter

英数字・見出しに使用するモダンなサンセリフ体。

Key Points

こだわりポイント

Detail 1

楽しさが伝わるビジュアル

実際に工作を楽しんでいる子どもたちの写真や、完成した作品の写真を大きく配置。言葉で説明するよりも、「やってみたい！」という気持ちを視覚的に引き出します。

きらきら！まほうのステンドグラス

定期更新コンテンツの配置

「今月のミッション」や「みんなの作品ギャラリー」など、更新頻度の高いコンテンツをわかりやすく配置し、リピーターの訪問意欲を高める設計にしました。

Tools

使用ツール

image

Adobe Photoshop

画像編集

auto_fix_high

Adobe Firefly

画像生成AI

movie

Adobe Premiere

動画編集

auto_awesome

PixVerse

動画生成AI

code

VSCode

コードエディタ

smart_toy

ChatGPT

AIアシスト

smart_toy

Gemini

AIアシスト

smart_toy

Claude AI

AIアシスト

design_services

Figma

UIデザイン

Case Study

課題サイト

Original Site

※ サムネイル画像のみ

Learnings

実装時の学び

課題サイト分析

  • palette
    デザイン

    白を基調とした余白の美と、明朝体による上品な和の質感が特徴。高品質な写真が商品の魅力を直感的に伝えています。

  • view_quilt
    構成

    「日常に四季の彩りを」というコンセプトのもと、季節限定商品をメインに据え、素材や食感へのこだわりを丁寧に言語化しています。

  • verified
    信頼性

    会社紹介や創業支援、お客様の声など、ビジネスとしての透明性と実績を感じさせる項目が揃っています。

  • groups
    ターゲット

    丁寧な暮らしを好む層や、本物志向の贈り物・手土産を探している層に響く内容です。

技術的アプローチ

Learning 01

黄金比の「余白」と「文字」の制御

CSS line-height (1.8前後) と letter-spacing で明朝体の気品を強調。
余白 rem/vwを用いデバイスサイズに連動した空白を維持。

Learning 02

高精細な画像のパフォーマンス最適化

次世代形式 WebP採用、fetchpriority="high"で高速表示。
レイアウト display: grid;でレスポンシブ崩れを防止。

Learning 03

セマンティックな構造化

HTML 季節商品を<article>、適切な見出しレベル。
代替テキスト 具体的alt属性記述でSEOとアクセシビリティ担保。

arrow_back トップに戻る