【2022年10月】現役Webデザイナー目線でオウンドメディア作りのポイント・デザイン事例11選を解説

最新のオウンドメディアのデザインを、現役Webデザイナーの視点から選定してみました。
前半ではオウンドメディアについてのご説明から、デザインの作り方やポイントについても解説しています。
後半では厳選した11のサイトのデザインについてお話ししていきます。

そもそもオウンドメディアとは?

オウンドメディアとは自社で保有・運用しているメディア

オウンドメディア(Owned media)とは、企業や組織が自ら所有し、ユーザーに向けて情報を発信する媒体(メディア)を指します。
主に、Webサイトやブログ、電子メールのように、企業やその代理店など宣伝する側がコントロール可能なコミュニケーションチャネル(顧客とのメッセージを送受信する経路)を指します。

■オウンドメディアの例

  • 会社・ブランドのWebサイト
  • 会社・ブランドのブログ
  • SNS(ソーシャルネットワーキングサービス)の企業所有ページ・アカウント

 

オウンドメディアを運営する目的・メリット

オウンドメディアを運営する目的は大きく分けて3つあります。

1:ユーザーに自社のサービスなどを幅広く認知してもらえる
幅広いユーザーに接触する機会になる
 
2:企業やサービスなどのファンになってもらえる
企業の思いをより深く伝えることでファンになってもらい、潜在顧客を優良顧客(リピーター)へ育てることができる
 
3:ブランドイメージの向上や信頼性の向上
オウンドメディアに追加した情報は、サイト内に自社の資産として蓄積されていく。戦略的なコンテンツ設計をすることで、潜在顧客の獲得や自社のブランドイメージの向上、信頼性の向上などあらゆる目的を間接的に達成することができる

 
また、オウンドメディアを運営するメリットとしては、SNSの弱点である蓄積(ストック)と検索エンジン流入をカバーできる点となります。
SNSでは最新の情報を発信し、課題を解決するために検索するユーザーへは情報を置いて待ち構えるオウンドメディアが有効です。

オウンドメディアにおけるデザインの役割と重要性

使いやすい、居心地が良いサイトのためのデザイン設計

オウンドメディアを通じて達成したいことは企業によって様々ですが、最大限の効果を得るためには目的に即したデザイン設計をすることが大切です。
また何を優先的に伝えたいかにより適したデザインも変わってきます。具体的には、最新の情報を素早く届ける速報性、ユーザーに必要な情報をくまなく掲載する網羅性、自社独自のブランディングや世界観構築、などになります。

オウンドメディアの代表的な性質
参考:https://www.fashionsnap.com/https://ferret-plus.com/https://designing.jp/

デザインそのものが直接的な集客になるわけではありませんが、目的を達成するための一つの手段として捉えて良いでしょう。
「このサイト、使いやすいな、居心地が良いな」とユーザーに感じてもらう事は価値のあるオウンドメディアにつながります。
誰にどんな情報を届けるかを決めて、自社のオウンドメディアの目的を明確にしたうえで、コンセプトに即したデザインは結果的にユーザーファーストにつながります

オウンドメディアのデザインはどのように決めるといいか

デザインはメディアのコンセプトや目的に合わせる

メディア全体の基本的な考え方や概念であるコンセプトに合わせたデザインにすることで、自社のブランドイメージの定着を図ります。
具体的には、誰に・何を・どのように伝えたいかを決め、ターゲットとなるユーザーのニーズを調査し、適切な人に適切な情報が届くデザインを目指します。

ブランディングを意識し企業のイメージカラーを彷彿させる

色はイメージとして人の記憶に残りやすい特徴があります。
コーポレートカラーなどを取り入れることによりシンプルなデザインやレイアウトでも、ユーザーに印象付けることができます。
企業のイメージカラーやロゴなどのフォントを統一することで、「あの会社のメディアだ」と認識してもらいやすく、商品やサービスのイメージも定着しやすくなります。
企業のブランディング強化や認知の浸透を図る上で、どの色をメインに使用したサイトを作るかは重要になります。

速報性・網羅性・独自性の目的別、デザインの特徴

速報性|最新の情報を素早く届ける

デザインの特徴としては、毎日配信される情報を見つけ易くするために、デイリーランキングなどのコンテンツをトップページに配置することで、旬の情報をいち早く確認できるデザインとなっています。

