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デザインのお仕事を始めて約4年が経ちました。ここでは、仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

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

関連記事

  1. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つのこと。

    みなさんこんにちは、mayukouです。先月、仕事の案件でwordp…

  2. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

  3. Web Design

    今すぐできる!HTMLメールの作り方

    みなさんこんにちは、mayukouです。ECサイトを運営していると…

  4. ブログリニューアル

    wordpress

    ブログリニューアルしました。そのときやったことなど。

    3連休まっただ中!ちょっといつもよりグダグダな生活です。福岡はあい…

  5. wordpress

    wordpressバックアップツールの決定版!All in one Migration のプレミアム…

    こんにちは、webデザイナー5年目のmayukouです。wordpr…

  6. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

コメント

  • コメント (0)

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

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

CAPTCHA


スポンサー

instagramもやっています

最近の記事

  1. 一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作…
  2. モバイルフレンドリーなwebデザインするときにおすすめなツー…
  3. かすれや濃淡が出る!かわいい手描き感のあるブラシのご紹介♩(…
  4. 今や欠かせない存在!iPad Pro “9.7を…
  5. iPad Proを液タブに♫Astropad Studioは…

facebook更新中!

  1. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法
  2. jQuery

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

    デザイン

    デザインの質が上がる!私が利用しているフリーフォントサイト
  4. デザイン

    webデザインのトレンドを取り入れよう!デザインの参考になるリソース 〜日本編〜…
  5. ブログ

    ポートフォリオサイトをリニューアルしました
PAGE TOP