【2023年最新】参考になるオウンドメディアのUIUXデザイン事例13選！｜omuuu

【2023年最新】参考になるオウンドメディアのUIUXデザイン事例13選！

おすすめ

2022-10-21

5min

オウンドメディアのUIUXデザインは、「メディアの運用目的」「ターゲット層」によって、それぞれ適切なデザインが異なります。単に、モダンなデザインにするのではなく、メディアごとに狙っているターゲットの年齢層や男女の違い、趣向の違いなどを意識して、配色からボタンの形など細部まで様々なデザインが存在します。本記事では、オウンドメディアの種類や重要性からターゲットと手法別にオウンドメディアのUIUXデザイン13選を紹介します。

オウンドメディアとはオウンドメディアの種類とデザイン【BtoB × オウンドメディアマーケティング】5選経営ハッカー｜freee株式会社 HRog フロッグ｜株式会社フロッグ Monstarlab DXブログ｜株式会社モンスターラボ ferret｜株式会社ベーシック SmartHR Mag.｜株式会社SmartHR 【BtoC × オウンドメディアマーケティング】5選就活市場｜株式会社リアステージ mybest｜株式会社マイベスト結婚スタイルマガジン｜株式会社俄となりのカインズさん｜株式会社カインズ mery｜株式会社MERY 【BtoC × オウンドメディアリクルーティング】3選 mercan｜株式会社メルカリ CyberAgent Way｜株式会社サイバーエージェント

オウンドメディアとは

オウンドメディアとは、自社で所有するWebサイトやブログなどのメディアのことです。オウンドメディアの活用方法は、「顕在顧客の獲得」「潜在顧客の獲得」「休眠顧客の掘り起こし」「ブランド認知拡大」などさまざまな活用方法があります。また、オウンドメディアは、コンテンツを増やせば増やす分だけ、中長期的に運用することで自社の資産になります。

オウンドメディアの種類とデザイン

オウンドメディアは、「目的」と「ターゲット」で、3つのタイプに分けることができます。

オウンドメディアの種類
・BtoB × オウンドメディアマーケティング
・BtoC × オウンドメディアマーケティング
・BtoC × オウンドメディアリクルーティング

「BtoB × オウンドメディアマーケティング」では、メディアを見る人が企業の担当者や経営者になるため、ビジネス色の強いカラーを活用したり、ビジネスに適したスタイルや写真を活用することが多いです。

また、「BtoC × オウンドメディアマーケティング」では、一般消費者がターゲットとなるため、それぞれの属性ごとに色の使い方やデザインの仕様まで様々なメディアが存在します。

3つ目の「BtoC × オウンドメディアリクルーティング」では、自社の採用を目的とし、未来の採用候補者に届けるメディアのため、社内の雰囲気やカルチャーがわかるように写真を多く使うことがあり、社員のインタビュー記事などがたくさん掲載されています。

【BtoB × オウンドメディアマーケティング】5選

BtoB × オウンドメディアマーケティングのオウンドメディアを5つ紹介します。

経営ハッカー｜freee株式会社

freee株式会社が運営する「経営ハッカー」は、会計、経理、人事労務、税務、確定申告、給与計算、起業、会社設立などのコンテンツを経営者や個人事業主に提供しています。

UIUXデザインの特徴は、コーポレートロゴの配色と同じく「青系（#4575B3）」をメインカラーとし、落ち着いたビジネス色を演出しています。

また、トップページと記事ページ共にBtoBオウンドメディアの特徴である、写真中心ではなく、テキスト量が多いというのも「経営ハッカー」の特徴です。

「経営ハッカー」のメディアページは、こちらです。
[[[メディア一覧のURL]]]

HRog フロッグ｜株式会社フロッグ

株式会社フロッグが運営する「HRog フロッグ」は、人材業界に関する最新のニュースや求人市場の動向、業界の専門家へのインタビュー記事など、人材業界（HR業界）に携わる人たちにとって役に立つ情報を毎日発信しています。

UIUXデザインの特徴は、「緑系（#2CAE9D）」をメインカラーとし、記事のアイキャッチには、多様なカラーを用いています。人材業界がメインターゲットのため、たくさんのレポート・調査記事が存在し、その記事内では、デザイン豊かなグラフや表、チャートなどが多用されています。

「HRog フロッグ」のメディアページは、こちらです。
[[[メディア一覧のURL]]]

株式会社フロッグの代表取締役兼HRog編集長の菊池健生（キクチタケオ）さんのインタビュー記事はこちらをご覧ください。
『「続けることは正義」オウンドメディアの9年間の長期運用を成功させ続ける3つの秘訣』

Monstarlab DXブログ｜株式会社モンスターラボ

株式会社モンスターラボが運営する「Monstarlab DXブログ」は、DX推進に役立つ最新テクノロジーの活用方法やお役立ち資料を提供しているメディアです。

UIUXデザインの特徴は、「グレー系（#555859）」をメインカラーにし、「黄色系（#FEFE00）」をアクセントカラーとして、無料ウェビナーへのCV動線ボタンや資料ダウンロードへの動線ボタンに活用しています。

「Monstarlab DXブログ」のメディアページは、こちらです。
[[[メディア一覧のURL]]]

ferret｜株式会社ベーシック

株式会社ベーシックが運営する「ferret」は、「マーケターのよりどころ」をコンセプトとしたWebマーケティングメディアです。

UIUXデザインの特徴は、「緑系（#32C1B1）」をメインカラーに、アイキャッチ画像には近年流行りのベクター画像を取り入れるなど、マーケティングメディアの最先端を走るメディアデザインの1つと言えるでしょう。

