フラットデザイン

先週から、スマートフォン版のSSK Worldで使用しているWebフレームワーク・jQuery Mobileのバージョンを1.4に上げて運用してみているところです。とりあえず、画面表示の破綻などないような状態になっているかとは思いますが、まだ修正したいポイントがいくつも残っています。追々、こっそりと直していこうかと思っています。

jQuery Mobile 1.4では、これまで使っていたjQuery Mobile 1.2とは多くの点で異なる記述が必要になります。従来JavaScriptで処理していた部分をCSSのみで処理するようにしているのだそうで、このためにタグ内の属性記述の仕様には大幅な変更が加えられています。JavaScriptを実行しないこと自体が動作の高速化に有利ですし、そもそもJavaScriptを読み込まない分だけページのファイルサイズ自体が縮小されることになります。

標準のデザインが、従来の立体的な陰影が付いたものから、平板的ないわゆるフラットデザインに変更されたのも特徴の一つです。Windows 8、iOS 7、Android 5.0と、プラットフォームを問わずフラットデザインはユーザーインターフェースの時代の潮流と言って良いでしょう。Windows Vista/7のAeroGlassのように、UIはリッチに見せるのが主流だった時期もありますが、現在はUI自体が目立ちすぎないようにして、ユーザーの操作をそっとアシストする流れのようです。


ボタン等に使われるアイコンについても、大幅な仕様変更がありました。アイコン画像は、SVGという形式のファイルが標準で使われるようになっています。SVGは、GIFやJPEG、PNGのような格子状のドットの集まりで描かれたラスターデータではなく、形状を描画する線を数値データで表現したいわゆるベクターデータで、どんなに拡大しても画質が劣化しません。高解像度化が進む現在の各種デバイス上で、シンプルな図形で表現されるアイコンを取り扱うにはうってつけのフォーマットです。

SVGは、ベクターデータをXMLの規則に則って記述したものなので、根性さえあればテキストエディタで編集できないこともないはずなんですが、さすがに私はそこまで変態的な頭脳は持ち合わせていないので(苦笑)、何らかの専用のソフトウェアを使って作成するしかありません。SVG形式で出力できる無料のソフトウェアもいくつか存在するようなので、ちょっとトライしてみようかと思っています。

Flashコンテンツを作成していた時期もありますし、3次元CG作成ソフトでも形状定義に多用しますから、ベクターデータ自体には馴染みがあるんですが、しばらく離れていたせいか、勘を取り戻すのにちょっと時間がかかっています。ラスターデータから変換する方法もあるんですが、もともとフラットに塗られていないデータだと不自然になってしまい、とても使い物にならないので、結局イチから書き直すしかありません。まあ、ぼちぼちやってみますよ。

コメントを残す