,

フラットデザイン

先週から、スマートフォン版の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作成ソフトでも形状定義に多用しますから、ベクターデータ自体には馴染みがあるんですが、しばらく離れていたせいか、勘を取り戻すのにちょっと時間がかかっています。ラスターデータから変換する方法もあるんですが、もともとフラットに塗られていないデータだと不自然になってしまい、とても使い物にならないので、結局イチから書き直すしかありません。まあ、ぼちぼちやってみますよ。



投稿日

カテゴリー:

,

投稿者:


1回のみ
毎月

記事を気に入っていただけましたか?よろしければ、今後のSSK Worldの活動に向けてご支援をお願いいたします。

SSK Worldを「面白い!」と思っていただける方がありましたら、今後の当サイトの活動継続に向けて、ご支援をお願いいたします。

Choose an amount

¥100
¥500
¥1,000
¥500
¥1,000
¥2,000

Or enter a custom amount

¥

ご協力いただき、ありがとうございます。

ご協力いただき、ありがとうございます。

送金送金

コメント

コメントを残す

タグクラウド

2年縛り Amazon Android BESS Bluetooth CF-B5 CF-R2 CF-R4 CF-RZ4 CF-SV8 DIY iPhone LTE Movable Type Nintendo Switch NuAns NEO Reloaded SNS SSD USB PD Webサイト Webブラウザー Windows 10 Windows XP カメラ カーナビ クルマ ショップ ステップワゴンスパーダ スマートフォン バージョンアップ ブログ マラソン レッツノート ログハウス 中日ドラゴンズ 伊豆 倉庫 健康 写真 合唱 塗装 家族 携帯電話 旅行 日本プロ野球 映画 暮らし 東京 槇原敬之 浜松 無線LAN 省電力 自作PC 芝生 薪ストーブ 薪割り 記念日 野球 音楽 食べる