マニュアル キャンセル

Adobe XD プロトタイプを Web ブラウザーで表示すると正しくレンダリングされない

プロトタイプリンクでアートボードのレンディションを修正する方法をご紹介します。

問題点

XD プロトタイプは、ブラウザーで表示する際にサイズが縮小します。

根本的な原因

アートボードの横幅全体と縦幅全体がブラウザーウィンドウに収まるようにプロトタイプがブラウザー内で縮小表示されている場合は、スクロール設定がアートボードに適用されています。

XD のアートボードでは、プロパティインスペクターにスクロールという設定があり、「なし」または「垂直方向」に設定できます。

  • スクロールを「なし」に設定すると、スクロールバーを使用しなくともアートボード全体がブラウザーウィンドウに収まります。
  • スクロールが「垂直方向」に設定されている場合、プロパティインスペクターでアートボードに設定されたビューポートの縦幅の値によってブラウザーでのコンテンツの表示が決まります。
    • ビューポートの縦幅がアートボードの縦幅と同じでない場合、ビューポートの縦幅はブラウザーウィンドウに収まり、横幅は縦横比を維持するように調整されます。
    • ビューポートの縦幅がアートボードの縦幅と同じ場合、その横幅はブラウザーウィンドウに収まり(必要に応じて)、縦幅は調整されます。

XD においてカスタムアートボードを作成する際に、スクロールプロパティは自動的に「なし」に設定されます。そのため、大きなアートボードが小さく表示されます。

スクロールを「なし」に設定したリンクのレビュー
スクロールを「なし」に設定したリンクのレビュー

スクロールを「垂直方向」に設定したリンクのレビュー
スクロールを「垂直方向」に設定したリンクのレビュー

解決策

スクロール設定を使用して、公開するプロトタイプの外観を制御します(関係者がその表示を見ることを想定しながら)。

Web サイト、チラシなど、サイズの大きいページを表示するデザインの場合は、スクロールを「垂直方向」に設定して適切なビューポート値を指定します。

スクロール属性を「垂直方向」に設定する
スクロール属性を「垂直方向」に設定する

ヘルプをすばやく簡単に入手

新規ユーザーの場合