ポートフォリオ

概要

今の私を詰め込んだポートフォリオサイト制作。
私自身のこと・私のできることを可視化することを目的とし、コンセプトの設定からコーディングまで行いました。

使用ツール

Illustrator Photoshop XD HTML/CSS JavaScript

制作期間

1か月

担当範囲

企画 / デザイン / コーディング

制作について

目的・ゴール

私自身のデザインに対する考え方や、今できることを目に見えるように制作物をまとめること。
ご覧いただいた方が安心して仕事を依頼したいと思っていただけるようにすること。

ターゲット

人事のご担当者様など多忙な方を想定しています。

要望

・年齢・性別を問わないデザイン
・シンプルで簡単にページ内を周回できる
・信頼感や素直さが伝わるようなイメージ

配色

　信頼感や素直さが出したかったので、安心感を与える色である緑と、 純粋さを感じられるような白を基調としています。 また、コンセプトに合わせて植物がまっすぐ成長するようなイメージを演出したかったので、 みずみずしい爽やかな明るい緑を選びました。

全体像

　自分自身の名刺代わりとなるようなポートフォリオサイトにしたかったので、 名前の由来である「芽生える」をコンセプトにしています。 植物が成長していく様子を表せるように、ファーストビューや見出し部分などに 直線が伸びる動きをつけました。
　忙しい方でも短時間で見られるように、できる限り簡潔にコンテンツを配置するように意識しています。 誰が見ても見やすいようにシンプルなデザインにしたため、画面遷移時や要素の表示の際に動きをつけ、 リッチな仕上がりになるようにしました。

こだわり

　どのような制作物があるかが一目でぱっと見てわかるように、 タブを利用して制作物（WEBサイト・動画）を1画面で表示できるようにまとめました。
　PC版では左右の余白が寂しい印象だったので、画面左端に植物の画像を固定で配置し、 よりコンセプトに沿ったデザインにできるようにしています。

　レスポンシブについて、今まではほぼコンテンツの配置を変えるだけでしたが、 今回はPC版とスマホ版であしらいの植物の画像を切り替えたりと、 より画面サイズに合わせたデザインにこだわるようにしました。
　JS/Jqueryの面でも、今まで実装したことがなかった画面遷移時のアニメーションなどを入れ、 単純に動きをつけるというだけでなく、できることの引き出しを増やせるように制作しています。

　全体的にアニメーションで動きをつけたので、 今までの制作物よりも単調さがなくなったところが良い点だと思っています。 また、現時点でできることを反復するだけでなく、 新しくやってみたいことを実装するための検索力も上がり、自分自身の成長を感じました。 引き続き勉強を続け、掲載する制作物を増やしたり、ポートフォリオサイト自体をブラッシュアップ できるように努めたいです。