メディアサイトを制作する上でデザイナーが気をつけることまとめ

メディアサイトを制作する上でデザイナーが気をつけることまとめ

2016.02.2
eyecatch
ノウハウ

こんにちは、ドワンゴデザイナーのサリーです。
ドワンゴに入社する前はWeb制作会社にいたのですが、メディアサイトのデザインをする機会も多く、この「dwango creators’ blog」のデザインも担当させていただきました。
今回はメディアサイトやブログサイトのデザイン初心者の方向けに、制作時気をつけていることをまとめてみました。

サイトを作る目的、目標を明確に

メディアサイトを作る上での目的・目標があるはずなので、デザインをはじめる前に確認しておきます。目的が複数ある場合は、優先順位付けも大事です。

例えば

目的 目標
広告収入 PV数、imp数、クリック数
自社やサービスの知名度アップ PV数、お問い合わせ数

など、目的によってKPI設定が変わってきますよね。
目標が「広告のクリック数」だった場合は、広告の表示位置や回数はとても重要ですし、「お問い合わせ数」だったら、会社やサービスの紹介をさりげなく入れる仕組みや、お問い合わせページヘの誘導方法を考えなければなりません。
同じメディアサイトでも目的が異なればUIも変わりますので、目的に合ったデザインを心がけましょう。

サイトの内容に合ったデザインを考慮する

メディアサイトには、ニュース系、テック系、ファッション系など、様々なジャンルがあります。
例えば、アート系のまとめサイトだったらサムネイルは大きめに見せた方が魅力的だし、日付の表示は不要かもしれません。エンジニア向けの技術ブログだったら、コードが見やすく、サムネイルがなくても単調にならないデザインを考える必要があります。

サイトの内容に合っていて、ユーザーが魅力的に感じてくれるデザインを制作するために、事前に実際に入るようなサンプル記事を貰っておくといいと思います。

また、記事の更新頻度も構成を考える際に重要なポイントです。
1日に5件更新されるサイトと1週間に1件更新されるサイトでは、1ヶ月に更新される記事の数が全然違うので、それぞれに合った構成を考えなければなりません。

記事を書くときに使えるスタイルをあらかじめ用意しておく

記事を読むときは、文章の強弱がついていた方が読みやすいですよね。
見出しなどの汎用的なスタイルは必ず必要になるので、あらかじめ想定して用意しておきます。
私の場合ですが、はじめは以下のスタイルを用意しておくことが多いです。

  • 見出し(h◯、3段階ほど)
  • ul
  • ol
  • table
  • blockquote
  • 外部リンク
  • 汎用の枠

可能であればどのような記事の書き方をするかをヒアリングし、想定出来る範囲で使い回しの効くスタイルを用意しておきます。
運営が始まると執筆者や編集者から「こんなスタイルがほしい!」という要望が飛んできますので、随時追加していくと良いです。

また、CMSの場合、AddQuicktag(WordPress)のようなプラグインを使い、用意したスタイルが簡単に使えるようになっていると便利ですね。

各SNSの特徴を理解しておく

いまやメディアサイトにSNSボタンの設置はほぼ必須になりました。
しかしすべてのボタンを設置するとページの読み込みが重くなりますし、見た目も美しくないので、サイトに必要なボタンを取捨選択します。

記事詳細ページ向け

記事ページに設置することを想定すると、代表的なものには以下のようなボタンがあります。

Facebook いいね!
Facebook いいね!
Facebook シェア
Facebook シェア
Twitter ツイート
Twitter ツイート
Google+
Google+
はてなブックマーク<
はてなブックマーク
pocket
Pocket
LINE
LINE
mixi
mixi
GREE
GREE
pinterest
pinterest
Tumblr
Tumblr
Linkedin
Linkedin

記事の特性によってそれぞれが押される回数にはかなり差が出ます。
ボタンの特徴を一部紹介すると、

  • おもしろ記事やお役立ち記事は「Facebook いいね!」「Facebook シェア」が押されやすい
  • 技術系の網羅記事は「はてなブックマーク」「pocket」が押されやすい
  • 「Google+」は数値がイマイチだが、Googleの検索エンジンに影響するという情報がある

という感じです。運営しながらサイトとの相性を見てみましょう。

