ダサくならないAndroidアプリUIの設計方法――開発者のための実践ガイド

プログラマーや開発者は、一般的にデザイナーではない――これは広く受け入れられている事実です。開発者はアプリを動作させることに集中し、デザイナーはアプリを美しく見せることに集中します。しかし、どうして開発者は両方を兼ねられないのでしょうか?

アニメーション付きのスプラッシュページや凝ったレイアウトが全盛だった時代なら、プロのデザイナーを雇うのは理にかなっていました。しかし現在のトレンドはミニマル――少なくとも大幅にシンプル化されたデザインです。

ひとつ実体験をお話ししましょう。少し前、ある方からPCソフト向けのスプラッシュスクリーン制作を依頼されました。私は全力を尽くし、スケッチブックに下書きをしてPhotoshopに取り込み、派手なネオンラインやエフェクトをふんだんに盛り込みました。出来上がったのは、スプラッシュスクリーンというよりデスクトップ壁紙のような作品でした。つまり、極めて凝った精巧なデザインを作り上げたわけです。

結果はお察しの通り、相手は気に入りませんでした。実際に採用されたのは、色の異なる円がいくつか重なっただけの小さなロゴと、その下に配置されたソフト名のみ。Photoshopで2分ほどの作業レベルのデザインです。ところが不思議なことに、私自身も「確かに自分の作品より優れている」と認めざるを得ませんでした。

ここで伝えたいのは、プログラマーは私と同じ落とし穴に陥りがちだということです。私たちはUIやスプラッシュスクリーンを、アプリを際立たせるための派手で目を引くものでなければならないと考えがちです。しかし、そんな必要はありません。むしろ、そうあるべきではないのです。シンプル、機能的、きちんと動く――このプログラマー的な発想こそ、デザインにも応用すべきなのです。

この記事では、デザイン経験がほとんどなくても、エレガントなAndroidアプリのUI/UXを作れる超シンプルな方法をいくつか紹介します。

特別なこだわりがなければ、まずはMaterial Designを採用しよう

アプリが人気を集め、見栄え良く仕上がるためには、「唯一無二」である必要はありません。GoogleのMaterial Designはまさにそのために生まれた、業界共通のアプリUI標準であり、見事な成果を上げています。SwiftKey、Nova Launcher、Textra SMS、YouTubeなど、Androidを代表する人気アプリの多くがMaterial Designを採用しています。

Material Designの核となるのは、カード型レイアウトと統一感のあるカラーパレットです。Googleは業界トップクラスのデザイナーと協力し、ミニマルデザインの手法から多くの要素を取り入れ、そのすべてを無料で公開しました。Webやアプリのデザイン講座は書籍や動画だけで数百ドルかかることもあるため、これは破格のお買い得と言えます。

Material Designの導入は驚くほど簡単で、さらに作業を楽にしてくれるツールも多数存在します。

• Material Theme Editor(macOS + Sketch)
• Material Design Color Palette プラグイン(Photoshop / Illustrator)
• Material Design UI Kit PSD(Photoshop)
• Android Material Design UI Kit(Sketch)
• Material UI Theme Generator

シンプルで上質なMaterial Designテーマのヒントが欲しいときは、次のまとめブログが参考になります。

• MaterialDesignBlog ― 正しく実装されたMaterial Designの優秀事例15選
• MockPlus ― インスピレーションを得られるMaterial Designサイト事例12選
• AndroidAuthority ― Android向けおすすめMaterial Designアプリ10選

カラーグラデーションは思ったよりずっと簡単

Material Designの代替案として、カラーグラデーションはシンプルでトレンド感があり、視覚的な印象も抜群です。「デザイナーは何時間もかけて配色を練り、完璧なグラデーションを作り込んでいるのでは?」と思うかもしれませんが、それは誤解です。Photoshopなら10秒で完成します。

実際の手順を見てみましょう。あまりに簡単なので、きっと驚くはずです。

まず、モバイル用の新規PSプロジェクトを作成します(1080×1920px・72ppiで問題ありません)。

次にUIGradients.comにアクセスし、気に入ったグラデーションを探します。

プレビュー上部に表示されているカラーコードをコピーします。

PSで空のレイヤーを右クリックし、「レイヤースタイル」→「グラデーションオーバーレイ」を開きます。

ドロップダウンメニュー内のグラデーションプレビュー部分を直接クリックしてください(▼ボタンではありません)。プレビューを直接クリックすると、カラーエディターが開きます。

あとはUIGradientsからコピーしたカラーコードを、PSのグラデーションエディターに貼り付けるだけです。

必要に応じて微調整すれば、Androidアプリ用のプロ品質グラデーション背景の完成です。

その他のおすすめグラデーションツール:

• WebGradients.com
• Android Shapes Generator(XMLで図形を生成でき、グラデーション指定にも対応)

JPG/PNGの代わりにSVGを使う

ボタンやロゴなどのグラフィック要素には、PNGやJPGではなくSVG(Scalable Vector Graphics)を使いましょう。SVGは画質を劣化させることなく拡大縮小できるためです。JPGを拡大すると画質が落ちてぼやけたり、ジャギーが目立ったりしますが、SVGにはその心配がありません。Androidの各種画面サイズに合わせて縮小表示される巨大なPNGファイルを使うよりも、小さなSVGファイルを劣化なしで拡大表示する方が賢明です。

さらに、SVGはPNGに比べてファイルサイズを最大60〜80%削減できます。その結果、アプリやモバイルサイトの読み込みが高速化し、どの画面解像度でも美しく表示されます。

Theme.AppCompat.DayNightでダークモードを追加する

アプリにダークモード(ナイトモード)を搭載するために、2種類のテーマを別々に設計する必要はありません。AppCompatライブラリに機能がほぼ組み込まれており、有効化して値を調整するだけで実装できます。

具体的な手順は「Androidアプリにダークモードを実装する方法」のガイドを参照してください。

テンプレートやモバイルUIキットを活用する

アプリに凝ったカスタムGUIが求められていないなら、テンプレートやキットの利用を躊躇する必要はまったくありません。デザインのインスピレーション源として参照してもよいですし、そのまま流用して自分のボタンや要素を足していくのも自由です。

Android UIテンプレート&キットの優良リソース:

• SpeckyBoy ― iOS & Android向け無料モバイルUIキット50選
• SketchAppSources ― Android UIアプリリソース(Sketch)
• Freebiesbug ― PSD UIキット(Photoshop)