メインコンテンツにスキップ

ステージ

ステージの役割について説明します

Teshima avatar
対応者:Teshima
今週アップデートされました

新しいプロジェクトを開始すると、キャンバス上に白い「ステージ」が表示されます。

このステージは、Webページのデザイン作業を行うための基準となるエリアです。

ステージの役割

dpdpでは、ステージの上にレイヤを配置してデザインを進めます。

Webページを作成する時、ステージ上に簡易板や整列板などのレイヤを置きますが、

ステージは、そのレイヤの位置を決める基準となるものです。

ポイント(覚えておきましょう)

ステージの外側に配置されたレイヤは、実際のWebページには表示されませんのでご注意ください。

ステージの調整方法

レイヤツリーで「ステージ」を選択すると、右のプロパティパネルで以下の設定が可能です。

■ ステージのサイズ

ステージの横幅は、実際のWebページのブラウザ画面の横幅を想定しています。、初期値では 1280px に設定されていますが、たとえば 1680px 幅のブラウザで見られることを前提にデザインしたい場合には、横幅を 1680px に変更してからデザイン作業を行うと、仕上がりがイメージしやすくなります。

ステージの縦サイズ

ステージの縦サイズについては、特に気にする必要はありません(ステージ下にコンテンツが飛び出したとしても実際のWebページではすべて表示されます)。ただ、ステージ縦サイズが短すぎると、デザインする時にレイヤの視認性が悪くなって作業しにくくなるので、すべてのコンテンツをカバーできる程度の長さを確保して作業するのがオススメです。

■ ステージの背景色

ステージの背景色は、ステージ上に配置されたすべてのレイヤの背景色となります。

ステージにカラーを設定すると、そのカラーが Webページ全体の背景色になります。

参考

端末ごとにステージのサイズを変更する

プロパティパネルの下方からもステージの設定が行えます。

端末単位での変更はレスポンシブデザインにも関係する内容なので、

端末毎のステージのサイズ変更については以下の記事をご参照ください。

こちらの回答で解決しましたか?