サイト名

くすのき

制作期間

約1週間（2025年12月〜2026年1月）

制作タイプ

架空サイト制作（職業訓練課題 - グループ制作）

対象デバイス

PC / TB / SM

使用ツール

• Adobe Photoshop（画像編集）
• Adobe Illustrator（ロゴデザイン）
• HTML5 / CSS3 / jQuery（コーディング）
• Visual Studio Code（エディタ）

担当範囲

企画、デザイン、ロゴ制作、コーディング

課題

木製工芸品の架空ECサイトを制作する。
ターゲットは30〜40代男女、子育て世代。子供への玩具や昔ながらの懐かしい玩具の購入を促せるような設計にする。

コンセプト

お店の認知拡大のため、歴史・手作り・修理サービスを軸においたサイト設計を意識して制作しました。
木材の温もりと優しさが伝わるようにベースカラーをベージュ系として、アクセントにオレンジを取り入れた配色にしています。

ペルソナ設定

・30〜40代男女、子育て世代
・使用素材へのこだわり
・手作り玩具を求めている

ユーザーニーズ

・修理サービスが利用できる
・商品の素材や効能が詳しく知りたい

1. 配色とトーンの統一

ベージュカラーを基調とし、温もりと優しさを視覚的に表現しました。
過度な和風や古風な表現は避け、清潔感と明るさを重視した配色を意識しました。

2. 唯一無二の修理サービス

他社では取り扱っていない修理サービスをアピールするため、ブランドストーリーの構成を取り入れました。

3. 木材情報の付加価値化

各商品に使用木材（ブナ・ヒノキ等）を明記し、素材へのこだわりをアピールするように設計しました。

4. 「修理可能マーク」の表示

購入することへの安心感を持ってもらえるように「修理可能」バッジを各商品に配置しました。

1. 企画・リサーチ

・ターゲット設定とペルソナ作成
・キャッチコピーとサイトコンセプト、サイトIDの検討

2. デザイン制作

・ワイヤーフレーム作成（手書きラフ）
・配色検討

3. コーディング

・HTML/CSSでのスタイリング
・jQueryでの実装（Slick活用）

4. 検証・調整

・各担当ページのHTML/CSSのバリデーションチェック
・最終調整と完成

・Slickの使用がうまく行かず苦戦したが、グループ内で協力して対応することができた

・JavaScriptを学習し、動的な要素を追加したい
・アクセシビリティをさらに向上させ、すべての人が使いやすいサイトを目指したい

実際のサイトを見る →
※こちらは職業訓練の課題として制作した架空のサイトです。