サイト名

Portfolio - Yamazaki Erika

制作期間

約3週間（2025年12月〜2026年1月）

制作目的

転職活動用のポートフォリオサイト

対象デバイス

PC

使用ツール

• Adobe Photoshop
• HTML5 / CSS3
• Visual Studio Code

担当範囲

企画、デザイン、コーディング（すべて個人制作）

Webデザイナーへの転職活動において、これまでの制作実績やスキル、経歴を効果的に伝えるためのポートフォリオサイトを制作。
採用担当者に「一緒に働きたい」と思ってもらえるよう、職業訓練で学んだスキルと人柄が伝わるようなサイト設計を心がけました。

1. 全幅レイアウトの採用

参考サイトを分析し、ブラウザ幅いっぱいにコンテンツを表示する全幅レイアウトを採用。
広々とした印象を与えつつ、コンテンツごとに適切な最大幅を設定することで、可読性も確保しました。

2. 配色の一貫性

メインカラー（ピンク系の色）、ベースカラー（クリーム系の色）、アクセントカラー（ダークブラウン系の色）を全ページで統一。
視覚的な一貫性を保ちながら、温かみのある印象を演出しました。

3. Aboutページの充実化

採用担当者が知りたい情報を網羅できるように意識しました。
・詳細な経歴とスキルセット
・前職で培った強みとWebデザインへの活かし方
・仕事への姿勢と価値観

4. 作品紹介の詳細化

各作品ページで、思考プロセスと成長意欲を伝える構成にしました。
・制作の目的と背景
・ターゲット分析とペルソナ設定
・デザインの工夫点と制作過程
・苦労した点と学び
・今後の改善点

1. リサーチ・分析

・転職活動で評価されるポートフォリオサイトの調査
・参考サイト（SANKOU!、デジハリ卒業生作品など）の分析
・採用担当者目線で必要な情報の洗い出し

2. 設計・デザイン

・サイトマップ作成（Home / Works / About + 各作品詳細ページ）
・ワイヤーフレーム作成（全幅レイアウトの検討）
・配色とタイポグラフィの決定

3. コーディング

・全幅レイアウトとコンテンツ幅の最適化
・Hover Effect/Transitionの実装

4. コンテンツ作成

・自己分析に基づいたAboutページの執筆
・各作品の詳細情報整理と執筆
・画像の選定と最適化

5. 検証・改善

・ユーザビリティテスト（第三者によるチェック） ・フィードバック反映と最終調整

・採用担当者目線で「何を伝えるべきか」の情報設計に悩んだが、優先順位をつけて整理することを意識した
・参考サイトを分析することで、効果的なレイアウト手法を学ぶ事ができた
・制作過程や思考プロセスを言語化することで、自分のスキルや成長を客観的に振り返ることができた

・作品数を増やし、幅広いデザインスキルをアピールできるようにしたい
・JavaScriptでのインタラクティブな要素（スムーススクロール、作品フィルタリング機能など）を追加したい
・お問い合わせフォームを実装し、採用担当者が気軽に連絡できるようにしたい
・実務経験を積んだら、実案件の実績も追加していきたい

このページは、まさに今ご覧いただいているポートフォリオサイトそのものです。
制作実績の一つとして、サイト自体の制作過程や工夫点をご紹介しています。