オウンドメディアのデザイン戦略｜オウンドメディアの参考サイトも総まとめ

どうも！ブランドクリエイターの中江です。今回は「オウンドメディアのデザイン戦略｜オウンドメディアの参考サイトも総まとめ」というテーマでお話していきたいと思います。

オウンドメディアを運営していくのであれば、「オウンドメディアのデザインをどうすればいい？」というのは非常に重要なポイントになります。

なぜなら、オウンドメディアは、今や、ありとあらゆるジャンルで立ち上がり、情報発信を始め、ネット上に溢れてきているからです。

オウンドメディアにおけるデザインの役割とは「一瞬でそのメディアの世界観を伝える」ということにあります。世界観という言葉をもう少し噛み砕くと、魅力ですね。

デザインというヴィジュアルは、一瞬でそのメディアの印象を伝えるというわけです。

印象という観点で言うと、まず絶対にクリアしないといけない基準は「読みやすさ」です。

どれだけ情報を豊富に書いていても、デザインがガチャガチャしていて、見にくかったりするだけでも、一瞬でマイナスの印象になってしまいます。

重要なのは、この「読みやすさ」という基準をクリアするために、Webデザイナーや制作会社などの専門家の力を借りて、オリジナルのデザインにする必要はないということです。

予算の都合上、仮にテンプレートを使用していたとしても、ここの部分は整えておくことができます。

そして、さらにその上となると、デザインの力だけで、一瞬で「このサイトは他とは違う！凄い！もっと記事を読んでみよう」と印象付けることもできます。

もちろんこのステージになると、Webデザイナーや制作会社などの専門家の力を借りる必要が出て来ます。

今回は、そんなオウンドメディアのデザイン戦略と、オウンドメディアのデザインで参考になるサイトをご紹介していきたいと思います。

では、早速始めていきましょう！

1.オウンドメディアのデザイン戦略

まずは、オウンドメディアのデザインの参考サイトを紹介していく前に、どういう考え方でオウンドメディアのデザインは整えていけば良いのかという戦略の部分をお話していきたいと思います。

1-1.オウンドメディアのデザインをプロに頼むのか自作するのか

オウンドメディアのデザインとなると、最初に問題となるのは、プロに頼むのか、自作するのかというところですね。

まず、こんなことをデザイナーの僕がいうのもあれなんですが、デザインをプロに頼んだからといって、それだけでアクセス数が急激に伸びるようなことはまずあり得ません。

やっぱりオウンドメディアのアクセス数を決めるのは記事のコンテンツ力（どれだけ良い記事を書いていくか）なので。

それにデザインをちゃんとしたプロに頼む場合は、予算は数十万円以上はかかるので、もし今の時点で、それをかけれないという場合であれば、まずは自作するという方向でやっていくと良いでしょう。

ちなみにオウンドメディアを自作する場合であれば、一番オススメしているのは「WordPress」というブログでオウンドメディアを作成することです。

WordPressは集客力が非常にあるブログ（SEO対策に強い）で、オウンドメディアを作るのであれば、王道のブログです。デザインのテンプレートも豊富ですしね。

自作するというのであれば、基本的には世の中に出回っている日本語のテンプレートを使用することになります。それに集客に強いテンプレートだと、選択肢はかなり限られてくるので、選びやすいといえば、選びやすいでしょう。

後で、僕がオススメしているテンプレートをご紹介します。

ただ、どのサイトも同じようなテンプレートを使っているので、「あ、こういうサイト見たことあるな」という感じは払拭できないです。

そこはテンプレートの限界です。でも、テンプレートだからと言って、アクセスが集まらなかったり、ビジネスとしての成果が出ないということではありません。

ただ、サイトに訪れた時のファーストインパクトで、極端な差別化ができないということです。

 そこをプロがデザインを整えると、一瞬で差別化ができるオウンドメディアが生まれます。もちろん、「あ〜今まで見たことある」というような印象を与えない、オリジナリティー溢れる印象を与えることができます。

例えば、「俺株」という株式投資のオウンドメディアがあるんですが、このオウンドメディアは非常に優れたデザインです。一度のぞいてみると良いですね。

画像出典：http://orekabu.jp/

