MENU
CLOSE
DESIGNPICK UPWEB Edit : 2022.08.17 Update : 2023.01.11

オウンドメディアのデザイン研究① ファーストビュー・記事一覧・スマホを比較

ただいまウェブメディアのデザインリニューアルを行っています。 自分が読んでいるものを中心に幅広いジャンルのウェブメディアのデザインを集めてみたので、こちらでまとめてみたいと思います。

ウェブメディアって?

まず初めにウェブメディアとは、インターネット上にアップされているデジタルメディアの総称です。 PCやスマホなどを使ってインターネットにアクセスして閲覧するメディアのことです。 また、自社で保有しているウェブメディアのことをオウンドメディアとも称されます。

WIRED

『WIRED』は、テクノロジーによって、生活や社会、カルチャーまでを包括したわたしたち自身の「未来がどうなるのか」について考察するメディア。 https://wired.jp
 

ファーストビュー

   

記事

   

SP

   
縦長の写真を使用しているのが珍しい。 余白を多くとり、清潔感のあるデザインがテーマの通り未来的でWIREDらしいデザイン。
 
日本語フォント 游ゴシック
最少フォントサイズ 14px
FV記事数 1記事
アイキャッチ画像 写真/縦長
メニュー ヘッダーへハンバーガー
記事フォントサイズ PC/SP:16px
 

TechCrunch Japan

2005年にシリコンバレーでスタートした、スタートアップ企業の紹介やインターネットの新しいプロダクトのレビュー、そして業界の重要なニュースを扱うテクノロジーメディア。 https://jp.techcrunch.com
 

ファーストビュー

   

記事

   

SP

   
スクロールが少なく情報量が多いところ、タイトルの下の本文までも読めるところがニュースサイトらしくもあり、読みやすさもある。
 
日本語フォント メイリオ
最少フォントサイズ 12px
FV記事数 5記事
アイキャッチ画像 写真/横長
メニュー なし
記事フォントサイズ PC/SP:16px
 

Qetic

最新トレンドから今ネットで話題のゴシップまであらゆるエンタメ・カルチャー情報を届けている時代に口髭を生やすニュースメディア Qetic(けてぃっく)。 https://qetic.jp/
 

ファーストビュー

   

記事

   

SP

   
アイキャッチ画像の下がブラックのグラデーションになっていて、白いタイトルの文字がどんな画像でも読めるようになっている。 ごちゃっとしているのも取り扱いカテゴリのサブカルにあっている。
 
日本語フォント 游ゴシック
最少フォントサイズ 14px
FV記事数 1記事
アイキャッチ画像 写真・イラスト/横長
メニュー なし
記事フォントサイズ PC/SP:13px
 

NewsPicks

「経済をもっと面白く。」をキャッチコピーに掲げるビジネスパーソンのためのソーシャル経済メディア。 https://newspicks.com/
 

ファーストビュー

   

記事

   

SP

   
題材がすこし堅いがそれを感じさせないシンプルですっきりとしたデザイン。記事一覧にコメントがあるのも特徴的。
 
日本語フォント ヒラギノ角ゴシック
最少フォントサイズ 13px
FV記事数 6記事
アイキャッチ画像 写真/横長
メニュー ヘッダーへハンバーガー
記事フォントサイズ PC:14px / SP:12px
 

Mastered

「酸いも甘いも噛み分けた」という程では無いけれど、なんとなく世の中の大体の物事は経験し習得したような気がする世代の日常を、メンズファッション&カルチャーを中心としたフレッシュなニュースとコンテンツでちょっぴり刺激します。 https://mastered.jp/
 

ファーストビュー

   

記事

   

SP

   
個人的に、デザイン・ネーミング・コンセプトがかっこよくて大好き。
 
日本語フォント ヒラギノ角ゴシック
最少フォントサイズ 15px
FV記事数 3記事
アイキャッチ画像 写真/横長
メニュー カテゴリー左側表示
記事フォントサイズ PC/SP:18px
    後半はこちらで▼

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。