オウンドメディアのデザイン参考例10選|重視すべきデザインのポイントも解説!

オウンドメディアを立ち上げることになったが、どうせならデザインにも拘りたい。そんな企業担当者の方に向け、オウンドメディアのデザイン参考例を10選紹介するとともに、重視しておくべきデザインのポイントも解説していきます。

なお、オウンドメディアのデザインに強い制作会社の探し方・選び方がわからない!という方はWeb幹事にお気軽にご相談ください。貴社の目的・予算にあった最適な会社を厳選してご紹介します。相談料・会社紹介料などは無料です。

【無料】オウンドメディアのデザインに強い制作会社を紹介してもらう

目次
  1. 1. オウンドメディアデザインとは
  2. 2. オウンドメディアのデザイン参考例10選
    1. 2-1. 石鹸百科
    2. 2-2. Table for All 食物アレルギーケア
    3. 2-3. 経営ハッカー
    4. 2-4. mercan
    5. 2-5. キナリノ
    6. 2-6. キリンビール大学
    7. 2-7. キユーピーマヨネーズキッチン
    8. 2-8. お風呂なび
    9. 2-9. Explore by Expedia
    10. 2-10. システム幹事
  3. 3. オウンドメディアデザインのポイント
    1. 3-1. 知りたい情報にアクセスしやすいUI / UX
    2. 3-2. 会社 / 商品のイメージカラー
    3. 3-3. 各ページのデザインイメージを統一
    4. 3-4. モバイルファーストは必須事項
  4. 4. 【まとめ】オウンドメディアデザインの参考例・デザインのポイントを紹介しました

オウンドメディアデザインとは

オウンドメディアとは、マーケティングの主体となる企業が情報発信するために所有 / 管理するメディア / 媒体のこと。広義にはカタログなどの紙媒体も含まれますが、Webメディアをオウンドメディアと呼ぶ場合が一般的。公式サイトのサブドメインで情報メディアを運営するパターンと、独自ドメインで独立した情報サイトを運営するパターンがあります。

つまり、オウンドメディアデザインとは、公式サイト内の情報メディア、または独立したオウンドメディアをデザインすること。ここでいうデザインとは、リンクの設計やボタンの配置など、ユーザビリティに関するデザインも含みます。

【無料】オウンドメディアのデザインに強い制作会社を紹介してもらう

オウンドメディアのデザイン参考例10選

オウンドメディアのデザインは、運営の目的やメディアの役割、テーマ、コンセプトなどをもとに、自社の独自カラーを打ち出していくのが基本。そうはいっても、デザインのヒントになるサンプルも見てみたい。そんな方のために、以下から、オウンドメディアデザインの参考例を紹介していきましょう。

石鹸百科

石鹸百科

画像出典:石鹸百科

石鹸百科は、石けん百貨株式会社が運営する石鹸生活の総合情報サイト / オウンドメディアです。入門編、知識館、HOW TO、アイテム辞典、石鹸生活のQ&Aにカテゴリー分類され、さまざまなシーンで石鹸を楽しむためのノウハウ / 情報を発信しています。

淡いパステルカラー、暖色系のカラーをアクセントにしたシンプルなデザインは、石鹸からイメージされる清潔感を演出。紹介するノウハウに適した石鹸 / 潜在を紹介するとともに、オンラインストアへスムーズに遷移できるよう、導線もきちんと設計されています。

Table for All 食物アレルギーケア

Table for All 食物アレルギーケア

画像出典:Table for All 食物アレルギーケア

Table for All 食物アレルギーケアは、日本ハム株式会社が運営する食物アレルギーケアの総合プラットフォーム / オウンドメディアです。食物アレルギーに向き合う方に寄り添った、25年にわたる取り組みを活かして登場したオウンドメディア。信頼できる情報を提供するだけでなく、同じ悩みを持つ仲間とつながれる環境も用意しています。

日本ハムのロゴを使ったデザインは、公式サイトとの統一したイメージを演出。さらにTable for Allのロゴを配置することで独立したオウンドメディア / プラットフォームであることもアピールしています。対応食品のカテゴリーを設け、オンラインストアへの導線を作っていることもポイントです。

経営ハッカー

経営ハッカー

