初めてのクライアントワークで

クライアントワークが終盤に差し掛かったので、わたしが制作を進めていく上での反省すべき点や気付きなどをメモしていこうと思います。

■デザインはかなりがっちり決めておく。

タイトルや本文によって文字の大きさが変わるが、どのページも全て統一するためどこかの段階でしっかり決定する。

■デザインの基本、『繰り返し』をすることでそれなりに綺麗にまとまっているように見える。

■今の自分が持っているアイディアだけで制作しない。どのパーツを作るにもすべて参考になるサイトや素材を収集し、研究する。

わたしの場合最初から頭の中でのみ考えていたので全然かっこいくデザインできず、あれをやってみたりこれやってみたりとゴチャゴチャパーツを移動して時間潰してました。初心者なのでまずは色んなページを見てまねして引き出しを増やさないと上手くなれないので次からもっと引き出し増やす機会を事前に作りたい。

■クラス分けめちゃむずい。

クラス分けはコーディングに入る前に紙に書き出してしっかり構成を把握しないと後でぐちゃぐちゃになることを体感しました。

それにより、また同じようなサイトを綺麗なコードで書き直しています。

■インナーBoxを使う。

内容はこの幅で収めたいけど背景は横100%にしたいときは、中にもう１つディブを作ってそれに対してwidth指定するといいです。

■情報整理が一番むずい

制作に入る前に一番！！！最初にしなければいけないのは徹底的な情報整理でした。

顧客向けとリクルート情報を混同させた会社ホームページを作らなければいけなかったのでどのターゲットをどこに流すかとか

この情報はどこに置くべきかとか

会社概要に代表情報はいるのか、サービスメニューに事例紹介は必要か、必要ならばページを分けるべきかとかそういうの１つ１つがめちゃ大変で

たとえばボタンの大きさもだし色も出し全てが初めてなので全てにおいて時間がかかりました。きっとこれを何度も繰り返していくことで次が簡単になっていくんだなということも確信したけどね。

あと、情報を捨てること。

情報整理をしていく上で色んなものを分けていくんだけど、立派に見えるようにたくさんの情報をだだっ広く置いてたものが自分でも気持ち悪く感じてきて、色んなサイトを見ていると情報量少なくてもシンプルにまとまっているサイトはかっこいいし会社もしっかりして見えるし、なのでいらない情報は、思い切ってちゃんと捨てようと決心しました。ページ数も無駄に多くとるより、ランディングページの一ページでまとめられるのであればそれはすごく気持ちのいいことだなと思った。

■クライアントからの資料収集

情報をまとめるといってもまずそのもととなる資料がないと話にならないので、なるべく早くどんな情報が必要なのかをこちら側からリストにして伝えるのが大事だと思った。

次から欲しい情報リスト使う！

自分でも貰った資料なにがあったかとか整理しなきゃいけないことたくさんあったので、そういうのはほんとうに大事だと思う。。そしてもらった情報にはチェックを付けていく。

■最初のヒアリングシートの内容をガン無視してた

途中からダサいのを回避するために完全にクライアントの要望だった赤を無視してモノトーンで仕上げてました。笑

さすがにアクセントカラーは忘れちゃダメだったー！って気づいて反省。

■スケジュールぐだぐだ

色んな機能を初めて使ったのでJavaScriptとか調べているとどんどん時間たって、そのうちに参考書読みだしたりとにかく時間が過ぎるのが早すぎる。。

途中でデザイン変えたり、構成変えたり、アニメーション入れてみたり、バグで作業を止めたり、色々大変でした。きちんと最初にゴールをシッッッッカリ設定して、そのあと爆速で具現化していく！

■スケジュールについて

資料は早めにもらう。

情報設計する。必要ないものは切り捨てる。

デザインは参考サイトを見まくって研究する。

フォント、カラー設計、タイトル周りなど全部設定。

必要だと思うJavaScriptの機能？を全部書き出しておく。後から何使おうかなー！と迷い迷い時間食うことになるので。

■レスポンシブデザイン

今回はあまりにもパソコンデザインで精一杯だったのでスマホサイズにはまだできてないけど、本を読む限り同時進行でスマホ別のレイアウト指示を出した方が良いみたいな。。？

そういうわけでも、やっぱりクラス分けはしっかりしたいなと思いました。

えー４の紙に丁寧にまとめてそれを永久保存版として毎回参照して制作してるのかな？みんな

■写真について

もらった写真をそのまま使うとやぼったくなるのでフリー素材サイトからひっぱってきました。ダサいのしかない！と思ってたら本にフリー素材サイト紹介されていて、めちゃくちゃ良かったので私も紹介します。めちゃおしゃれ。

■まだ試したいこと

レスポンシブデザイン

パララックス

こんな感じかなー。

なんやかんや作れました！あとはアップロードとかサーバーとかそこらへんの知識が皆無なので勉強しなきゃです。