ポートフォリオサイトを作りました

ポートフォリオサイトがないと何かと不便なので、、、というか授業課題で前々から作ろうと思ってたポートフォリオ作らされた。みんなのサイトの投票で1番になれたので良かった。
http://dnote.biz/pf/

 

 

トップページ

 

作品一覧ページ

 

作品詳細ページ

 

トップページのスマホビュー

 

作品一覧ページのスマホビュー

 

Illustratorによる制作カンプ

 

ポートフォリオサイトを制作するにあたって何を見てほしいか、ユーザーは何が見たいかを意識してその最大公約数でデザインしました。具体的には「あなたの名前は?」「何作ってるの?」「どんな人なの?」「何ができるの?」という4つに絞りました。この4つの要素は全て縦長のトップページに収めました。作品は全ては収まりきらないのでトップページではランダムな作品を2列に収まる数だけ表示するようにjqueryで制御しています。作品一覧のページはshuffle.jsというライブラリを使って実装しました。作品ジャンルごとでフィルタリングできます。今回のサイトは制作前段階からスマートフォンでの閲覧を意識していて完全にレスポンシブに対応させました。コーディング大変でした。トップページの3つの輪っかの重なりには自分の得意領域であるGraphicDesign×WebDesign×Programingという意味をもたせました。ビジュアル的にもかっこいいので意味は理解されない前提でトップページに置きました。

URL http://dnote.biz/pf/
制作ソフト Adobe Illustrator sublimetext
使用技術 html5 css3 jquery easing shuffle.js ajax svg
製作期間 デザイン考えるのに2週間 ファーストコミット11月28日最終コミット12月20日