Techbook編集部

キュレーションサイト

日夜あたらしいWEBサイトを研究している、WEB担当者の皆様。中には、キュレーションサイトの制作を検討する方もいらしゃるでしょう。

今回はそんな皆様のために、デザインに注目してキュレーションサイトをまとめました。

2013年頃から、キュレーションサイトの数は右肩上がりに増えています。同じようなテーマのサイトが増える中、確実にユーザーを伸ばしているキュレーションサイトは、デザイン性が高いものばかりです。

本記事の10選は、数多あるキュレーションサイトの中でも、2015年時点でも運営をつづけ、かつデザイン面で参考になるサイトを厳選しました。WEBデザイナーへの要件定義の際に、ぜひご活用ください。

※キャプチャは全てWEB版ですが、ほとんどのキュレーションサイトは、スマホユーザーをメインターゲットにしています。そのため、デザインを参考にする場合はWEB版とスマホサイトの双方で見ていただくと、よりイメージが湧きやすいかと思います。

1. MERY(メリー)|女の子の毎日をかわいく。

MERY(メリー)|女の子の毎日をかわいく。

http://mery.jp/

運営会社:株式会社ペロリ(peroli Inc.)
参考ポイント:アクセントに使用する控えめなピンク

女性に特化したキュレーションサイトの中で、MERY(メリー)は群を抜いて人気があるサイトです。一見、シンプルすぎるくらいシンプルなデザインですが、ロゴやファビコン、h1タグの見出しに、アクセント的にピンクが効いているのが、素敵です。

女性向けサイトというだけで、ピンクを多用してしまうケースを見受けますが、MERY(メリー)が人気を集めていることからも、必ずしも正解とは言えないようです。女性向けキュレーションサイトをつくるなら、MERY(メリー)から学ぶことは非常に多いでしょう。

2. by.S(バイ・エス)|知ってる女性御用達の情報メディア

by.S(バイ・エス)|知ってる女性御用達の情報メディア

http://by-s.me/

運営会社:株式会社サイバーエージェント(CyberAgent, Inc.)
参考ポイント:印象的なエメラルドグリーンのカラーリング

つづいては、サイバーエージェントさんが運営する女性向けキュレーションサイト、by.S(バイ・エス)です。以前は、SELECTY(セレクティ)という名前でしたが、2014年に名称変更しています。

スマホサイトを見るとわかりやすいですが、エメラルドグリーンをアクセントカラーにしたデザインで、ヘッダーやページ送りボタンも同色です。一方で、WEB版はエメラルドグリーンをアクセントカラーにしていますが、どちらかと言うとベースカラーのクリーム色の方が印象的です。

キュレーションサイトを制作する場合は、どういったカラーリングにするかでサイト全体の印象を決めるので、今回ご紹介する事例をぜひ参考にしてみてください。

3.  キナリノ|暮らしを素敵に丁寧に。

キナリノ|暮らしを素敵に丁寧に。

https://kinarino.jp/

運営会社:株式会社カカクコム
参考ポイント:あえて色を使わないシンプルなデザイン

食べログで知られる株式会社カカクコムさんが運営する、キナリノです。ジャンルを限定するのはむずかしいのですが、『暮らしを素敵に丁寧に。』のタグライン通りに、食・インテリア・衣服といった、暮らしにまつわるトピックをまとめたキュレーションサイトです。

サイトデザインは、かなりシンプルです。カラーもほとんど使われておらず、白・黒・グレーの3色を基調としています。最近のカラフルなWEBサイトを見慣れた目からは、色を使っていないことでかえって印象的ですらあります。

4. itnail(イットネイル)|ネイルデザインマガジンサイト

itnail(イットネイル)|ネイルデザインマガジンサイト

http://itnail.jp/

運営会社:株式会社ファンアプリ(Fan Appli.Inc)
参考ポイント:スライドスピードが早いスライド式のファーストビュー

つづいては、ネイルをテーマにしたキュレーションサイト、itnail(イットネイル)です。様々なキュレーションサイトが世に出ていますが、ネイルのキュレーションサイトはめずらしいですね。

スマホサイトを見ていただくとわかりますが、ファーストビューがスライド式になっています。あくまで個人的な印象ですが、スライドするスピードは一般的なWEBサイトで見るスライド式のファーストビューより早く感じます。

短時間で注意を引いてCTRを高めようとした結果、スライド式のファーストビューで、かつスライドのスピードを早くしたのだと推測しますが、実際のCTRが気になります。

5. Ciel(シエル)|ファッションメディア

Ciel(シエル)|ファッションメディア

http://ciel.am/

運営会社:株式会社Nagisa (英文名:Nagisa,Inc.)
参考ポイント:ピンクとスカイブルーの2色づかい

株式会社Nagisaさんが運営する女性向けキュレーションサイト、Ciel(シエル)です。株式会社Nagisaさんが持つアプリのノウハウを活かし、アプリ先行型でメディアづくりをしています。

