デザイン制作

【サイト制作振り返り】反省点と今後やることまとめ

【サイト制作振り返り】 反省点と今後やることまとめ

おはこんばんにちは!はやぴ(@hayapiiii12)です。

先月は仕事で初めて、私メインでサイト制作に携わらせて頂きました。

今まではトンマナがあらかじめ決めっていたサイトの下層ページや、バナー制作を主にやっていたので、トンマナ決めからカンプ作成・コーディングまで携わらせて頂くことは初めての経験でした。

制作過程の中で頂いたFBや、反省点が噴水のごとく溢れ続けたので、次へ活かすためにもLOGに残そうと思います。溢れたままはよくないからね!容器にぶち込んで飲み干そう!(?)

案件の簡単な要件メモ

  • 案件内容:BtoC ペットサロンのWebサイトリニューアル
  • 主な課題:サイトのビジュアルを、新店舗のトンマナに合わせたい
  • 他課題点:SNS連携、SSL未対応etc…
  • ページ構成:計4ページ(TOP/下層3P/レスポンシブ対応)
  • 期間:約1ヶ月
  • はやぴ担当:トンマナ設計・デザインカンプ・コーディング

 

制作過程での反省点・今後やること

デザインルールの不統一

反省すること

一番大きな反省点がデザインルールの不統一でした。

ここでいうデザインルールとは

  • レイアウト構成
  • margin、paddingなどの余白感
  • 見出し、小見出しなどのテキストのフォント・配色・サイズ
  • ボタンなどのUI設計
  • ボーダーやイラストなどの装飾

などサイト構成の基本的なルールのことです。

XDで制作していたので、アセットパネルを利用して大体のルールは決めていたのですが、実際に制作していく中で自分の中で勝手なルールを作り出してしまい、結果的にサイト全体に統一感のない構成・デザインになってしまいました。

配色を決定したら不要なカラーパレットは消しましょうね自分・・。

 

しかも、指摘を頂いて気づくという始末・・。アーメン。

このデザインルール、実装時にも非常に大切になります。h1,h2やmargin、box決めなど。うぅエンジニア泣かせなデザインをしてしまったと反省。

またデザインルールの不統一はユーザーにとっても分かりにくく、情報把握がしづらい原因にもなります。常にユーザー目線の制作を意識することを改めて実感しました。

 

今後やっていくこと

  • とりあえずサクッと作り、A3の紙に印刷して全体構成を見直す

「LPやシングルページなど長さがあるサイトデザインは下にいくにつれブレがち」というパワーワードを頂きました。ブレさせないようにするためには一度全体を印刷するなどして構成を見直してみます。

全体を一気に見直すことで、デザインのブレや違和感、UIの分かりにくさなどを捉えることができました。

PC上でう〜んう〜んと唸ってても見えてこない改善点がみえてくるので次回に活かしたいです。

  • ボックス(箱)を意識する

コンテンツ内容などを意識してボックス化することが今回のデザインルールに必要だなと感じました。デザインの基本のひとつ、「グループ化」です。

グループ化、できているようでできていませんでした。コンテンツごとの要素がばらばらだったり。ここを意識するだけでも見やすい・分かりやすいルールの設計ができそう。

デザインのルール化について下記サイトも参考になったのでペタリしておきます。

Web制作をぐっと効率化する「スタイルガイド」の作り方とは?

https://www.webprofessional.jp/web-designers-should-do-compassion/

 

サイズ感、可読性など基本的なデザインレベルの低さ

反省すること

ボタンや各要素のサイズ感、あとは可読性を考慮するなど、基本的なデザインの指摘も受けました。どれだけ本や自己学習で勉強をしても、実践でできなければ意味はありません。

今回リファレンスサイトを漁りに漁りまくったのですが、リファレンスのビジュアル部分ばかりに目がいき、サイズ感や可読性などUIや機能部分への理解の薄さ、制作の落とし込みができていませんでした。

指摘前のデザインを見ると、ボタンは大きいわ、可読性が担保できていない配色してるわで酷いものです。

