こんにちは、デザイナーの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無料配布いたします。
ロゴや画像を差し替え、デザインやプレゼンなどで、ぜひご使用ください。