【参考サイト6選】オウンドメディアのWebデザインにおける6ポイント

Sambushi編集部です!

オウンドメディア立ち上げの悩むのひとつに、オウンドメディアのデザインがあげられます。「おしゃれなデザインにしてみたい」「独自性を持たせたい」など、さまざまな願望が湧いてくるでしょう。

具体的なデザイン案がない場合、「どのようなデザインだと成果が出るのだろう?」「勝ちパターンのデザインが知りたい」と考える方もいるかもしれません。

オウンドメディアのデザインは、もちろんユーザーに与える影響が大きいので重要ではあります。しかし見た目だけに囚われるのではなく、意識しておきたいこともあります。

そこで今回は、オウンドメディアのデザインを決めるときに忘れてはいけない大切なポイントと、デザインを決めるときの参考になるギャラリーサイトをご紹介します。

漠然なイメージしか持てていない方はぜひ参考にしてみてください!


オウンドメディアのデザインを決める6ポイント

オウンドメディアのデザインには「このデザインにすれば必ず成功する」といった正解はありません。しかしオウンドメディアのデザインを決めるときは、最低限押さえるべきポイントをしっかり理解決めやすくなります。

【意識しておきたいポイント】

  • オウンドメディアの目的を忘れない
  • 自社のオウンドメディアのコンセプト
  • コンテンツテーマ
  • 企業のイメージカラー
  • ユーザーにとって見やすいデザイン
  • ガイドラインを決めておく

一つずつ詳しくみていきましょう!

ポイント1.オウンドメディアの目的を忘れない

オウンドメディアの目的は、自社のサービス・商品の認知拡大やリード獲得、採用活動強化など、様々あります。

目的に合わせたコンセプトやテーマで統一されたデザインのオウンドメディアは、訪れたユーザーの記憶に残りやすく企業のブランディングにもつながります。

例.
【採用活動強化が目的(オウンドメディアリクルーティング)の場合】
目的:サービス・商品の認知より企業の価値観や文化・社風を伝えたい
・トップ画面に、価値観や文化を伝えるためのメッセージを載せる

・デザインで使用するカラーは、コーポレートカラーである「青・白」がメイン

・歴史が長いことをアピールしたいので、モーションを駆使して革新的というより、堅い印象をもつようなデザインにしたい

・会社の歴史や文化について説明したページや募集するポジションの社員インタビューを載せたいので、記事コンテンツも掲載できるサイト構成にする

・エントリーボタンが他に埋もれないようなデザインが重要  など

このように、「デザインをどうするか」をまず考えるのではなく、「オウンドメディアを通して何をユーザーに伝えたいのか」という目線をもつように心がけましょう。

そのためにもデザインを決める前に、まずはコンセプトやテーマなどをしっかり固めましょう

ポイント2.見やすいデザインは最低限必要

オウンドメディアのデザインで重要なことは、「ユーザーにとって見やすいデザインにすること」です。

Webサイトのデザインは、情報を伝達することと直結するため、ユーザーが見やすくてわかりやすい、きれいなデザインに整えることは最低限必要です。

見づらくてわかりにくいデザインのコンテンツはユーザーに敬遠され、わざわざ訪れたユーザーの離脱につながる可能性があります。さらには、不信感を持たせてしまい、企業イメージを毀損する恐れもあります。

その反対に、きれいに整えられた見やすいデザインのコンテンツは、ユーザーの満足度も高くなり、安心感や信頼感を与えます。

ポイント3.ガイドラインも決めておく

オウンドメディアの運営が長期になり複数の人物が関わることによって、立ち上げ当初は統一感のあるデザインだったものが、徐々に崩れていく事例もあります。

見やすくてわかりやすいデザインを保つためには、メインカラーやサブカラー・フォント・テキストの装飾など、カラーや装飾などの細部にまでガイドラインを決めて運用すると統一感を保ちやすくなります。

ポイント4.競合サイトを分析して差別化を図る

オウンドメディアのデザインを決めるときは、競合サイトのチェックと分析をすることが大前提となります。

現在、新たな集客方法としてコンテンツマーケティングが注目されているため、オウンドメディアを保有する企業が増えています。

そのため、競合サイトのデザインを分析して、「どのようなコンセプト」で「どのようなターゲットを想定しているのか」を把握することは重要となります。

さらに自社のオウンドメディアを訪れるユーザーは、関連するコンテンツ、すなわち競合サイトもチェックしている可能性があります。

競合サイトを分析することによって、よさそうなものを自社オウンドメディアに取り入れたり、別の訴求方法で差別化を図り独自性を出したりすることも可能です。

ただし、競合サイトをまるごと真似することだけは避けましょう。

ポイント5.モバイルに対応したデザインにする

モバイル端末が普及した現在は、モバイルにも対応させたデザインにすることが重要です。モバイルに対応させたデザインのことを、レスポンシブWebデザインといいます。

スマートフォンやタブレットの画面比率にあわせたレスポンシブWebデザイン化は、今では当たり前となりました。

パソコンと同じデザインのままだと、パソコンから見たときは最適ですが、スマートフォンやタブレットから確認すると、Webサイトの文字が小さくて読みづらかったりボタンが小さくてクリックしづらかったりなど、さまざまな問題が生じます。

