f design office代表 藤井
Webデザイナー（4年）、Webマーケター（1年）、物販セラー（5年）
実務案件は4年で300件以上対応
Webデザインスクール講師、元塾講師
はじめに
Webデザインを受注する際に、
「AIはいろんな分野に使われているけど、Webデザインでも使われているの？」
「具体的にどんなAIをどのように使うの？」
「画像を生成できると聞いたことがあるけど著作権侵害のリスクはないの？」
と、気になったことはありませんか？
もちろんAIに受注から納品まで全てを任せるのは不可能ですが、
実は部分的にAIを取り入れて納品までにかかる時間を短縮することで
クライアント様からの満足度を上げているWebデザイナーがいるのをご存知でしたか？
この記事では、私たちWebデザイナーが実際に「AIに任せているWebデザイン業務を4つ」を、
実例を交えてわかりやすくご紹介します。
この記事を読めば…
・Webデザイン業務におけるAI活用法がわかる
・法律に則ったAI活用方法がわかる
・リアルな成功例や失敗例がわかる
ぜひ参考にしてください＾＾
AIに任せるWebデザイン業務① リサーチ
リサーチはWeb制作の出発点でありデザイナーには必須とも言えます。
しかし膨大な時間がかかる市場・競合調査。
「市場の状況は？」
「競合サイトはどんなデザイン？」
「クライアントさんの強みは？ユーザーのニーズは？」
など、AIがなかった頃は1〜２日かけてひたすら情報集めをしていました。
もちろんリサーチが進まなければデザインの工程には取りかかれませんし、
リサーチのクオリティが低ければ「的が外れたデザイン」を作成してしまうことになります。
しかし今はAIに任せることで、数日かかっていた調査が、数分で完了します。
さらに人間の目で見落としがちな盲点も拾ってくれるにもかかわらず
従来必要だった人件費ほどの経費はかかりません。
①案件の概要を伝える
②Chat GPTが「リサーチに必要な情報の聞き取り」をしてくれる
前提を確認することでリサーチの方向性を決定します。
③聞き取りに対して情報を共有してリサーチの精度を上げる
リサーチが始まりました。あとは結果を待つだけです。
④20分ほどのリサーチの結果が共有される
丁寧なリサーチが生成されました。
必要であればこれを要約しておいてもいいですね＾＾
| 項目 | メリット | デメリット |
| 速度 | 1〜2日分の調査を約20分で完了 ※内容によって多少増減します | 大規模なリサーチはAPI 料金が増大 |
| 網羅性 | 最大100つのソースを参照 | ソースの信頼度の重み付けが難しい |
| コスト | 1〜2日分の人件費が数百円にカット ※使用するプランにより異なります | 大量にリサーチする際は有料プランで ないと難しい |
| 一貫性 | 見出し・表・引用が自動整形 | ハルシネーションの混入率 1〜3 % ※誤った情報を生成してしまうこと |
ただし、いい面もあれば悪い面もあるのは確かです。
特に誤った情報がないかはリサーチの結果を見て人間の目で確認する必要があります。
他にもこんなツールがあります。
無料版で使用できるツールもありとても便利です＾＾
リサーチで使えるAIツールの例
ChatGPT：ペルソナ設定、競合分析、ユーザーニーズの抽出に便利
Perplexity AI：事実ベースでの調査や引用付きでの裏付けが可能
Gemini / Notion AI：大量の資料を要約してくれる
AIに任せるWebデザイン業務② 文章作成
Webデザインを依頼する際に意外と悩ましいのが「文章」ですよね。
キャッチコピーやサービス説明、構成を考えるのはなかなか大変です。
中にはWebサイトやLPで使用する「文章をご用意ください」とデザイナーに言われて
「こちらが用意するの？」
「作ってくれないの？」
と思ったこともある方もいるのではないでしょうか？
AIが現れる前はデザイナーは文章作成に携わることはほとんどなく、
プロのライターさんが書いた文章を使ってLPやWebサイトを作成していました。
ですが最近はAIがそれなりに完成度の高い文章を書いてくれるのでとても便利です。
2種類の文章をAIを使って実際に作ってみます。
文章の生成が得意なAIツールは他にもこんなのがあります。
AIに任せるWebデザイン業務③ 画像生成
「背景画像のサイズが小さくて微妙に足りない…」
「写真やイラストの用意に時間がかかる…」
「アイコンを揃えたいけど統一感が出ない…」
といった、かつてのデザイナーの悩みをAIがうまく解決してくれます。
実際に画像を生成、拡張してみましょう。
こちらがBefore / After。パッと見ただけだと本物の写真ですよね。
注意したいこと
生成AIの取り扱いについて商用利用が許可されているツール・サービスのみを使用し、公開前にすべての画像・文章を人の目で確認し、第三者の権利侵害がないことを確認します。
著名人や実在の人物を特定可能な形で生成・使用することは法律上許されていません。
著作権や肖像権に安心のFirefly
Fireflyは、Adobe Stockや著作権切れのパブリックドメイン、オープンライセンスのコンテンツなど、法的に問題のない安全なデータだけで学習されています。
他のAIに見られる「ネット上の画像の無断学習」が行われていないのが特徴です。
画像生成で使えるAIツール例
Photoshop：画像拡張に強い
Chat GPT：初心者でも使いやすいAI生成機能あり
Adobe Firefly ：著作権の心配なしで画像を生成できる
AIに任せるWebデザイン業務④ コーディング
デザインはできても、コーディングができないWebデザイナーは世の中に意外といるってご存知でしたか？
そんなデザイナーも現在はAIの力を使ってコーディングの工程を進めます。
☑︎レスポンシブ対応
☑︎HTML＋CSS＋JavaScriptを丸ごと構築
☑︎書いたコードのバグチェックや解説
まずはChat GPTに構成案を出してもらう
目的やLPの詳細などを記載し大枠の作成を依頼します。
構成案が出たらCreateに構成案を入れる
直接コピペすると自動でLPを作ってくれます。
指示を出して1分くらいで出来上がります。
コーディングで使えるAIツール例
Create：ノーコード感覚でAIがサイト構築してくれる
ChatGPT / Gemini：自然言語からHTML/CSSを自動生成
Codeium / GitHub Copilot：リアルタイム補完＋エラー補助
まとめ
クライアント様からの満足度を上げるために有力なWebデザイナーは部分的に業務をAIに任せています。まとめるとこのようになります。
| 業務 | 使えるAIツール |
| リサーチ | ChatGPT / Perplexity / Gemini / Notion AI |
| 文章作成 | ChatGPT / Gemini / Copy.ai / Catchy |
| 画像生成 | Photoshop / Adobe Firefly / Chat GPT |
| コーディング | ChatGPT / Codeium / GitHub Copilot |
最後まで読んで頂きありがとうございます！！＾＾
お問い合わせはお気軽に！
☑︎Webデザインが必要だけど誰に依頼をしていいかわからない方
☑︎何から初めていいかわからない方
☑︎現在のデザイナー様から乗換えを検討している方
など下のボタンからお気軽にお問い合わせください！
コメント