もうロゴ編からずいぶん月日が経ってしまいました・・・

ロゴ編はこちら↓
架空クライアント案件でサイトを制作しました-ロゴ編

いよいよWebサイトデザイン制作です。
ロゴと並行してサイト構成を考えていました。
私がサイト構成を考える際はロゴの時もそうだったんですが、頭に浮かんだものをまずはとにかく書きなぐるということをします。

考えをまとめながら書いていくと、なんでこう思ったんだっけ？ってなるのでとにかく書きなぐる。
で、このあと実際にXDでワイヤーフレームを作るまでこうやって書きなぐってまとめて。うーん。ってやってます。

うーん。ってなって作ったワイヤーフレームがこれ。
初のXDでのワイヤーフレーム。練ったわりにサラッとしてます。ワイヤーなんで本当に枠だけ。

で、この文章と一緒に提案しました。

メインイメージ作成

なんだかもうあんまり覚えてないんですが、とりあえずメインイメージから作りましょう！ってなりました。

最初に提案したメインイメージです。

群れからはぐれて都会で生きていく感じを出したくてこのようなイメージにしました。

提案後のフィードバックで羊の群れがわかりづらいとのことでこんな感じに

写真とイラストが混在しているのがちょっと違和感があるとのことだったので（たしかに！いま見ると本当そう思う）全てイラストにしました。

真ん中の３匹は自分で描いたものですが、他はイラストACの素材を使用しました。

群れの羊もほんとは自分で描こうかと思ったんですが、群れから独立した感じにしたかったのでこのようになりました。

CDのジャケットもデザイン

合わせてCDのジャケットもデザインしました。
これ初だったので楽しかったけど難しかったです。
制作したCDジャケットです。文字の並びはイラレで作りました。
結構お気に入り。

いよいよサイト全体のデザイン

メインイメージのOKをいただいたので、いよいよサイト全体のデザインに入ります。この間に構成も最初の提案時から変わっています。
通常のサイトよりはティザーサイトのような感じに。ということになりデザイン制作に入りました。

ティザーサイトは見ることはあっても作るのが初めてだったので、とにかくピンタレストで色々見ました。
ティザーサイト自体はゲームのサイトが多かったので参考にするのが難しかったです。

最初に提案させていただいたデザインです。
通常のサイトっていうよりティザーサイトの位置付けに変わったのでこんな感じになりました。

たしか羊と３人の関係性がわかりづらいというようなことを言われたような気がします。（もうずっと前のことになっちゃったのでフィードバックもらった時の文章探せなかった・・・すいません）
羊の皮をかぶった・・・というストーリーを生かしてこのような感じになりました。

完成です！

コーディングもしました。この頃はまだBEMやFLOCSSは聞いたことあるけど使ったことないわーって時期だったのでマイルールcssです。
使っている音源はフリー素材から自分のイメージでこのバンドに合いそうかなどうかな。ってのを探してきて使用させていただきました。https://usagidesign-e.com/clientsheep/

終わってみて

ほんといい経験をさせてもらいました。
作っていて気づいたんですが、わたし全部イラストのサイトデザイン初かも・・・って。なのでどうデザインすればいいかわからなくて、色々なサイトを巡りました。すごくすごく難しかったです。
あとティザーサイトで要素自体が少ないっていうのも難しいと思った原因かもしれないです。
おかげでいい経験になりました。

ふわふわのひつじさん ＠fluffylamb100 ほんとクライアント役を引き受けていただいて感謝です。ありがとうございました。

年内に書き終わることできてよかった・・・・