画像出典:経営ハッカー

 経営ハッカーは、クラウド会計システムfreeeで知られる、freee株式会社が運営するオウンドメディアです。会計、税務、給与計算、人事労務を含むバックオフィス業務や、会社設立 / 起業など、自社ソリューションと密接に関連する経営に役立つ情報を発信しています。

 ビジネス情報を取り扱うオウンドメディアであるためか、自社カラーであるブルーを使いながらも、全体的に落ち着いたトーンにまとめていることが特徴。トピックとなるインタビュー記事のほか、新着記事を時系列で配置するなど、デザインもシンプルで機能的。ボタン1つでカテゴリを「法人」「個人事業主」に切り替えられるのもポイントです。

mercan

mercan

画像出典:mercan

mercanは、フリマアプリ「メルカリ」の開発元である株式会社メルカリが運営する採用オウンドメディアです。コーポレートサイトのほか、メルカリやメルペイサービスサイトなど、用途に応じてWebサイトを使い分けているのが同社の特徴。mercanは、採用目的だけでなく、働く人の情報プラットフォームとして活用されています。

人にフォーカスしたオウンドメディアをイメージしたファーストビューを配置するほか、ピックアップ記事、新着記事を整然と並べたシンプルなデザインを採用。メルカリのロゴであるレッド / ブルーを使い、会社としての統一感も演出されています。

キナリノ

キナリノ

画像出典:キナリノ

キナリノは、株式会社カカクコムが運営するオウンドメディア / ライフスタイルメディアです。「自分らしい暮らしがかなう」をコンセプトに、お買いもの体験と情報に関する多数のコンテンツを発信。iOS / Android向けの「キナリノアプリ」も用意されています。

新着情報が整然と表示されるシンプルなデザインを採用する一方、各カテゴリー、連載記事など、見たい情報への導線がわかりやすく設計されているのもポイント。コンテンツに掲載された商品はキナリノモールで購入できます。コーポレート / サービスサイトとは明らかに異なる、独自性を重視したデザイン例です。

キリンビール大学

キリンビール大学

画像出典:キリンビール大学

キリンビール大学は、キリングループ商品情報サイト内に設置された、ビール専門情報メディアです。独立したオウンドメディアではありませんが「ビールは大人の青春だ」をコンセプトに、種類・歴史から楽しみ方まで、ビールに関する膨大な情報を発信しています。

サービスサイト内に設置されているということもあり、ソフトドリンクや乳製品など、他製品とも違和感のない統一されたデザインを採用していることが特徴。カルーセルのファーストビューからおすすめコンテンツに移動できるほか、インデックスから興味のあるカテゴリへ移動できるなど、導線もシンプルです。

キユーピーマヨネーズキッチン

キユーピーマヨネーズキッチン

画像出典:キユーピーマヨネーズキッチン

キユーピーマヨネーズキッチンは、キユーピー株式会社が運営するオウンドメディア / マヨネーズレシピサイトです。キユーピーの商品サイトでもレシピを公開していますが、マヨネーズに特化したコンテンツを揃えているのが特徴。動画レシピも紹介しています。

商品サイトとは異なるレイアウトながらも、キユーピーのレッド、マヨネーズのシンボルをあしらい、会社としての統一感を感じさせるデザインを採用。カテゴリ分けされたレシピをポップなバナーでまとめているほか、サイドメニューにマヨネーズカラーをあしらった、遊び心を感じさせるデザインにまとまっています。

お風呂なび

お風呂なび

画像出典:お風呂なび

 お風呂なびは、アース製薬の商品情報サイト内に設置された、お風呂ライフ関連情報を発信しているメディアです。「入浴剤のイロハ」「お風呂掃除のコツ」「お風呂のギモン」「お風呂の豆知識」など、楽しく読みながらお風呂を学べるコンテンツが満載。キリンビール大学に近いコンセプトを採用しています。

 ファーストビュー、カテゴリ、コンテンツすべてにリラックスした雰囲気のイラストが使われており、淡いトーンのカラーでそれを強調した統一感のあるデザインを採用。ノウハウの紹介とともに関連商品ページに誘導するなど、導線もしっかり設計されています。

Explore by Expedia

Explore by Expedia

