Webサイト制作 | さとう弦楽器工房（架空）

制作期間：約2か月

担当範囲：企画、設計、デザイン、コーディング

課題の目的：WordPressオリジナルテーマを制作できるようになること、カスタムフィールドなどの詳細設定ができるようになること

【企画】

お店の設定

・店主は、今までプロ御用達のバイオリン工房で15年ほど修行していた。
確かな実力と人柄の良さから、プロの間でも彼のファンは少なくない。
この度、満を持して自分の工房を立ち上げることになった。
彼は、弦楽器の素晴らしさ・楽しさを多くの人に知ってもらいたいと思っているため、初心者～アマチュアのお客様に対する訴求のために、工房のWebサイトを立ち上げることにした。

サイトの形式

コーポレートサイト

サイトの目的

・来店予約の獲得
・問い合わせの獲得
・店の雰囲気を伝えるメイン媒体とする

ターゲット

個人弦楽器工房は敷居が高いと感じる初心者・アマチュアの弦楽器奏者
（オーケストラサークルに所属する大学生、
自分も詳しくないが、子供に楽器を習わせようと考えている親など）

【構成・情報設計】

サイトマップ

緑が固定ページ、青が投稿ページとして構成しました。
カスタムフィールドや投稿ページなどの制作練習が課題の目的のため、あえてそれらの技術を用いるページを組み入れました。
WordPress管理画面を用いて、Webに詳しくないオーナーがページ編集することを想定して設計しています。

情報設計

目的である「予約の獲得」「問い合わせの獲得」を達成するために、予約ページ、問い合わせページへの導線を意識しました。

PCではメニューバーを固定し、特に予約ボタンをアクセントカラーを用いて際立たせることとしました。

SP版では、下部に問い合わせボタン、予約ボタンを固定表示させました。

【デザイン】

コンセプト

ターゲットである初心者・アマチュアの弦楽器奏者は、「工房ってどんな雰囲気なのか分からなくてなんだか怖い」というペインを抱えていると考えられます。
そのため、どんな人でも受け入れてくれるような、親しみやすく温かい雰囲気の配色・ライティングを目指しました。

ロゴ

「若葉マーク」から着想を得て、葉をモチーフにしたロゴとしました。
葉の端を、弦楽器の表板にある「F字孔」をイメージした形をあしらい、弦楽器との関連性を表現しています。
フォントは素朴さと親しみやすさを兼ね備えた「砧 丸丸ゴシックC」を使用しました。

工夫した点

Webサイトの印象を決めるトップページのデザインに注力しました。
飽きずに最後まで見てもらうために、背景色を変えたり、イレギュラーに画像を設定してみたりなど、単調にならないように工夫しました。