etomoji
お問い合わせはこちら

ARTICLES / DESIGN / AI / KNOWLEDGE

ETOMOJI INC.

AIっぽいデザインを変える、6つのテクニック。素材・文字・余白の整え方

フリー素材の手描き感、自社の写真、文字組み、余白。AIでつくったデザインを、伝えたい内容に合わせて仕上げる6つの方法を紹介します。

明るい水彩の背景に青い作字で、AIっぽさをなくす、6つのテクニックと記したサムネイル

AIでつくったデザインの違和感を減らすには、画像を生成し直すだけでなく、素材の選び方、文字の組み方、装飾の量を見直すことが有効です。手描き素材や実際の写真を取り入れ、伝えたい内容に合わせて編集する。この記事では、バナーやWebサイト、提案資料に使える6つの方法を、検索語や修正例とともに紹介します。

最初に、「どこがAIっぽいのか」を分けてみる

「もう少し自然に」「AI感をなくして」と指示しても、思うように変わらないことがあります。直したい場所が曖昧なまま、画面全体をつくり直しているからです。

まず、気になる点を具体的な言葉に置き換えてみてください。

気になる見え方最初に試す修正
人物や商品の表面がツルツルしている主役の画像を実写に差し替える
光、粒子、立体装飾が多い装飾を非表示にし、必要なものだけ戻す
文字まで画像の一部になっている文字を別に入力し、改行と余白を組み直す
どの会社にも使えそうに見える自社の商品、場所、仕事の写真を入れる
素材を足したら散らかって見える線の太さ、色、影の方向を揃える
何を最初に見ればよいか分からない主役を決め、周囲の情報を小さくする

これらは、AIを使った証拠ではありません。人が制作したデザインでも起こります。本記事で扱うのは制作手段の見分け方ではなく、こうした違和感を改善するための編集方法です。

1.完成形を丸ごと生成せず、画像と文字を分ける

バナーの背景、人物、見出し、ボタンまで一枚の画像で生成すると、見出しだけを大きくしたいときにも修正しにくくなります。

生成画像は、完成品ではなく「使う素材」として扱うと調整の自由度が上がります。

たとえばセミナー告知なら、次のように分けて制作します。

  • 背景画像:写真や生成画像を使用する。
  • イベント名・日時:デザインツールで文字を入力する。
  • 申込ボタン:図形と文字で作成する。
  • 企業ロゴ:支給された正式なデータを配置する。

すでに文字入りの画像ができている場合は、文字のない画像を用意し直すか、必要な画像部分だけを切り出せないか確認します。文字の上に無理に別の文字を重ねると、下の文字の輪郭や不自然な塗り跡が残りがちです。

背景画像を選ぶ段階で、文字を置ける場所があるかも見ておきましょう。左側に見出しを置くなら、主役が右側にあり、左側の模様が少ない画像を選ぶ。画像を決めてから文字を押し込むより、読みやすくまとめやすくなります。

なお、生成画像に含まれる商品名やロゴらしき形は、そのまま正式な表示として使わず、正しいデータに置き換えます。

2.手描き感のあるフリー素材は、「役割」を決めて取り入れる

均一な線や滑らかな面ばかりで構成されたデザインには、鉛筆のかすれ、水彩のにじみ、筆の強弱などを加える方法があります。手描き感のあるフリー素材を探して、表現に合うものを取り入れてみましょう。

素材を探すときは、「おしゃれ」「温かい」だけで検索するよりも、画材と用途を組み合わせると候補を絞りやすくなります。

取り入れたい表現検索語の例使う場所の例
少し揺らいだ線手描き 線/鉛筆 ライン強調する言葉の下
柔らかな色の広がり水彩 にじみ 背景写真の背後や画面の端
素朴な植物の絵植物 ペン画/草花 手描き季節や自然がテーマの挿絵
紙の質感紙 テクスチャ/画用紙 質感背景の一部
説明に使う小さな絵手描き アイコン セット手順やサービスの説明

ここで挙げた検索語は、探し方の例です。検索結果の「手描き風」という表現だけで、実際の制作方法まで判断しないようにしましょう。

最初は、手描きの下線を一本だけ入れてみる

たとえば、白地に写真と見出しを置いたバナーが少し硬く見える場合。見出し全体を手書き文字に変える前に、強調したい言葉の下へ手描きの線を一本入れて比較してみます。