デザイン面で特筆すべきは、ポイントカラーをピンクとスカイブルーの2色にしている点です。WEBサイト制作の際は、メインカラーは1色を軸に、その他のカラーを選んでいくことが多いのですが、使う色がすくないシンプルなキュレーションサイトにおいては、Ciel(シエル)のような2色づかいも良いかもしれません。

6. Antenna(アンテナ)|キュレーションマガジン

Antenna(アンテナ)|キュレーションマガジン

https://antenna.jp/

運営会社:株式会社グライダーアソシエイツ(GLIDER associates, INC.)
参考ポイント:大きなサムネイル画像が縦にひたすら連なるUIデザイン

Antenna(アンテナ)のタグラインは、「キュレーションマガジン」です。媒体資料を見ると、400万人超のユーザーの約半数が女性。感動すら覚える、美しいUIはリリース当初から話題を集めていました。

余計なテキストは一切ない、大きなサムネイル画像が縦にひたすら連なるUIデザインは、他のキュレーションサイトにも、大いに影響を与えていることでしょう。

7. Cairnto(カリント)|スイーツ専門キュレーションサイト

Cairnto(カリント)スイーツキュレーションサイト

http://carinto.jp/

運営会社:株式会社ボンドアンドパートナーズ
参考ポイント:大きなサムネイル画像が連なるTOPページ

世の中には様々なキュレーションサイトがありますが、Cairnto(カリント)はスイーツ専門キュレーションサイトです。めずらしいですね。

スマホサイトのTOPページは、Antenna(アンテナ)ライクの、大きなサムネイル画像が縦に連なるデザインです。スイーツ好きは、ひたすらスクロールするだけでも楽しめるはずです。

8. relux Magazine(リラックスマガジン)|旅行キュレーションメディア

relux magazine(リラックスマガジン)

https://rlx.jp/magazine/

運営会社:株式会社Loco Partners
参考ポイント:ターゲット層に合わせたクラシカルなカラーリング

オウンドメディアの事例でもご紹介した、旅行キュレーションメディア『relux Magazine(リラックスマガジン)』です。relux(リラックス)は、今回ご紹介した他のキュレーションサイトと異なり、ターゲットの年齢が若年層ではないので、デザインも色味を抑えたクラシカルな印象です。

9. cuta(キュータ)キュート&タフ|妊娠・出産・子育てまとめ

cuta(キュータ)|妊娠・出産・子育てまとめ

https://cuta.jp/

運営会社:株式会社ディー・エヌ・エー(DeNA Co., Ltd.)
参考ポイント:MERY(メリー)の流れをくんだ女性向けデザイン

cuta(キュータ)は、株式会社ディー・エヌ・エーさんが運営する、妊娠・出産・子育て情報のキュレーションサイトです。ちなみにディー・エヌ・エーさんは、DeNA Palette(パレット)というキュレーションプラットフォーム拡大構想を掲げています。これからキュレーションサイトを制作する方は、DeNA Palette(パレット)の動きにも注目です。

cuta(キュータ)のデザインはと言うと、同じ のMERY(メリー)の設計や、デザインの流れを組んでいます。細かな点はちがったりするのですが、同じ女性向けでもターゲットの年代が異なるので、最適化を図っているのかもしれません。研究すると、新たなポイントが見えてきそうです。

10. ハッカードール(HACKA DOLL)|君にシンクロするニュースサイト

ハッカードール

https://web.hackadoll.com/(WEB版)

運営会社:株式会社ディー・エヌ・エー(DeNA Co., Ltd.)
参考ポイント:魅力的なキャラクターの効果的な配置

最後は、『君にシンクロするニュースサイト』というタグラインが秀逸な、ニュースキュレーションサイト、ハッカードール(HACKA DOLL)です。機械学習で、記事を読めば読むほど自分に合ったニュースがキュレーションされる優れもの。

アニメ・ゲーム・マンガ・声優・ラノベ・特撮好きには、たまらないキュレーションサイトです。魅力的なキャラクターを効果的に配置することで、キュレーションサイトの『情報』に、付加価値を与えています。

まとめ|オリジナリティのあるキュレーションサイトを

今回は「サイトデザインの参考に!キュレーションサイトまとめ10選」と題して、10個のキュレーションサイトをご紹介しました。一見、似ているデザインが多いように感じますが、細かく見ていくとターゲットに合わせて最適化されていたり、カラーリングを工夫していたりと、こだわりを感じます。

今からキュレーションサイトを制作するとしても、すでに存在するサイトの真似だけでは、ファンをつくることはできないでしょう。まずは今回ご紹介したサイトを参考に、すこしずつオリジナリティを出して、自社のノウハウとしていただければと思います。今回も、ご一読ありがとうございました。

【参考記事】
ファーストビューで差がつくECサイトのデザイン8選
おしゃれな海外ギャラリーサイト10選

最後に:もし今回のコンテンツが何かためになったら、今後も定期的に読んでいただくために、Facebookファンになっていただけませんか?

スクリーンショット 2019-10-10 13.54.39