企業のWebサイトやSNS、ブログなどを指すオウンドメディアは、自社のブランディングやコンセプトのアピールの手段として重要な役割を持ちます。
内容はもちろんですが、ユーザーの目を引くようなデザインにすることで他社と企業価値で差をつけ、顧客獲得につながるケースも少なくありません。
そこで今回は、オウンドメディアをデザインするときに意識したいポイントをご紹介します。
オウンドメディアのデザイン事例20選
デザイン初心者にとって、ゼロからオウンドメディアのデザインを考えることは容易ではありません。
そこで、成功事例として実際に公開されている各企業のWebサイトをご紹介します。
ナタリー
ナタリーは、音楽や映画・お笑いなどのエンタメを中心に扱うニュースサイトです。
デザイン自体はシンプルですが、1番上に各カテゴリーのタブが配置されており、見たいジャンルに移動しやすくなっています。
サイトトップの大半が最新ニュース紹介スペースとして確保されているので、旬な情報を取り入れやすいでしょう。
サイト内検索機能もついており、知りたい情報をすぐに調べられるところも魅力です。
となりのカインズさん
大手ホームセンターのひとつである、カインズが運用するオウンドメディアです。専門家や著名人による、DIYやアウトドアなどに関するコラムを中心に掲載しています。
画像がメインに表示されており、動画による情報発信をしているところもポイントです。インスタブラムのようなストーリー投稿もあり、SNSを見ているような感覚で手軽に見やすいデザインになっています。
サイトトップの装飾は、カインズのイメージカラーである緑を基調としており、企業らしさが詰まったデザインです。
CAMP HACK
「日本最大級のキャンプ・アウトドア・ニュースマガジン」を謳うWebサイトで、おすすめのキャンプグッズの紹介や、お役立ち情報を掲載しています。
サイト内で、「ニュース・コラム」「キャンプ用品」「知識・How to」の3つにカテゴリーがわけられているところも特徴です。サイトトップでは、各カテゴリーごとの人気記事が探せるので、知りたい情報にアクセスしやすいユーザーニーズに合ったデザインになっています。
独自のオンラインストアへの誘導アイコンも表示されており、シンプルながら合理性に富んだデザインです。
カルモマガジン
カルモマガジンはカーリースサービスである、定額カルモくんが運用しているオウンドメディアです。
車の買取やカーリースに関する情報がメインで、車種から記事検索をすることができます。
記事はカーリースのメリット・デメリットを紹介するものが多いうえに、カーリースのシミュレーション画面に移動できるボタンも配置されているので、自社のサービスについて知ってもらうと同時にサービス利用への行動喚起にもつながる画期的なつくりです。
ユーザーの導線が計算された戦略的なデザインが特徴となっています。
ほぼ日刊イトイ新聞
自由度が高い手帳・日記帳であるほぼ日手帳で知られるほぼ日刊イトイ新聞は、一見すると個人ブログのような独自性の高いデザインが特徴です。
毎日更新される糸井重里氏によるエッセイのほか、ほぼ日手帳や雑貨を中心に取り扱う自社のオンラインショップに関する紹介記事が並んでいます。
黄色と水色をメインにした、ポップでやさしい色合いの配色もおしゃれです。
ママリ
ママリは、妊活・妊娠・出産・育児に関する情報サイトです。
ピンク色をメインにした配色が特徴で、妊娠月別で記事の検索が可能なので、妊娠時期に合った情報を見つけやすい配慮がされています。
サイトトップに監修者・専門家の一覧が掲載されており、信頼性の高いサイトというアピールも十分です。
OCEANS（オーシャンズ）
国内最大規模を謳う男性向けライフスタイルメディアで、黒やグレーの配色がシックでデザイン性が高いオウンドメディアです。
ファーストビューではおすすめ記事が大きくスライド表示されます。スクロールしていくと、メンズコーデのスナップ集が横に流れていき、ファッション雑誌を見ているような感覚で見られるデザインです。
ほかにも、画像やリンクにカーソルを合わせるとアニメーションが起こるホバーを駆使した、洗練されたデザイン性の高さが魅力となっています。
Suntory Whisky
飲料業界のなかでも大手であるSUNTORYのウィスキー製品にフォーカスしたWebサイトです。
各国のブランド別にウィスキーが閲覧できるようになっており、クリックするとポップアップで表示されます。
新着ニュース一覧やCM集などもすっきりまとめられており、全体的に見やすいデザインです。
withnews
withnewsは、ユーザーから受けた取材リクエストをもとに深堀取材したニュースを投稿するニュースサイトです。
ネットや世間で話題になっているニュースを中心に取り扱っており、連載企画も充実しています。アクセスランキングは今月とSNSのジャンルでカテゴライズされているのが特徴です。
水色をメインにした配色で、ラインのような装飾を駆使して、それぞれの記事が見やすくなっています。
LIG
LIGはシステム開発やWeb制作・マーケティング支援を行う企業です。IT企業のホームページとあって、アニメーションを駆使した凝ったデザインが施されています。
ファーストビューでは大きく企業のコンセプトが表示され、職場の風景動画が映し出されている背景が印象的です
スクロールしていくとアニメーションによって動きのある文字が次々と表示され、見ていてわくわくするようなエンターテイメント性が高いデザインになっています。
RED BULL
エナジードリンクとして知られるRED BULLの公式サイトは、サイトトップ上部に商品ラインナップが並び、色とりどりのパッケージが画面を彩るとともに簡単な商品紹介も兼ねたデザインになっています。
そのほか、イベントやストーリーなどのカテゴリーごとに記事がピックアップされており、シンプルですがすっきりとして見やすいレイアウトです。
ferret
Webマーケティング情報を中心に扱うferretは、ファーストビューで表示されるおすすめ記事が、自動ではない分自分のペースで閲覧できるところがポイントです。
ポップアップで表示されるガイドブックは、新規登録することでダウンロード可能なので、資料請求と同時に新規会員登録への誘導もできる効率的なサイト構造になっています。
Lidea
ハブラシや洗剤などの生活用品メーカーとして知られるLIONが運用している生活情報サイトです。緑を基調とした配色には、掃除用洗剤も幅広く展開するLIONらしい清潔感のあるクリアな印象を受けるでしょう。
内容は、掃除や洗濯などのコラム記事が多く、サイトトップはピックアップ記事・新着記事・ランキング・おすすめ記事で大きく構成されています。
凝ったアニメーションなどは使われていませんが、すっきりとまとまったデザインです。
北欧、暮らしの道具店
サイト名にもあるように、北欧のファッションアイテムや生活雑貨を中心とした情報サイトです。
情報だけではなく、オンラインショップも兼ねたサイトで、おすすめアイテムや人気アイテムへのリンクも貼られています。
商品画像も充実しており、ファッション雑誌をオウンドメディアとして落とし込んだようなデザインが特徴です。
KAI-YOU
本やアニメ、イラストなどのサブカルチャーを中心に扱う情報サイトで、ピックアップ記事や新着情報などのほかにも各記事に対する最新コメントやインタビュー記事へのリンクも豊富です。サイトトップにサイトの内容がギュッと凝縮されています。
とくに注目のインタビューは、アイキャッチがほかのカテゴリーよりも大きく表示されており、ユーザーの目を引きつけやすいでしょう。
ジモコロ
ジモコロは、地元ごとの情報をまとめたサイトで、情報を知りたいエリアから検索できるところが特徴のオウンドメディアです。
サイトトップにはYouTubeのサムネイルのようなアイキャッチが並び、ファーストビューでピックアップ記事が表示され、ほかは新着記事と人気記事で構築されています。
華美な装飾はありませんが、ローカル情報誌のようなあたたかみのあるデザインです。
SUUMOジャーナル
SUUMOジャーナルはリクルートが運用する不動産情報サイトで、住居や建築関係の情報掲載が中心となっています。
ファーストビューにピックアップ記事が表示され、あとはおすすめ記事・記事カテゴリー・人気記事ランキングという非常にシンプルな構造です。
サイトトップからSUUMOの賃貸ランキングに飛べるので、新居を検討している人がSUUMOの物件を一部でも閲覧して興味を持つように誘導できるデザインになっています。
お風呂ナビ
虫よけや入浴剤で知られるアース製薬が運用しているサイトで、お風呂関係の情報掲載がメインです。
ファーストビューには、お風呂をテーマにした3種類のイラストが切り替わるアニメーションが組み込まれています。
おすすめ記事とカテゴリーの2つで構成されたシンプルなサイトトップですが、アイキャッチは同じイラストレーターによるもので統一されており、配色はパステルカラーの柔らかい雰囲気のデザインです。
アマノ食堂
フリーズドライ製品を扱うアマノフーズが運用するオウンドメディアです。色彩豊かな配色ですが、くすみカラーを使っているので目が痛くなるような鮮やかさではなく「食堂」を彷彿とさせるあたたかさがあります。
サイトトップからはレシピ検索も可能です。そのときの旬の食材も表示されており、情報サイトとしてだけではなくレシピサイトとしての役割も持ちます。
mercan
大手フリマアプリであるメルカリが運用するオウンドメディアです。「メルカリの‘‘いま‘‘を正しくかつ遠くまで届け、エンパシーの総量を増やす。」がコンセプトで、採用活動を目的としています。
メルカリで働く人や社内の仕事風景、事業内容、取り組みをメインに紹介しているので、シンプルなデザインとレイアウトです。
その分、伝えたいことをすっきりまとめた印象で、メルカリへの就職や転職を考えている人にはちょうどよい情報量でしょう。
オウンドメディアでデザインが重要な理由
さまざまなオウンドメディアでは、それぞれ工夫を凝らしたオリジナリティのあるデザインが施されています。
では、そこまでデザインにこだわる理由について見ていきましょう。
ブランディングに直結する
他社との差別化を図るためにも重要なのがブランディングです。オウンドメディアを通じたブランディングの手段にはさまざまありますが、デザインにこだわるだけでもブランディング効果が期待できます。
企業やブランドのロゴの色や、扱っている商品をイメージした配色を施すだけでも、その企業らしさが表現可能です。例えば、LIONのWebサイトのように、ロゴの色をメインに置くだけでも企業らしいデザインとなるでしょう。
ユーザビリティの向上につながる
ユーザーにとっての見やすさを指すユーザビリティですが、デザインにこだわることでこのユーザビリティの向上も見込めるでしょう。
記事、画像の配置やレイアウトを見やすいサイズ、フォントにする、目が疲れない程度の密度でデザインすることで、ユーザーから見やすく使い勝手のよいオウンドメディアになります。
カテゴリー別に記事を表示したり、サイト内の絞り込み検索を可能にしたりすることによって、ユーザーが求めている情報にアクセスしやすいデザインにできれば、ユーザーの満足度にもつながるでしょう。
行動喚起につながる
オウンドメディアの最終的な目標としてユーザーの行動喚起があげられます。
どのような行動喚起につなげるかは企業によってさまざまですが、商品の購入や認知、集客・資料請求などが一般的でしょう。
そのために、商品にかかわるコラム記事を紹介したり、自然に誘導できるようにCTAボタンを配置したりする工夫が重要です。
「ユーザーはどのタイミングで商品が欲しくなるか」が考えられたデザインだと、行動喚起につながりやすいでしょう。
オウンドメディアのデザインで意識すべきポイント
おしゃれなデザインのWebサイトは目を引く一方で、それだけだとブランディングやユーザビリティの向上などのオウンドメディアの本来の役割を果たせません。
ここでは、デザインするときに意識するべきポイントをご紹介します。
目的・コンセプトにマッチしたデザイン
デザイン性にこだわりすぎて企業の目的やコンセプトからズレたデザインになると、見ていて違和感を覚えてしまいます。
例えば、「日本人の美を引き出すコスメ」をコンセプトにしている化粧品メーカーがあるとしましょう。そのオウンドメディアが外国人モデルの画像を多用していたり海外サイトに多いデザインを使用していたりするとコンセプトとの矛盾を感じます。
コンセプトにあった画像や配色を使い、目的にあったレイアウトに工夫することで、オウンドメディアの役割を最大限に活かせるでしょう。
企業やメディアのカラーを出す
企業やメディアの持つ要素やコーポレートカラーをデザインに落とし込むことも大切です。これは何も色合いだけの話ではありません。その「企業らしさ」というカラーも意味します。
例えば、ほぼ日刊イトイ新聞のWebサイトは、一見してブログのような印象を抱く自由なデザインが特徴です。自由に書き込めるほぼ日手帳で知られるほぼ日刊イトイ新聞らしい遊び心がうかがえます。
このように「このデザインはこの企業」「ファーストビューでこの企業のサイトだとわかる」ようなデザインは、ユーザーも見ていて楽しめるでしょう。
スマホファーストのデザインにする
昨今では、オウンドメディアをパソコンで見る人よりも、スマホで見る人のほうが多い傾向にあります。
そのため、パソコンでの見やすさ重視でオウンドメディアを作ってしまうと、スマホだと文字や画像が大きすぎて見づらい可能性があるので注意しましょう。
スマホで見たときの画像の大きさは適切か、文字数は多すぎないかなどに注意して、パソコン・スマホ関係なく見やすいオウンドメディアを作ることが理想的です。
オウンドメディアのデザインを制作する方法
オウンドメディアのデザインは、自分でデザインするという手段もありますが、未経験だと何から手をつけたらよいかわからない人も少なくありません。
デザインの制作には、主に以下のような方法があるので、検討してみてください。
制作会社にデザインを依頼する
はじめてのデザインで右も左もわからないかつ、予算に余裕があるなら、制作会社にデザインを依頼するのがベターです。
やや費用は高くなりますが、実績の多い制作会社なら、ノウハウを活かしてよりクオリティの高いオウンドメディアのデザインが期待できます。デザインを考えるうえでの悩みも相談しやすいでしょう。
ある程度費用をかけられるなら、何社か見積もり依頼をしてそのなかから選ぶのもおすすめです。
個人やフリーランスのデザイナーに依頼する
外注したいもののあまり予算に余裕がない場合は、個人やフリーランスのデザイナーへの依頼もおすすめです。デザイナー本人と直接やりとりができる分、制作会社よりも費用を抑えられます。
ただし、依頼時には以下のポイントに注意しましょう。
- コーディングもできるデザイナーか
- ある程度のサイト設計が自分でできるか
制作会社の場合は、外注先でコーディングができるエンジニアやエンジニアとデザイナーを束ねるWebディレクターを手配してくれますが、個人・フリーランスに直接依頼するならこのあたりの管理を自社で行う必要があります。
完全初心者ではなく、一定の知識がある場合の選択肢にしましょう。
自社でデザイン制作する
デザイン制作の経験やコーディング技術があれば、自社でデザイン制作するほうが外注するよりもコストカットできます。
外注すると少なくとも数十万以上はかかりますが、自社制作ならドメインとレンタルサーバーの費用くらいで済むでしょう。
ある程度の経験やスキル・知識は必要ですが、これらを持つ社員がいる企業や、専門の部署を設けている企業であれば自社でデザインしたほうが費用の節約につながります。
成果につながるオウンドメディアデザインの注意点
ブランディングや顧客獲得・増加などのメリットが多いオウンドメディアですが、デザインに手を抜いてしまうと、思ったような成果が得られない場合もあります。
デザインを始める前に以下を確認しておきましょう。
競合企業のオウンドメディアを確認する
参考程度に競合企業のオウンドメディアのチェックをしておきましょう。とくに、デザイン初心者なら「どんなデザインにしたいか」「企業らしさを出すにはどこにこだわればよいか」などを考えるときのヒントにもなります。
また、ターゲット層からの興味を引くための工夫や、顧客像の参考としても役立つでしょう。
ただし、デザインや配色などをそのまま真似すると著作権侵害になる場合や、ユーザーからの信頼性を損なう可能性があるので注意が必要です。
コンテンツページのデザインに注力する
Webサイトの玄関ともいえるトップページのデザインにこだわるのも大切ですが、とくに注力すべきはコンテンツページのデザインです。
Googleのような検索エンジンから流入したユーザーは、まずコンテンツページから入る場合が多い傾向にあります。
トップページに凝るあまり、コンテンツページは文字だけだったり、ユーザビリティに配慮されていなかったりするとユーザーが途中で読むのをやめてしまう可能性もあるでしょう。
そうならないためにも、コンテンツページに画像を入れたり、レイアウトにこだわったりしてトップページ以上に工夫する必要があります。
ユーザー視点の使いやすいデザインにする
オウンドメディアのデザインをするうえで無視してはいけないポイントが、ユーザーから見た使いやすさです。制作側から見て使いやすくても、ユーザーにとって使いにくいとアクセス数が伸び悩む可能性があります。
文字数や画像の大きさはもちろん、トップページからコンテンツページへの飛びやすさや、スマホから見たときの見やすさにもこだわりましょう。
事前にテストを繰り返して、パソコンとスマホで使いやすさに差はないか、リンクをクリックしたときにエラー表示が出るなどの不具合がないかを確認したうえで公開するとトラブルやクレーム防止にもなります。
まとめ
顧客獲得や商品購入への誘導など、ビジネス面でメリットの大きいオウンドメディアですが、デザインにこだわることでブランディングやユーザビリティの向上にもつながります。マーケティングを成功に導くための重要な鍵にもなるでしょう。
デザインを考えるときには、競合サイトをチェックしておくと、イメージしやすいのでおすすめです。
デザインに慣れていない人や完全に初心者という場合は、外注できる制作会社もあるので検討してみましょう。