特徴:最新情報を頻回に発信するため、記事数が多くなる

  • ランキングの配置(デイリー・マンスリー)

 

01. AZrena | アズリーナ
 
AZrena | アズリーナ
https://azrena.com/
スポーツ系オウンドメディアでは試合結果や選手のインタビューなど速報性が求められます。
 

02. ギズモード・ジャパン | 日本最大級のガジェット&テクノロジーサイト
 
ギズモード・ジャパン | 日本最大級のガジェット&テクノロジーサイト
https://www.gizmodo.jp/
最新のガジェット情報のオウンドメディアなども速報性が求められます。
 

網羅性|ユーザーに必要な情報をくまなく掲載

デザインの特徴としては、画像やフォントの見やすさよりも、情報量の多さをアピールしたデザインが多い印象、乱雑になりがちなコンテンツをタグでグループ化したり、最新情報やおすすめ情報などに分類したりするなど、情報を探し易くしている。

特徴:情報が蓄積して記事が埋もれがち

  • 検索窓の配置
  • カテゴリーやタグでグループ化

 

01. MERY|自分アップデートのためのコミュニティメディア
 
 MERY|自分アップデートのためのコミュニティメディア
https://mery.jp/

「Update My Happiness」をコンセプトにした女性向けオウンドメディア、アップデートするための幅広い情報を発信するため、網羅性に特化している。

 
02. ねこのきもちWEB MAGAZINE|それでもやっぱり猫が好き
 
ねこのきもちWEB MAGAZINE|それでもやっぱり猫が好き
https://cat.benesse.ne.jp/

猫に関する様々な情報が蓄積されている。タグで情報が分類され、情報が探しやすい。また、獣医師による解説など専門性も担保したサイト。

独自性|独自のブランディングや世界観構築

他に類を見ないデザインが特徴、サイトの使い勝手よりも奇抜な動きが用いられていることが多い。使い勝手の悪さは、Googleの評価に影響するので、わかりやすい動線の確保が重要になってきます。

特徴:他にない印象的なデザインで見る人の心に残るデザインが特徴

  • ユーザーの期待を裏切る動き、UI/UXの工夫
  • 商品やサービスのカラーなどをサイトデザインに反映し、ブランドイメージの定着を図る

 
01. ブラザーグループSDGsスペシャルサイト | ブラザーSDGsストーリー
 
ブラザーグループSDGsスペシャルサイト | ブラザーSDGsストーリー
https://sdgsstory.global.brother/j/
3Dキャラクターが画面から飛び出てくる様な、モーショングラフィックスが印象的、ページの読み込みスピードが遅くなるのが難点、斬新な動きのあるデザインだが、わかり易くボタンの配置がなされており、操作に迷うことはない。

02. キユーピー マヨネーズを使って料理をもっとたのしく!| キユーピー マヨネーズキッチン
 
 キユーピー マヨネーズを使って料理をもっとたのしく!| キユーピー マヨネーズキッチン
https://www.kewpie.co.jp/mayokitchen/index.html
商品のパッケージデザインをそのまま反映したデザインになっており、一眼見てサイトと商品が結びつくデザイン。無意識にブランドイメージを定着させることに成功している。

オウンドメディアのデザインで意識すべき3つのポイント

①スマホ対応する

Googleは現在Webサイトの検索順位を決定する際に、PCサイトではなくスマートフォンサイトを基準に評価を行っています
モバイルデバイスに対応していないサイトは、順位決定時の評価が低下するという事を示しています。
スマートフォン閲覧時に、ページが切れてしまったりボタンがタップしにくかったりしないよう、視認性も操作性も考慮しユーザにとって居心地の良いサイトを制作しましょう。
居心地の悪さは、ページの離脱率に繋がりブランドイメージも損ねたりする事に繋がりかねません。

②サイトや記事内に見込み顧客の獲得への導線をつくる

オウンドメディアに来てくれた方を見込み顧客にするためには、訪問者の情報を得る必要があります。
次の2点を行い見込み顧客の獲得への動線を整備しましょう。

  1. サイトにお問い合わせ用のフォームや電話番号を用意
  2. 記事内に問い合わせしてもらうためのボタンやURLリンクを追加

 
また、お問合せ情報の一元管理、メルマガの配信など、問い合わせ後の動きもあわせて計画しておきましょう。

③SEO対策とオウンドメディアのデザイン

