【セミナー】モバイルウェブアプリのデザインtips8つ＋α

HTML5＋javascriptのプログラミングセミナー第三回では、外部講師にデザイナーの梅津康宏さんを招待して「モバイルウェブアプリのパーツデザイン」について講義してもらいました。その内容を簡単にまとめました。

デザインするためのアプリケーションには、大きく2種類ある。ひとつは、ピクセルの集まり＝ビットマップ画像を編集するもの（Photoshopなど）。もうひとつは、直線や曲線などの画像の集まり＝ベクター画像を編集するもの（Illustratorなど）。

梅津さん個人としては、ビットマップとベクトル両方扱えるPhotoshopがおすすめ。しかし、Photoshopは高額です。

そこでほぼ同じ機能で無料で使えるフリーソフトがあります。それが、GIMP。GIMPは、UIも見た目もほとんど変わらない。ほかにもPIXEL MATORという約4,000円の編集ソフトがあり、ビットマップ画像もベクター画像も対応しているそうです。

このようなアプリケーションを使った、8つのtipsを紹介してくれました。

 

【1】ドロップシャドウ : 影をつける。影の距離、色、ぼけ具合。＊CSS3で可能

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

【2】シャドウの内側 : 輪郭の内側に影をつける。影の距離。影の位置。

 

 

 

 

 

 

 

【3】光彩 グロー : 輪郭の外側にさすことで発光しているように見せる

 

 

 

 

 

 

 

【4】へベル、エンボス : 出っ張っているような立体感

 

 

 

 

 

 

 

【5】サテン : メタリックな質感

 

 

 

 

 

 

 

【6】グラデーション : グラデーション。＊CSS3で可能

 

 

 

 

 

 

 

 

 

 

 

 

 

【7】パターンオーバーレイ : 画像素材を合成する。iPadデフォルトのアプリにもこの効果は使われているそう。

 

 

 

 

 

 

 

【8】境界線 : 単色の枠、複数色の枠

 

 

 

 

 

 

 

 

 

 

 

 

 

梅津さんが携わったアプリのデザインも、ほとんどこれらの効果の組み合わせでできているそう。

 

 

 

 

 

 

 

 

 

 

また、最近のウェブアプリデザインの傾向として、これらのエフェクトをできる限りCSS3で実装するそうだ。理由は、アプリに含まれる画像の軽量化し、レスポンスの向上を図るため。ネイティブアプリと異なり、ウェブアプリは画像の点数が多いとその分読み込みに時間がかかってしまい、ユーザーエクスペリエンスは損なわれてしまう。また、アプリの軽量化を図るために「スプライト」という手法があるそうだ。これは、すべての素材を一枚の画像におさめ、プログラムで個別の素材を読み込むという方法。これによって、素材は複数点あっても、読み込む画像は一点でよいという状況をつくるそう。これはウェブアプリを開発するにあたって、ぜひ活用していきたい。

 

 

 

 

 

 

 

講義で印象に残ったのは「完成系のイメージを、デザイン用語で共有することが複数人で進めるプロジェクトにおいては大切」という梅津さんの言葉。実際にデザインしないプログラマーやプランナーも、お互いの仕事を理解しサポートし合うことが、クオリティーの高いウェブアプリ開発においては重要ですね。

2012年3月17日 11:27 PM
カテゴリー：ブログ