Webポートフォリオ
サイト制作
- 制作期間
- 2025年～2026年（1年）
- 制作内容
- ディレクション / デザイン / コーディング（HTML・SCSS）
※WordPressテーマ化・システム構築部分はエンジニアと協業 - 使用ツール
- Photpshop, Illustrator, Figma, VSCode
「世界に一つだけのポートフォリオ」を目指しました。
日本の伝統的な成長概念である「守破離」を指針とし、基礎の上に細部のデザインや演出で自分らしさを表現することを意識しました。
サイトの構成
トップページのセクションのうち、下層ページを持つ「私について」と、「Web制作実績」のセクションを中心に構造を整理しています。
Web制作実績 :「メイン実績」では多様な業種の制作事例を20件以上網羅し、各詳細ページでデザインの意図が伝わるように設計しました。
また、ディレクションから担当した「指名案件」や本ポートフォリオサイトの制作過程をまとめた「個人作業」を整理し、実務で担当できる領域やデザインの考え方が伝わるようにまとめています。
守破離（しゅはり）
「守破離」を指針とし、基礎の上に自分らしさを重ねて完成させました。
守 : 基本
多数のポートフォリオサイトを研究しました。
ユニークな構造や華やかなインタラクションを用いた事例も印象的でしたが、採用担当者の視認性と情報の見やすさを最優先し、クラシックで安定感のあるレイアウトを基本にしました。
破 : 応用
▼安定感のあるレイアウトが単調にならないよう、セクションの区切りに曲線を取り入れてリズム感を加えました。
▼定型的な表現にとらわれず、視覚的な没入感を高める要素を取り入れました。
離 : 独自
日本で一般的なポートフォリオサイトとは一線を画すアプローチとして、海外のデザイントレンドや韓国のビューティーバナーに多く見られる「人物を前面に打ち出したレイアウト」を取り入れ、メインビジュアルをデザインしました。
採用担当者の印象に残り、私の強みや個性がひと目で伝わるファーストビューを目指しました。
また、サイト全体に韓国語(한글)のタイポグラフィを調和させることで、自分ならではのアイデンティティを表現しました。
スタイルガイド
カラー
text:#2C2C2C;
main:#DF5C65;
sub:#F49198;
accent:#C83F49;
フォント
日本語：Noto sans JP
英語：Fredoka
韓国語：LOTTERIA DDAG
フォントサイズ
h2 (42px) / h2_英語 (24px)/ h3 (34px) / h4 (28px) / 大本文 (20px) / 本文 (16px) / 小文字 (14px)
余白の単位
5pxの倍数