Portfolio

Type : Portfolio Site URL : https://yuichiro-tsuchida.com/

転職活動にあたり、制作物や自分のできることをまとめたポートフォリオサイトを制作しました。 白と黒の配色やシンプルな構成にまとめつつも、エッジが効いていて「私らしさ」が伝わる、ポートフォリオ自体も一つの作品として見ていただけるようなサイトデザインを目指しました。

トップページのメインビジュアルでは、異なる形状の多角形をアニメーションさせることで、タイポグラフィを活かした立体感を演出しています。
このデザインは、進化の速いIT業界の変化に柔軟に対応し、さまざまな角度から課題にアプローチする姿勢を表現しました。
また、情報設計では「自分が誰か」ではなく「何ができるのか」を伝えることを重視し、目的を明確にした上で、メインビジュアルの下にWorksセクションを配置しています。

概要
自分自身の転職活動用ポートフォリオサイト
URL
https://yuichiro-tsuchida.com/
担当
デザイン / コーディング / WordPress
製作期間
1ヶ月
使用ツール
Visual Studio Code / XD / Figma / Photoshop
デザイン・実装について
このポートフォリオサイトでは、情報設計やタイポグラフィを重視し、視覚的に分かりやすく直感的に操作できるデザインを目指しました。
シンプルさを基調としながらも、白と黒の背景色を交互に使用することでメリハリをつけています。 またアニメーションや余白を工夫することで、視覚的なリズムと統一感を演出しています。
実装面では、WordPressを基盤にオリジナルテーマで構築し、CSS設計にはBEM記法を採用して保守性と拡張性を確保しました。
SPAのような滑らかなサイトにするためにBarba.jsを使用してページ遷移を行っています。 アニメーションはGSAPで一元管理し、一部の要素にはIntersectionObserverを使用することでインタラクションを効率的に制御しています。

NEXT WORK