昨年末1週間のお休みをいただきまして、お仕事ではなく自分でやりたいことをやる期間というものを作りました。
そこでやりたいなと考えていたのがこちら。


今回はwebサイトの顔でもある「フロントページ」を中心にデザインを変えたので、英語と数字が苦手なデザイナーのわたしどのようにして進めていったのかをご紹介したいと思います。

前準備:ラフ

まず実際に制作へ進む前にこんなラフを用意しました。

rough drawing
rough drawing

「構成」・「載せたい内容」・「どんな風に見せたいか」をラフに書き出しをしました。だいぶお粗末ではありますが、普段やっているグラフィックでもこのようなラフを書いてからイメージをさらに固めているので、まずは同じ容量でやってみました。

ここから資料や参考書を見つつ、さらにイメージを固めていきます。

デザインの参考資料探し

印刷物を作る際にも資料として参考書やデザインの実例などを探してデザインイメージを固めているので、今回も同じように資料を見ていきます。

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

社会人時代、web案件でカンプ制作を担当していた時に購入したアイデア集です。
この時の案件が初めてwebというものに触れた案件だったので、まずはwebの基礎知識から実例までが見れるものを選びました。配色や印象・レイアウトなどのカテゴリー別にデザインを探すことができ、デザインパーツまで見れるのがオススメポイントです。


WordPressレッスンブック 5.x対応版

退職してしばらくデザインから離れていて、WordPressに触れておらず、久しぶりに使ってみたら、「ブロック」になっていて驚きました…。
完全に浦島太郎状態だったので、これを気に一から勉強しようと購入したのがこちら。こちらの書籍では、WordPress 5.xで導入から開設までをわかりやすく細かく手引きしてくれます。

Webデザインの参考に!ハイレベルなポートフォリオサイト21選

イケてるWebデザインで作られたポートフォリオサイト21選まとめ

あとはwebサイトの動きを見ることができる実際に公開されているwebサイトを参考にしました。
まとめサイトやブログから見ることで、ステキなサイトに巡り会えるのでよく活用していますが、今回はポートフォリオサイトの制作ということで、現役デザイナーさんのサイトを中心に参考にしています。

これらを元に「実績やデザインを多く見せることができる」「モーション等の動きを入れて見ていて飽きないwebにしたい」という2点をベースに制作をすることにしました。