全ページ向け

上記とは別に、RSSの登録や企業アカウントのフォローをするボタンもあります。

Live Dwango Reader
Live Dwango Reader
feedly
feedly
Facebook いいね!
Facebookいいね!
(企業ページに対して)
Twitterフォロー
Twitterフォロー
Google+フォロー
Google+フォロー
Instagram
Instagram

こちらも必要に応じて設置しますが、このとき記事に対してアクションを行うボタンとの差別化を図ることが大事です。
オリジナルでボタンを作っても良いでしょう。

もし設置するボタンに迷ったら

設置するボタンに迷ったら、Facebook、Twitter、はてなブックマークを取りあえずおさえておけば大丈夫だと思います。
このブログのように技術系の記事が多い場合、この中で一番重視すべきなのははてなブックマークでしょう。
ボタンが一定数押されはてブのトップページに載れば、そこからの流入や、Gunosyなどのニュースキュレーションサービスからの流入がかなりの数見込めます。

リリースすることがゴールではない

これはメディアサイトだけでなく、サービスサイトなどにも言えることですね。
一ヶ月も運営してみれば、いろいろな立場の人からの改善の要望がかなり溜まっているはずです。



※あくまで例なので、実際こんなにうまくいくかわかりませんが…

どうすればPVが伸びるのか? 回遊率が上がるのか? 広告のクリック数が上がるのか? 試行錯誤を重ねてみるしかありません。
リリース後もデザイナーの手から離れることはありませんので、その点は事前に理解しておきましょう。

dwango creators’ blogで気をつけたこと


このdwango creators’ blogは、同じデザイナー職の人に読んでもらうことを意識しているため、トップページの第一印象には気をつけました。

背景動画は編集長のジェイさんのこだわりですね!
背景動画を使うと重くなることもあり、メディアサイトで実装しているところってあまり見かけないんですが、「サイトの印象≒ドワンゴデザイナーに対する印象」を左右する大事なコンテンツだったため、外せないポイントでした。
また、サムネイルはデザイナーが作るという前提があったため、記事一覧はサムネイルを活かした構成にしました。



詳細ページは思い切ってワンカラムにしています。
これにはちょっと事情がありまして、このブログは「StaticPress」を使って静的化してあるため、普通のWordpressサイトよりも出来ることが限られています。
サイドバーにはランキングや新着記事のリストを置くことが多いですが、メンバーみんな「StaticPress」を使うのが初めてで、どこまで出来るか探り探りだったんですね。
広告も入る予定がなかったので、それなら読み手が記事に集中できて、記事内の画像も大きく見せられる形にしようと思い、サイドバーはつけないことになりました。

※StaticPressについてはこちらの記事をどうぞ
【dwango creators’ blog開発秘話】WordPress + StaticPressのメリットと注意点


SNSボタンは需要がありそうなものだけを選んでるつもりですが、それでもちょっと多いですね;
需要はあるけどバズには影響しないPocketや(ブラウザ拡張の方使ってそう)、検索エンジンへの影響力が具体的には図りかねるGoogle+は、外す可能性もあるかもなと思っています。
その分Facebookやはてなブックマークの数値が上がるような施策を取れるといいですね。


もちろん、PVや回遊率などの数値を上げていくためにはいろいろ試してみることも大事なので、背景動画取っちゃう? とか、3カラムにしちゃう? な展開が今後あるかもしれません…!

まとめ

  • サイトの目的、目標を明確にし、達成するためのUIを考える
  • サイトの内容や更新頻度を考慮してデザインをする
  • 執筆者の気持ちになり、色々なスタイルを用意しておくとスムーズ
  • 各SNSボタンの特徴を理解し、サイトに合ったものを取捨選択する
  • リリース後もやることがたくさん・・・グロースハックし続けなければ成功はない

このdwango creators’ blogも試行錯誤を重ね、ちょっとずつ進化していきますので、今後もどうぞご贔屓に(^o^)
それでは!

 

編集部オススメ

  • このエントリーをはてなブックマークに追加

あわせて読みたい記事

この記事を書いたメンバー

sally

サリー

Designer

静岡出身です。すごくよく寝ます。甘いもの好きです。

ドワンゴデザイナー メンバー募集 ! !