くすのき
ー課題
Webサイトグループ制作演習
ー概要
1970年創業の木製工芸品・修理の店「くすのき」。
木のおもちゃを中心に、日用雑貨や飾り物などを手作りで制作・販売している。父から息子へ受け継がれた小さな店で、木材の堅さや重さ、手触りにこだわり、ブナ、クスノキ、ヒノキ材などを使用。電気を使わずに動くおもちゃをはじめ、子どもから大人まで楽しめて、世代を超えて長く使い続けられる品を届けている。
ー要望
制作時間
30時間(3人)
使用ツール
Visual Studio Code・Illustrator・Photoshop・ChatGPT(生成AI)
使用技術
HTML/CSS・JavaScript
ー制作順序
- STEP 1
ターゲット
コンセプト設定 - STEP 2
配色設定
- STEP 3
キャッチコピー
ロゴマーク案 - STEP 4
デザインカンプ
- STEP 5
サイト制作
こだわり
ーターゲット
ファミリー層
ー配色
MAIN
COLOR
E76F51
TEXT
COLOR
249D8F
ACCENT
COLOR
249D8F
BASE
COLOR
FDF0D5
温かなオレンジで手仕事のぬくもりや作り手の優しさを表し、爽やかなグリーンで木の自然な印象と安心感を添えました。また、やわらかな色をベースにすることで親しみやすさを保ちながら、古びた印象に寄りすぎない配色にしています。木のおもちゃや雑貨の魅力に加え、修理にも対応する店の温かさが伝わるよう工夫しました。
ーロゴマーク
木目の質感を活かしたさまざまな形のブロックを積み重ね、木の姿を表現したロゴマークです。サイト全体の配色に合わせた色調でまとめることで、ブランドの世界観に統一感を持たせました。形や大きさの異なるブロックを組み合わせることで木のおもちゃならではの遊び心と手作りの個性を表現し、また、積み木を思わせるデザインに、創業から50年にわたる歴史とものづくりの積み重ねを重ね合わせました。
ーキャッチコピー
ひとつの木、ふたつの世代、
50年の縁。
木を素材に一つひとつ手作りする品と、父から息子へ受け継がれてきた店の歩み、そして「50年の縁」には、創業から50年を経た今も、お客さまとのつながりが続いていることを込めました。世代を超えて長く愛される品と、店が育んできた縁を表現したキャッチコピーです。
ーグループ制作について
作業時間を有効に使うため、時間を短縮できる部分ではAIを活用し、その分デザインやコーディングなどにじっくり取り組めるよう工夫しました。
3人で役割を分担し、私は主にデザインを担当しました。
IllustratorやPhotoshopを使用して、メインビジュアルやロゴマーク、画像、丸型アイコンを制作したほか、コーディングではお問い合わせフォームのページを担当しました。また、制作前に3人で出し合った配色やキャッチコピー、ロゴマークの案のうち、私の案が採用され、それをもとにデザインカンプを作成しました。
ー工夫
メニューバーはスクロールに合わせて表示されるようにし、ページ内を移動しやすくしました。
トップ画像には、実際に取り扱っている木製おもちゃを大きくポップに配置し、明るく優しい店の雰囲気を表現しています。
また、そのすぐ下に「手作りおもちゃ」「おみやげ」「おもちゃの修理」を図で紹介し、店の取り組みがひと目で伝わるようにしました。
ー感想
老舗らしさを伝えながら、古びた印象を与えないデザインにすることに苦労しました。商品の画像や作業風景はそのまま活かし、サイト全体をポップな雰囲気に仕上げることで親しみやすさを表現しました。また、キャッチコピーに言葉の重みを持たせることで、店の歴史や思いが伝わり、デザイン全体のバランスを取ることができたと思います。
設定された20時間の共同制作に加え、残りの10時間はグループメンバー3人で自主的に制作を進めました。
共同でウェブサイトを制作するのは初めてでしたが、一人で作業するときとは比べものにならないほど制作が速く進むことに驚きました。それぞれが役割を持つことで自分の担当部分に集中できる一方、チームで制作を進めるにはこまめな報告や情報共有が欠かせないと感じました。
互いの作業状況を確認し、作業が終わったら報告すること、次に取り組む内容を共有することが、チームとして円滑に機能するために大切だと学びました。
ー反省
担当を分けてコーディングしたことで、ページごとのデザインにばらつきが生じ、サイト全体の統一感を保てませんでした。また、ショッピングカートまで制作する予定でしたが、時間が足りず実装できませんでした。各ページの情報量にも差があり、利用者にとって使いやすい構成にできなかった点も反省点です。