いちごいちえダンスプロジェクト　LP制作まとめ

いちごいちえ ダンスプロジェクト様のLPサイトを新規作成させていただきました。
初めてヒアリングからコーディングまで全て一人で担当させていただいた思い入れの深いプロジェクト。
制作過程をノートにまとめます。

【 1. ヒアリング 】

いちごいちえダンスプロジェクトの主宰である高城様にヒアリングを行いました。いちごいちえダンスプロジェクトが立ち上がった経緯…どんな思いで今まで公演を続けてきたか…高城様にとってのダンスとは…今後どうして行きたいかなどなど。。
話は盛り上がり居酒屋に移動して深夜の1時まで、ダンスにかけた人生の熱い胸の内を語っていただきました！
その上で「自由に作っていいよ」と。。
ううっ、ありがとうございます！きっといいLPにします！！




【 2. 要件策定 】

ヒアリングでお伺いした内容を元に情報を整理し要件定義を行いました。



<クライアント様の要望>

いちごいちえに憧れて一緒に踊るメンバーになってくれる人を増やしたい。
公演の客層は現在メンバーの知り合いが大半だが、そうでない一般の客も集めたい。
いちごいちえの活動履歴をまとめたい。
次回公演の予告を出したい。
プロダンサーを目指す人以外にもダンスが生きがいの大人でも舞台に参加できると知ってほしい。
クライアント様が運営しているダンススタジオCOZYDanceStudioでレッスンが受けられると知ってほしい。
公演チケットの販売は別管理にしたいのでLPに販売コンテンツはいらない。

<ゴール設定>
LPサイトを見てカンパニーに興味を持ち、カンパニーで一緒に踊るメンバーを増やすこと。

<目標達成の指標>
ユニークユーザー数

<解決すべき問題点>
ダンスカンパニーの情報発信はFacebookアカウントのみ。
とても美しいダンスをつくるカンパニーなのにFacebookアカウントでその魅力を表現できていない。
詳細情報を整理して掲載されているものがない。
興味を抱いた人がいても問い合わせ方法はFacebookメッセージのみ。
興味を抱いた人がいても自分にはハードルが高いのでメンバーになるのは無理と思われてしまっている可能性がある。

<解決策>
カンパニーの作品の世界観や魅力をWEBサイトで表現するよう努めた。
カンパニーの成り立ちや志、活動履歴など詳細をまとめた。
FAQでこれまでに多かった質問や予想される質問をまとめ、問い合わせへのハードルを下げた。

<ターゲット>
ターゲットにはいちごいちえの公演を見たことがないことを前提に下記1.2に設定。

1.ダンスが生きがいの20代〜40代のアマチュアダンサー
2.プロダンサーを目指す10代の子供たち

<想定フロー>
情報発信は今までどおりSNSをメインに行いたいとのことだったので、下記のフローを想定して作成。

SNSの投稿を見る→興味を持った人がLPサイトを見る→さらに興味を抱いて問い合わせへ

【3.情報設計】

要件定義をクライアント様と確認し、LPの方向性が定まったところで改めて情報を整理し直しコンテンツの順番を決めました。

1.いちごいちえとは
2.主宰の高城由季について
3.活動履歴
4.次の公演予告
5.提携のスタジオの紹介
6.FAQ
7.お問合せフォーム

【4.ワイヤー制作】

コンテンツ順が決まったところでワイヤー制作。
データが手書きしか残っておらず大変お見苦しいですが、記録がてら掲載します(･∀･;)

【5.デザイン】

ワイヤーが出来上がっていよいよデザイン！

<テーマ>
いちごいちえダンスプロジェクトの世界観をWebサイトで表現する

<キーワード>
動的、儚い、エモーショナル、しなやか、内的な強さ、イノセント

<トンマナ>
ベースカラー #000000 　（闇-舞台の暗転-）
メインカラー #ffffff 　　　（光、雪のいろ、イノセントの表現）　
アクセントカラー #012570 　（照明の色をアクセントカラーに）

<デザインの意図・ポイント>
・いちごいちえの公演を見たことがない人でも、いちごいちえの世界観を想像できるような表現に努めた。
・コンテンツ間に短い動画を挟み、興味を抱かせつつもっとここの公演を見てみたい！という期待感を煽った。
・ 台特有の表現である照明と紙吹雪を使い、最上のメインビューから最下 のフッターまで流れるような視線線導を試みた。
・”動き”や”リズム”をイメージできるよう、随所の⽂字にリズムや光をつけた。
・全てのパーツに均⼀な太さの線を使⽤せず不均⼀で流れるような形の線を使い動的に⾒えるよう努めた。

【6. コーディング】

私のとって初めての実務コーディング作業…！
VScodeで書きました。
HTML,CSS ,Javascript , jQueryを使用。
お問合せフォームはPHP工房のテンプレートを埋め込みビジュアル部分を中心に編集しました。
FileZillaを経由してさくらサーバーで公開。
完全なるコーディング初心者でしたが、頭の中に思い描いているデザインにするために妥協せずトライアンドエラーを繰り返しました、、！
このLPはクライアント様の許可を得てデジハリの卒業制作作品にもさせていただいたので、デジハリの先生、TAさん、エンジニアの友人たちに助けられてなんとか納得できるものを完成させることができました！
たくさん助けていただき、ただただ感謝感謝、、！

そして完成したサイトがこちら！

いちごいちえ ダンスプロジェクト

【7.制作を通しての感想】

ヒアリングから完成までトータルで4ヶ月ほどかけたでしょうか？
特にコーディングはもともと大の苦手でいわゆる”コードにアレルギー出ちゃう人”だったので、繰り返すエラーと思い通りに動いてくれない画面に「次エラー出したら山に捨ててやるっ！」と愛用Macを脅つつ格闘する日々。コーディングだけで丸々2ヶ月もかかってしまいましたが、最後の方は自分で検証ツールからエラーの原因を探って解決させられるようになりました、、！
思い通り（時にはそれ以上に）動いてくれた時の感動は最高で、CSSスゴッ！コーディングって面白いかも〜〜！と思えるようになりました
｡ﾟ(｡ﾉωヽ｡)ﾟ｡

とても多くを学ばせていただいたLP制作でした。
私を信頼して自由に制作を任せてくださったクライアント様にも感謝しかありません。

もっと時間をかけることが許され私に技術があったなら、サイトを訪れる都度にコンテンツ間に挿入した動画が毎回変わるなど、サイトに訪れるリピーターを増やす工夫もしてみたかったです。

このLPサイトを見て「いちごいちえダンスプロジェクトのダンスを見てみたい！」と思っていただけたのなら本望です！

長文読んでいただきありがとうございました((･´∀`･))ノ♪