画像出典:Explore by Expedia

 Explore by Expediaは、expedia.co.jpサイト内に設置されている旅行情報 / 観光地情報を発信するメディアです。「エクスペディア社員がおすすめする海外旅行先」などのブログ記事や、セール情報などのプレスリリースを配信しています。

 新着情報、今月のピックアップ、人気のブログ記事にカテゴリ分けされたレイアウトはシンプルですが、旅情を誘う写真をふんだんに使ったデザインを採用しているのが特徴。どのコンテンツからも希望の旅行商品ページに遷移でき、関連記事へのリンクとともにサイト内を回遊してもらう工夫もされています。

システム幹事

システム幹事

画像出典:システム幹事

 システム幹事は、株式会社ユーティルが運営するオウンドメディアです。Web幹事の姉妹サイトでもあり、システム / アプリ開発に関する情報 / ノウハウを発信するとともに、適切なシステム / アプリ開発会社を紹介するサービスを提供しています。

【無料】オウンドメディアのデザインに強い制作会社を紹介してもらう

オウンドメディアデザインのポイント

オウンドメディアデザインのポイント

オウンドメディアとひとことにいっても、運営する企業によってデザインも多種多様であることがお分かりいただけたでしょう。最後に、オウンドメディアならではの、デザインで重視しておくべきポイントをいくつか解説していきます。

知りたい情報にアクセスしやすいUI / UX

サイトイメージという意味でのデザインも重要ですが、オウンドメディアでは知りたい情報にアクセスできる「UI / UX」を重視すべきです。なぜなら、コンテンツこそがオウンドメディアの生命線だから。見てもらいたい、読んでもらいたいコンテンツにスムーズにアクセスできるUI / UXがあってこそ、オウンドメディアを運営する価値があるのです。

階層が深くならない程度のカテゴリー分類、タグやキーワードによる検索機能など、コンテンツ数が膨大になりがちなオウンドメディアならではの工夫も重要です。

会社 / 商品のイメージカラー

オウンドメディアをデザインする際は、自社のコーポレートカラー、自社商材のイメージカラーを意識しましょう。全社でイメージカラーを統一することでブランド価値を高めたり、多角的な事業展開する企業なら、事業に応じたイメージカラーの使い分けが可能だからです。

たとえば、キューピーは公式サイト / オウンドメディアのイメージを統一し、だれが見ても同じ会社だとわかるデザインを採用。一方、キナリノは公式サイトである価格ドットコムと明らかに異なるデザインを採用し、メディアの独自性を打ち出すことに成功しています。

各ページのデザインイメージを統一

トップページ、コンテンツページなどの下層ページを含め、オウンドメディア各ページのデザインイメージを統一させましょう。なぜなら、オーガニック検索からの流入を基本とするオウンドメディアは、あらゆるWebページがランディングページになり得るからです。

どのページにランディングしても「サイトのどこにいるのか?」を理解できるようにする工夫も必要。オウンドメディア内を回遊して長く滞在してもらうためにも、デザイン / サイト設計は重要です。

モバイルファーストは必須事項

オーガニック検索からの流入を基本とするオウンドメディアは、モバイルファーストへの対応が必須事項です。なぜなら、オーガニック検索からの流入を増やすための原則がSEO(検索エンジン最適化)だから。モバイルファーストは、検索エンジンから高評価を得るための前提事項なのです。

ユーザビリティ向上という意味でも、オウンドメディアのモバイルファースト対応は重要です。モバイルに最適化されたUIを提供することで、インターネット利用者の半数を超えるスマートフォンユーザーのページ離脱も防止できます。

【まとめ】オウンドメディアデザインの参考例・デザインのポイントを紹介しました

オウンドメディアを立ち上げることになったが、どうせならデザインにも拘りたい。そんな企業担当者の方に向け、オウンドメディアのデザイン参考例を10選紹介するとともに、重視しておくべきデザインのポイントも解説してきました。

なお、オウンドメディアのデザインに強い制作会社の探し方・選び方がわからない!という方はWeb幹事にお気軽にご相談ください。貴社の目的・予算にあった最適な会社を厳選してご紹介します。相談料・会社紹介料などは無料です。

【無料】オウンドメディアのデザインに強い制作会社を紹介してもらう