制作ノート & レポート

なぜ作ったのか

ポートフォリオサイトに訪れる方は、日本語・英語・中国語とさまざま。「24時間、どの言語でも自然に対応できるアシスタントがいたら便利だな」と思い、AIチャットボットを導入してみました。

使った技術

• フロントエンド：Vanilla JavaScript（軽量でシンプル）
• バックエンド：n8n（ノーコードワークフロー自動化ツール）
• AI：OpenAI GPT-4o-mini（コスパ最強、問い合わせ対応には十分）

実装のポイント

1. 自動言語検出

ユーザーが日本語で話しかけたら日本語で、英語なら英語で、中国語なら中国語で返答。言語を選択する手間なく、自然に会話が始まるのがポイントです。

2. 会話の記憶

セッション中は会話履歴を保持するので、「さっき言った〇〇について」といった文脈を理解した返答が可能。ページをリロードするまで会話が続きます。

3. モバイル対応

スマホでも快適に使えるよう、レスポンシブデザインとタッチ操作を最適化。iOS Safariの自動ズーム問題も解決しました。

4. 親しみやすいUI

ロボットの目が動いたり、オンライン状態が緑の点滅で分かったり。ちょっとした遊び心で、使っていて楽しい体験を目指しました。

できること

• サービス内容の説明（ブランドデザイン、Web制作、3D制作）
• 料金の目安案内
• 制作期間の目安
• よくある質問への回答
• お問い合わせページへの誘導

成果

• 応答速度：2-3秒で返答（体感的にストレスなし）
• 言語検出：ほぼ100%正確に言語を判定
• 24時間対応：深夜でも休日でも即座に対応

感想

ノーコードツールとAI APIを組み合わせることで、思ったより簡単に多言語対応のチャットボットが作れました。GPT-4o-miniはコストが安いのに性能は十分。お問い合わせ対応なら完璧です。

技術的なハードルが下がった今、大事なのは「どんな体験を提供するか」。右下のロボットアイコンから、ぜひ試してみてください！

技術は手段、体験が目的。— RAKUMARIO

なぜリニューアルしたのか

このポートフォリオサイト、実は以前のバージョンは管理がとても大変でした。記事を1つ追加するだけで、複数のページを手作業で更新する必要があったり、日本語と英語のページが別々で同期が取れなかったり…。

そこで、もっと楽に管理できて、訪問者にも快適なサイトを目指してリニューアルしました。

主な改善点

1. 記事の管理が楽になった

以前は記事を追加するたびに、トップページ、ブログページ、各言語版…と複数のファイルを編集していました。今は1つのファイルを編集するだけで、全ページに自動反映されます。

2. 日本語⇄英語の切り替えがスムーズに

言語を切り替えても、今見ているページの同じ位置にいられるようにしました。例えば、ブログ記事を読んでいる途中で英語に切り替えても、同じ記事の英語版が表示されます。

3. 表示速度が速くなった

必要な情報だけを読み込むようにして、ページの表示速度を約2倍に改善しました。特にスマホで見る時の快適さが向上しています。

4. スマホでも見やすく

スマホ、タブレット、パソコン、どの画面サイズでも最適な表示になるように調整しました。

5. 新しいページを追加

• IPデザインページ：オリジナルキャラクター「楽楽」を紹介
• ブログ：制作の裏話や技術ノートを発信
• お問い合わせフォーム：日英両言語対応

技術的なこだわり

このサイトはReactやVueなどのフレームワークを使わず、シンプルなJavaScriptとCSSだけで作りました。理由は：

• 速い：余計なコードがないので軽量
• 長持ち：流行に左右されない
• わかりやすい：誰でもメンテナンスできる

成果

• 表示速度：3.2秒 → 1.5秒（約2倍速く）
• 翻訳：60% → 100%（全ページ完全対応）
• 更新時間：30分 → 5分（6倍速く）

感想

シンプルな技術でも、丁寧に作れば十分に良いものができると実感しました。大事なのは「どんな技術を使うか」ではなく、「訪問者にどんな体験を提供するか」。

言語切り替えがスムーズだったり、ページが速く表示されたり、そういう小さな配慮の積み重ねが、プロフェッショナルな印象を作ると思います。

技術は手段、体験が目的。— RAKUMARIO

