非エンジニアがGeminiでWebサイトを作った話

非エンジニア・非デザイナがGemini Canvasを活用しWebサイトを構築した話

Transcript

1. 「気まずさ」から生まれた 神速開発フロー 2025.09.04 〜非エンジニアが GeminiでWebサイトを作った話〜
2. 本日お伝えすること • 自己紹介 • きっかけは、ささいな「気まずさ」 • 使い方と注意点 • 応用編と結論 • まとめ
3. 011. 自己紹介
4. 畠山 正志（Masy）/ 株式会社kickflow AIによって人生が変わった（と思っている）非エンジニア <所属> 株式会社kickflow <担当> テクニカルサポート < 経歴> 保険営業 → CC管理者 → RPAエンジニア → テクニカルサポート <家族構成 > 妻、長女、長男、次女、三女 @guIXV3Eevc19237
5. こんな方におすすめです！ • 今あるWebサイト（LPやヘルプサイト）をもっと魅力的にしたい方 • 専門知識がなくても改善を進めたい方 • 「HTML/CSS…？」という 非エンジニア の方 • AIを使いたいけど、最適なツールが見つからない方
6. 02 2. きっかけは、ささいな「気まずさ」
7. ヘルプサイト改善プロジェクト始動 • 状況: 本格的な開発前に、複数のデザインパターンが見たい • 心の声: 「でも、この段階で忙しいデザイナーにサンプルを複数作って 、とは頼 みにくい（忍びない）…」 「AI使えばできるんじゃない？」そう思っていました ・・・ デザイナーさんにお願いしようとしたが…
8. 立ちはだかる「 AI活用の壁」 ツールの問題 種類が多すぎて、何を使えば良いかわからない 管理もしにくい 制約の問題 セキュリティやルール上、社内で使用できるツール が制限されている このもどかしさを解消したいという思いがきっかけに
9. 解決策: Gemini Canvasによる爆速サンプル生成 • ものの数時間で • 簡単に • デザイン案からHTML/CSSコードまで一括生成
10. ※これはサンプルです Before After (Gemini Canvas)
11. HTML/CSSコード
12. Before • デザイナーへの依頼が必須 • たたき台作成に数日かかる • エンジニアの工数も別途発生 • コミュニケーションコストが高い After (Gemini Canvas) • 自分でデザイン案を生成可能 • たたき台作成が数時間で完了 • HTML/CSSコードも自動生成 • 具体的なデザインを見ながら話せる
13. 033. 使い方と注意点
14. 使い方はとてもシンプル Geminiの「Canvas」機能に、実現したいことを具体的に入力するだけ プロンプト例
15. 注意点：AIのクセを理解して上手に使う デザイナーレビューの推奨 生成されたデザインがそのまま本番で使えるとは 限らないため、最終確認 は専門家へ 意図しない変更への対策 修正指示は「これまでの内容は変更せず、 XXだけ 修正」のように限定的かつ明確に 伝える
16. 044. 応用編と結論
17. 応用編：社内ポータル作成にも この手法はヘルプサイト以外にも応用可能 ※これはサンプルです
18. 余談 デザイナーにLPやヘルプサイトのデザイン案を作るのにおすすめを検証したところ... • 手軽さ: 非エンジニア でも直感的に操作可能 • 生成速度 : アイデアを即座に形にできる スピード感 • コード生成 : デザインとコードを同時に得られる効率性 これらの点から、現時点では Gemini Canvasが圧倒的に優れていると判断 （比較対象：Figma AI・Stitchなど） ＿人人人人人人人人人人人人人＿ ＞　Gemini Canvas の圧勝　＜ ￣^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣
19. 05 5. まとめ
20. 神速開発フローがもたらす 3つのメリット コミュニケーション円滑 化 具体的な「たたき台」を元に話せ るため、認識齟齬が激減 する 時間の大幅な短縮 数日かかっていた作業が 数時 間で完了し、業務全体が加速 する コスト削減 デザイナーやエンジニアの工 数を削減し、コア業務 に集中で きる
21. 最後に 株式会社kickflowは「AI 1st」をバリューに、全社員がAIを使いこなす文化を目指 しています。 <一例> kickflowヘルプセンターにAIヘルプデスクを導入しました このような環境に興味がある方は、ぜひお気軽にお声がけください。 詳細は弊社採用サイト をご覧ください。 シンプルにAI活用の意見交換も大歓迎です⭐
22. 「デザイナーさんに頼みづらい …」 ヘルプサイト改善プロジェクトでの、ちょっとした気まずい気持ちが原点 • 状況: 本格的な開発前に、複数のデザインパターンが見たい • 心の声: 「でも、この段階で忙しいデザイナーにサンプルを複数作って 、とは頼 みにくい（忍びない）…」 でも「AI使えばできるんじゃない？」 と思い・・・ 9
23. 02 2. デザイン改修に取り組む際の課題 4