テンプレートと可変レイアウトの関係──その27の要因
こんにちは。Digital Innovation Studioの堀 祐磨です。AvanadeではExperience Techというロールで働いています。
このロールではUI/UXデザイナーや他領域のエンジニアと協力しながら、デザイン側の要求とシステム側の要求が上手く折り合うように、TypeScriptとReactやVueなどを使ったWebフロントエンドの開発をしています。
そんな私たちが日夜心血を注いで開発しているWebフロントエンドですが、単純化すると入力値となる「データ」、データに関する処理やインタラクションを制御する「ロジック」、ユーザーの目に見える形で結果を表示する「テンプレート」の3つの要素からできています。
今回のnoteでは、このうちの特にデータとテンプレートの関係を入口として、Webフロントエンドの可変レイアウトの仕組みについて説明していきたいと思います。
補足：「可変レイアウト」という言葉は、一般的にはWebデザインでのリキッド・レイアウトやフルード・レイアウトの訳語とする場合が多いようです。この記事ではリキッド・レイアウト等の用語とは無関係に、要素の配置や書式が一定のルールで変化するレイアウトのことを「可変レイアウト」と呼称しています。
データとテンプレート
たとえば、弊社の日本語版WebサイトとUS版Webサイトを見比べてみると、基本的なレイアウトは同じですが、その中に入っている文章や写真は違っています。
これらの文章や写真はレイアウトからは独立して差し替えられるデータの部分ということになります。一方で、共通しているレイアウトの部分はデータの入れ物、つまりテンプレートの部分ということになります。
グラフィックデザインにおけるデータとテンプレートの例
このデータとテンプレートの関係性はWebやデジタルメディア特有のものではありません。
グラフィックデザインでは美しさと実用性の両面からレイアウトを統一する考え方が古くからあり、データとテンプレートの関係と同じ構造を持った作品は以前から一般的に存在します。
たとえば本屋に行って文庫本を見てみると、多くの場合出版社やシリーズに応じ統一した意匠で装丁されています。
これは共通のテンプレートに違うデータを差し込んだ、データとテンプレートの関係であると言えるでしょう。
もっと例を挙げてみましょう。
駅構内の案内表示もデータとテンプレートの組み合せです。たとえば出口を示す案内表示はテンプレート化されていて、その中に記されている出口の名称や記号は個別に異なったデータであると言えます。
デパートやスーパーの値札は価格や商品名がデータで、それ以外の枠はテンプレートと言えます。ECサイトの値段表示と概念はほとんど一緒です。
これら以外にも、
電話帳
カタログ
伝票
申込み用紙
などなど、テンプレートを使ったレイアウトは世の中で幅広く活用されています。
テンプレートと可変レイアウト
一品物のレイアウトと違い、テンプレートを使ったレイアウトでは宿命的に可変性が求められます。
一品物のレイアウトの場合、そこへ表示する文字や写真の内容が変わることはありません。そのため、ひとつのパターンのテキストや写真のことだけを考えてレイアウトすれば問題ありません。
しかし、テンプレートの場合はそうはいきません。テンプレートに差し込まれるデータは都度違う内容となるからです。
会社情報を表示する単純なテンプレートを例にしてみましょう。下図では、「アバナード株式会社」というタイトルがこのテンプレートへ綺麗に収まっています。
では、このテンプレートに架空の長い会社名「有限会社グランドトーキョー物流商事赤坂見附中央支店」というデータが入るとどうなるでしょうか。
何も対策が無い状態では、収まらない文字がテンプレートからはみ出してしまいます。「長い会社名はデータから除外する」というルールを作るのも1つの解決策ですが、運用の柔軟性が低下するので避けたい場合もあります。
このようなデータのバラツキに対応するために、テンプレート側で色々なレイアウトの工夫が考えられます。以下はその例です。
A. 入りきらない部分は省略する
→ Webでは一覧ページなどでよく使われます。印刷物ではほぼ使われません。
B. 改行して全文字入れる
→ Webでは簡単にページの高さを伸ばせるためよく使われます。印刷物の場合は見出しの量が増えた分、別の要素が収まらなくなるなどのトレードオフが発生します。
C. 長体で全文字入れる
→ 文字を横方向にギュッと潰すことを長体（ちょうたい）と言います。綺麗さを損いますが、長体率によっては2倍近い文字数も収まるので実用性を重視する印刷物ではよく使われます。Webではほぼ使われません。
D. 級下げして全文字入れる
→ 長体と同様に印刷物ではよく使われます。
E. 大きい用テンプレート、小さい用テンプレートをそれぞれ作る
→ 面積の違うテンプレートを組み合わせます。大きいテンプレートほど高額な掲載料を取るなど、ビジネス的な要件と組み合わせることもあります。
どの例にしても、文字が長い場合と短い場合でレイアウトに何らかの変化が起きています。このように、テンプレートはデータの可変性を吸収できるレイアウト上の仕組み（可変レイアウト）を備えていることが多くあります。
補足：データの差が大きいほど視覚的な差違も増えるため、全体の統一感を担保しにくくなります。そのため、対応するデータの幅が広いテンプレートが美しいテンプレートであるとは限りません。
一般的に、求人情報誌のような実用性を重視する媒体のテンプレートはかなり柔軟にデータを流し込めるように工夫されています。一方、高級感を出す媒体ではデータのバラツキがそもそも生じないように、データ側のレギュレーションを厳しくする場合があります。
Webフロントエンドでの可変レイアウト
次はWebフロントエンド特有の事情について解説します。Webフロントエンドの場合は印刷物よりも対応するデータの幅が広い傾向にあるだけでなく、データの違い以外にもレイアウトを変化させる要因が増えてきます。
Webフロントエンドのテンプレートが対応する可変要素には、以下のようなものがあります。
データの違い
データ表現の違い
ユーザー属性の違い
デバイス環境の違い
インタラクション
各要素の中へ具体的にどんなものがあるのかを見ていきましょう。
データの違い
これまで文字数の違いを中心にデータの違いを説明してきましたが、それ以外の一般的なパターンについても紹介します。
データの違いの9つの例
有る場合と無い場合があるデータ
例：入力が必須ではないデータ項目
そのデータが存在しないときは、画面に何も表示させたくない場合があります。データの有無に応じてレイアウトに分岐が起きることになります。
件数が多い場合と少ない場合があるデータ
例：検索結果一覧数・コメント数・添付ファイル数
記事数、検索結果数、コメント数、添付ファイル数などは、件数が0件の場合もあれば、大量に存在する場合もあります。0件の場合、100件以上ある場合など、場合に応じて挙動を変えたいときは分岐が発生します。
新しい場合と古い場合があるデータ
例：記事の作成日・更新日
最近更新されたデータだけを表示したかったり、古い作成日のデータには特別な注釈を表示したいなどの分岐を作ることがあります。
正しい場合と不正な場合があるデータ
例：ユーザー登録フォームの入力データ・機器の計測値
正常値・異常値の仕様がある場合、データがそのどちらであるかで挙動を分岐させたい場合がよくあります。入力フォームのエラー表示などがこれに当たります。
順番に意味があるデータ
例：人気順・アイウエオ順・最新順
データの順番自体に意味がある場合があります。ランキング上位のものは大きいテンプレートに表示したり、順番のルール（アイウエオ順など）を使ってデータをグルーピングすることがあります。
とりうる値の種類が決まっているデータ
例：洋服のサイズ・都道府県・クレヨンの色名
このタイプのデータは、事前にデータの種類を予想できるためテンプレート化がしやすい種類のデータです。たとえば洋服のサイズに応じてアイコンを切り替えるレイアウトでは、洋服のサイズの数だけ分岐が発生します。
周期性があるデータ
例：時間・年月・角度・色相
このようなデータは、ある所まで行くと最初に戻る性質があります。この性質から時計やカレンダーのように循環する構造を持ったレイアウトを作ることもあります。
再帰的な構造を持つデータ
例：オンラインストレージのフォルダ一覧
フォルダの中にフォルダがあったり、友達には友達の友達がいたりと、再帰的な構造を持つデータがあります。こういったデータの表現にはテンプレート自体が再帰的な構造を持つこともあります。
内容が予測できないデータ
例：コメント欄・記事本文・アップロード画像
ユーザーが自由にその内容を入力できるデータは、中にどんな内容が来るのか予測しにくい場所です。特に汎用性の高いテンプレートを用意する必要があります。
データ表現の違い
Webフロントエンドの場合、データ上の値と実際に表示する書式の表現が同じとは限りません。たとえば、1つの日付データから年月部分だけを使いたかったり、別の場所では時刻部分だけを使いたいなどの場合がありえます。このため、1つのデータの表現だけを変換して画面に表示するケースが出てきます。実装では、テンプレートの内部で整形用のロジックを持つことになります。
データ表現の違いの5つの例
数値表現による違い
「1」という数値をとってもその表現には幅があります。ケタの揃え方を変えるだけでもユーザーが受け取る意味や印象は変わるため、テンプレートの中で数値の表現だけを変えることがあります。
1.000
0001
100%
1000 x 0.001
通貨表現による違い
数値表現と同様に、表現の仕方が色々ありえます。
￥1,000
1,000円（税抜）
1,100円（税込）
千円
1千円
日付表現による違い
数値表現と同様に、表現や切り取り方を変えることで意図やニュアンスの違う表現となります。
2022-01-01T00:00:00.000+09:00
令和4年1月1日（土）
1/1/2022
Sat.
元旦
2022年1月2日から24時間前
大文字・小文字・全角・半角・かな・カナ・漢字・記号の表現の違い
文字コード的には諸説ありそうですが、概念的には相互変換が可能です。たとえば入力された文字の全角半角の差を補正したり、半角カナのデータを全角に整形してから表示することもあります。
「abc」と「ABC」と「ａｂｃ」と「ＡＢＣ」
「ハロー」と「ﾊﾛｰ」と「はろー」
「123」と「１２３」と「一二三」と「壱弍参」と「①②③」
画像表現の違い
データとして受け取った画像をどう表示するかは、テンプレートの作り次第で色々と考えられます。
縮小して表示する
画像の一部だけをトリミングする
モノクロ化して表示する
ぼかして表示する
一部だけを拡大する
半透明に表示する
ユーザー属性の違い
概念的には同じデータでも、ユーザーの属性によって表示するデータを変えたり、レイアウトに分岐を持たせる場合があります。
ユーザー属性の違いの2つの例
ローカライズの違い
例：ユーザーの設定が米国の場合は米国式の日付表記をする
ユーザーの言語や地域の属性によって、単位系の表現を変えたり、表示言語を変えたい場合があります。
ユーザーロールの違い
例：非ログインユーザーには記事を途中までしか読めないようにする
アクセスするユーザーの権限によって表示する要素を変えたり、特別な機能を許可するなどの分岐を作ることがあります。
デバイス環境の違い
Webページを表示する環境は幅広く、画面サイズの違いやプラットフォームの違いがあります。これらのデバイス環境の違いもレイアウトに影響を与えることがあります。
デバイス環境の違いの3つの例
画面サイズの違い
例：PC環境からのアクセスではWUXGAサイズのウィンドウなのに、スマートフォンからのアクセスは横幅320px相当
大きな画面と小さな画面では、一度に表示できる情報の量や扱えるレイアウトの複雑さに違いがあります。対応したい画面サイズに幅がある場合、レスポンシブレイアウトやリキッドレイアウトなどの方法で可変レイアウトを実装します。
カラーテーマの違い
例：朝から夕方まではライトモードで表示し、夕方以降はダークモードに切り替わる
近年はどのOSでもダークモードが標準的に実装されているため、アプリケーション側でも複数のカラーテーマを持つ場合が増えています。
ブラウザの違い
例：位置情報が取得できるブラウザでだけ地図に現在地を表示する
非対応のブラウザではエラーメッセージを出して使えなくしたり、古いバージョンが対応していない機能を一部無効化したりすることがあります。
インタラクション
最後はユーザーのインタラクション（操作）です。アプリケーションによって要件が大きく違う部分ですが、ここでは一般的によく出てくるものを挙げます。CSSで簡単に実装できるものあれば、イベントハンドリングやDOM操作ロジックを組み合わせた開発が必要になる場合もあります。
インタラクションによる変化の8つの例
マウスオーバーに反応する
ボタンのホバーエフェクトなど、とても一般的な挙動です。
マウスクリック、タップに反応する
クリック時にボタンの色が変わったりするなど、こちらも一般的です。
ドラッグ、スワイプ、マウス座標に反応する
要素を掴んで動かしたり、めくったり、範囲を選択したり、何かを回転させるときによく登場します。
右クリック、長押し、プレスに反応する
コンテクストメニューを表示するときによく使うインタラクションです。
キーボード入力に反応する
キーボードからデータを入力する、Tabキーフォーカスでボタンを選択するなどの挙動が一般的です。
スクロール操作やスクロール位置に反応する
画面のスクロール位置によってアニメーションさせたり、特定の方向へスクロールした時にだけ表示させるなど、スクロール操作に連動した挙動を作ることがあります。
通信状況に反応する
ページの読み込み途中でローディングアニメーションを表示したり、通信の成功と失敗に応じて異なるメッセージを表示したりの制御に使います。
かつてなく複雑なWebフロントエンドのレイアウト
以上のように、26の例を通してレイアウトが変化する要因を紹介しました（最初の例と合わせて27個なので、これでタイトル回収です）。
データの違いだけでも十分に複雑ですが、それ以外にも多くの要因がレイアウトに影響を与えることがお分かりいただけたと思います。
これらの変化の要因が複合的に組み合わさることで、実際の開発では多くの画面表示パターンの設計・実装・テストが必要になり、Webフロントエンドの複雑性は増すばかりです。
これは裏を返すと、デザイナーにとってはデザインのしがいがあり、エンジニアにとっては工夫のしがいがあるとも言えます。
古くからあるテンプレートという考え方の上に、かつてなく複雑でまだ誰も最適解を見つけられていないデザインの領域が広がっているのです。
※記載されている会社名、製品名は、各社の登録商標または商標です。
この記事が気に入ったらサポートをしてみませんか？