”架空の音楽練習スタジオ『Studio poco（スタジオ ポコ）』”

作品のご紹介

架空の音楽練習スタジオ『Studio poco（スタジオ ポコ）』のWebサイト制作とメンバーズカード（会員証）・ロゴデザインです。Webサイトはスマートフォンからのアクセスが多いためレスポンシブ対応、ページ遷移は少なく、ほぼシングルページデザイン。会員証はポイントカード機能も兼ねています。

講師からの一言

卒業生からのコメント

Q　最初にどんなコンセプトを考えましたか？
スタジオは軽音楽のバンド練習だけでなく個人練習、ドラムや管楽器の楽器練習、ダンス練習にも対応でき、全室Wi-Fi完備・有線LAN接続可能で配信にも利用できるなど幅広い用途に使用できることを、Webサイトを通じてスタジオを探す人へアピールし、新規顧客の獲得・レンタル予約数の増加を考えました。
Q　ポートフォリオを制作する際に参考にした作品やサイトなどはありますか？
授業サイトの「色や配色の参考サイト・まとめサイト」から参考にしました。 『Color Palette Generator』
https://colors.muz.li/
『Open Color』
https://yeun.github.io/open-color/ingredients.html
Q　完成するまでの制作期間はどれくらいかかりましたか？
企画書の作成時間も含めて7日間くらいだと思います。
Q　使用ソフトは何を使いましたか？
Illustrator・Photoshop・Visual Studio Code
Q　ポートフォリオのデザインはどんなものをイメージして制作しましたか？
他社音楽スタジオは黒を基調としたデザインが多いですが、今回はバンド練習にとどまらず幅広い利用目的の人たちもターゲットとしたため、明るい雰囲気のカラー（青系・オレンジ・白）を使用し、フォントも可読性と万人受けを意識したゴシック体（Zen Kaku Gothic New）を使用することとしました。
Q　制作する上で、特に大変だった作業はありますか？
ファーストビューの写真をvegas.jsで動きをつけましたが、PC用とスマートフォン用で写真を変更する記述がうまくいかず、最終的にはPC用の横長の写真をvegasのオプション（align）で右または左に固定することで難を逃れました。全体的にレスポンシブ対応のレイアウトに苦労しました。
Q　逆にスムーズに制作できた作業はありますか？
企画書の段階で使用するテーマカラーをしっかり決めておいたため、Webサイト制作やメンバーズカードデザインの際には、その中から色を選ぶだけでよく、時間をかけて悩んでしまうことがなかったので良かったと思いました。
Q　作品の作り始めのイメージと完成品のイメージは変わりましたか？
スマートフォン用のデザインは上部ナビをハンバーガーボタンと別に電話番号を表示することくらいしか決めておらず、いざ作り始めると料金表のtableがうまくレスポンシブ対応できなかったりして苦労したので、スマートフォン用のレイアウトをもっと具体的に考えておく必要があったなと反省しました。
Q　今後ポートフォリオを制作する受講者の方に対して、制作する際のアドバイスはありますか？
自身のスケジュール管理の甘さから制作時間が足りず、最後の見直しや検証作業がじっくりできなかったことが心残りでした。実際にサーバーにあげてみないとファイルのリンク切れやファイル名のスペルミスなどの重大ミスに気付けないので（私は大文字と小文字を間違えていました）最終確認の重要性を痛感しました。
Q　ポートフォリオ制作を終えてみて、今どんな気持ちですか？
提出締切前は連日睡眠不足になるほど制作スケジュールがギリギリになってしまい余裕がなく大変でしたが、終わってみると、デザインもWebもまったくの素人だった自分がここまで制作できるようになったのだという嬉しい気持ちが湧いてきています。少し自信にも繋がったのではと思います。