PROCESS

BtoBコーポレートサイト風のメタ・ポートフォリオ

• ・実務での経験が多い分野のため、提供可能なスキルの実例として適切
• ・AIと連携がしやすい
• ・メタポートフォリオという設計と相性が良い（事例紹介＝デザイン紹介、制作過程、会社概要＝プロフィール）

Figmaの習得：コンポーネント、バリアント、プロトタイプ

• ・コンポーネントとバリアントの活用：手戻りリスクを低減
• ・アセット定義：デザイン資産の再利用性を高めるFigmaスキルを獲得
• ・AI利用を前提としたFigma設計：後の工程の工数を大幅に削減

AIアシスタント＋手作業という選択

制作スピードを最優先するのであれば、テンプレートの利用やAIに丸投げしたコード生成の選択肢もありました。今回は学習意欲と実践力の表明のためにAIアシスタント＋手作業を選択。AIによる効率化にメリハリをつけました。

AIによる効率化とコーディングスキルの向上を両立

1. ①命名規則などの原則を指示し、Claudeにベースコード生成を依頼
2. ②ChatGPTで構成とアクセシビリティのレビューを実施
3. ③VS Codeで手作業による調整と修正、という３段階１サイクルで進めました。

サイトの目的に合うGitHub Pagesを選択

実機検証を経てGitHub Pagesで公開。HTML/CSS/JSの基礎力を示すため静的サイト構築を選びました。商用運用の際は、要件に応じたサーバー環境の選定も柔軟に行います。