こうなると「使いにくいサイトだな」と思われて、ユーザーの離脱率が上がり、自社のオウンドメディアの印象を下げる可能性もあります。

最高のユーザー体験を提供するために最適なのは、各デバイスの画面比率にあわせたデザインを用意することです。

しかし、デバイスごとに用意するのはコストや労力が必要になります。リソースが割けない場合は、最低限レスポンシブWebデザインに対応させることを忘れないようにしましょう。

ポイント6.下層のページで手を抜かない

トップページのデザインのみに力を注いでしまい、下層ページであるコンテンツページのデザインが手抜きになってしまうことも珍しくありません。

しかし、検索結果一覧などから自社のオウンドメディアへ流入したユーザーは、トップページからではなく、各コンテンツページから流入するケースが多くなります。

さらに、そこから興味を持ってくれたユーザーは、関連コンテンツなどへ遷移するため、トップページよりも各コンテンツページのトラフィック数やPV数のほうが多くなる傾向があります。

トップページに載せきれないコンバージョンへとつながる情報もコンテンツページに載せることが多くなります。

コンテンツページがあまりにも簡素なデザインだと、トップページとの一貫性が保てないだけでなく、売上げに影響する恐れもあります。下層ページまでデザインで手を抜かないように気をつけましょう。

参考にしたいギャラリーサイト6選

こちらではオウンドメディアのデザインを考えるときに参考になるギャラリーサイトを6つご紹介します。

1. 81-web.com

「81-web.com」は、デザイン性が高く、優れた国内のWebサイトを集めたギャラリーサイトです。

ギャラリーサイトには珍しい日本のWebサイト限定で、細部までこだわっているWebサイトがたくさんピックアップされています。

サムネイルにマウスポインターをあわせると、そのWebサイトのカテゴリ・色・フォント・タグがひと目でわかるため非常に便利です。

2. bookma! v3

「bookma! v3」は、パソコン版とスマートフォン版の表示が2つ並べられており、どちらのデザインもひと目でチェックできるようになっています。

モバイル対応のレスポンシブWebデザインの参考がわかるため便利です。審査を通過したWebサイトのみ掲載されているため、クオリティの高い作品ばかり集められています。

閲覧数順に表示できるため、人気があるクオリティの高いWebサイトや、レスポンシブWebデザインを効率よく探したい場合におすすめです。

3. I/O 3000

「I/O 3000」は、日本と海外のWebサイトが集められているギャラリーサイトです。

更新頻度が高く毎月20件近く追加されており、サイト自体のデザインや作りがシンプルなためギャラリーが見やすいのが特徴。ファッション・くらし・教育などのカテゴリや、シンプル・EC・POPなどのタグで、細かく指定して検索できます。

デザインの流行もわかるため、どのようなデザインがよいのか悩んでいるときに使うと、インスピレーションやヒントが得られるかもしれません。

4. MUUUUU.ORG

「MUUUUU.ORG」は、デザイン性が高く知名度のある縦に長いレイアウトのWebサイトが集められています。

カテゴリが業種別に細かく分類されているため、検索しやすいのも特徴のひとつです。EC・コーポレートサイト・Webマガジンなどのタイプ別、カラー別に指定して検索することも可能です。

クオリティが高い順に表示されるため、縦長でクオリティの高いWebサイトを効率よく探したい方におすすめです。

5. S5-Style

「S5-Style」は、高品質なデザインのWebサイトが7000以上集められているギャラリーサイトです。

検索機能が充実しており、「OR」「AND」で検索できるのが特徴。その他にも、業種やカラー、HTML・CSS・JavaScriptなど、参考にしたいWebサイトの見つけ方も多様です。

サイト上部の右側にあるスターのアイコンをクリックすると、ログインや会員登録しなくてもお気に入り保存できるため、ササッと見つけてあとからじっくり見たいときに便利です。

6. Web Design Clip

「Web Design Clip」は、国内・国外の独創性が高いWebサイトを集めたギャラリーサイトです。

更新頻度は低めですが作品事例が多く、パソコン版だけでなくスマートフォン版のレスポンシブWebデザインもたくさん掲載されています。

参考にしたいWebサイトのサムネイルに表示されている虫眼鏡アイコンをクリックするとQRコードが表示されるため、スマートフォンの画面からモバイル版のデザインを確認することも可能。

「Japan」「World」「Landing Page」「Smartphone」別に探せるため、目的にあわせた参考デザインを効率よく探せます。

その他にも、カテゴリ・タグ・カラー・キーワードなどから検索できて、ログインしなくてもお気に入り保存できるため便利です。

類似したデザインのWebサイトも表示されるため、デザインのヒントが得られたり、参考にしたい特定のデザインを探している方におすすめです。

まとめ

オウンドメディアのデザインで大切なことは、オウンドメディアのコンセプトやコンテンツテーマなど、特定の目的に沿ったデザインにすることが重要です。

また、下層にあるコンテンツページなどのデザインにも手を抜かず、テキストの装飾やフォントなどにも統一感を持たせるようにしましょう。

今回ご紹介したチェックポイントをしっかり踏まえたうえで、自社のオウンドメディアのデザイン制作にとりかかりましょう。

▼「成功事例を知りたい!」という方はこちらの記事をどうぞ
【オウンドメディア事例8選】成功から学んでみよう!

最新情報をチェックしよう!