コンテンツに応じたレイアウトAdobeXDではコンテンツに応じてレイアウトの自動調整ができます。文字数が変化することによって要素の大きさが変わることが多いWebやスマホアプリならではのデザインを再現することができます。ブックマークUIデザインUXデザインWebデザイン公開日:2020/02/03最終更新日:2020/02/03目次1.「コンテンツに応じたレイアウト」で何ができるのか2.コンテンツに応じたレイアウトを設定する3.コンポーネントにも対応4.入れ子状になった図形オブジェクトの場合5.パディングの設定6.まとめ1.「コンテンツに応じたレイアウト」で何ができるのか「コンテンツに応じたレイアウト」は、テキストの長さやサイズによってレイアウトを自動で調整してくれる機能です。文字の長さによってサイズが変わるボタンなどが簡単に作ることができます。2.コンテンツに応じたレイアウトを設定する実際にXDで設定してみましょう。長方形ツールでボタンを作成します。ボタンの中にテキストを入力し、オブジェクトのグループ化をします。右側のパネルの「パディング」をONにするだけで設定完了です。この少しの設定でレイアウトを自動調整してくれるようになります。3.コンポーネントにも対応コンポーネントにも対応しています。マスターコンポーネントに「パディング」ONを設定するだけで、OKです。「コンテンツに応じたレイアウト」ではボタンだけでなく、入れ子状になった図形オブジェクトにも適応することができます。こちらの画像のようにボックスの中のテキストやボタンを動かすことで、フレームごとレイアウトを変更することが可能です。右の設定の「パディング」の下の四角いマークでは数値でパディングの調整をすることができます。左は均一にパディングを設定することができます。右は上下左右でそれぞれにパディング設定することができます。6.まとめ今回は「コンテンツに応じたレイアウト」を紹介しました。XDのこの機能を使えば1つの要素で様々な中身にあわせたサイズ変更が可能です。この機能を使ってデザイン業務効率化行ってみてください。