ニュース・キュレーション系アプリを徹底研究(PSDモック無料配布)

 

こんにちは、デザイナーのNOEです。

今月から月一で「スマホデザイン研究所」を連載していくことになりました。

スマホデザイン制作時に、「フォントサイズや行間はどうしよう?」「マージンは20PX、30PXどっちが良いか?」「タップサイズの大きさは?」など迷う事があります。

そこで、スマホのデフォルトの純正アプリや有名アプリの文字サイズ・行間・マージンなどを調べて最適なフォーマットは何なのか探っていきたいと思います。

調査結果から最適サイズを導きだしPSDモックを作成します。

 

第一回目は、「有名ニュース・キュレーション系アプリ徹底研究」です。(主にリストデザイン)

 

検証方法

  1. iPhone6でキャプチャーとる
  2. Photoshopで上からテキストをトレース。(このときの文字設定の数値を記載しています。解像度を横幅640pxに設定)

スマートニュース

スマートニュース01

タップ領域のサイズは統一されています。記事カテゴリーがはっきりした色で分けられています。

スマートニュース02

売りの一つであるスマートモードの画面です。

YAHOO

yahoo01

タップ領域のサイズは統一されていてキレイです。

yahoo02

グノシー

グノシー01

ニュースリスト箇所のタップ領域は、文字数、画像サイズによって可変します。

グノシー02

マージンが統一されていてキレイですね。

大きくイメージ画像を使っています。

TRILL

TRILL01

女性向けアプリ。パステルカラーをつかっているので雰囲気が可愛いです。

TRILL02

大きくイメージ画像を使っています。

日経電子版

日経01

記事カテゴリーなど、下部にナビゲーションが設置されています。

日経02

Presso

Presso01

記事カテゴリーに、デザインやweb開発などあるので使いやすいです。はてなブックマークさんが運営されています。

アンテナ

アンテナ01

タイトルの文字色が黒でなくブラウンなのは珍しいです、落ち着いた印象がありますね。

NAVER まとめ

 

naver01

以上、8アプリを調査しました。

ものすごく地道な作業でした。。

しゅ、修行やな~これ、ってぶつぶつとつぶやきながら何とか天竺にたどり着きました。。。

以下、調査結果です。

本文:24~28px

見出し:28~36px

リスト上のデザイン上下マージン:22~40px(30pxが多い)

左右の余白:15~40px(30pxが多い)

ハンバーガーメニューは、右側に付けているところが多いです。

 

ニュースアプリ・キュレーション風デザインを作成する際に、

このサイズを参考にして頂ければほぼ間違いないでしょう。

この結果を元にPSDモックを作成しました

アクトゼロのサイトをニュースアプリ・キュレーションサイト風に作成しました。

iPhone6---Front-White---by-JustD

こちらPSD無料配布いたします。

ロゴや画像を差し替え、デザインやプレゼンなどで、ぜひご使用ください。

名称未設定-1