問題：「赤字＝下書き」は危険

お客さんから「赤字で書いた部分は下書きだから公開しないでね」と言われることがあります。でも、これって人間の目だけに頼るので、ミスが起きやすいんです。

例えば：

• 赤字を黒字に変え忘れて、公開すべき情報が出ない
• 逆に、赤字のまま誤って公開してしまう
• 複数人で作業すると、ルールが曖昧になる

解決策：システムで管理する

「色」ではなく、専用の列で管理するようにしました。

1. 状態を明確にする

• 下書き列：チェックが入っている = まだ公開しない
• 公開準備OK列：チェックが入っている = 公開してOK

2. プレビューで確認

公開前にプレビュー用のリンクを共有して、「この内容でOKですか？」と確認してもらいます。

3. 公開したらすぐ反映

公開ボタンを押したら、キャッシュをクリアして、すぐに新しい内容が表示されるようにしました。

4. 更新時刻を表示

ページに「最終更新：○月○日 ○時○分」と表示して、ちゃんと更新されたことが分かるようにしました。

効果

• ✅ 誤公開がゼロになった
• ✅ 確認作業がスムーズになった
• ✅ 「本当に更新された？」という不安がなくなった

感想

「赤字＝下書き」みたいな人間ルールは、小規模なら良いけど、ミスが許されない場面ではシステムで管理した方が安全です。

問題：「確認してから公開」が形骸化する

お客さんに「確認してから公開してください」と言われても、実際には：

• 「何を確認すればいいの？」と迷う
• 「OKです」だけの返信で、本当に見たか不安
• 公開したのに「まだ反映されてない」と言われる

こういうことが起きがちです。

解決策：メッセージのテンプレを作る

毎回同じ形式でメッセージを送ることで、確認漏れやミスを防ぎます。

① 確認依頼のメッセージ

いつもお世話になっております。
○○の更新案をプレビューに反映しました。
変更内容：△△を追加、××を修正しました。
公開予定：本日19:00。
内容をご確認いただき、公開可否をお知らせください。

② 承認を受けたら

承知しました。公開準備を進めます。
公開後、反映時刻をご連絡します。

③ 公開完了の報告

公開しました。
- 反映完了：19:05
- キャッシュクリア：完了
すぐに新しい内容が表示されます。

運用のコツ

• 変更内容を要約する → 何を確認すればいいか明確になる
• 公開時刻を明記する → 「なんとなくOK」を防ぐ
• 完了報告を必ずする → 「本当に反映された？」の不安をなくす

効果

• ✅ 確認作業がスムーズになった
• ✅ 誤公開がゼロになった
• ✅ お客さんの不安が減った

感想

テンプレを作ると、毎回同じ品質でコミュニケーションできます。地味だけど、こういう小さな工夫が信頼につながると思います。

要件：言語を切り替えても迷子にならない

多言語サイトでよくある問題：

• 日本語で記事を読んでいて、英語に切り替えたらトップページに戻される
• 言語を変えるたびに、また同じページを探さないといけない
• ロゴや連絡先が、ページによって違う場所にある

これでは使いにくいですよね。

解決策：今いるページのまま言語を切り替える

1. 同じページの別言語版に移動

例えば、日本語のブログ記事を読んでいる時に英語に切り替えたら、同じ記事の英語版が表示されます。トップページに戻されることはありません。

2. ロゴと連絡先は全ページ同じ場所に

どのページを見ても、ロゴは左上、連絡先は右上に固定。言語を変えても、レイアウトは変わりません。

3. 配色を統一

白×金×浅い青の配色を全ページで統一。どのページを見ても、同じサイトだと分かるようにしました。

技術的な工夫

• ページの対応表を作って、日本語版と英語版を紐付け
• 言語切り替えボタンを押したら、対応するページに自動移動
• もし対応ページがなければ、トップページに移動

効果

• ✅ 言語を切り替えても迷子にならない
• ✅ どのページでも操作方法が同じ
• ✅ 統一感のあるデザイン

感想

多言語サイトで大事なのは、どの言語でも同じ体験を提供すること。言語を切り替えるたびにレイアウトが変わったり、迷子になったりしたら、訪問者は離れてしまいます。

技術的には難しくないけど、細かい配慮が必要な部分です。