最終更新日 :
2021年8月30日
プロトタイプリンクでアートボードのレンディションを修正する方法をご紹介します。
問題点
XD プロトタイプは、ブラウザーで表示する際にサイズが縮小します。
根本的な原因
アートボードの横幅全体と縦幅全体がブラウザーウィンドウに収まるようにプロトタイプがブラウザー内で縮小表示されている場合は、スクロール設定がアートボードに適用されています。
XD のアートボードでは、プロパティインスペクターにスクロールという設定があり、「なし」または「垂直方向」に設定できます。
- スクロールを「なし」に設定すると、スクロールバーを使用しなくともアートボード全体がブラウザーウィンドウに収まります。
- スクロールが「垂直方向」に設定されている場合、プロパティインスペクターでアートボードに設定されたビューポートの縦幅の値によってブラウザーでのコンテンツの表示が決まります。
- ビューポートの縦幅がアートボードの縦幅と同じでない場合、ビューポートの縦幅はブラウザーウィンドウに収まり、横幅は縦横比を維持するように調整されます。
- ビューポートの縦幅がアートボードの縦幅と同じ場合、その横幅はブラウザーウィンドウに収まり(必要に応じて)、縦幅は調整されます。
XD でカスタムアートボードを作成すると、Scrollingプロパティが自動的にNoneに設定されます。これにより、大きなアートボードが小さく表示されます。
解決策
スクロール設定を使用して、公開するプロトタイプの外観を制御します(関係者がその表示を見ることを想定しながら)。
Web サイト、チラシなど、サイズの大きいページを表示するデザインの場合は、スクロールを「垂直方向」に設定して適切なビューポート値を指定します。