あやね
AIをデザイン業務に取り入れるなら、まず時間がかかっている作業を一つ選びましょう。画面のたたき台、配色の候補、画像の編集など、目的を絞るとツールの違いを比べやすくなります。
生成された画面をどこまで編集できるか、既存のコンポーネントを使えるか、チームでレビューできるかも重要です。生成の速さだけでなく、修正して実際の画面に仕上げるまでの手間を見て選びましょう。
この記事では、Pixso、Figma、Adobe製品、Sketchを使う制作環境で、AIと自動化をどう役立てるかを整理します。あわせて、提供を終了したInVision Studioの旧データを扱う際の考え方も紹介します。
AIデザインツールとは？
AIによる生成と、設定に従って動くレイアウト機能は、役割を分けて考えると使いどころが明確になります。
AIデザインツールは、入力した指示や素材をもとに、画面、文章、画像などの案を生成・編集するためのツールです。例えばログイン画面なら、対象ユーザー、必要な入力項目、表示したい案内を伝え、出力を出発点にして構成を調整します。
オートレイアウトやコンポーネントは、間隔やサイズ、共通スタイルを設定に沿って管理する機能です。AIで複数の案を検討し、採用した案をこれらの機能で整えると、後から修正しやすい画面になります。
どの工程を任せるかは、案件の目的で変わります。既存UIの小さな修正ならコンポーネントの再利用が速い場合もあり、新しい方向性を探す場面では生成した案の比較が役立ちます。
UI/UXデザイナーが確認したい4つの観点
同じ画面と条件で試すと、出力の見た目だけでなく、日々の制作に必要な機能を比較できます。
1. 出力を修正しやすいか
文字、画像、レイアウトを個別に編集できるか確認しましょう。例えばカード一覧なら、長い見出しを入れる、カードを一枚追加する、スマートフォン幅にする、といった変更で作業のしやすさが分かります。
2. 既存のデザインを活かせるか
チームのフォント、色、コンポーネントを引き続き使えるかが導入後の手間を左右します。既存ファイルを取り込む場合は、代表的な画面で編集構造と表示を確認しましょう。
3. チームで検討できるか
同じファイルへの共同編集、画面上のコメント、変更履歴は、生成後のレビューに役立ちます。採用する案と修正理由をデザインの近くに残すと、企画担当者や開発者にも判断を共有できます。
4. データと利用条件を管理できるか
未公開の画面や顧客情報を入力する前に、保存先、共有範囲、学習への利用条件を確認します。組織の規程に合わせ、利用できるデータと担当者の権限を決めておきましょう。
4つの制作環境で考えるAIと自動化
画面の設計、画像の制作、繰り返しのレイアウト調整では適した機能が異なります。各環境で進めやすい作業を整理します。
1. Pixso：画面の作成からチームのレビューまで
Pixsoでは、UIの作成、プロトタイプ、共同編集を同じ作業環境で進められます。AIでアイデアを具体化した後も、文字やレイアウトを調整し、チームで画面を検討できます。
Pixsoで進められる作業
- 画面の具体化：作成した案にテキストや画像を配置し、コンポーネントとオートレイアウトで画面を整えます。
- 既存素材の活用：対応するデザインファイルを取り込み、フォント、画像、部品の状態を確認して作業を続けられます。
- レビュー：同じファイルを共有し、画面の該当箇所にコメントを残して修正内容を話し合えます。
- アクセス管理：編集する人と確認する人の権限を分け、チームの共有範囲を管理できます。
2. Figma：既存のチーム制作にAIを取り入れる
Figmaで既にライブラリや共同編集を運用しているチームは、現在の制作環境で使えるAI機能から試すと導入を進めやすくなります。新しい案を既存のコンポーネントに合わせる工程まで含めて比較しましょう。
Figmaで比較したい点
- AI機能と拡張機能：画面や素材の生成、文章の調整など、必要な作業に対応する機能を選びます。
- 共同編集：生成後の修正を同じファイルで進め、コメントでレビュー内容を共有できます。
- 運用との相性：ライブラリ、ファイル構成、編集者の役割を既存のチーム運用に合わせて使えるかを確かめます。
3. Adobe製品：画像や素材の編集を支援
Adobe Senseiは、Adobe製品に組み込まれてきたAI・機械学習技術の名称です。画面設計ツールそのものではなく、Photoshopなどの具体的なアプリと機能を選んで利用します。
素材制作で役立つ使い方
- 画像の調整：切り抜きや不要部分の修正を行い、画面に使う素材を準備します。
- コンテンツに応じた塗りつぶし：周辺の色や質感を参照して画像の空白を補います。仕上がりの境界や細部を見ながら調整できます。
- デザインへの配置：編集した素材をUIに配置し、文字の読みやすさやトリミング位置を実際の画面で確認します。
4. Sketch：部品とレイアウトを整える
Sketchでは、Macアプリでベクター編集、コンポーネント管理、プロトタイプを作成できます。生成したアイデアを編集可能な画面に整える工程では、レイアウトや再利用の機能が役立ちます。
Sketchで進められる作業
- レイアウト管理：Stacksなどの機能で要素の間隔や配置を設定し、内容の変化に対応する部品を作れます。
- 機能の拡張：必要に応じてプラグインを追加できます。AIを使う拡張機能は、提供元、データの扱い、更新状況を確認して選びましょう。
- 共同作業：Macアプリでの共同編集と、ブラウザでの閲覧・コメント・開発者向け確認を、担当者の役割に合わせて使います。
InVision Studioの旧データを持っている場合
InVision Studioは提供を終了しており、新しく導入するツールの候補には含めません。既存の案件では、手元に残るファイルや書き出した素材を整理し、必要な画面と操作を移行先で再構成します。
引き継ぐ情報を整理する
- 画面：主要画面、状態違い、使用した画像やフォントをまとめます。
- 操作：遷移先、クリックやタップの条件、オーバーレイの開閉など、必要な動作を記録します。
- レビュー：過去の指摘や採用した理由を残し、再制作する画面で同じ判断を確認できるようにします。
実務に取り入れるなら、小さな画面から
例えば予約フォームを題材に、入力項目、エラー表示、完了画面までを作ってみましょう。AIで最初の案を出し、デザイナーが情報の順序や入力の負担を調整すると、役割を分担しやすくなります。
既存の部品に合わせる
採用した案にチームのコンポーネントとスタイルを適用します。長い文字列や空の状態も入れてみると、見た目だけでは分からないレイアウトの問題を見つけられます。
操作をつないでレビューする
画面をプロトタイプでつなぎ、予約内容を入力して完了するまでの流れを試します。コメントは「分かりにくい」だけでなく、迷った場所と期待した動作を具体的に残しましょう。
チームで使い方を決める
生成に使うデータ、採用前に確認する担当者、出力の保存場所をそろえます。繰り返し使う指示と修正例を共有すると、次の案件でも同じ判断を活かせます。
目的に合う作業から始めよう
AIは案を広げる作業、コンポーネントやレイアウト機能は画面を整える作業に役立ちます。ツール名だけで選ばず、必要な画面を作成し、修正と共有まで通して試すことが大切です。
Pixsoで一つの画面を作り、チームとレビューしてみましょう。生成から完成までに残る作業が分かれば、日々の制作に合う活用方法を選べます。
