Web design
1年次ポートフォリオサイト 〜Broaden〜
制作期間
2017.10〜2017.12
目的
課題制作
概要
大学1年次の成果をまとめたポートフォリオサイト。ほぼ初めて作ったWebサイトだったため、悪戦苦闘しながら制作した。全ページ飽きない楽しいデザインを心がけ、アニメーションやマウスオーバーのギミックなどを各所に散りばめるなど、遊び心のあるサイトにしている。
サイトのタイトル「Broaden」は「広がる」を意味する言葉で、1年で自分の考えるデザインの領域の幅や、デザインに留まらない様々な状況で視野が広がったと思い、そこからこの言葉をタイトルとした。サイト全体のデザインも宇宙、空、地上、地中、海などを用いた空間の広がりをテーマにして制作した。
サイトマップ
Conceptページ
Topページの「Broaden」をクリックするとこのページへと移動する。背景色はグラデーションでゆっくりと色が変化していく。
Profileページ
水中をイメージしたデザインで、背景の泡や上部にいる魚はJavascriptで動かしている。もう1匹の魚はマウスカーソルに付いてくるようになっており、魚が大きな泡に触れると泡が割れて中の要素が見える。
Workページ
作品をカテゴリごとに分けた目次のページ。それぞれのキャラクターはTopページの背景に出てきた宇宙、空、地上、地中にいた4人。背景色はマウスオーバーしたキャラクターの服の色に変わる。
カテゴリ別作品ページ
作品画像はlight boxでクリックすると拡大される。
Designページは宇宙、Fine Artページは空、Movieページは草原、Personal worksページは地中をイメージしたデザインとなっている。
Designページ
Artページ
Movieページ
Personal worksページ