Dify×Next.jsで自作！AI搭載ポートフォリオサイト開発

はじめに：ポートフォリオに「人格」を持たせる

「ただの静的なポートフォリオサイトではつまらない」
「自分の代わりに、AIが経歴やスキルについて答えてくれたら面白いのではないか？」

そんな思いから、今回はノーコードAIプラットフォーム「Dify」と最新のWeb技術「Next.js」を組み合わせて、AIチャットボットを搭載したポートフォリオサイトを開発しました。

単なるQ&Aボットではなく、感情に合わせて表情が変わるアバターや、多言語対応、おすすめ質問の提案など、UX（ユーザー体験）にこだわったシステム構成と技術スタックを詳しく解説します。

開発したサイトの概要

作成したポートフォリオサイトには、画面右下にAIチャットボットが常駐しており、訪問者の質問にリアルタイムで回答します。

サイトURL： Genie-GPT (Home)
主な機能：
- 経歴やスキルに関する自動応答
- 感情表現（回答内容に応じてアバターの表情が変化）
- 多言語対応（日本語・英語・韓国語）
- 「次のおすすめ質問」の提案

システム構成と技術スタック

DifyをバックエンドのAIエンジンとして活用し、Next.jsでフロントエンドを構築するモダンな構成を採用しました。

主な技術スタック

AIエンジン： Dify (Self-Hosted), OpenAI (gpt-4o-mini)
フロントエンド： Next.js (App Router), TypeScript, TailwindCSS
アーキテクチャ： FSD (Feature-Sliced Design)
バックエンド： Next.js API Routes
インフラ： Vercel, 自宅サーバー (Difyホスト用)

Difyワークフローの構築ポイント

単にDifyのAPIを叩くだけでなく、よりリッチな体験を提供するためにワークフロー内で工夫を行いました。

1. 感情表現の実装

AIの回答に「感情」を持たせるため、システムプロンプトで以下のような指示を与えています。

回答の最後に以下の情報を含めてください。 @@--additional_data--@@ #impression {感情を表す英単語（happy, sad, surprisedなど）}

フロントエンド側でこのレスポンスを解析（パース）し、感情タグに対応するアバター画像（Stable Diffusionで事前生成）を表示させることで、豊かな表情変化を実現しました。

あなたは感情豊かなウェブエンジニアです。
MBTIはINFJ-Tで、内向的で恥ずかしがり屋な性格を持っています。
性格を積極的に反映し、以下の感情を自由に活用してください。
---
{※感情表現の単語リスト}
---
...省略

#感情を表す単語
angry, happy, sad, surprised, anxious, excited, disappointed, smiling, serious, thoughtful, worried, confused, calm, shy, confident, bored, cheerful, skeptical, irritated, defiant, contemptuous, joyful, tired, intrigued, amazed, embarrassed, relaxed, passionate, depressed, blank, determined, pained, discouraged, elated, slight_smile, frowning, holding_back_laughter, dissatisfied, hiding_surprise