CREATOR'S EX
Microsoft Expression Presents
Column Blend
Silverlight™ では、配置するオブジェクトの座標を固定値でなく、ウインドウサイズに従って柔軟に変化させることが可能です。前回のトピックでコントロールを紹介しましたが、その中にレイアウトというコントロール群があります。これらを使用することで、柔軟なレイアウトが容易に実現可能です。
Silverlight™ で使用可能なレイアウト コントロール。
キャンバス
キャンバスは X と Y の座標値で子オブジェクトの配置を指定するレイアウトです。Flash を使用されている方には、最も扱いやすいのではないでしょうか。
キャンバスに子オブジェクトを配置したところ。オブジェクトは XY の値で自由に配置でき、互いに重ね合わせも可能。
グリッド
グリッドは、領域内を格子状に分割し、そのマス目の中に子オブジェクトを配置するレイアウトです。 WEB のレイアウトで一昔前に流行った、 HTML のテーブルで画面内を細かく区切り、細切れにした画像やテキストを配置するレイアウト方法に似ています。なお、 Silverlight™ ではデフォルトの親ノードもグリッドとなります。
左部、上部のガイド領域をクリックすると、それぞれ縦横にグリッドを分割できる。
グリッドに子オブジェクトを配置したところ。縦横何マス目に配置するかに加え、マス内でのマージンを指定できる。
スタックパネル
スタックパネルは、子オブジェクトを縦横どちらか一直線に並べます。
スタックパネルに子オブジェクトを配置したところ。要素は指定した方向に押し出され、重ならず一直線に並ぶ。
ボーダー
ボーダーは最も基本的なレイアウトで、子オブジェクトを一つしか持てないスタックパネルのようなものです。
スクロールビューア
スクロールビューアはボーダーに似ていますが、ユーザーは、見えない部分もスクロールして子オブジェクトにアクセスすることが可能です。
左がボーダー、右がスクロールビューアに子オブジェクトを配置したところ。
双方とも領域からはみ出た分は表示されないが、後者はスクロール可能。
柔軟なレイアウト
HTML の DOM 構造内における配置を標準で自由に規定できるのも、 Silverlight™ と Flash との大きな違いの一つです。 Silverlight™ コンテンツを HTML 内の他要素と重ね合わせたり、透過させて背景に配置したりすることができます。
その際、 Silverlight™ コンテンツを固定サイズの領域に閉じ込めておくのでなく、ウインドウサイズの変化に対して柔軟にレイアウトが変化するような組み込み方とすることで、 RIA コンテンツに Ajax アプリケーションのような気の利いている感を付け加えることができます。また、フルスクリーンで動作させる際にも、画面サイズに依存せず適正なレイアウトを実現することができるようになります。
演出のために、コンテンツを固定サイズの画面で見せるのが有効な場合も多々ありますが、ことアプリケーションに関しては、ユーザーは 「縛られている感」 を嫌う傾向にあります。レイアウトを使いこなすことで、コンテンツのクオリティに加え、より心地よい UX を実現することができるのではないでしょうか。
- 株式会社アゼスト勤務。UX デザイナ。情報アーキテクト。表側の UI から裏側のロジックまでの突貫開発を得意とするが、現在では主にサービスの企画、設計部分を担当する。またその傍ら、マラソンやトライアスロンを趣味とし、日々トレーニングに勤しむ。
