この記事は2分で読めます

【XD】アートボードをリサイズ「Resize Artboard to Fit Content」プラグイン

  • 投稿日
  • 更新日
【XD】アートボードをリサイズ「Resize Artboard to Fit Content」プラグイン

アートボードのサイズをコンテンツに合わせてくれるプラグインを紹介します。

ウェブサイトのデザインで頻繁に使える便利なプラグインです。

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

Resize Artboard to Fit Contentの使い方

STEP
プラグインのインストール
画像に alt 属性が指定されていません。ファイル名: zlvU2OVwv3vWvXMWkC4HlmCmfxKR-Me5Q2MrCHi9GB61_652YroayV-xt5GMt4yupwc_uesQ9pgVIEGV3K5Lo2jfrHcBecHK9vAZBCjhjAbg-aaGYLdKymAepbZS3Wy93qKNwNQI4OdyTFeDhRSxZBVbw1lvCZAwQpQ_S0xqq1AuH5yZen8huI27bFEM

まずはプラグインをインストールします。

インストール方法は下記を参照してください

あわせて読みたい
【XD】よく使うおすすめのプラグイン 【】 まずはプラグインのインストール方法を説明します。 STEP XDを開き、メニューのプラグインから[プラグイン参照...]をクリック STEPプラグインを検索する 最初のペ...
STEP
リサイズ

リサイズしたいアートボードを選択し、プラグインメニューからアートボードをコンテンツに合わせるをクリックすると、コンテンツに合わせてリサイズされます。

このプラグインの便利なところは、ショートカットがあるところです。

control + Fでプラグインメニューを開くことなく一瞬でリサイズしてくれます。

STEP
注意点

このプラグインは、上記でも記載した通り、コンテンツに合わせてアートボードをリサイズしてくれます。

もし、アートボードからコンテンツを飛び出させてデザインしている場合は、このプラグインを使用すると下の画像のように横幅までリサイズされてしまいます。

これを回避する方法は2つあります。

1つ目は事前にアートボードに合わせてコンテンツにマスクをかけます。

2つ目はResize Artboard to Fit Contentのプラグインメニューの[設定]をクリック。ここからリサイズ時の細かな設定が可能です。

サイズ固定ができますが、使いやすいのは[現在のアートボード幅を維持する]にチェックをして[SAVE]をクリック。これで横幅は固定され高さのみがリサイズされます。

まとめ

このプラグインを使用すると、手動での手間が省けますし、1px隙間が空いてしまうというミスを防ぐこともできます。

ぜひResize Artboard to Fit Contentを使い、作業の効率化を測ってください。

この記事を書いた人

デザインバウム運営局
デザインバウム運営局

企業のWeb担当者の方とWeb制作に関わる方にとって、ためになる情報を発信していきます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須