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

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

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

例えば

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

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

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

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

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

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

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

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

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

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

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

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

記事詳細ページ向け

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

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

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

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

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

全ページ向け

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

Live Dwango Reader	feedly	Facebookいいね！ （企業ページに対して）
Twitterフォロー	Google+フォロー	Instagram

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

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

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

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

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

例

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

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

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

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

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

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

まとめ

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