１）概要：この記事で学べることこの記事では、画面レイアウトを作成する際に利用するデザインタブの内容をご紹介します。簡単なレイアウトであればレスポンシブ設定（PC、スマホなどデバイスの横幅に合わせて見やすいように表示が変わる設定）するところまで学びます。様々な機能がありますが、実際に画面をデザインするうえでよく使うものを抜粋して紹介します。２）デザインタブの項目デザインタブには主に①〜③の要素があります。ざっくり以下の役割になっているので、今はそのように分かれているのだなということだけ覚えておいてください。①画面の構造：配置済みの要素がどのような親子関係や上下関係になっているのかを示す②配置する要素：文字や入力フォームなどを配置できる要素を表示する③画面の表示イメージ：実際に画面レイアウトの編集を行う３）実践：要素の配置エレメントの配置方法それでは新しいページを作りながらやり方を覚えていきましょう。空のページを作成して、そこにTextを配置していきます。左側のVisual ElementsからTextを選びそれを、クリックして右側のページの部分に配置してください。「...edit me...」となっているので、仮にここでは「ログイン画面」と変えておきましょう。この状態で右上のPreviewをクリックすると画面に文字が反映されているのが分かります。レイアウトの整え方（位置や文字の大きさ等）表示はできたものの、位置に関してはなんとも微妙な位置に配置されてしまっております。次に配置したテキストのレイアウト（表示位置）を整えていきます。今回は中央に揃えます。ページの文字以外の部分をクリックしてます。グレーの入力欄が出るので真ん中のLayoutのタブを表示してください。ここでContainer Layoutという項目があるのですが、現在はこれがFixedとなっています。Fixedの場合には固定になり、柔軟にレイアウトが変えられないため通常はRow（追加されたものを横に配置）もしくは、Column（追加されたものを縦に配置）のどちらかを選びます。今回は縦に並べたいのでColumnを選んでください。Columnを選んだ途端に、文字が左上にいきましたがこれから調整するので問題ありません。「ログイン画面」となっている文字をクリックして、Layoutのタブを開きます。Horizontal alignmentにて真ん中の串刺しになっているようなアイコンをクリックします。これをクリックすることで文字が中央によります。ただ、一番上に隙間なく表示されているため、少し幅をとりたいですね。このような時はMarginsのtopとなっている値を調整してください。これにより他の要素からの距離を取らせることができます。ついでに文字を大きく太字にして、中央寄せにしましょう。Appearanceのタブを開き、矢印の部分をそれぞれ記載されている設定に変更してください。文字が改行されているので一列になるようにします。再度Layoutのタブを開き、「Make this element fixed-width」のチェックを外してください。これは横幅を固定にする項目であり、100pxという横幅で固定になっていたため改行をしていました。このチェックを外すことでその制限が取れています。レイアウトの整え方（複数項目の位置）次に入力フォームを設定します。左側のInput formsからInputを選択して文字のしたに配置してください。先程のTextと同様に左によっていますがこれも、Textでやった設定を加えれば中央に行き、上の項目との幅も調整できます。入力フォームは２つ配置し、仮にメールアドレスとパスワードという表示名をPlaceholderに設定しましょう。４）実践：レスポンシブの設定現在の状態であればPCで見ても、スマホで見ても特にレイアウトが崩れてはいないと思います。ただ、例えばもっと入力欄を横いっぱいに伸ばしたいのだけれど、、という要望がある場合にはどうすれば良いでしょうか。単純にwidthを増やすだけの設定をした場合、PCでは問題ないですがスマホサイズにした場合には見切れてしまいます。（例：入力フォームのwidthを750にした場合）そうならないためにどうすれば良いか２つの方法を紹介します。方法１：widthを%で設定するまずは横幅をpxではなく、%に変えることで画面サイズの何％の大きさになるよう自動で切り替わります。ブラウザでやっていただくとわかるのですが、横幅を縮めるに従いこの入力フォームの横幅も小さくなります。方法２：現在のページの横幅に合わせて条件を変える次は画面の横幅を見て対象の要素の横幅を変えるやり方です。このやり方のメリットとしては、デバイスによってサイズは変えつつも％の指定ではないため、デバイスごとにサイズを固定化するということが可能です。キャラクターの絵が小さくなりすぎないようにするなどという用途で使われたりします。ではやり方を見ていきましょう。Conditioalのタブを開いてください。Define another conditionをクリックして「Current page width」を選んでください。これが現在のページの横幅となります。そして不等号を選択し、その後Tabletの横幅を選択します。これによりTablet（992px）より小さい時には横幅を変えよという指示になります。小さくしたいのでWidthを400pxにしてみましょう。これでプレビューして横幅を小さくしていくと設定した項目が992pxより横幅が小さくなった途端に、400pxに切り替わります。