制作のキッカケ

他の人に見せやすいように、作品をまとめるためのWebサイトを作ろうと思いました。初めはフリーランスのWEBデザイナーに憧れていて、クラウドソーシングで案件を獲得する目的で作ってみました。後に就活のポートフォリオに路線を変更しますが、ここではフリーランスとして作成したサイトを紹介します。

苦労したところ

ポートフォリオは自分らしさをいかに伝えるかが大切だと思い、まず今まで通りフリー画像素材を使うのは良くないと思い、ヘッダーやフッターの画像はIllustratorで作成しました。しかし、それだと写真よりもインパクトが劣るので、アニメーションをつけて、視覚的にシンプルかつ、飽きのない演出を実装するためのアニメーションなど工夫を凝らしました。

作業工程

1.サイト全体の構成を考える

他のフリーランスのポートフォリオサイトを調べ、上から、ヘッダー、自己紹介、仕事内容、実績、フッターのセクションにすることを決めました。

2.イラストの作成

ヘッダー画像は最も自分らしさが反映される場所なので、無料写真素材で済ませるよりも、自分が得意とするモノクロ画をIllustratorで作りました。また、画面をはみ出すぐらい細長いサイズにし、左右端が繋がるようにしました。そのことで画像を横に並べると同じ画像がリピートして、一つのイラストとして、映るようにしました。

3.デザインカンプを作る

余白を意識しながら文章や画像をレイアウトしていきました。見出しの部分は全て同じデザインにし、上から下まで一貫性のあるデザインにしました。

4.コーディングをする

HTMLとCSS でサイトの見た目を作り、jQueryでアニメーションを入れました。最も苦労した部分はヘッダー画像が横に移動し続ける演出でした。画像を二つ用意し、画像の端っこが表示される前にもう一つ同じ画像を用意し続けることで無限にループしているように見せます。そのためのタイミングや移動する位置などを計算しながら、コーディングしました。