線の色は、すでに使っているアクセントカラーに合わせます。線が文字よりも目立つなら、細い素材に替えるか、短くする。下線を入れた言葉へ自然に目が向けば、役割を果たしています。

温かみを足すために、手描きの線、水彩の花、紙の背景、筆文字を一度に入れる必要はありません。

素材を増やすなら、同じ作者やシリーズから選ぶ

複数のイラストを使うときは、個別に気に入ったものを集めるより、同じ作者やシリーズの候補から選ぶと表現を揃えやすくなります。ただし、同じ作者でも作風が異なる場合はあるため、最後は並べて確認します。

見るのは、輪郭線の太さ、塗りの濃さ、色の鮮やかさ、立体感です。細いペン画の隣に厚塗りの立体イラストを置けば、それぞれがよい素材でも一つの画面としてはまとまりにくくなります。

ダウンロード前には、背景が透過されているか、必要な大きさで使えるかも確認してください。白い背景付きの画像を色付きの面に置くと、素材の周囲だけ四角く浮いてしまいます。

フリー素材でも、無条件で自由に使えるとは限りません。無料でも利用条件の確認は必要です。商用利用、加工、クレジット表記などについて、配布元と対象素材の条件を確認しましょう。通常のデザインへの配置と、生成AIサービスへのアップロードは分けて確認しておくと安心です。

3.自社の写真を一枚入れて、借り物の印象を減らす

整ったオフィス、笑顔で会議をする人、パソコンを操作する手元。こうした写真は便利ですが、それだけでは、その会社がどんな仕事をしているかまでは分かりません。

自社らしさを加えたいなら、実際の仕事を写した写真が候補になります。

たとえばデザイン会社の紹介なら、完成した制作物だけでなく、印刷の色を比較している机や、紙を選んでいる手元にも仕事の具体性があります。製造業なら製品の接合部、飲食店なら仕込みの様子など、説明したい内容と結びつく場面を選びます。

撮影するときは、完成レイアウトを想定して、同じ場面を二通り撮っておくと便利です。

一枚は、被写体を大きく写す写真。もう一枚は、周囲に余白を残す写真。

前者は詳細の説明に、後者は見出しを重ねる用途に使えます。スマートフォンで撮る場合も、背景に不要な荷物や読めてしまう書類が入っていないか確認するだけで、使いやすさが変わります。

写真を入れた後は、明るさと色味を調整します。隣の写真が青白く、こちらだけ強い黄色になっていれば、同じページの中で浮いてしまうためです。ただし、商品の色や質感を別物に見せるような補正は避けましょう。

実績紹介には実際の制作物や現場の写真を使い、生成した架空の場面を実績の証拠として扱わないことも大切です。

4.文字を組み直すだけで、完成度は変わる

画像には手をかけたのに、文字は自動配置のまま。そんなデザインでは、画像のよさが伝わりにくくなります。

文字を直すときは、装飾を加える前に、改行を見てください。

たとえば次の見出しです。

はじめてのブランド
づくり相談会

この改行では「ブランドづくり」が途中で分かれています。

はじめての
ブランドづくり相談会

意味のまとまりに合わせて改行すると、内容を追いやすくなります。横幅が足りないときは、すぐに文字を小さくするのではなく、文章を短くできないか、画像との配分を変えられないかも検討します。

見出し、補足、日付が同じ強さで並んでいる場合は、最初に読んでほしいものを決めます。見出しを強くしたいからといって、すべてを太字にすると差がなくなります。補足のウェイトを下げることも、有効な調整です。

実際の作業では、次の順で確認すると手戻りを減らせます。

  1. 誤字と、意味が途中で切れる改行を直す。
  2. 見出し・補足・詳細の大きさと太さに差をつける。
  3. 文字が揃う基準線を決める。
  4. 行間を調整し、文字同士の窮屈さをなくす。
  5. 必要な箇所だけ、文字間を微調整する。

日本語の長い本文まで字間を広げると、かえって読みにくくなることがあります。字間を触る前に、文字サイズや行間、文章の長さを確かめましょう。

最後は制作画面を拡大した状態ではなく、スマートフォンなど、実際に見られる大きさで確認します。縮小すると消える細い文字や、読めない補足がないか。ここまでが文字組みです。

5.発光や立体装飾は、一度消してから戻す

光る球体、透明な板、強いグラデーション、背景に散る粒子。それぞれは表現の選択肢ですが、重なると、内容よりも演出が前に出てしまうことがあります。

