「こんなに簡単にできるんだ、というのが素直な感想です」
そう話すのは、デザイナーの原さん。ヒューリスティック分析の業務効率化をきっかけに、AIを使ったウェブ診断サービスを約1週間で開発しました。原さん自身、コードを書いた経験はほぼなし。それでもすぐに実用レベルに限りなく近いサービスを作れた、その方法やデザイナーとしてのAIの付き合い方をご紹介します。
どこからAI活用をスタートするか考え中の方、他の人の開発事例を知りたい方はぜひチェックしてみてください。
「200ページにおよぶスクショ祭り」が開発のきっかけ
── 元々、AIで何かを作ることに興味はあったんですか?
業務でChatGPTなどにデザインの相談をすることはあったんですが、自らがっつり開発してみようとまでは考えていなかったですね。作れたとしても、根本的なプログラミングの仕組みがわかっていないのにリリースするのは不安でした。セキュリティの問題や、APIはどのくらいの使用量なのか、費用がどれくらいかかるかも計算しないといけないですし、個人情報を扱うとなったらまたケアする要素が増えます。裏側がわからないまま出すのはリスクがあるな、と考えていました。
── そんな中でサービスを作ろうと思ったのはなぜでしょうか?
仕事の中でヒューリスティック分析*を依頼されることがあるのですが、「これってAIが担える部分も多いのでは?」と思ったのがきっかけになりました。ヒューリスティック分析は最終的に膨大な情報をレポート化しますが、プロセスには大きな変動が出ることは少ないんです。作業としては、1画面ごとにスクリーンショット(スクショ)を記録、それを貼り付けて10の原則に合わせて言い回しを変えながら分析結果を書いていく。大規模な調査の場合、それが150〜200ページ分にもなります。
*ヒューリスティック分析=Webサイトなどのユーザビリティを専門家が自身の経験則や「ニールセンの10のユーザビリティ原則」に照らし合わせて診断・評価する手
さらに競合比較もするので、10ページの案件でも競合2社がいたら30ページ調べないといけないんです。ただ、その作業の大半がスクショの貼り付けなんですよ。ベーシックな指摘にプラスアルファでそのサイトらしさや独自の改善提案を加えたいのに、「ここのコントラスト比が足りていない」というレベルのかなり詳細な情報をスクショ込みで書かないといけないのは手間がかかります。
お客様にとっても、規模が大きいとその分100〜200万円クラスの発注になるので、なかなか依頼しにくいこともあると思います。であれば、ミニマムなサービスとしてリリースして相談につなぐ営業フローに乗せられないかな、と思いました。自分たちの作業としても不可が減るし、それがAIで再現可能になればクライアントにも我々にもプラスになるのではと考えたんです。
また、会社としてもAI活用をもっと活性化させようという動きがあり、それも後押しとなって今回の開発に踏み込みました。
開発期間は約1週間。初めてのClaudeと共同設計
── 実際にどのように作ったんですか?
社内の蓄積されたノウハウ×AIの力をかけ合わせて作りました。どういうアウトプットにすればいいかを始めにAIに学ばせたんです。そうすれば複雑な用語を使った文章も、AIですぐに出せる。
具体的には、まずClaudeにヒューリスティック分析をさせてみて出力を確認して、Claude Codeを使って誰でも使える形にしていきました。社内で蓄積した分析データを読み込ませて、こういう形式で形成したいと伝えたら、レーダーチャートを含む詳細なアウトプットが返ってきました。さらに独自の評価チェック表も読み込ませて精度を上げていって、約1週間で形にしました。
ベータ版としてリリースしたヒューリスティック分析サービス「Bylook」https://bylook.byname.in/
── 開発の進め方自体もClaudeと相談したんですか?
そうなんです。最終的にやりたいところまで全部伝えておくと、開発のフェーズ分けから費用感まで含めて計画を立ててくれるんですよ。フェーズ1はスクショをアップして5項目を評価、フェーズ2で自動スクショ取得、フェーズ3以降でアクセシビリティの軸を追加して、最終的にはフェーズ8くらいまでの開発を想定しています。どこから有料化するか、序盤は無料で使ってもらって後で課金にするかどうか、というビジネス戦略面も整理してもらいました。
── 現在の仕様はどのようなものですか?
元々はURLを入れれば出せる形にしようと思っていたんですが、画面サイズによって見え方がかなり変わるという問題があって。今はWebサイトのキャプチャをアップロードすると解析してくれる形になっています。AI上でキャプチャも取れるんですが、それをするとAPIのトークン消費が増えるので、まずはコストを抑えた形でスタートしています。自動スクショ取得は第2フェーズとして進める予定です。
▲Bylookを使って出力した分析画面
── 時間をかけて完成度を高めるよりもまずはリリースする、という方針ですか?
今の時代、誰でもツールが作れるので、スピードも大事だと思っています。時間をかけている間に他社から同じようなテーマで、さらに精度の高いサービスが出る可能性もある。そう考えると、できあがってからまとめてリリースするより、出してアップデートしていく方がいい。Claudeで開発するとエンジニアへの発注コストがかからない分、実際に使ってもらいながら改善していく方が現実的です。まずベータ版でもリリースして様子を見て、反応を受けながらさらなる開発をしていくイメージです。
「作業はAIに、判断は人間に」という役割分担
── 今回のAIとのサービス開発で、AIへの考え方は変わりましたか?
AIと人間の棲み分けについて、考えるようになりました。AIにスクショを渡して「ヒューリスティック分析して」と言えば確かにやってくれます。ただ、出てきた結果に対して何をすればいいのか、正しく判断するためには専門的な知識が必要です。多角的に考え判断を担うポジションが、専門家としての価値になっていくんじゃないかと思っています。あらゆる場面で作業はAIに任せて、私たちはAIが出した結果への判断やプラスアルファの提案をする、そういう時代になっていくんじゃないかな、と。
将来的にはGoogle Analyticsのデータも読み込ませて、アクセス解析の結果もAIが整理して出せる形にしたいと思っています。GAの画面は情報量が多かったり、仕様が頻繁に変わったり、普段から見慣れていない方にはなかなかわかりにくい。AIが噛み砕いてわかりやすく出してくれれば、より使いやすくなりスピーディーな判断に繋げられるのではと考えています。
── デザイナーとして、AI時代に向けてどんなことを考えていますか?
AIの活用が広がるほど、必然的に単純な制作作業の単価は変わっていくでしょう。そうなると、同じ売上を維持するために案件数を増やすだけでは消耗してしまう。AIとどう付き合うか、自分の価値をどこに置くか、ちゃんと考えていかないといけないですね。
私はコーダーからキャリアを始め、デザイナーやディレクターへ転身してきましたが、AIができることが増えるほど、対人コミュニケーションやディレクションの比重が増していく気がしています。AIが代替しにくいのはやはり人と人のやり取りなので、そこに自分の強みを活かしていきたいと思っています。
── 他にも作ってみたいサービスはありますか?
私は犬を飼っているので、いつかペット関連の事業もやってみたいと思っているんです。愛犬が体調を崩した時期に、毎回の食事量を細かく記録する必要がありました。ドッグフードを100グラムあげて何グラム残したかを毎回測るんですが、専用のツールは高価なものが多く、普段使っている食器で手軽に測れるものがあればいいな、と思っていたんです。
それをClaudeに相談してみたら、市場調査から始まって、プロダクト開発に必要な初期費用の試算、製造パートナーの活用方法、さらには地域ごとの補助金制度まで調べてくれて、事業計画書のたたきまで作ってくれました。
それがビジネスとして成立するかどうかの最終判断は、自分自身やビジネスの知見がある専門家に見てもらう必要があります。ただ、「まずたたきを作る」というところまでであれば、アイデアを相談するだけでここまで形にできる。思いついたことをすぐ事業計画の入り口まで持っていけるのは、以前とはまったく違う感覚ですね。ビジネスを作るハードルが、確実に下がりました。
Claudeは「3ヶ月目の新入社員」
── 実際にClaudeと一緒に仕事してみて、どう感じていますか?
3ヶ月目くらいの新入社員と仕事をしている感覚になる時があります(笑)。たとえばスケジュールを依頼すると、デザイン→確認→コーディング→確認という実務の流れを踏まえずに作ってくることがあって。「ここはこういう順番が必要なんだよ」と伝え直すこともありますね。
ただ、そういう時に立ち止まって考えると、うまく伝えられていなかった自分の側に気づくことも多いんです。プロンプトの精度を上げることで出力も変わるので、AIとのやり取りを通じて「伝える力」が鍛えられている感覚があります。こういった部分も、新入社員の教育と似ているかもしれないです。
── 最後に、今回の開発で一番の学びは何でしたか?
AIってこんなに簡単にサービスが作れるんだな、ということと、定型的な作業はしっかりこなせる、というのがわかったことです。思いついたことをClaudeに相談すれば、市場調査から開発計画のたたきまで作れる。サービスを作ってみようというハードルが、確実に下がりました。
もう既に「やるかやらないか」、それだけの話になってきていると思います。バイネームでは「まずやってみる」ということを代表の井上さん始め、社員で取り組んでいます。デザイン会社として、どういう価値提供をしていくべきか、日々チームで考えていますね。
株式会社バイネームでは一緒に働く仲間を募集しています
BynameのWantedly より、会社情報や募集をご覧ください!カジュアル面談では実際にデザイナーとして働く社員がお話します。