見出し画像

合唱団のwebサイトを作ってみた。

ナカハル

スクールでの授業が終わり、
このたび個人制作として自身が所属する合唱団のサイトを制作しました。

合唱団Le Mille Feuilleは、
大学の部活の同期で卒業後に旗揚げした合唱団です。
「合唱団やけど、合唱とバンドやってるねん！」と言ってもイマイチ伝わりづらく、名刺代わりになるサイトがあればいいな、と考えていました。

初期デザインも記録として公開します。

▼制作時間
設計・ワイヤー  17.5時間
デザイン　　　    32時間
コーディング 　 83.5時間


設計・ワイヤー

情報整理と目的設定

まずどんな団体で、何を目的にサイトを作成するか、情報を整理しました。
大学OB団体で発足から５年未満ということもあり、認知度はまだまだ低く、
まずは団体のことを知っていただくことを目的に。
そして、「演奏会に足を運んでみたい」と思ってもらうことをゴールに設定しました。

合唱団について情報を整理。

さらに掲載事項をメンバーにも確認し、サイトマップを作成。
その後ワイヤーフレームを作成しました。

サイトマップ。
今後グッズ販売を行いたいということで、comingsoonとしてコンテンツを用意。
グッズとチケット販売は外部サイトで行うので、リンクするボタンを設置することにした。

デザイン

団体の雰囲気とかけ離れないために、過去公演のチラシや、団体のロゴ（ミルフィーユのケーキ）をベースにデザインすることを決めていました。

過去公演のチラシ


「よし。なんとなく「可愛い」くて、「親しみ」があって「ポップ」な感じで作るか！」


着手の速さに定評のある私は、ここでぼんやり見切り発車をしてしまいます。
参考サイトの「かわいい」カテゴリーの中で、なんとなくポップそう！親しみありそう！なサイトを主観でピックアップ。
ところがスクールの講師にも方向性を共有してみたところ、「世間一般のポップを言語化できますか？」というニュアンスの質問が。

自分の中でポップとは、なんとなく楽しそうな雰囲気！と考えていました。
助言をいただき、今度は「ポップ」に絞って調査。

彩度が高くてにぎやか・・。ちょっと違うなと思いました。
世の中の定義と、なんとなくの主観の間にギャップがありました。

世の中の「かわいい」を分析するために本を読んだり（↓参考にした本）、

ギャラリーサイトで「ポップ」「かわいい」「さわやか」などカテゴリを絞って調査しました。
分析の中で、今回のデザインのテーマは
「かわいい」「親しみ」「わくわくする」に設定しました。

参考サイトをいつくかピックアップし、団員へアンケートを実施。
雰囲気が近そうなサイトから、これは違いそうと思うサイトまで抜粋し、メンバーと認識のすり合わせをしました。
（今思えばこのデザインも少し偏りがありました・・😂）

google formのアンケート

いよいよデザインへ

票の多かったサイトを参考にし、ワイヤーに色をつけてみました。
こちらが初稿！

どうでしょう。平成初期を彷彿とさせるTOPページができました。
当時の私はそんなことも思わず、のっぺりしたデザインにならないよう背景に柄や色分けを施し、空白を埋めようとイラストを各所に散らせました。

講師からは、
イラストに頼るのは一番最後。
色を入れるのは、白黒であしらいをある程度固めてから。
まずメインビジュアルを作り込み、それをTOPページの各コンテンツに落とし込むようアドバイスをいただきました。
（このアドバイスはチーム制作のデザインにも繋がります。）

メインビジュアルの作り込みから再度行うことに。
動画を埋め込むことを想定し、まず３案作成しました。

しかし、ここで疑問が。
・今ある動画は素人撮影で遠景が多く、画質もそれほど良くない。
・「合唱だけじゃない」ことを一目で伝えたいけど、果たしてこの動画で伝わるのか？動画を見続けてもらえるのだろうか？
そもそもメインビジュアルが動画でいいのか、疑問が湧きました。

試行錯誤を経ての最終案

現行デザインに最も近い最終案

前回からの変更点は下記です。

・動画をやめて写真で魅せる
写真がスライドで流れるようにすれば、一目で「合唱だけじゃない」ことを伝えられると考えました。

・ロゴデザインを活かす
ロゴは唯一無二の被ることないシンボルマークで、あしらいに有効なのではと、サイト分析でも発見しました。
そこでロゴのいちご柄を、メインビジュアルや他コンテンツにも活かしてみました。


さらに、メインビジュアルはミルフィーユのケーキを横向きに見立てることで、層を積み重ねるように様々な活動をしてきた私たちとリンクさせるイメージにしました。

デザインに意味を持たせられたことで、自分自身もようやく納得がいくメインビジュアルができました。

あしらい参考サイト

メインビジュアル

私たちに会いに来たくなるような、わくわくするデザインにしたい！の想いで、TOPページ全体は写真を多めにしました。

動きの参考サイト↓

コーディング