多くのユーザーにサイトを訪問してもらうためには、Googleなどの検索エンジンで検索をした際上位に表示されることSEO対策も重要です。
Googleに評価されるためにはユーザーファーストを意識した記事やコンテンツの制作が必要となり、以下の記事でSEOライティングについてもまとめています。

ユーザーにとって視認性や操作性の良いサイトは居心地が良くサイト滞在時間も長くなります。
また近年は、オウンドメディアの質も上がってきており、ハイクオリティが求められているなかで、見た目の印象の良いサイトにすることで信頼を得られる可能性もあります。

現役Webデザイナー厳選!最新のオウンドメディアデザイン事例11選

1:ベネッセ 教育情報サイト|株式会社ベネッセコーポレーション

 
ベネッセ 教育情報サイト|株式会社ベネッセコーポレーション
https://benesse.jp/
 
子育て・教育・受験・英語まで網羅したベネッセの総合情報サイトで乳幼児から大学生まで対応したお役立ち情報を掲載しているオウンドメディア。

  • 情報の網羅性に特化したデザイン
  • ユーザーが必要な情報へアクセスする際の動線が整っている
  • 情報量が多いサイトでは迷子になりがちなところ、適度にメニューなどが配置されている
  • サイトのカラーもベネッセのロゴカラーにマッチしており、ブランドイメージの統一が測られている

 

2:ferret|株式会社ベーシック

 
ferret|株式会社ベーシック
https://ferret-plus.com/
 
BtoB企業を対象にしたマーケティング支援を行っている会社が運営しているWebマーケティングの情報サイト。こちらも情報の網羅性に特化したサイト。

  • 収益化のための施策が行われている
  • お役立ち資料のダウンロードや、イベントの開催、会員登録をすることで人気記事を動画で見ることができるなど顧客の育成にも力を入れている
  • サイトに広告を掲載するサービスも行っている
  • 運営会社サービスへの動線であるCTA (Call To Actionの略で、行動喚起を促すボタンやテキストのこと)がページの随所に配置されている
  • 目を引く画像とキャッチーな記事タイトルが印象的、サイトカラーをグリーンカラーでまとめることでごちゃごちゃして見えず、統一感がある

 

3:kaonavi人事用語集|株式会社カオナビ

 
kaonavi人事用語集|株式会社カオナビ
https://www.kaonavi.jp/dictionary/
 
人材管理のサービスを提供している株式会社カオナビが運営しており、人事や労務やビジネス用語などの情報を発信している。

  • 人事業務に関する情報に特化
  • 自社のサービスであるカオナビへの流入を見込んだ動線
  • 記事の最後にカオナビサービスのためのCTAを配置して資料ダウンロードを促している

 

4:modelpressモデルプラス|株式会社ネットネイティブ

 
modelpressモデルプラス|株式会社ネットネイティブ
https://mdpr.jp/
 
18歳~45歳の女性が主なターゲットで、女性に役立つエンタメニュース&ライフスタイル情報を発信しているニュースメディア。

  • 報道機関として、自社で取材、撮影、記事執筆を行っている
  • 最近では、GoogleニュースやYahoo!ニュースなどのようにパーソナライズされた情報に触れる機会が多いなか発見する楽しみがあると感じた
  • デザイン面では女性がターゲットということで、全体にやわらかいカラーを使用、シンプルで雑誌のようなデザイン

 

5:好書好日Good Life With Books|株式会社 朝日新聞社

 
好書好日Good Life With Books|株式会社 朝日新聞社
https://book.asahi.com/
 
本離れが進むなか、本との出会いを手助けしたいという思いで運営されているサイト。
朝日新聞社が運営していることで、専門性や権威性が担保されている。

  • 斬新な縦書きデザインが目を引くトップページに、様々な視点から本との出会いを演出
  • 最新のニュースに関連した記事コンテンツに、関連する本の紹介が掲載されているなど、ユーザーを惹きつけるコンテンツ設計
  • トップページ以外は、全体にグレーとカラシ色を使用しており、落ち着いた印象のデザイン
  • 随所に猫のイラストを配置するなど、親しみやすく、町の書店を訪れたようなサイト

 

6:LIFE LABEL|BETSUDAI Inc. TOKYO

 
LIFE LABEL|BETSUDAI Inc. TOKYO
https://lifelabel.jp/
 