今後やっていくこと

  • デザインの基本がまだあやふやであればリファレンスを真似する

「基本」の基準を学ぶためにも真似することをやってみようと思います。

もちろんレイアウト・配色・フォント…全てを真似したらあかんですが、自分の中で「基本」を落とし込めてなかったらリファレンスサイトをばんばん見てサイズ感や配色を真似してみる。

そのためには「いいサイト」を見る目を養うことも大事。

日常的にサイトなどのデザイン観察をしていると、ここで活きてくるなと思います。

 

制作ツールの理解

反省すること

カンプ作成は最初XDで制作していましたが、細かなビジュアル調整だったり、CCライブラリをうまく使いこなせなかったりで最終的にPhotoshopで作り直す事象が発生。

ツールの使い分けは慣れなのかなとも思いましたが、ツールの特性を活かしたデザイン制作が大事だなとも感じました。

 

今後やっていくこと

今回のWebサイトはゴリゴリのビジュアル表現!ではなかったのですがやはりサイト制作は私はPhotoshopがまだ一番やりやすいです。

周りに合わせて慣れないツールで制作するよりも自分がやりやすい手段を選んでいきたい。

ただ先日参加した「XDUFes2019」でお聞きした、アップデート内容やXDを使用したWebサイト制作の方法を聞いて、XDも捨てがたい。。ここはもっと使い込んでその都度合った制作ツールを選んでいこうと思います。

下記のnoteが重要なポイントを書き出してくれていて参考になりましたのでペタリ。

 

【5分で読める】Adobe XD User Fes 2019のざっくりしたまとめ

https://note.mu/webstudyroom/n/nbdfd133a7eb7

デザイン・実装以外での反省点・改善点

制作スピードの遅さ

反省すること

自分の制作スピードが掴みきれず、スケジュールに遅れがでたり、後工程に負荷がかかってしまう事象が発生してしまいました。

スピードの遅さの原因を細かく振り返ると、

  • ツールのショートカットやレタッチ方法などの手法がまだ少ない
  • 分からない、自己判断できない箇所をひとりで考え込む時間が多かった

主にこの2つかなと思いました。どちらも改善次第でぐんと制作スピードは上がりそう。

 

今後やっていくこと

  • 制作時の時間を計るクセをつける(Toggl

自分の制作時間を知るには実際に時間を計るクセを次からつけてみます。

Toggl」というプロジェクトごとに計測できるツールを教えて頂いたので使用してみよう。プライベートな作業の時にも重宝しそうです。

使い方をマスターしきれてないですが、各工程ごとに時間を測れたり、プロジェクトごとにまとめることができるみたい。めっちゃ便利です。

 

  • ツールのショートカット・手法を意識的に覚える

ツールの使い方や手法はこれまた実践あるのみな気がするので、新しく覚えた手法やショートカットは意識的に使用して覚えていきたいです。

ここはショートカットあるのかな?と自己学習で都度検索。あとは副業として制作の場をもっと設けて手法をどんどん自分のものにしていきたいです。

 

事前の確認不足

反省すること

確認しておくべきことが後々にどんどん発生していまい、制作中に影響してしまったりしてしまいました。

手を動かすことに必死になってしまい全体的に確認すべきことを見落としてしまっていました。

 

今後やっていくこと

今回で事前確認が必要な点などがわかってきたので次回の制作時にはあらかじめ確認シートを作成し可視化、制作がスムーズに行えるように確認をとりたいと思います。

 

おわりに

上記が主な反省点・これからやっていくことです。全体を通してみると当たり前のことがほとんどですね・・。ですが実際に実務として制作をするとうまくいかないことが沢山ありました。

制作をしているとどんどん自分視点で物事捉えてしまうのでここは特に意識を変えなければならないと思いました。そのためには客観視(紙に印刷するなど)することや、レビューを細かく頂くことが大切だと感じています。

もしこれからWebデザイナーを目指す方や、実務でサイト制作をしている新人Webデザイナーの方にも参考になれれば幸いでございます。

 

ではでは〜!