WORKS:
CLICK VIEW ALL
CLOSED
概要
webコーダーとしての自身のポートフォリオです。
就職活動を行うにあたり、現在のスキルを活かしたポートフォリオを新たに作成したいと思い、情報設計/コーディング/デザインを行いました。
就職活動を行うにあたり、現在のスキルを活かしたポートフォリオを新たに作成したいと思い、情報設計/コーディング/デザインを行いました。
制作目的・目標
ポートフォリオを見ていただいた方に、私のスキル感・人物像が伝わることを目標として作成しました。
デザインのこだわり
情報の配置順序として、まず初めに私の出来ることをお伝えしたいと考え、スキルセクションをFV下に作成しました。
サイトを通して伝えたいことの優先順位を考慮し、情報の流れに違和感がないよう設計を行いました。
デザインに関しては、シンプルでありつつ、レトロな雰囲気をもたせたかったので、画家のピエト・モンドリアンさんの作品から着想を得てデザインしました。
英字フォントは、全体のデザインに合わせるため、線が特徴的かつ、レトロな雰囲気を持ったフォントをGoogle Fontsから選びました。
「お気に入りのポートフォリオサイト」と呼べるよう、納得がいくまで何度も微調整を行いました。
サイトを通して伝えたいことの優先順位を考慮し、情報の流れに違和感がないよう設計を行いました。
デザインに関しては、シンプルでありつつ、レトロな雰囲気をもたせたかったので、画家のピエト・モンドリアンさんの作品から着想を得てデザインしました。
英字フォントは、全体のデザインに合わせるため、線が特徴的かつ、レトロな雰囲気を持ったフォントをGoogle Fontsから選びました。
「お気に入りのポートフォリオサイト」と呼べるよう、納得がいくまで何度も微調整を行いました。
コーディングのこだわり
CSS設計では、まず初めにフォントサイズや配色、余白など、共通するデザイン部分は共通クラスとして作成し、再利用しやすさを考慮して記述しました。
また、命名規則はわかりやすさとユニークさのある命名を心がけました。
BEMやFLOCSSなどの、コンポーネント設計のアイデアを参考に、それぞれのパーツが移動・修正しやすく、保守性の高いコードとなるよう心がけました。
スクロールでお問い合わせセクションに到達したときは、サイドバーのメニューをしまうことでお問い合わせセクションに目線を集中してもらえるよう構築しました。
アニメーションはシンプルながらも楽しさのある動きを選び、全体としてのバランスが整うよう適宜調整を行いました。
また、命名規則はわかりやすさとユニークさのある命名を心がけました。
BEMやFLOCSSなどの、コンポーネント設計のアイデアを参考に、それぞれのパーツが移動・修正しやすく、保守性の高いコードとなるよう心がけました。
スクロールでお問い合わせセクションに到達したときは、サイドバーのメニューをしまうことでお問い合わせセクションに目線を集中してもらえるよう構築しました。
アニメーションはシンプルながらも楽しさのある動きを選び、全体としてのバランスが整うよう適宜調整を行いました。
製作期間
デザイン：１週間
コーディング：１ヶ月
使用ツール
Illustrator / Photoshop / XD / Visual Studio Code / GitHub