Web制作会社に勤める私が、2026年7月時点でどのようにAIを活用しているのか、お話ししてみようと思います。
企業の体制や案件によっては難しい部分があると思うので、あくまでも私の場合の話にはなりますが、１つの参考になりましたらうれしいです。
前提として
・私はディレクター兼デザイナー。
・１案件あたり３〜５人で担当することが多い。
・中小企業の直接取引がメイン。
※モデル学習範囲の設定や、機密情報などは厳重に注意して使用しております。
目次
NotebookLM
もう手放せない！と思うほど重宝しているのが、NotebookLMです。
ご依頼を受けたら第一に、そのクライアントのノートブックを作ります。
①ソースの追加
ノートブックのソースには、
・既存サイト
・SNSアカウント
・依頼概要をまとめたドキュメント
・ヒアリングシートのテンプレート
・スケジュールのテンプレート
・既にある場合は参考デザイン
・自社のマニュアルやプラン概要
…などを入れておいて、案件がスタートします。
②土台づくり
次に叩き台として、NotebookLMに以下を考えてもらいます。
（資料として出力するのではなく、チャット上で１つずつ回答をもらっています。）
・ヒアリング項目
・スケジュール
・要件定義
・ターゲット
・コンテンツ案
・その他懸念点やアイデアなど、現状の情報から考え得ること
③ここからが人間の役目
②で作ったものは、叩き台中の叩き台です。
「ここはこう思った」
「ここはこうだからこうしたい」
「ここは良いと思う」など、
感じたことをできる限り全ての情報に返答していきます。
全体的な感想ではなく、１つずつ意見を伝えると、わりと２〜３回程度のやり取りで、かなり良い状態まで持っていける感触があります。
また、叩き台があることで、この案件で大切にすべきことや懸念点などが見えてきて、自分の頭の中で仮説の方針が出来上がってくるので、それらも常にソースに追加してあるドキュメントに記載するようにしています。
④共有用に整える
③で固まってきた情報を元に、共有用の資料を作成していきます。
ヒアリングシートやスケジュール表などは、テンプレート的に用意しているスプレッドシートがあるので、そこに入力できる形式になるよう、NotebookLMに変換してもらいます。
『ソースにある「○○様共有用シート」の「ヒアリング」というタブのN列にコピペできる形式に変換して！』といった感じです。
一方で、要件定義書やコンテンツの提案書などは、figmaやイラレを使って自力で作り、それをNotebookLMにチェックしてもらう、というやり方をとっています。
＊これは個人的な考えですが・・・
私は、「資料」も１つのコミュニケーションであると考えています。
自分がお渡しした文字を相手が読んで、それによって何かを感じたり、考えたり、決断したりする。
だからこそ、直接会話している時と同じような、人としての温度感や信頼感が感じられる資料づくりを心がけています。
また、綺麗すぎる資料は確定事項のように感じられてしまい、新たな意見が出づらくなるのではないか、という懸念もあります。
そして、Web制作は短くとも数ヶ月はかかります。
特にコーポレートサイト制作の場合は、これまでの経験や、将来に向けた考えなども、赤裸々にお話しいただく必要があります。
通常の業務もある中で、自分の会社の過去と今と未来に向き合い、そして長期間にわたって私たちとやり取りいただくというのは、かなり大変なことです。
だからこそ少しでも、これから始まる制作期間へのハードルを下げ、イメージを膨らましていただけるように、その企業に寄り添った言葉選びやテイストで、資料自体もデザインするように心がけています。
Gemini
NotebookLMである程度土台ができたら、主にGeminiを活用していきます。
①文字起こし
何気に重宝しているのが、Google meetの文字起こし。
正確でない箇所もあるため、あくまでも参考にする程度ではありますが、お打ち合わせの際は基本的に文字起こしをするようにしています。
どうしても自分でメモするだけだと抜け漏れがあったり、簡潔に書いてしまって、相手の言葉のニュアンスを忘れてしまったりするので、一言一句そのまま記録として残るのは大きいです。
また、クライアントと共有をすれば、言った言わない問題のリスクも減らせると思います。
この文字起こしの内容もソースに追加することで、NotebookLMが強化されていきます。
②参考探しや業界分析
NotebookLMは、外部の情報を読み取れないので、参考探しや業界分析は、NotebookLMを参照として、Geminiに尋ねるようにしています。
企業について、業界について。そして社会的な動向を踏まえた分析など、多角的にリサーチや分析を行い、これらもNotebookLMのソースに追加します。
ただ、これらはあくまでも仮説であり、最終的には当事者であるクライアントにヒアリングするようにしています。
③Gem
少しWebの制作フローからはズレてしまいますが、GeminiのGemも活用しています。
特に制作事例として自社サイトに掲載させていただく場合などに、自社の方針や、掲載内容などをGemに指示しておくことで、事例ページの作成がいくらかスムーズになります。
Google Stitch
ワイヤーフレームの叩き台作成
Geminiでプロンプトを生成し、Google Stitchでワイヤーフレームの叩き台を生成する、といった活用もしています。
特に役立っているのが、レイアウトの検証です。
例えば、１カラムでドンと見せるのか、２カラムでスッキリ見せるのか。
テキストだけで伝わるか、写真や図を入れた方が良いか。など。
指示をすれば、同じ内容で複数のレイアウトを組んでくれるので、どちらのレイアウトが良いか直感的に判断ができます。
私は、Google Stitchで生成したものをfigmaに入れて、良いと思ったセクションを組み合わせながら、最終的にはfigmaでワイヤーフレームを制作しています。
Claude
アニメーションの案出し
サイトのホバーエフェクトなど、ちょっとしたアニメーションを検討する際は、Claudeが優秀であると感じています。
動画ではなくHTMLで出力されるので、出力されたアニメーションの微調整もしやすいです。また、HTMLをコーダーさんにお渡しして、参考にしていただくこともできます。
アニメーションって、言語化するのが難しく、参考を探したくても検索方法が分からないことが多い。かといってfigmaやAfter effectなどで制作するには時間がかかる。
実際の動きを人に共有できるというのは、とても助かります。
まとめ
以上が、2026年7月時点での、Web制作における私のAI活用方法です。
AIツールは目覚ましいスピードで進化しているので、来月には違う使い方をしているかもしれませんが…
１つの便利な道具として、使うべきところ・そうでないところを見極めながら、これからも上手く活用していきたいです。
