AI感のないプロ級Webデザインを作る方法

TL;DR

AI特有のデザインを消すには、デザインシステムやデザイン用スキルを導入し、書体、質感、写真、動画、動きを具体的に指定する。実在サイトのUIやFigmaデザインを参照し、複数の手法を組み合わせると、ブランドらしさと実在感のあるWebサイトに仕上げやすい。

Transcript

はい、こんにちは。ケトです。この チャンネルは生成AIの最新情報や活用 事例を紹介してます。是非チャンネル登録 お願いいたします。そして今回のテーマは AIを使ってウェブサイトを作る時に デザインがなんだかAIっぽくなってしま うっていうことありませんでしょうか? 例えばAIで適当にウェブサイトを作ら せると、ま、こんな感じで紫色の グラデーションがかかって絵文字が多様さ れる。そして3つのボックスのこの レイアウトでいろんなコンテンツが 積み上がってく。こんな感じの ウェブサイトを見たら、あ、これAIだ なってすぐ気づいてしまいますよね。で、 これをなんとかAI感をなくしてAIで楽 にウェブサイトを作れるようになったら いいなって皆さん思うじゃないですか。え 、そこで今回はですね、このAI... Read More

Key Insights

• AIの典型的なWebデザインは、紫色のグラデーション、絵文字、3カラムのカードが繰り返され、指定が少ないほど同じような外観になりやすいものである。
• デザインシステムの移植は、配色、書体、部品、余白などの判断基準をAIに与え、生成物の一貫性とブランドらしさを高める有効な方法である。
• 自社のデザインシステムは、既存のコーポレートサイトや資料の色と表現をWeb制作へ展開し、会社固有のブランドを生成結果へ反映できるものである。
• デザイン用スキルは、単なる見た目の指定ではなくAIにデザイン上の判断力を与え、通常の生成では出にくい特徴的なレイアウトや表現を導くものである。
• Figmaの完成デザインを先に用意する方法は、デザインと実装の工程を分け、AIを忠実なコーディングに使うことで高いデザイン性を確保する手法である。
• 技術を指定する方法は、Next.js、Vue.js、WebGLなどによるアニメーションや操作性を追加し、定型的な静止画面から独自性のある体験へ変えるものである。
• 様式と質感の指定は、タイポグラフィー、ネオブルタリズム、紙とインク風などを明示し、AIが頻繁に選ぶ無難なフォントや表現を避ける方法である。
• 本物の写真や動画の活用は、Webサイトに実在感と動きを与える再現性の高い方法であり、複数のデザイン手法と組み合わせるとAI感をさらに抑えられる。

Questions & Answers

Q: AI生成のWebサイトからAI感をなくす方法は？

デザインシステムやデザイン用スキルを読み込ませ、フォント、質感、レイアウト、写真、動画、アニメーションを具体的に指定する方法が有効である。さらにFigmaの完成デザインや実在サイトのUIを参照させ、複数のアプローチを組み合わせると、定型的な生成結果から離れやすい。

Q: AIっぽいWebデザインにはどのような特徴がありますか？

短い指示だけで生成したWebサイトには、紫色のグラデーション、絵文字アイコン、3つのカードを並べるレイアウトなどが現れやすい。内容をカード形式で積み上げる似た構成も繰り返されるため、見た瞬間にAI生成だと気づかれやすく、独自のブランド表現が弱くなる。

Q: デザインシステムをAI制作に使う方法は？

公開されているデザインシステムや、自社のサイトと資料から作った独自システムをAIに読み込ませ、そのルールを基にWebサイトを生成させる。検証ではIBM Carbon、デジタル庁のデザインシステム、自社の黒、赤、白を使った表現などが活用され、同じ制作指示でも外観が大きく変化した。

Q: デザイン用スキルでAIの生成結果はどう変わりますか？

デザイン用スキルを導入すると、AIにレイアウトや表現を選ぶための判断基準を与えられるため、標準的な生成では現れにくい特徴的なデザインを作りやすくなる。検証では複数の公開スキルが使われ、特にテイストスキルは異なる雰囲気のWebサイトを作れる方法として推奨されている。

Q: Figmaを使ってAIにWebサイトを実装させる方法は？

最初にFigmaで完成形のデザインを作り、そのデザインをAIへ渡してコーディングを依頼する。デザインと実装を分ける従来型の工程なので、短い文章からデザインとコードを同時生成する方法よりも、狙った見た目を実装しやすい。ただし、人がデザインする場合はセンスや費用が必要になる。

Q: アニメーションでWebサイトのAI感を減らす方法は？

Next.jsやVue.jsによる操作表現、WebGLの背景、Three.jsのスクロール連動3D、GSAPの文字演出、Matter.jsの物理表現などを取り入れる。さらにp5.jsの生成アートやD3.jsのデータ連動UIを使えば、画面が利用者の操作や情報に反応し、定型的な静止デザインとの差を作れる。

Q: 写真や動画でWebサイトに実在感を出す方法は？

実際の写真を大きく配置するほか、背景のループ動画、画像が切り替わるヒーロー、編集的な写真コラージュ、スクロール連動の写真ストーリー、ショーリール型の構成を採用する。本物の写真を使う方法は、検証された中でもAI感を減らす再現性が高く、導入しやすい方法と評価されている。

Q: 複数のデザイン手法を組み合わせる方法は？

ブランドの土台として自社のデザインシステムを使い、背景に浮かび上がるアート、スクロール時の文字表示、画像を固定して右側だけを動かす構成などを重ねる。さらにオリジナル写真を入れることで、配色や部品の一貫性、動き、実在感を同時に持たせ、AI生成かどうか判断しにくい外観へ近づけられる。

Summary & Key Takeaways

• AIに短い指示だけでWebサイトを生成させると、紫色のグラデーション、絵文字、3カラムのカードなど、似た表現に偏りやすい。検証では、同じ架空のタスク管理SaaSのLPを題材に作り方だけを変え、約30パターンを比較した。AI感を減らす基本は、曖昧な生成に任せず、判断基準や参照対象を与えることである。

• デザインシステムの移植とデザイン用スキルの導入は、少ない手間で見た目を変える有力な方法である。IBM Carbon、デジタル庁のデザインシステム、自社サイトから作ったシステムなどを使うと、一貫した配色や部品構成を反映できる。さらにFigmaの完成デザインや実在サイトのレイアウトを参照させれば、独自性を高められる。

• Webサイトの実在感は、様式、質感、動き、写真、動画を組み合わせることで高められる。ネオブルタリズム、紙とインク風の表現、3D、物理演算、生成アート、データ連動UIなどが検証された。特に本物の写真は再現性が高く導入しやすい方法とされ、最終例では自社のデザインシステムやスクロール演出などを統合している。