現場でリアルに使った!Webデザイナーの生成AI活用事例

デザイン業務にAIを組み込むのは難しいと感じていませんか?

「AIがすごいのはわかったけれど、実際のデザイン業務でどう使えばいいの?」
「プロンプトを考えるより、自分で作った方が早い気がする…」

そんな方に、現役Webデザイナーの具体的なAI活用シーンを紹介します。

言葉の言い換え

情報設計やワイヤーフレームの作成をしている時、同じ意味のまま言葉を微調整したい場面は多いですよね。
そんな時、私はAIに案を出してもらっています。

  • 各アイテムの文章量を揃えたい
  • スペースの関係で文字数を長く・短くしたい
  • 話し言葉から言い切りに変えたい

自分で考えるよりも、語彙の引き出しが多いです。幅広い案から選択できるので重宝しています。

工夫点

できるだけ具体的に要件を伝えるようにしています。

例:


あと5文字短くして

「〜〜」は必ず入れて

少し要件を付け足すだけで、理想に近いアウトプットが出てくる確率がぐんと上がります。

問題のある表記の洗い出し

景品表示法に反していないか・ユーザーに誤解を与えそうな表現がないかをAIに仮チェックしてもらっています。

フラットな視点で、見落としなく確認してもらえるため、制作した本人では気づきにくい点も指摘してくれます。

工夫点

「この文章をチェックして」とふんわり頼むのではなく、見て欲しい観点をセットで指示するようにしています。

例:


ユーザーが誤認しうる表現をリストアップして。

景表法的にリスクのある場所を教えて。その解決方法も添えて

注意点

AIが必ず正しいとは限らないため、最終判断は自分で行い、必要があれば専門家に相談するようにしてください。
また、機密情報や個人情報を入れないように気をつけてくださいね。

レイアウトの案出し

コンテンツのレイアウト案を、Figma Makeで出してもらっています。
結果、さまざまなパターンを試す時間が短縮されています。

工夫点

情報設計が伝わりやすいよう、マークアップを渡すようにしています。
ただのテキストで送るよりも、目的に沿ったデザインが出てきやすいです。

学びになること

対話した後は、推論を見るようにしています。
私のプロンプトをどう解釈し、どんなアウトプットが指示されているのか観察するのは、デザインの思考プロセスを言語化する能力も身につくように思います。

実際のFigma Makeのスクリーンショット

まとめ

デザイン業務でAIを使いにくいと感じるのは、デザインに正解がないからだと考えています。

デザインは、最適なものが出来上がるまでに色々なパターンを試す必要がありますし、最終的に人間が「これが最適である」と意思決定しなくてはなりません。
AIに最適なものを作ってもらおうとすると、結局修正コストや指示のコストがかかり「人間がやった方が早い」という結論になってしまいます。

私が思うに、AIはデザインを完成させてくれるツールではなく、サポートしてくれるツールと考えることがコツです。

あくまで、最終的なアウトプットを作るのは自分自身。
短い時間でさまざまなアウトプットのパターンを手に入れる手段、と捉えてみるのはいかがでしょうか。

AIを使って、制作の質を高めていきましょう!

投稿者について

Yokoyama Nana

名古屋学芸大学 メディア造形学部 デザイン学科を卒業後、名古屋のIT企業にて6年間、Webデザイナーとして勤務。現在もWebデザイン業務に従事しています。機能的なデザインを作ること・デザインとコードをつなぐことが得意です!

この投稿者の記事を読む