こんにちは、デザイナーのNOEです。
今月から月一で「スマホデザイン研究所」を連載していくことになりました。
スマホデザイン制作時に、「フォントサイズや行間はどうしよう？」「マージンは20PX、30PXどっちが良いか？」「タップサイズの大きさは？」など迷う事があります。
そこで、スマホのデフォルトの純正アプリや有名アプリの文字サイズ・行間・マージンなどを調べて最適なフォーマットは何なのか探っていきたいと思います。
調査結果から最適サイズを導きだしPSDモックを作成します。
第一回目は、「有名ニュース・キュレーション系アプリ徹底研究」です。(主にリストデザイン)
検証方法
- iPhone6でキャプチャーとる
- Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。解像度を横幅640pxに設定）
スマートニュース
タップ領域のサイズは統一されています。記事カテゴリーがはっきりした色で分けられています。
売りの一つであるスマートモードの画面です。
YAHOO
タップ領域のサイズは統一されていてキレイです。
グノシー
ニュースリスト箇所のタップ領域は、文字数、画像サイズによって可変します。
マージンが統一されていてキレイですね。
大きくイメージ画像を使っています。
TRILL
女性向けアプリ。パステルカラーをつかっているので雰囲気が可愛いです。
大きくイメージ画像を使っています。
日経電子版
記事カテゴリーなど、下部にナビゲーションが設置されています。
Presso
記事カテゴリーに、デザインやweb開発などあるので使いやすいです。はてなブックマークさんが運営されています。
アンテナ
タイトルの文字色が黒でなくブラウンなのは珍しいです、落ち着いた印象がありますね。
NAVER まとめ
以上、8アプリを調査しました。
ものすごく地道な作業でした。。
しゅ、修行やな～これ、ってぶつぶつとつぶやきながら何とか天竺にたどり着きました。。。
以下、調査結果です。
本文：24～28px
見出し：28～36px
リスト上のデザイン上下マージン：22～40px（30pxが多い）
左右の余白：15～40px（30pxが多い）
ハンバーガーメニューは、右側に付けているところが多いです。
ニュースアプリ・キュレーション風デザインを作成する際に、
このサイズを参考にして頂ければほぼ間違いないでしょう。
この結果を元にPSDモックを作成しました
アクトゼロのサイトをニュースアプリ・キュレーションサイト風に作成しました。
こちらPSD無料配布いたします。
ロゴや画像を差し替え、デザインやプレゼンなどで、ぜひご使用ください。