自作のテンプレートだと、こういう領域のデザインは無理ですね。まさに世界観を一瞬で伝えているデザインです。

株って興味はあるけど難しそうで勉強なんかしたくないって人も多いはず。参考本を買っても株価チャートの分析方法が多すぎてギブアップしている人はいませんか？

当サイトでは株の難しく取っ付きにくいイメージを払拭し、食いしん坊キャラや天真爛漫ギャルなどの登場人物がサイトを盛り上げ、証券会社も擬人化して親しみやすく読みやすい内容を心がけています。

記事内容で補足が必要だったり疑問に思う箇所は、あなたに代わって龍之介や桐乃が質問し、教師役の桜井が的確に解説していきます。そのため、あたかもマンガを読んでいるような感覚で株を楽しみながら学ぶことができます。（俺株より）

もし、自分自身がテンプレートの領域を超えて、自分のオウンドメディアの世界観を体現するようなデザインを求めているのであれば、プロに頼むと良いでしょう。

そういう判断基準で、まずは自作かプロに頼むのかを選ぶと良いと思います。

1-2.オウンドメディアのデザインを自作する場合

では、次にオウンドメディアのデザインを自作する場合についてお話していきます。

オウンドメディアのデザインを自作する場合のポイントは「読みやすさ」を持たせつつ、少しでも自分が表現したいメディアの世界観に近づけるようなものにしていく必要があります。

オウンドメディアのデザインを自作で整えることができるのは以下の3つのポイントですね。

• WordPressテンプレート
• 記事（見出し、強調文字、改行）
• その他（ロゴ、ヘッダー画像、バナー）

それぞれどうすれば良いのかを解説していきたいと思います。

1-2-1.オウンドメディアのデザインに最適なWordPressのテンプレート

まず、オウンドメディアのデザインを決めていくにあたって最初に決めていくべきなのはテンプレートです。

オウンドメディアは「オウンドメディア構築を成功させるための鉄板の5ステップ」でお伝えしたように、WordPressというブログシステムで構築するのが一番良いです。

WordPressは世界で一番使用されているブログシステムで、集客効果も非常に高いですし、機能性やデザインも豊富で、操作も覚えてしまえば簡単です。

で、このWordPressのテンプレート選びが最初に重要になるんですが、WordPressのテンプレートには無料のものと有料のものがあります。

1-2-1-1.無料のオウンドメディアのデザインテンプレート

まず、無料のテンプレートから紹介すると、一番良いのは「Xeory」というテンプレートです。

このテンプレートは「バズ部」という非常に有名なオウンドメディアのコンサルティング会社（LUCY）が開発したテンプレートで、非常にオウンドメディアに最適化されたものになっています。

クライアントの事例で言えば、月に数十万PVや100万PV超えは当たり前のオウンドメディアが多くて、本当に実力のあるWebマーケティング会社の一つだと思います。

そんな会社が開発したものなので、非常にオウンドメディアにぴったりのテンプレートになっています。スマホにも最適化されています。

テンプレートは2種類あって「Xeory Base」というものと「Xeory Extension」というものがあります。

僕はWordPress初心者の人やまだ操作に慣れていないという人は「Xeory Base」をオススメします。デザイン自体は非常にシンプルなテンプレートですが、その分、操作方法とかとても簡単です。

僕もこのサイトを立ち上げるまでは、この「Xeory Base」を使っていました。僕はこのテンプレートを使って、15記事の時点でも月に1万PVを超えるようなオウンドメディアになりました。

「Xeory Extension」の方は、少しデザインにこだわりたくて、操作にも慣れている中級者向けですね。

どちらを選ぶにしても、集客効果は非常に高いですし、導入や設定のマニュアルがしっかりと書かれているので、ぜひこちらのテンプレートを利用してみてください。

1-2-1-2.有料のオウンドメディアのデザインテンプレート

ただ「Xeory」の無料テンプレートは、人によってはデザインが少し物足りないという人もいてると思います。かなりシンプルですからね。そのまま使用すれば、かなり無個性のサイトになる可能性もあります。

そういう人にオススメしたいのは「Stork」(1万円)というWordPressの有料テンプレートです。

このテンプレートはブログマーケッターのJUNICHIさんという方が制作されたテンプレートで、これもまた非常にオウンドメディアに最適化されたテンプレートになっています。