どれを削るべきか迷ったら、装飾のレイヤーを一度すべて非表示にしてみます。画像として一体化している場合は、装飾の少ない素材に替えた比較案をつくります。

写真、文字、必要な図形だけにした状態で、何が不足しているかを確かめてください。

ボタンの場所が分かりにくいなら、背景との明暗差をつける。複数の情報が混ざって見えるなら、間隔を広げる。それでも区切りが必要なら、薄い背景色を足す。問題に合わせて、使う手段を選びます。

影も同じです。カードの影を消しても区切りが分かるなら、残す必要はないかもしれません。影を使う場合は、カードごとに光の方向が違っていないか確認します。

「地味になったから何か足す」で戻すと、元の状態に近づきます。足した装飾が、何を見やすくしたのか説明できるか。それを残す判断に使ってみてください。

6.余白を埋めず、主役に合わせて配置を変える

空いている場所を見ると、何かを足したくなるものです。けれど、余白があるからこそ、写真や見出しが目に入りやすくなります。

配置が単調に感じられる場合は、要素を増やす前に、大きさと位置を変えてみましょう。

たとえば、中央に写真、その上に見出し、その下に説明を並べたバナー。別案として、写真を右側に寄せ、左側に見出しと説明をまとめてみます。文字の左端を揃えれば、左右非対称でも整理された印象を保てます。

写真の切り取り方も試せます。商品の全体を見せる案と、質感が分かる部分を大きく見せる案を並べてみる。説明したい内容が素材の手触りなら、全体写真より寄りの写真が合う場合もあります。

ただし、ただ傾ける、わざとずらす、といった操作で自然さが生まれるわけではありません。

  • 写真は大きく切り取るが、文字の基準線は揃える。
  • 手描きの線には揺らぎを残すが、本文は読みやすく組む。
  • 左右の分量は変えるが、関連する情報同士は近くに置く。

自由にする部分と、揃える部分を分けることがポイントです。

Webサイトでは、パソコンで成立した配置がスマートフォンでも成立するとは限りません。横並びが縦並びになったとき、見出しと対応する写真が離れすぎていないか、画像が切れて意味が変わっていないかも確かめます。

迷ったら、一枚のバナーをこう直してみる

ここからは、架空の「地域のものづくり体験会」の告知バナーを例に、修正の流れを見てみます。

元のデザインは、生成した人物写真に、光る背景、立体的なアイコン、飾り文字の見出しを重ねたもの。整ってはいますが、何を体験できるイベントなのかが伝わりにくい状態とします。

まず、内容が伝わる写真へ替えます。
実際に作れる作品と、作業中の手元が写った写真を用意します。人物の笑顔よりも、参加者が体験を想像できる写真を優先します。

次に、見出しを別の文字として組み直します。
イベント名と日時を分け、最初にイベント名、次に日時が読めるようにします。背景に埋もれるなら、文字への縁取りを増やす前に、文字を置く場所を変えます。

温かみが欲しければ、手描き素材を少量加えます。
フリー素材の配布サイトで「手描き ライン」や、体験内容に合うモチーフを探します。イベント名の下に一本の線を引く案から試し、入れない案とも比較します。

光る背景と立体アイコンは外します。
参加者に必要な情報が、写真と文字で伝わっているかを確認します。外して困らない装飾は、そのまま戻さずに進めます。

最後に、スマートフォンで見ます。
イベントの内容、日時、申込方法が読めるか。写真の主役が小さすぎないか。手描きの線が文字に重なっていないかを確認して完成です。

ここで加えたのは、手描きの線だけです。変化の中心は、素材の差し替えと、情報の整理にあります。

「自然にして」より、直す場所を伝える

制作担当者へ修正を依頼する場合も、違和感を操作に置き換えると伝わりやすくなります。

「もっとAIっぽさをなくして」ではなく、

背景の発光と粒子を外してください。写真は実際の作業風景に替え、見出しは画像と分けて文字で組み直してください。手描き素材は、見出し下の線だけで一案見たいです。

ここまで具体化すれば、修正後に何を確認するかも明確になります。

AIっぽさが気になるとき、何度も生成し直す前に、目の前のデザインを見てみてください。素材を一つ替える、文字を組み直す、不要な装飾を消す。その編集だけで、伝えたいことが見えてくる場合があります。

etomojiでは、デザインを判断する際に、制作手段だけでなく、誰に何を伝えるための表現なのかを重視します。仕上がりをその会社らしいものにするのは、素材を足した量よりも、目的に合わせて選び直した内容だと考えています。