デザインに動的な要素が多く、骨が折れる作業でした。笑
苦手意識のあったJavascriptも使う必要がありました。
でも自分が作ったデザインを形にできることを、自分自身が証明したい！と強い意志（意地）を持っていました。

コーディングの反省点と次回の改善策

【PCの見た目を整える→レスポンシブコーディングに移る】という流れでコーディングをしていました。
これが原因したと言っていいほど、たくさんの困難に直面しました。
以下が次に活かしたい反省点です。
（※知見者の方。間違いや、より良い方法がありましたらご意見ください。）

1.何もかもpxで指定していた。
特にheightをpxで指定したことで、containerから要素がはみ出しまくりました。
【改善策】最初からブラウザ幅に応じて可変するfont-sizeを設定

font-size: 1.2rem;　
@media (max-width:390px){
html{
font-size: calc(100vw / 39);
/*幅が390pxの時の設定。この設定により1rem=10pxになる*/
}
h1 {
font-size:1.2rem;/*390pxの時12pxに*/
}
}

【これも有効】clamp関数
font-sizeだけでなく、可変する要素（boxやcontainer）にも活用できる

2.transformとpositionの使い分けが曖昧だった

当初テキストにもpositionを使用しており、可変時に謎の空白が生まれることも・・。
【使い分けについて】
・position：position rerativeが基準（親）となり、position absolute（子）で位置を指定（授業でも聞いていましたが、ようやく理解できた気がします。）
基本は装飾などに使用し、大事なテキストなどには使用しない。

・transform：元々の位置が基準となり、X軸Y軸にどれだけ移動するか指定する

3.デザインの再現性を優先しており、今後の運用を意識できてなかった
画像の更新の際は、都度リサイズが必要？
更新のたびに写真をこの形に切り抜くのか？
今回の更新は私が行うからいいものの、会社だったらコーダーさんにすごく不親切なデザインにしてしまった気がします・・。

【改善策】写真にはaspect-ratioを指定することで、いちいち画像のリサイズが不要になる。
CSSで指定できる図形なら上記で良いと思います。

しかし指定できない図形なら、更新が必要な部分には実務においては使わない方がいいかなと思いました。
例えば、TOPの「お知らせ」コンテンツです。
画像をこの形に切り抜き、さらに青いレイヤーで影をつけた画像をimgとして使用しました。
これを更新のたびにやるのは手間ですよねぇ・・。

手間ですよねぇ・・。

コーディングにおいては、
１つ修正したら別の箇所が崩れる・・この繰り返しが多く発生しました。
すごく効率が悪かったです。

しかし、解決方法を探る中での学びが多くありました。
良い経験ではありましたが、次からは絶対に、最初からレスポンシブを考えたコーディングをします。すごく効率が悪いと分かったからです。笑

全体を通して

webデザイナー（ディレクター）志望の観点から記載します。

良かったこと

▼納期の意識
今回、期日の定めは特になかったですが、実務では納期が何より大切だと考え、自分の中で納期を決めていました。
スクールでのデザインに特化した特別講座「デザインGYM」が8/7(水)より開始することが決まっていたため、それまでにコーディングまで終わらせよう、と考えていました。
5月中旬頃から徐々に着手、6月はチーム制作を優先しほとんど触れていませんでしたが、7月は個人制作に注ぎ込みました。
使える環境をフル活用した結果、予定通りに完成させることができました。

反省点と次回への改善策

▼UIの意識
ユーザーの頭に「？」が浮かんだり、「もやもや」させないデザインが大事だと思いました。
例えば下層「私たちについて」ページの過去の主催公演。
元々のデザインは左側でした。

ですが講師からの一言で、気づきます。
「これ、毎年公演が増えるなら、その分スクロールも増えますよね？」

た、たしかに・・・。
考えが及んでいませんでした。
毎年スクロール増えたら、最下部の第一回公演が幻化してしまいそうです。
そこで、過去公演のチラシのボタンをクリックすることで、それぞれの説明が浮かび上がるようデザインを変更しました。
こうすることで、各公演のより詳細な説明や、写真も入れることができました。
ユーザーが不満なく閲覧できるサイト作りが大切だと感じました。

▼更新の有無
コーディングの反省点と被りますが、更新が必要な部分なのかそうでないのかをあらかじめ把握しておくことが大切だとわかりました。
更新が必要であれば、初めから更新の手間がかからないデザインを意識する必要があると感じました。



今回の経験を通して、制作においてはクライアントだけでなく、ユーザーや仕事仲間に対する広い視野も大切であると、改めて実感しました！

また、今回は自分も関わる団体の制作物でしたが、実際のクライアントワークではヒヤリングを元にテーマを決めていくと思います。
クライアントが思う「かわいい」と私の思う「かわいい」は必ずしもイコールでないという前提のもと、
テーマ決定においては、主観で判断せず、具体的なすり合わせを大切にしたいと感じました。


今後も経験から学びを深めていきますー！

最後までお読みいただきありがとうございました。
（あわよくば演奏会にもお越しください🫶）


この記事が気に入ったらサポートをしてみませんか？