スマホにも最適化されていますし、フルワイドの大きなヘッダー画像やSNSのオリジナルボタンも搭載されていますし、カラーもかなり自由に選ぶことができます。

カラーについて言えば「Xeory Base」は5パターンからしか選べないのに比べると、デザインの自由度はかなりあると言えるでしょう。

1-2-2.オウンドメディアの記事のデザイン

さて、続いてはオウンドメディアの記事のデザインですね。特に文章中の「読みやすさ」に関わっているので、ぜひここの部分は整えたいところですね。

初心者の人がデザインをするときのポイントなんですが「お手本」を探すというのが非常に重要になります。

まずは自分が表現したいデザインのサイトを見つけることから始めてみましょう。そして、そのサイトのデザインの良い部分を真似するというのが一番手っ取り早いです。お手本になると思うオウンドメディアは後で紹介します。

そして、オウンドメディアの記事のデザインには大きく分けて、見出しと文字の色と改行の仕方があります。

1-2-2-1.オウンドメディアの見出しデザイン

見出しのデザインというのは記事の文章中のこのデザインの部分ですね。

ここもオウンドメディアのデザインを構成する要素の一つになっています。

この見出しについては「WordPressの見出しデザインを自由にカスタマイズする方法」で詳しく解説しているので、ぜひこちらの記事をお読みください。

1-2-2-2.オウンドメディアの強調文字のデザイン

そして、文字の色というのは「強調したい文字をどう表現しているのか？」という部分を意識して、お手本のサイトを見ていくと良いと思います。

正解はないので、自分のオウンドメディアで表現したいテイストに近いものを見つけていきましょう。

例えば、先ほど紹介した「俺株」というサイトでは、強調文字はこういう少し大きい太字で、赤文字で表現しているのもありますし。

また、太字にして黄色いラインを引っ張るというような強調の仕方もあります。

1-2-2-3.オウンドメディアの改行の仕方

さて、次に記事の改行の仕方ですが、これにも正解はないですが、改行を決めるときの考え方はあります。

僕の記事の特徴は、文字を横幅いっぱいにまで書くというスタイルで、長文で、改行は少なめな方です。どちらかというと、少し文章としては固く感じる人もいると思います。

なぜ、僕が横幅いっぱいにまで文字を詰め込んでいるのかというと、こういうスタイルでブログを書くと「頭が良い人」が集まってくる可能性が高まるからです。

「頭が良い」というのは、論理的に物事を伝えると、ちゃんとわかってくれる人という意味です。これはデザインやコンサルティングを生業としている僕にとっては非常に重要な事です。コミュニケーションが取れないと、仕事になりませんからね。

改行が少ない文章というのは「少しわかりにくい」という印象を与えます。一文が長くなる傾向があるので、ちゃんと読まないと理解できないからです。

でも、だからこそ、良い人が集まる可能性は高くなるんですけどね。明らかに、コミュニケーションが通じないようなクレーマー体質なお客さんは僕のところには来ません。

そういう人は僕の文章とか読むと「あ〜もう面倒臭い！」って思って、離脱していってるはずなので。

で、僕と対極的にあるブログというのは芸能人ブログです。改行が、超多いのが特徴です。

イメージでいうと、こんな感じですね。

私のカレンダーが明日発売されます！

 

