Portfolio

サイト名

Portfolio

制作期間

約2ヶ月（2026年1月〜3月）

制作タイプ

個人ポートフォリオサイト（職業訓練課題＋自主制作）

対応デバイス

PC・タブレット・スマートフォン（レスポンシブ対応）

使用ツール

• HTML5 / CSS3（SCSS）
• JavaScript（タブ切り替え機能 / Genspark AIを活用して実装）
• Genspark（AI画像生成）
• Visual Studio Code

担当範囲

企画・デザイン・コーディング・コンテンツ作成（すべて個人制作）

課題

就職活動に向けて、自分のスキルと作品を効果的に伝えるポートフォリオサイトを制作する。
採用担当者が「会いたい」と感じるようなデザインを目指した。

コンセプト

ペールピンク・テラコッタ・グリーンを組み合わせた温かみのあるカラーパレットで統一。
デザインへの熱量と丁寧な仕事ぶりが伝わるサイトを意識した。

配色の一貫性

--color-base / peach / terracotta / green など、CSSカスタムプロパティで色をシステム化。
どのページでも同じ色調が保たれるよう設計した。

About ページの充実化

スキルセクションにアイコン付きカードを採用し、使用ツールと経験レベルをひと目で伝える工夫をした。

作品紹介の詳細化

各作品に制作意図・ターゲット・プロセスを記した作品詳細ページを作成。
採用担当者が思考プロセスを深く理解できる構成にした。

1. リサーチ・分析

ポートフォリオサイトを調査し、掲載すべき情報を整理。

2. 設計・デザイン

サイトマップ・ワイヤーフレーム作成後、カラーとフォントを決定。

3. コーディング

SCSS を使ってカラー変数を管理しながら HTML/CSS を実装。レスポンシブ対応を同時進行で行った。

4. コンテンツ作成

各作品の作品詳細ページにテキストコンテンツを執筆。制作意図と思考プロセスを言語化。

5. 検証・改善

各デバイス（PC / iPhone）で表示確認後、フォントサイズ・余白・ナビゲーションの操作感を調整して完成。

・自分自身を「作品」として伝える難しさ、客観的に自分のスキルを整理することに時間を要した
・デザインと技術の双方を採用担当者に伝えるため、コードの品質（命名規則・構造）にも注力した
・作り込みすぎると「まとまりが欠ける」ため、引き算のデザイン判断の大切さを学んだ

・実案件の実績も追加していきたい
・JavaScript でローディング・オープニングアニメーションを実装したい
・作品数を増やし、幅広いデザインスキルをアピールできるようにしたい

本サイトは職業訓練の集大成として制作したポートフォリオです。
今後も継続的にアップデートし、実務に即したスキルを積んでいく予定です。