Figma AIを使ってデザイン作成 vol.1
こんにちは！デザイナーのはらです。
今回は、デザイナーAI活用の第3弾！前回のさとちゃん記事に引き続き、FigmaのAIについて見ていきますよ！
さとちゃん記事はこちら ↓
「20%ルール」の時間でAIについて学ぶようになってまだ日も浅いデザイナーチームですが、常日頃の制作でとてもお世話になっているのがFigma AIです！💪
AI機能を使いつつ、業務で制作した具体例についてご紹介しようと思います。
1. 内製化デザイナーの業務
AI活用の具体例の前に、普段の私たちのお仕事を簡単にご紹介⭐️
デザイナーチームでは色々なものを作成しています！
各種キャンペーンの制作物デザイン
・webバナー
・店頭に掲示するPOP
各種webページの制作物デザイン・コーディング
・webサイトデザイン作成
・webサイトUI/UX改善
・LPの新規作成/改善
その他、会社に関わるビジュアルイメージの制作
・企業/採用パンフレット
・社内イベント関連のリーフレット
etc・・・
行う業務はたくさんあるので、
時短のためにはAIは欠かせないツールなのです！
というわけで、いつもお世話になっているFigma AIの機能を深掘りしていきますよ！
2. 背景削除機能を使ってデザイン作成⭐️
2-1. 機能のおさらい
前回記事で紹介した通り、ワンタップで背景が削除できてしまう素晴らしい機能です！
たとえばこんなふうに。
するとなんということでしょう。。。！
綺麗に背景が消えました！
2-2.素材をデザインへ追加
他の素材も同じようにAIで切り抜いたところで、
ざっくり配置してみます。
ヘルメットの買取価格が上がるキャンペーンのようですね。
「あっぷあぷ」の語感から、水をイメージして制作しています。
これを色々と調整していきます。
2-3.見出しを試行錯誤
見出し部分が弱いので、文字の配色やあしらいを試している様子。
「UP」の部分にあしらいを加えると良さそうと思ったようです。
後ほど別記事でも取り上げますが、下の画像はAdobeの生成AIに出力してもらった文字です！人間が作るよりよっぽど早く色んな文字を試せてしまう便利機能です！
調整に調整を重ねる様子。目立つ文字が作れたようですね。
サイズ違いの制作もあるため、各種比率が違う画面の中でどうすれば効果的な見せ方ができるのか、考えながら素材位置を調整しています。
全部乗せすると小さいサイズによってはごちゃついてしまうので、引き算も大事です。
ここで一旦依頼者へ確認をとります。
2-4. 完成！
依頼者からのフィードバックとして
「水の中にあるヘルメットに違和感。。。」とのことだったので、
パッキリ見せる方向へシフトチェンジ。
バラバラに浮いていた素材も固めて置いて、情報のメリハリをつけました！
CTAボタンの色はオレンジを選択。
全体イメージの青の補色でありつつ、同じく補色である見出しの赤と被らないように設計しています。
こういうところで色彩検定の知識が活きてきます！楽しい☘️
色彩検定３級をとった話はこちら↓
これにて完成！
制作時間：５時間
使用AI ：Figma 背景削除・Adobe Express
さいごに
いかがでしたでしょうか？
これまでデザイナーの画像処理といえばPhotoshop！という感じでしたが、
より軽い動きでスピーディーに処理をしてくれるFigma AIに、チームメンバー一同お世話になりっぱなしな今日この頃です。
次回の記事でも、具体例を挙げつつ、Figmaの様々な機能について紹介できればと思います。
ぜひフォローいただき、記事をお待ちくださいますと幸いです⭐️
最後までお読みいただきありがとうございました！
株式会社アップガレージグループ ITソリューション事業部では、
共に勉強し合い、成長し合うメンバーを大募集しています！
チームメンバーを詳しく知りたい方はこちら
Webエンジニア・UI/UXデザイナーの採用はこちら
過去のはてなブログはこちら