Web Design

作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。


みなさんこんにちは、mayukouです。
仕事でキュレーション風ニュースメディアのwordpress案件を担当していましたが、
その際、いろいろとつまづいたことがありました。
そのため、今後そういったメディアを作るときに参考になるようにメモしておこうと思います。

スポンサードリンク

キュレーションメディアとは?

キュレーションメディアの有名どころといえば、Gunosy、SmartNews、MERY、iemoなどが挙げられます。
キュレーションメディアのきちんとした定義はないのですが、以下の特徴があるそうです。

1.コンセプトに沿って情報を取捨選択し、つなぎ合わせる仕組みがある
2.この仕組み(キュレーション)によって公開されたコンテンツ記事が5割以上ある

つまり、サイトテーマに沿ったコンテンツの集合体のようなサイトのこととも表現できます。

デザイン面はシンプルイズベストがよい?

最近のキュレーションメディアの傾向は、コンテンツファーストなデザインが主流です。
コンテンツファーストについての記事はこちら
コンテンツが豊富な分、ページが重くならないようデザインや装飾は極力排除。
個性を出すためには、カラーを統一したり、ロゴデザインに個性を打ち出したり。
ゴテゴテしたくないので、カラーはあまり使わないほうが(あっても2、3色)、
シンプルでスッキリとして見えることがわかりました。
私の場合、2色に絞らず、カラフルなレインボーカラーを使ってみたところ、賑やか感は出ますが、
サイトの印象が弱くなる感じもしました。
とはいえシンプルデザインが多用されるキュレーションメディア界の中で
差別化を図るために、色をうまく多用するのも、ありかもしれません。
色使いに関しても、要検証です。

 

wordpressは総合的な知識が必要。でも調べることで力がつく

既存テーマをカスタマイズするのではなく、オリジナルテンプレートをゼロから作りました。
デザイン・コーディング・wordpress開発すべて担当しました。
wordpress歴は4年ほどの私ですが、
つまづく点がボロボロと出てきました。
プラグインばかりに頼って、サイト表示の自由さが失われてしまったり。
あと、やはり実際に記事を投稿しないと、
実際の挙動がわからなかったりします。

ローカル環境に同じブログが作れるプラグイン

ローカルに同じように記事を反映させたり、
ミラーサイトなどを作って、挙動を確認することをお勧めします。
その際に、便利なプラグインが「All in one Migration」です。

wordpressは調べつつ、共同制作者と知識を共有しつつがんばる。できるだけ独力で

会社内なのでwordpressの動きをチェックしてくれる方がいますので、
不具合があった場合もすぐに指摘してもらえますが、
調べるとなんとかなることが多いです。どうしてもわからない場合は、
会社の方にやってもらったりしましたが…
力をつけるには、独力必須です。
こういったコンテンツが大切なメディアは、実際にサイトを公開してからが本番で、
時間をかけて育てていくメディアだと思うので、最初からデザインに完璧を目指さなくてもいいのでは、とも思います。

HTML(フロントエンド)はXHTMLに。誰が見てもわかりやすいコードがベター

コードが理解しやすいXHTMLでコーディングしました。
また、SASSは使っていません。SASSを複数人で修正する際と、それなりの専門知識が必要になって混乱してしまうからです。
wordpressとsassの相性に関しては、こちらの記事をどうぞ。
使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つのこと。

XHTMLコードであっても綺麗に書かないと共同で作る人に迷惑かけてしまいますので、気をつけたいと思います。

最後に

いかがでしたか?wordpressでつくるキュレーションサイトは、実際に記事を投稿してみないと、わからないことも多々ありました。
でも作ることで、必ず力になっています。先ほど述べたように、キュレーションメディアのようなブログは、育てるメディア。気づいたところは、どんどん意見を取り入れ、改善していけるといいでしょう。
また、次回サイトを作る時に、レベルアップしたサイトが作れるはずです。今後もがんばりましょうね!

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  2. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav

    みなさんこんにちは、mayukouです!今回は、うちのブログで結構…

  3. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

  4. Web Design

    webデザインのトレンドと取り入れよう!デザインの参考になるwebリソース 〜海外編〜

    みなさんこんにちは、mayukouです。あっという間に土曜の半日が…

  5. wordpress

    wordpressが重たい!そんな困った時に便利なプラグイン

    近頃、調子に乗ってwordpressにいろいろプラグインを入れてパワー…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. illustration

    発見!スキャンで取り込んだイラストをIllustratorで使えるベクターにする…
  2. jQuery

    ホームページに必須!?jQueryでトップへ戻るボタンの作り方
  3. 日記

    2015年の振り返りと今年の抱負
  4. Illustrator

    Mac OS sierra にアップデートした時のIllustratorCS6の…
  5. Photoshop

    あっという間に!Photoshopのブラシで写真を手描き風にする方法
PAGE TOP