マルチデバイス対応ウェブを作るコツ、仮説

ウェブページを印刷するときに、表示を印刷ように調整できる印刷用CSSはすでに広く普及している(まともに対応しているブラウザは残念ながら少ないが・・・)。さらに、ケータイ端末の高性能化や ニンテンドーWii のようなテレビ用ネット端末の登場で、HTMLの利用シーンは今後どんどん広がっていくことが予想される。

1枚のウェブページが、こうした様々な端末から参照されること(マルチデバイス対応)を考慮すると、現在の一般的なウェブデザインのままでは、対応しきれない場面が出てくるだろう。

そこで、ウェブページをマルチデバイスに対応させるために、何に気をつける必要があるのか考えて、仮説を立ててみた。

1. ドキュメントとスタイルの論理的分離

ドキュメントとスタイルを物理的に分離したデザインは、かなり普及してきたように思う。しかし、論理的に分離できている例は少ない。物理的に分離しているだけでは、メディア別の書き分けは困難だ。

見た目のスタイルをそのままクラス名にしたような、スタイルのショートカット的なクラス(.mt10など)にはなるべく頼らず、構造や意味でスタイルを管理するコーディングを心がけよう。

2. 『ページデザイン』から『パーツデザイン』へ

ページ全体の調和を取るのは重要だが、ページ個別に書き下ろすようなデザイン作業は、効率がよくない。まずは、パーツ単位の設計を基本にし、ページのデザインは、パーツの組み合わせだけで成立できるような設計を目指すべし。

また、パーツ設計に際して幾つか注意すべき点がある。

  • 各パーツは、各メディアタイプ別にどのような表示になるか、考慮する。
  • 各パーツは、画面幅にフィットするリキッド構造で設計する。
  • 各パーツは、ブロック単位でパーツを設計し、固有のクラス名を与える。似ているパーツがあっても、2つのパーツを混在しないように設計する。

3. テキストベースの最低限の伝達手段をベースに、構成を組み立てる

screen以外のメディアを考慮すると、テキストベースの情報にしかアクセスできない環境がある。逆に、テキストであれば全てのメディアで再生が可能なはずだ。
Flashや画像などによる表現を組み立てる前に、まずテキストだけで成立する構成を確立しておくことが重要だ。それから、スクリーン向けにFlashなどによる表現を追加していけばいい。

4. 不必要な画像はCSSによる画像置換で表現

装飾用のメニュー画像など、img要素を使う必要のない部品は、すべて画像置換で対応するべきだ。このような画像は、メディアタイプによっては逆に使いづらくなったり、画面が重くなったりすることが多いが、img要素の画像はCSSで変更することができない。

5. JavaScriptでCSSを一括コントロール

CSSでどうしても表現できない、あるいはブラウザが対応していないCSSの機能を使う必要がある場合は、JavaScriptが使える。onloadイベントでHTMLをスキャンして、スタイルを動的に調整するようにしてしまう方法だ。

ただし、この方法は、ロード完了直後に画面がちらついたように見えることがあったり、処理が重くなる可能性があり、多様は避けるべきだ。

6. どうしようもない時の『出し分け』

様々なテクニックを駆使しても、どうしても成立できないデザインもあるだろう。
そういうときは、仕方がないので、両方コーディングして、メディアタイプによって出し分けてしまおう。

しかし、HTML上に同一の内容を2重に記述することになるため、冗長になってしまう欠点は否めない。


下記は過去の関連記事。


プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

  • このサイト https://www.pxt.jp/ は、 コヤナギ トモヤ の個人サイトです。
  • 個人的な主張や、活動の記録などを掲載しています。 所属する企業、団体、その他の意見や立場を代表するものではありません。
  • 掲載された内容は古くなっている可能性があります。 特に古い記事では、現在の筆者の考えと異なる主張をしていることがありますが、記録としてそのまま残しております。 予めご了承ください。
ページの先頭へ戻る