01
Overview
MINA
PORTFOLIO
点と点をつなぎ、情報や想いを整理しながら、構造と体験を意識して設計・制作したポートフォリオサイト
| 制作種別 | ポートフォリオサイト |
|---|---|
| 担当範囲 | 情報設計 / デザイン / コーディング |
| 使用ツール | Figma / Illustrator / VS Code |
| 実装技術 | HTML / CSS / JavaScript |
| 想定ユーザー | 企業の採用担当者 |
02
Concept
点と点をつなぎ、情報や想いを整理しながら、構造と体験を設計する。
| 目的 | 採用担当者が短時間で制作意図とスキルを理解できる、ポートフォリオサイトを制作。 |
|---|---|
| 設計思想 | 情報量を絞り、視線誘導と余白設計によって、ストレスなく閲覧できる構成。 |
| 工夫した点 | アニメーションは補助要素として扱い、可読性や操作性を優先。 |
03
All Pages
全体のページ構成とデザイン
PC DESIGN
[TOPページ]
SP DESIGN
[TOPページ]
PC DESIGN
[WORKSページ]
SP DESIGN
[WORKSページ]
PC DESIGN
[クリニックページ]
SP DESIGN
[クリニックページ]
04
Design Thinking
デザインまでの思考プロセス
-
Information Architecture
採用担当者が短時間でも全体像を把握しやすいよう、情報の優先順位を整理。
-
Design
余白と視線誘導を重視し、静かで読みやすい印象を設計。
-
UI / UX
PC / SPで情報の密度を調整し、操作ストレスを軽減。
-
Animation
演出を目的にせず、情報理解を妨げない自然な動きを心がける。
05
Technical Point
こだわったポイントや工夫
-
CSS Animation
軽量で滑らかな動き
-
Responsive
PC / SP最適化
-
Structure
再利用しやすい構成
-
Readability
読みやすさを優先
06
Next Work
今後の取り組みや学び
