はじめに
今回のプロジェクトでは、弊社の新しい事業「crotchet / school
」の本格的な立ち上げに伴い、ロゴ制作をはじめ、ホームページの全面的リニューアルまで幅広い工程でAIを活用しました。
活用したプラットフォームは会社で段階的に導入された Claude Code / ChatGPT / Codexをはじめ、画像生成にはAdobe Fireflyをメインに当時話題となっていた様々な画像生成ツールなどです。
「AIに任せるところ」と「人が判断・調整すべきところ」を試行錯誤しつつ判断しながら、業務効率化と品質向上の両立を目指しました。
①ロゴ制作
ロゴ制作では、最初にPinterest等でイメージの方向性を確認、イメージが固まってきたところでChatGPT や Adobe Fireflyなどでモックの生成を行いました。
同じようなプロンプトでも人によってAIのアウトプットが微妙に違うため、色々な角度で探ることができました。
また、短時間で多くのバリエーションを得られ、初期段階の意思決定が非常にスムーズ進行しました。
ただ、事業の世界観を表現する微妙なニュアンスやバランスはAIでは拾いきれず、修正のアイデア出しやイメージ・修正の確認、意見のまとめまではAIを使用しましたが、実際の最終的なアウトプットは手作業で行いました。
こちらは実際制作したロゴたちです。
②ホームページ制作
HP制作では、AIを 「作業支援ツール」ではなく「共同作業者」 として活用しました。
ディレクション・PM面
ディレクション・PM面では主に以下を AI に任せました。
- スケジュール管理
- 掲載コンテンツに必要な情報整理
- 打ち合わせ内容の要約・構造化
情報整理や記録に強いAIの特性を活かすことで、抜け漏れは若干ありつつも使わないよりは作業負荷を大きく減らせたかなと感じました。
コーディング面
今回はかなり模索しながらの活用だったため、詳細プロンプトの共有は難しいですが、流れとしては以下のように進めました。
1.Figma MCP を通じて、静的コーディングを丸ごとAIに依頼
- ディレクトリ構成
- 想定される機能要件
を含めてAIに生成させました。
2.人間が細部を手動修正
- デザインとの乖離を調整
- コンポーネントの最適化
3.Strapiの構築〜組み込みをAIと協働
- モデル設計
- API の設定
- フロント側との連携
- 最終的な公開作業は手動で実施
AIが下地や土台を作り、人間が仕上げるという流れが今回はベストだと感じました。
今回のAI活用したプロジェクトで苦労したこと
SCSSの構造理解のギャップ
AIが生成したSCSSは、
- 階層構造が複雑
- 記述の一貫性が弱い
- 変数の不統一
などがあり、読み解いて修正するのにかなり時間がかかりました。
そのため、事前にプロジェクト全体のSCSSの記述ルールをAIに学習させるべきだったかなと思います。
CSSの冗長さ
不要なスタイルや上書きがあり、フロント部分に手戻りが多かったと感じます
「AIは完璧ではない」と改めて認識し、別のAIや人によるコードレビューが重要かなと感じました。
コードレビューについては近年かなり話題に上がっている部分なので自身も勉強しつつ色々試したいと思います。
StrapiをAI任せにすると運用で後々困る部分も...？
時間や知識の制約上、Strapiの構築をAIに任せる場面が多かったものの、AIを通して気づくこともありますが運用性・拡張性を考えると、最終的には人の理解が不可欠と実感しました。
AI活用で良かったこと
アイデア出しがとにかく速い！
AIを活用したコミュニケーションは、方向性の確認が早い段階で固まると強く感じました。
特にロゴ制作や構成案の段階で大きな効果を感じています。
情報整理の負荷が激減
ミーティングの要約や情報の棚卸しはAIが得意とする領域のため、制作フローの混乱が少なくスムーズに進行できたと感じます。
プロトタイプ生成のスピード感
Figma → コード生成 → 調整 の一連がかなりスピード感を持つことができたかなと思います。
土台をきちんとするためのプロンプトが整備されていればさらに工数が減らせるので、情報仕入れつつ試していきたいですね。
まとめ
ロゴ制作からHP制作まで、AIは大きな助けになりましたが、「すべてをAIに任せる」のではなく、AIと人それぞれの強みを理解して役割分担することが重要だと強く感じたプロジェクトでした。
プロジェクト開始した当時よりかなりAI自体も進化し続けているので、情報に追いつき、さらに高品質で最適なものを作っていきたいです。
また、ぜひ今回のプロジェクトで作成した伊豆の学校事業「crotchet / school」のサイトに一足運んでいただければと思います！
https://crotchet.school/