Noriko Tomita
Portfolio

- より多くの人に届ける -

Works

音楽とともに歩む　広がる未来

Andante ピアノ教室

Website

「アンダンテピアノ教室」のモックアップです。

concept

都心に近く、緑が多い街 流山市に音楽教室を開室するとしたら... 音楽学部出身者として、どのような設計が求められるか考えて作成しました。 どのようにしたら体験レッスンやお問い合わせの行動に移していただけるかを考え、お問い合わせページへのボタンを目立たせるページづくりを心がけました。 スマートフォンからの閲覧が多いことを想定し、レスポンシブにも対応しています。

design

小さなお子様のいらっしゃる保護者様が主なターゲットで、親しみやすさ、子どもらしさを意識しました。「音楽とともに歩む 広がる未来」というコンセプトの教室のため、音符が羽ばたくイメージのロゴを作成しました。流山市の街のコンセプトに合わせて、ロゴやバナー、セクションタイトルなどに深緑を採用しました。

  • ＃F6B7AA
  • ＃FAE06A
  • ＃0E536D

contents

ヒーローエリアの画像とメッセージは、３種類あり、アニメーションで切り替えながら表示しています。

PC版「アンダンテピアノ教室」のヒーローエリアの画像です。 PC版「アンダンテピアノ教室」のヒーローエリアの画像です。 PC版「アンダンテピアノ教室」のヒーローエリアの画像です。
スマートフォン版「アンダンテピアノ教室」のヒーローエリアの画像です。 スマートフォン版「アンダンテピアノ教室」のヒーローエリアの画像です。 スマートフォン版「アンダンテピアノ教室」のヒーローエリアの画像です。

教室の特色・指導方針もレスポンシブ対応で伝わりやすくなるよう工夫しました。

PC版「アンダンテピアノ教室」の特徴を説明している部分の画像です。
スマートフォン版「アンダンテピアノ教室」の特徴を説明している部分の画像です。

講師の活動紹介や所在地、料金表を見ながら、お問合せページにも行きやすくなるよう、ボタンを固定で表示しています。

PC版「アンダンテピアノ教室」の講師紹介の画像です。 PC版「アンダンテピアノ教室」の教室ブログの画像です。 PC版「アンダンテピアノ教室」のアクセスの画像です。 PC版「アンダンテピアノ教室」の料金表の画像です。
スマートフォン版「アンダンテピアノ教室」の講師紹介の画像です。 スマートフォン版「アンダンテピアノ教室」の教室ブログの画像です。 スマートフォン版「アンダンテピアノ教室」のアクセスの画像です。 スマートフォン版「アンダンテピアノ教室」の料金表の画像です。

お問合せフォームも実装しました。

PC版「アンダンテピアノ教室」のお問い合わせフォームの画像です。

data

  • 制作範囲 企画・サイト設計・デザイン・コーディング
  • 制作期間 2022年8月〜 約1か月
  • 使用ツール Figma(デザイン),
    Visual Studio Code(コーディング）
  • 使用言語 HTML, CSS, JavaScript, jQuery
  • url https://tomatonft.github.io/andante-piano/

Other Works

View All Works
Visit Site