URL

https://ymizomasa.com/

Source Code (GitHub)

https://github.com/mizonoel/ymizomasa-portfolio

Production Period

・デザイン：20時間
・フロントエンド開発：15時間
・WordPress構築：3時間

Overview

自身のWeb制作スキルを整理し、クライアントに安心感を与えられるように構成したポートフォリオサイトです。 ミニマルで清潔感のあるデザインをベースに、動きと余白で“心地よさ”を表現しています。

Design Concept

コンセプトは「Simple × Motion」。
余白を活かした構成と柔らかいブルーグラデーションで落ち着きを出しつつ、スクロールやホバー時に軽いアニメーションを加え、 シンプルな中にも“動きのある印象”を持たせています。
Figmaで全体のUI設計・配色・タイポグラフィを統一し、デバイス幅ごとのレイアウトも整理しています。

Skills

HTML / CSS / JavaScript / GSAP / WordPress / Figma

Technology

・HTML / CSS：セマンティックな構造を意識し、レスポンシブ対応。共通部分をコンポーネント化して再利用性を高める
・JavaScript / GSAP：ローディング、タイプライターアニメーションでトップ画面をリッチに装飾。Intersection Observer API を使ってフェードインやヘッダー固定などの軽量アニメーションを実装
・WordPress（オリジナルテーマ）：トップページ・Works一覧・詳細ページをカスタム投稿タイプで管理。案件追加をUI上で完結できるように設計
・Figma：サイト全体のワイヤーフレームとデザインモックを作成。共通コンポーネントを用い、デザインと実装の整合性を維持

Result / Learning

実装とデザインの両面から構築する流れを確立できたことで、今後の案件制作時のワークフロー基盤になりました。 また、Figmaとコードを往復しながらUI調整を行うことで、制作効率と再現性の向上を実感しました。