はじめに
Qiitaの最新投稿を一覧表示するアプリケーションを題材にプログラマ自身で出来る様々な小技を説明してみたいと思います。
まずは、Xamarin.Formsを使ったiPhoneアプリを題材にして進めてみます。
この記事用にスクリーンショットをとった開設用アプリは今回フルスクラッチで書きました。
最後にGitHubのURLを記述するので、興味があればご覧ください。
ステップバイステップでコミットしてあるので、変更点と結果（見た目への影響）が比較的わかりやすいと思います。(Xamarin.Formsですが)
これがこうなる
これ
|
こう
|
|---|
調理前の題材
|
|---|
まっしろしろすけ。iPhone8+の実機のスクリーンショット。
はじめて iPhone のアプリを作ったのならこれでも結構な感動があると思います。そう Hello World レベルならば。
すぐに気が付く点は
- ステータスバーとツールバーが白くて初心者っぽい
- 各行が詰まりすぎてて見にくい（Marginが無い）
- 各行の分割線が微妙な長さで気になる（iOSあるある）
ひとまずはこの辺りでしょうか。
対策第１弾
 |
|---|
以外にこれだけでも、ちょっとリッチになった気がしますね。
- ステータスバーとタイトル部分を Qiita 色にする
- ページタイトルの文字を白色に
- 分割線を表示しない
- 各行にちょっぴりマージン
こんだけ。
この時点でさらに気になるポイントは
- コンテンツが目立ってない
- ステータスバーの文字色も白色にしたい
- 各行の境界線がわかりにくい
対策第２弾
区切り線なし
|
区切り線あり
|
|---|
これぐらいまで来るとHello World感は無くなって、爽やかな軽い感じになりますね。
- ステータスバーの文字を白色に
- タイトルの文字がクリッピングされずに折り返されるように
- 各行に適度なPadding追加
これぐらいで合格点と言っていいと思いますが、少し欲張ってみましょう。
- コンテンツをさらに目立たせる
- Z軸を強調する（奥行表現）
対策第３弾
 |
|---|
う、うーん。コレジャナイ感って奴ですね。
これはXamarin.Formsのdefault visualのFrame要素で実現しています。
実はXamarin.Formsにはいわゆるマテリアルデザインテーマがあり、iOSでも比較的容易にマテリアルデザイン風味を実現可能なのですが正直現時点では完成度に難があり完全とは言えない状況です。（iOSにおけるマテリアルデザインの是非は置いといて）
じゃあってことでドロップシャドウというより放射ブラーみたいになってる影をやめて縁取りだけだとどうでしょうか。
 |
|---|
なんか違う。角丸のアールが古いのか。微調整。
縁取りあり
|
縁取りなし
|
|---|
MarginとPaddingを少し調整して、リストの背景色も調整してみました。
個人的にはこれぐらいやっとくと好印象になります。
実行時性能を犠牲にしてでもXamlで凝りに凝った装飾を施すとXamlだけでももう少し上を狙えます。
が、その限界を超える手段がXamarin.Formsのカスタムレンダラーを使うことで可能になります。
- コンテンツに半透明のドロップシャドウをつけたい
- タイトルとリストの間に半透明のエッジシャドウをつけたい
対策第４弾（カスタムレンダラー投入）
| ドロップシャドウなし
|
ドロップシャドウあり
|
|---|
カスタムレンダラー（iOSネイティブの描画）を使ったドロップシャドウの表現。
この時、行間とシャドウの色味や透明度を調整しないとマッハバンドが出ることがあるので注意してください。
このレンダリング結果だと、ページタイトルの奥行とリストの奥行が同じで、その上にコンテンツが被さっているように見える。
なので、ページタイトルとコンテンツの奥行を同じにするためにリストが奥になるような表現を追加する。
| エッジシャドウなし
|
エッジシャドウあり
|
|---|
対策おまけ（グラデーション塗り）
| グラデーション塗りなし | グラデーション塗り浅め | グラデーション塗り濃いめ |
|---|---|---|
|
 |
|
最後に
こういう分野って個人の主観というか好みもあり、一概でどういうのがクールとは言えない面があると思います。
その一方で、これはちょっとダサいかもっていう多くの人に共有される常識のようなものもあると思います。
この記事を最後までご覧いただいた方にとって、どの小技が効果的だと思われたでしょうか？
比較的多用されるテクニックの１つにコントラストを下げるというのがあります、明度が高いとエッジが目立って古臭い感じになるので彩度を落として淡い色合いを使う。
しかし、これは格好いい見た目になっても読みやすいかどうかは別の話だと個人的には思っています。やはり自分が使う上では機能性が一番重要なのでコンテンツを最も強調することが最優先でその上での見た目かなと。
本記事のソースコードはすべて↓ここにあります。（急遽書いたのでコードの品質や実現手段の正しさは保証しませんし、バグってるとこもあります）
https://github.com/fuku518/Goose
それでは、良いプログラミングライフを！
おまけのおまけ
Qiita APIでは記事タイトル以外にいろいろな情報が取れるので、きちんと出すとオレオレQiita非公式クライアントアプリを作るのも容易でしょう。
記事サマリー、タグ、like数、著者名、タイムスタンプなどを出すだけで、ぐっとスマホアプリらしくなります。