いぇいいぇい*\(^o^)/*

 

そして、2日後に、握手会やります！！

 

いぇいいぇい*\(^o^)/*

 

詳細は上のリンクをみてみてね！！

これはこれでありです。改行が多いと、より人間味が出て、万人の人が読みやすいテイストになります。

デザインに共通して、全て言えることなんですが、自分が見てみて、読んでみて「違和感のない」ものを目指していってください。

「違和感がない」ということは「自分が合う」と思えるデザインなので、自然と自分に似た感性の人たちがサイトに集まって来ます。

そうすると、理想的なオウンドメディアになりますよ。

1-2-3.自作のオウンドメディアをオリジナルのデザインに近づけていくには

その他、自作のオウンドメディアによりオリジナリティーを出していくには、あとは、お金は少しかかりますが、この部分にこだわれると良いでしょう。

• ロゴ
• ヘッダー画像
• バナー

この部分は、完全にグラフィックデザイナーさんの力を頼る必要がありますが、この部分を整えることができれば、かなりオリジナリティー溢れるオウンドメディアになりますよ。

それに今は、この部分のデザインの価格はかなり下がって来てますからね。ランサーズとかで募集かけてみると、ヘッダー画像も2~3万円あれば、作れますし、ロゴとかは5万円くらいで20提案くらい来ますからね。

1-3.オウンドメディアのデザインをプロに頼む場合

では、続いてはオウンドメディアのデザインをプロに頼む場合ですね。

数十万円程度の予算が組めるのであれば、プロの制作会社に頼むのも一つの手です。プロに頼んだ方がより、自分が表現したい世界観をオウンドメディアのデザインに反映させることができますからね。

もちろんですが、このオウンドメディアのデザインをプロに依頼する場合でも、WordPressで作成してもらってくださいね。理由は上記と同じです。

そして、問題になるのは制作会社選びですが、これ適当にやらないでくださいね。例えば、知り合いにデザイナーの子がいるから、その人に頼んでみようみたいな。安いから頼んでみようとか。

こういう選び方をして、「仕上がりがイメージと違った」「喧嘩別れしてしまって、修正できない」など、失敗する人が結構多いので、気をつけましょう。

まず制作会社を選ぶときのポイントになるのが、この二つをちゃんとヒアリングするということです。

• 制作実績を見せてもらう
• オウンドメディアの運用実績や戦略を聞いてみる

まずは、これまでの制作実績をちゃんと見せてもらいましょう。制作実績を見せてもらえれば、大体、その人・会社のデザインのクオリティはわかると思います。

これを見て納得できるデザインのレベルなのかをちゃんと見ておきましょう。

そして、更に一流のデザイナーや制作会社を選びたいのなら、「なぜ、このようなデザインにしたんですか？」ということを聞いて見ると良いでしょう。

一流のデザインには感覚的に作っているのではなく、必ずそこにロジックがあります。コンセプト、バランス、レイアウト、文字、カラーなど、「こういう印象を与えたいから、こういうデザインにした」という意図があるはずなので、その質問にちゃんと答えられるような人・会社を選べるのなら更に良いですね。

そして、デザインだけじゃなくて、Webマーケティングの戦略の部分も非常に重要な要素になります。

オウンドメディアはデザインがキレイであれば上手くいくというものではなくて、実際にオウンドメディアを制作した後で、どのように運営していくのかが非常に重要なポイントになります。

なので、実際にその人・会社のオウンドメディアの運用実績や、コンサルティングの実績などをヒアリングして、実力が間違いないのかを自分で確かめてみましょう。

2.オウンドメディアのデザイン事例

では、続いては「オウンドメディアのデザイン事例」を見ていきたいと思います。ここで紹介するのはかなりデザインが優れているので、ぜひ参考にしてみてください。

2-1.オウンドメディアのデザイン事例1｜バズ部

まず、最初のオウンドメディアのデザイン事例は「バズ部」です。

全体的なデザイン自体はすごくシンプルなんですが、記事の本文のデザインが凄まじくバランスが取れていて、読みやすくて、素晴らしいので、そこに注目して見ていくと、真似できるポイントがかなりあると思います。

「Xeory Base」や「Xeory Extension」を使うという方には非常に参考になるサイトだと思うので、ぜひご覧ください。

2-2.オウンドメディアのデザイン事例2｜QOL Hacks

さて、続いてのオウンドメディアのデザイン事例は「QOL Hacks」です。

このサイトもデザインが非常に整っているのですが、使っているテンプレートはオリジナルではなくて、先ほど紹介した「Stork」というテーマを使用しています。テンプレートの使い方によっては、これくらいのサイトも表現できるという意味でとても参考になります。

記事の種類も豊富で、普通の形式の記事だけではなく、インタビュー記事や、体験記事などもあるので幅広い記事のデザインの仕方が学べると思います。

アイキャッチ画像もとてもこだわって作成しているので、その部分にも注目すると良いと思います。

2-3.オウンドメディアのデザイン事例3｜姫リク

さて、続いてのオウンドメディアのデザイン事例は「姫リク」というオウンドメディアですね。

「キャバ嬢のためのブログ」という趣旨にマッチした可愛らしいデザインですが、このオウンドメディアもオリジナルのテンプレートを使用しているわけではなく、「Stork」というテーマを使用しています。「Stork」使う人にとってはとても参考になると思います。

トップページに行って、ファーストインパクトとして、入って来るヘッダー画像がとても良いですね。ヘッダー画像の部分はオリジナルだと思いますが、この部分さえプロのデザイナーに外注してしまえば、オウンドメディアの全体のデザイン力がかなり上がることがわかると思います。

2-4.オウンドメディアのデザイン事例4｜Photoshop Vip

さて、続いてのオウンドメディアのデザイン事例は「Photoshop Vip」ですね。このオウンドメディアはデザインに関する情報を発信しているサイトなので、サイト自体もとてもデザインが整っていますね。

記事は、素材を紹介したり、デザインの事例を紹介したりすることが多いので、画像がかなり多めの構成になっているので、画像を記事の中でどのように配置すれば、美しく見えるのかという参考になることが多いと思います。

2-5.オウンドメディアのデザイン事例5｜LIG

さて、続いてのオウンドメディアのデザイン事例は「LIG」ですね。

LIGはWeb制作会社だけあって、アイキャッチ画像や写真も非常に魅力的なものが多くて、記事本文のデザインも色使いはシンプルながら、とてもバランスが取れていて、読みやすいデザインとなっています。

LIGのオウンドメディアは、それぞれのライターさんが非常にキャラ立ちしていますね。そういう部分にも注目すると非常に参考になることが多いと思います。

2-6.オウンドメディアのデザイン事例6｜俺株

さて、続いてのオウンドメディアのデザイン事例は「俺株」という株式投資のオウンドメディアですね。

株式投資という初心者からするととっつきにくいテーマをキャラクターを使いながら非常にわかりやすく解説しているオウンドメディアになります。

トップページを見ればわかりますが、一瞬で世界観に惹き込まれるオウンドメディアになっています。もちろん、この領域になると自作でテンプレートでの表現では到底真似できないです。

でも、記事の本文デザインもかなりクオリティーが高いので、そこに注目すると、取り入れられることは色々とあります。改行の仕方や強調文字の使い方や写真やイラストなどを中心に見てみてください。

2-7.オウンドメディアのデザイン事例7｜脱毛シンデレラ

では、続いてのオウンドメディアのデザイン事例は「脱毛シンデレラ」ですね。その名の通り、脱毛に関して発信しているサイトです。

「俺株」を作った制作会社がプロデュースしているメディアで、これもまた世界観に一瞬で惹き込まれるサイトになっています。俺株の方は男性的なデザインでしたが、こちらの方は女性的なデザインとなっているので、そういう意味でも参考になると思います。

とにかくこのオウンドメディアはデザインの細部まで本当に行き届いて設計されているので、非常に参考になることが多いと思います。

まとめ

では、最後に今回のまとめをしておきたいと思います。

まず、オウンドメディアのデザインは自作するのかプロに制作を依頼するのかという2種類の選択があります。

基本的にちゃんとしたプロに頼む場合は、予算は数十万円以上はかかるので、もし今の時点で、それをかけれないという場合であれば、まずは自作するという方向でやっていくと良いでしょう。

オウンドメディアのデザインは自作するにせよ、プロに制作を依頼するにせよ、WordPressで制作するのが良いでしょう。集客効果も非常に高く、機能も豊富で、記事も書きやすいと思います。

オウンドメディアのデザインを自作する場合は以下の3つのポイントを整えていくようにしましょう。

• WordPressテンプレート（XEORY or STORK）
• 記事（見出し、強調文字、改行）
• その他（ロゴ、ヘッダー画像、バナー）

そして、プロに依頼する場合は、必ず「制作実績」と「オウンドメディアの運用実績」を聞くようにしておくと、「依頼したけど、微妙なものしかできなかった。結果に繋がらなかった」というトラブルにならないので、ここは押さえておくようにしましょう。

自作する場合は、とにかく今回の記事で紹介したオウンドメディアの参考事例を見ながら、真似られる部分を真似していくのが良いですね。今後も事例は追加していくので、楽しみにしていてください。

では、今回は以上になります！お疲れ様でした＾＾