くすのき

サイト名

くすのき

制作期間

約1週間（2026年2月）

制作タイプ

木製工芸品店の架空ECサイト（職業訓練課題：グループ制作）

対応デバイス

PC・タブレット・スマートフォン（レスポンシブ対応）

使用ツール

• Adobe Illustrator
• Adobe Photoshop
• HTML5 / CSS3
• jQuery（Slick）
• Visual Studio Code

担当範囲

コンセプト立案・情報設計（共同）、トップページ / サブページ Product 領域のコーディング、ロゴ制作
※企画からコーディングまで一貫して関わりつつ、主にロゴ制作・Product 領域の実装を担当

課題

木製工芸品店の架空ECサイトを制作する。
「子供に買い与えたい」という親心と「自分も一緒に遊びたい」という大人の好奇心の両方を刺激する設計を意識した。

コンセプト

30〜40代の子育て世代（男女）に向け、歴史・手作り・修理サービスを軸においたサイト設計。
木材の温もりと優しさが伝わるようベースカラーをベージュ系とし、アクセントにオレンジを取り入れた配色にした。

ペルソナ設定

・30〜40代男女、子育て世代
・日本の伝統工芸・自然素材に魅力を感じる
・品質・安全性を重視する

ユーザーニーズ

・素材の安全性と質感を詳しく知りたい
・作り手のこだわりや背景に共感し、納得感のある買い物をしたい
・修理体制や素材の安全性を知り、安心して子供に買い与えたい

配色

ベージュカラーを基調とし、温もりと優しさを視覚的に表現。
日本の伝統色を意識しながら、現代的なミニマルデザインと融合させた。

唯一無二の修理サービス

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

1. リサーチ・企画

日本のブランドサイトをリサーチし、配色・レイアウトのトレンドを調査。

2. デザイン制作

ワイヤーフレーム作成後、Illustrator でロゴを制作。

3. コーディング

HTML5 / CSS3 でコーディング。CSS Flexbox を活用し、レスポンシブ対応を実装。

4. 検証・調整

PCで表示確認後、余白・フォントサイズを細かく調整して完成。

・ロゴ制作の際、和のテイストとモダンデザインを両立させるバランス調整に苦労した
・Product で使用した Slick Slider でエラーが発生し、時間を要した

・スクロールアニメーション（フェードイン）を追加して、木製工芸品の世界観をさらに演出したい
・商品詳細ページなど、EC サイトとしての機能拡張を検討したい
・お客様からのお問い合わせフォームやFAQ（よくある質問）ページを追加したい