住宅商品の企画や設計や加盟店支援などをおこなっている企業、BETSUDAI Inc. TOKYOが運営するサイト。
「家を、暮らしをもっとエンターテインメントに」をコンセプトに、住まいに関する情報はもちろんのこと、車や旅行などライフスタイルをトータルで提案する情報の発信を行っている。
家づくりアプリ、という家づくりのシミュレーションを試せるアプリを開発しており、実際にマイホームが建つまでをアプリで管理できるサービスを展開。

  • デザインの特徴としては、昔のゲームのようなドット絵(ピクセルアート)のイラストがアクセントになっている
  • フッターとインデックスのメニューにはロールプレイングゲームのような面白い仕掛けも
  • 各記事コンテンツのボックスに関しても同じ四角いデザインの羅列ではなく、形を変えてランダムに表示している
  • 動きのあるデザインが豊富で今後の参考になる箇所が満載

 
LIFE LABEL|BETSUDAI Inc. TOKYO
 

7:DSPACE 三菱電機サイエンスサイト|三菱電機株式会社

 
DSPACE 三菱電機サイエンスサイト|三菱電機株式会社
https://www.mitsubishielectric.co.jp/me/dspace/
 
三菱電機が運営するサイト、旬の宇宙開発の話題や天文情報など専門性の高い情報を発信している。

  • 手書き風のイラストアニメーションが随所に配置され、ポップでワクワクする印象

 

8:株式会社LIG

 
株式会社LIG
https://liginc.co.jp/blog
 
株式会社LIGが運営するブログ、コンサルティング事業やWebサイト制作事業、システム開発・アプリ開発事業、マーケティング支援事業などを展開している会社。

  • 所々にインパクトのある画像をアイキャッチに使用し、興味をそそられる記事コンテンツを掲載している
  • 記事執筆者が自ら顔出しをして記事を掲載するなど、独自性のあるコンテンツ

 

9:JFF Plus|国際交流基金

 
JFF Plus|国際交流基金
https://jff.jpf.go.jp/ja/
 
海外の人々に日本映画を紹介することを目的として、国際交流基金が運営するサイト。

  • Watchでのオンライン日本映画祭の開催に加え、Read、Joinといったコンテンツを通じて、日本映画の魅力を発信しており、専門性と独自性に特化している
  • アートなイラストが目を引くデザイン
  • 25ヶ国語と多言語に対応したサイトになっており、海外のユーザーにも日本映画の魅力を発信している

 

10:CINRA|株式会社cinra

 
CINRA|株式会社cinra
https://www.cinra.net/
 
芸術文化をルーツとして、世界をよりよい場所にしたい、人生をよりよく生きたいという、あらゆる表現者クリエイティブな意思を届けていきたいという思い、一人ひとりの情熱や違和感、問題意識に耳を澄ませ、社会や文化に好奇心を抱く人に向けて、情報を伝達するだけでなく、思いを媒介するメディアでありたいとの意思で情報を発信しているCINRA。

  • 独自の視点で選ばれた記事コンテンツに、グレーと朱色を使用したシンプルで落ち着いたデザイン。
  • 本屋さんでお気に入りの雑誌を探すようにクリエイティブな情報に出会えるサイト

 

11:キャリアハック(CAREER HACK)|エン・ジャパン株式会社

 
キャリアハック(CAREER HACK)|エン・ジャパン株式会社
https://careerhack.en-japan.com/
 
エン・ジャパン株式会社が運営するサイトで、テック業界で働く人のためのWebメディアを目的としている。

  • 様々な会社の社長などのインタビュー記事が豊富で、ドキュメンタリー番組のような気になるタイトル付けが秀逸
  • アイキャッチとなる記事コンテンツの画像には、記事の主役が顔出しで登場している点も説得力がある
  • 今時のポップなロゴ、直線と柔らかな円形カラーでサイトの視点移動や構成の枠組みが設計されている

 

まとめ

今回は、オウンドメディアのデザインについてご紹介させて頂きました。
サイトの目的やターゲットの違いなどによって、そのまま参考にできるか否かは変わってきますが、「この動きや見せ方いいなぁ」「このカラーの使い方素敵!」などひらめきの一助になれば幸いです。

オウンドメディアは、SEO対策をしてユーザーの流入を増やす→良質なデザインや記事でユーザーの心を掴む→CVとなるアクションを起こしてもらう、の流れを作ることを目指していきましょう。
弊社でもオウンドメディアの企画~制作を承っておりますので、お気軽にご連絡ください。

WORKS制作実績