概要

神奈川県横浜市鶴見区にあるピアノ教室、メロディーピアノ教室のホームページです。 他のピアノ教室との差別化を図るため、当教室ならではの優しげな雰囲気が伝わるようなホームページに仕上げました。

使用技術

AdobeXD、HTML、CSS、JavaScript、PHP

制作日数

4日

工夫した点

制作目的が「教室の優しい雰囲気を伝えること」であったため、柔らかな印象を与えることを重視しました。 例として、全体的に丸みのあるオブジェクトを配置したり、スクロールでコンテンツがふわりと浮かんでくるような動きをつけたりしました。 また、トップ画面には教室名とイメージキャラクターを動きつきで登場させ、楽しげな雰囲気を演出しました。 レスポンシブ対応を施しており、タブレットやスマホではフォーマットを整えるほか、ヘッダーのメニューがハンバーガーメニューに変わるなどの対応がされています。 問い合わせフォームはPHPで作成し、問い合わせがあると教室側へメールが送られる仕組みになっています。

※現在サイトは封鎖しています。

概要

私自身の作品を紹介するためのポートフォリオサイトです。 青空と雲をイメージしたデザインで、可愛らしく和やかな印象のサイトに仕上げました。

使用技術

AdobeXD、HTML、CSS、JavaScript

制作日数

5日

工夫した点

ページ上部で雲が永続的にゆったりと流れる動きをつけ、ゆるやかさを演出しました。 また、文章やメニューが下からふわりと現れる動きや、コンテンツがゆっくりと大きくなる動きをつけ、優しげな印象になるようにしました。 「Works」では、作品の写真をタップすることでモーダルが開き、作品の詳細情報をご覧いただけます。 レスポンシブ対応を施しており、タブレットやスマホではフォーマットを整えるほか、ヘッダーのメニューがハンバーガーメニューに変わるなどの対応がされています。

概要

JavaScript学習のアウトプットとして作成しました。ごく普通の電卓です。 影をつけるなどして、やや立体的なデザインにしました。

使用技術

HTML、CSS、JavaScript

制作日数

3~4時間

概要

JavaScript学習のアウトプットとして作成しました。スケジュールリスト機能付きのカレンダーです。
カレンダーの赤い下線が引かれている日には、何らかの予定が入っています。 また、ブルーグレーで塗りつぶされている日は、今日の日付を指します（上記の動画は2023/9/6に撮影しました）。
右上の「＋」ボタンを押すと、左からスケジュールリストが現れます。 プルダウンから年月日と時刻を選択し（映像には映っていません）、予定内容を入力してから「追加」ボタンを押すことで、スケジュール帳とカレンダーの両方に予定が追加されます。 予定を削除する場合は、各予定の右端にある「×」ボタンを押すと消えます。 また、カレンダーの赤い下線が引かれている（＝何らかの予定が入っている）日をクリックすると、スケジュールリストが開くと同時に、その日の予定のみが黄色く表示されます。

使用技術

HTML、CSS、JavaScript

制作日数

3日