「ferret」のメディアページは、こちらです。
[[[メディア一覧のURL]]]

SmartHR Mag.｜株式会社SmartHR

株式会社SmartHRが運営する「SmartHR Mag.」は、人事労務の手続きを自動化するクラウド人事労務ソフト「SmartHR」からスピンオフして生まれた、人事労務のお役立ち情報に特化したメディアです。

UIUXデザインの特徴は、コーポレートカラーの「青緑系（#2CABB3）」をメディアにも採用し、クラウド人事労務ソフト「SmartHR」と統一感を持たせた作りをしています。また、バナーカラーやアイキャッチ画像内のカラーにも同じ「青緑系（#2CABB3）」を採用し、全体的に統一感を持ったデザインになっています。

「SmartHR Mag.」のメディアページは、こちらです。
[[[メディア一覧のURL]]]

【BtoC × オウンドメディアマーケティング】5選

BtoC × オウンドメディアマーケティングのオウンドメディアを5つ紹介します。

就活市場｜株式会社リアステージ

「就活市場」は、「就活のわからないを全てなくす」というミッションをもとに株式会社リアステージが運営している就活メディアです。

UIUXデザインの特徴は、「濃い青系（#3A5671）」の色で統一しながら、カテゴリーごとに、就活準備：赤系（#EF4362）、インターンシップ：緑系（#5FBA3B）、企業情報：青系（#35BABF）など、カラフルな色を使うことで、色で違いをだすことで視覚的にわかりやすいデザインになっています。

「就活市場」のメディアページは、こちらです。
[[[メディア一覧のURL]]]

mybest｜株式会社マイベスト

株式会社マイベストが運営する「mybest」は、「あなたの“選ぶ”をお手伝い」をコンセプトにしたおすすめ情報サービスメディアです。

UIUXデザインの特徴は、芸能人や専門家などのクリエイターが自らの愛用品やおすすめ商品を紹介するメディア形式のため、多くの顔写真や製品・商品写真が活用されています。また、カテゴリには、文字だけではなく、アイコンを活用することで視覚的にもわかりやすい作りをしています。

「mybest」のメディアページは、こちらです。
[[[メディア一覧のURL]]]

結婚スタイルマガジン｜株式会社俄

株式会社俄が運営する「結婚スタイルマガジン」は、結婚準備情報や式場探しができるメディアサイトです。

UIUXデザインの特徴は、式場やドレス、ウェディングリングなど結婚に関する写真を多く活用しています。また、記事ページでは、テキスト情報だけではなく、音声情報も載せているため、記事を読まずに、耳で聴くことのできるメディアです。

「結婚スタイルマガジン」のメディアページは、こちらです。
[[[メディア一覧のURL]]]

となりのカインズさん｜株式会社カインズ

株式会社カインズが運営する「となりのカインズさん」は、マニアックな専門家や著名人がDIY、ペット、日用雑貨、ガーデニング、アウトドア、掃除、収納など、くらしづくりに関する“余計な”うんちくを面白く届けるメディアです。

UIUXデザインの特徴は、記事として製品や商品紹介が多いため、写真を多く使い、わかりやすく親しみを持ちやすい言葉で構成されています。

「となりのカインズさん」のメディアページは、こちらです。
[[[メディア一覧のURL]]]

mery｜株式会社MERY

株式会社MERYが運営する「mery」は、「Update My Happiness」をコンセプトに、美容、ファッション、暮らし、スキル、自分なりの「好き」や「幸せ」をアップデートする様々なコンテンツを届け、自分らしく未来をアップデートしたい女の子のためのメディアです。

UIUXデザインの特徴は、「茶系（#D3BFB6）」で優しい雰囲気を醸し出し、写真を多く活用しています。

「mery」のメディアページは、こちらです。
[[[メディア一覧のURL]]]

【BtoC × オウンドメディアリクルーティング】3選

BtoC × オウンドメディアリクルーティングのオウンドメディアを3つ紹介します。

OnLINE｜LINE株式会社

LINE株式会社が運営する「OnLINE」は、LINEのビジョンやカルチャー、働き方について発信し、LINEの中にある数々のチャレンジを伝えるオウンドメディアです。

UIUXデザインの特徴は、コーポレートカラーである「緑系（#2EC100）」と「青系（#30B8B9）」のグラデーションを活用し、モダンなデザインになっています。また、実際にLINE株式会社で働く社員たちの写真を多用することで、これからLINE株式会社に入社しようとする人たちが働くことをイメージしやすくしています。

「OnLINE」のメディアページは、こちらです。
[[[メディア一覧のURL]]]

mercan｜株式会社メルカリ

株式会社メルカリが運用する「mercan」は、チームの紹介や社内での出来事を中心に株式会社メルカリではたらく人を伝えるオウンドメディアです。

UIUXデザインの特徴としては、オウンドメディアリクルーティングの特徴に多い写真中心の構成となっています。また、記事ページ内には、その記事の内容に関連する自社求人を掲載しており、記事を読んだ人がすぐに株式会社メルカリの求人に応募できるような動線になっています。

「mercan」のメディアページは、こちらです。
[[[メディア一覧のURL]]]

CyberAgent Way｜株式会社サイバーエージェント

株式会社サイバーエージェントが運用する「CyberAgent Way」は、展開事業やサービスの強み、カルチャー、社員の働き方など、様々な独自情報を発信しているオウンドメディアです。

UIUXデザインの特徴としては、メディア全体を「白系（#FFFFFF）」と「黒系（#000000）」のモノトーンに統一させながら、写真に色を使うことで、より写真に視線が集まるデザイン設計になっています。

「CyberAgent Way」のメディアページは、こちらです。
[[[メディア一覧のURL]]]