オウンドメディアで抑えるべきwebデザインのポイントすべて！ 【Webデザイナー監修】オウンドメディアで集客するためのWebデザイン

オウンドメディアにおける集客とデザインの関係性

デザイン＝集客施策ではない

まず、オウンドメディアにおいてWebデザインは重要な要素の一つです。自社で管理するメディアであるため、人目を引くような凝ったデザインを採用することもできます。

ですが、デザイン＝集客施策ではありません。「デザイン性を高めれば、きっと多くの顧客を集めることができるだろう」と安易に考えてしまうと、想定していたような効果を得られないかもしれません。そこで、本来オウンドメディアでデザインが担うべき役割についてお伝えしていきます。

デザインはユーザーのサイトでの居心地をよくするもの

それでは、Webデザインとは何のために必要なものなのでしょうか。

最も大切なのは、デザインがサイトを訪問する人たちにとって使いやすいものになっているかということ。立ち上げたオウンドメディアがどれほど高いデザイン性を誇っていても、訪れたユーザーが「使いにくい」「どこを見ればよいのかわかりづらい」と感じてしまうようなら、そのサイトは「使いにくいサイト」になってしまいます。

デザイン自体は課題を解決するための、いわばツールでしかないのです。Webデザインの際に使いやすさを意識するのは、丁寧な接客をするのと同じようなもの。サイト内でユーザーがストレスなく必要な情報を手にできるよう、どのようなデザインが最適なのかを考えることが大切なのです。

Webデザインの定義と要素分解

Webデザインとは、パソコンやスマートフォンなどの見た目の配置や装飾などを指します。このWebデザインが必要とされる理由は、主に二つ。一つ目は、ユーザーに伝えたい情報を的確に届けるため。そして二つ目は、ユーザーの心を動かし、購買などの行動につなげるためです。

アクセシビリティ・ユーザービリティよる使いやすさ

まず、Webデザインはユーザーにとって優しいものでなければなりません。

ユーザーからすれば、操作がしにくく、どこを見ればほしい情報が得られるのかがわかりにくいサイトを見るのは大きなストレスです。裏を返せば「このサイト、すごく使いやすい！」「求めていた情報がすぐ手に入った！」とユーザーに感じてもらえれば、そのサイトには価値があると判断されます。

Web業界でよく耳にする用語として「アクセシビリティ」と「ユーザービリティ」という言葉があります。この２つの言葉ですが、アクセシビリティ（accessibility）とは利用のしやすさ、便利であることという意味で、ユーザビリティ（usability）も使用性や使いやすさといった意味なので、おおよそ同じようなことを指しています。これらの用語がWeb業界やWebデザインにおいてよく使われるのは、それだけユーザーにとって便利であること、使いやすいことが重要だからです。

それほど、ユーザーの利用感や使用性はWebデザイン、ないしWeb業界において重要視されていることがわかります。

ユーザーの使用感を重視したサイトは、やがて繰り返し訪れる“コアなファン”を獲得していきます。ファンがついてくれば、サイトにおける集客力も向上していくのです。

UI・UXによるによるストレスフリー

ユーザーに高く評価されるサイトを構築するには、UI・UXについて知ることも大切です。

UI（ユーザーインターフェース）とは、ユーザーとパソコンやスマートフォンなどのデバイスをつなぐ役割を果たしているものすべてを意味します。ユーザーはサイトのフォントや余白なども含むデザイン、つまり視覚情報によってデバイスとつながっています。

たとえば、白い背景にボタンを配置するとして、ボタンの色は黄色より赤色にした方がユーザーにとって見やすくなります（専門用語的にいうと、背景との明度差があるほうが視認性が上がるといいます）。また、ボタンであることが一目でわかるようなデザインを施すことも重要です。こういった見た目や操作性の部分が、UIといわれるものなのです。

また、似たような言葉でUXという言葉があります。

UX（ユーザーエクスペリエンス）とは、ユーザーがデバイスでサイトなどを見たときに得られる体験や経験を意味します。

このUIとUXは密接な関係にあります。UIが優れているサイトを利用すれば、ユーザーには質のよい体験（UX）が生まれるからです。ユーザーが「このボタン、赤くて目立つしボタンだと一目でわかるデザインだから押しやすい！」と感じたのであれば、上質なUXを得たということになります。

UIとUXを考慮したデザインができれば、サイトを訪れたユーザーのストレスは確実に緩和されます。また、ユーザーが使いやすいと感じるようなデザインを心がければ、コンバージョン（ユーザーが行動を起こした状態）を増やすことも可能です。ユーザーをサイトの“固定客”とするためにも、UIとUXの充実は欠かせません。

クリエイティブによる感動

Webデザインでは、クリエイティブ性を高めることも重要です。

冒頭では、デザイン＝集客施策ではないと述べましたが、かといってクリエイティブ性を疎かにしてはいけません。たしかに、サイトの使いやすさや見やすさなどによって、訪れたユーザーの満足度は上がります。しかし、ユーザーの関心を購買やサービス利用といった行動につなげたいのであれば、クリエイティブ性の高いデザインはマストで押さえておきたいところです。

思わず感動してしまうような美しいデザイン、ファンになってしまうような独創的なデザイン、誰かに教えたくなるような面白いデザイン――。

Webデザインでは、使いやすさを保ちつつも、ユーザー行動のフックとなるようなクリエイティブ面の力が求められています。ユーザーの心にアプローチするようなデザインを意識的に投入していきましょう。

オウンドメディアにおけるデザインの役割

ここまでは、Webデザインの定義や要素について述べてきました。

それでは、オウンドメディアではデザインにどのような役割を求めればよいのでしょうか。以下で、具体的にご説明していきます。

親しみやすさなどのブランドイメージを確立する

オウンドメディアを持つメリットは、ブランドイメージを企業主導で発信できる点にあります。

企業や商品・サービスなどに対するイメージを定着させるための行動、いわゆるブランディングを行なうと、ユーザーからの知名度や信頼度を高めることができます。オウンドメディアはある程度自由に制作ができる媒体なので、デザインによって自社のイメージを積極的に発信することが可能です。

押し出したいイメージが「親しみやすさ」ならポップで共感を得られるようなデザインを、「クールさ」ならお洒落なデザインやソリッドな雰囲気のものもよいかもしれませんね。

わかりやすさなどのユーザー体験を底上げする

UI／UXの重要性は、オウンドメディアにおけるデザインを考えるうえでも変わりません。

オウンドメディアが理解しやすい作りになっていて、ほしかった情報を簡単に手に入れられたとき、訪れたユーザーは満足感を得ます。個性豊かなデザインやコンテンツの力でユーザーの心へと訴えかけることも大事ですが、それはサイトに“わかりやすさ”が備わっていてこそ。使いやすさを追求することで、初めてユーザーの心にアプローチができるのです。

オウンドメディアにおけるデザインの主な注力領域と役割

オウンドメディアを立ち上げる際には、デザイン面で特に力を入れておくべき部分があります。

注力領域とその役割を的確に押さえておくことで、よりユーザー満足度の高いオウンドメディアの構築が可能です。

ファーストビューのデザインによるメッセージ発信力の向上

ファーストビューとは、ユーザーがサイトにアクセスしたとき、最初に画面へと表示される部分のことを指します。サイトでは、表示したユーザーの心をおよそ3秒でつかむ必要があるといわれています。

なぜならば、ユーザーはわずか3秒の間に、そのサイトがどのような人をターゲットにしているのか、読み進めるだけの価値があるのか、読み進めたらどのような利益が得られるのかを判断しているからです。

つまり、このファーストビューでしっかりと心をつかまないと、ユーザーはページから離れていってしまう可能性が高いのです。

サイトの“顔”でもあるファーストビューにインパクトのあるデザインを盛り込んでユーザーの興味を引くのもありですし、シンプルなデザインで使いやすさをアピールするのもよいでしょう。

打ち出すメッセージがターゲットユーザーに刺さるかどうかも含めて、慎重に検討する必要があります。

TOPページのデザインによる回遊性の向上

先程も述べたように、ファーストビューはサイトの“顔”でもあります。

TOPページのデザインを考える際には、回遊性を高めることも意識しましょう。

回遊性とは、閲覧しているサイト内における他コンテンツへのアクセスのしやすさのこと。たとえば、動画サイトで動画コンテンツを楽しんでいるときや、ネット通販サイトで買い物をしているときに、ふと他の動画や商品ページも見てみようと思った経験はないでしょうか。「他コンテンツも見たい」と感じたのは、ユーザーが必要とするかもしれない情報への導線を、そのサイトが用意してくれていたから。つまり、サイトの回遊性が高かったからなのです。

TOPページの回遊性を高めれば、サイトを訪れたユーザーはすぐに必要な情報の在り処を知ることができますし、当然ユーザー満足度も上がります。

逆に、ユーザーがサイト内の情報検索に“行き止まり感”をおぼえると、そのページから離脱してしまう可能性が高まります。ナビゲーションメニューを表示させるなどして、ユーザーをサイト内で迷子にさせないように気を付けましょう。

カテゴリページにおけるコンテンツの視認性の向上

カテゴリページとは、記事をカテゴリー別に分けて表示することができる機能のこと。設定したジャンルやタグなどで、記事を分類することができます。

カテゴリページの設定も、ユーザーの情報検索を助ける方法の一つ。公開したコンテンツが膨大になると、ユーザーは必要とする情報を見つけるのに苦労してしまいます。

カテゴリページも、サイトのTOPページ近辺に表示させるとより効果的です。

記事コンテンツにおける図解活用による読了率の向上

読了率とは、サイトを訪れたユーザーの何割が最後まで記事を読み終えたのかを示した数値のこと。ユーザーがほしかった情報を手にして、何らかの行動を起こした可能性が高い場合は、サイトの読了率が上がります。

そして、この読了率の上昇を手助けするのが図・表・イラストなどです。記事自体のクオリティを上げるだけでは、ユーザーに効率よく情報を届けることはできません。図解は視覚効果が高いので、文字よりも早く正確に情報を伝えることができます。

一方、図解の乱用はユーザーの目線を散らしてしまい逆効果になるので、適度な量を記事内に挿入するようにしましょう。

エントリーフォームのデザインによるCVRの向上

エントリーフォームとは、サイト内でユーザーに情報を入力してもらう箇所のことを指します。また、CVRとはコンバージョンレートともいい、サイトへのアクセスのうち、どれくらいが登録や購入、申し込みなどのコンバージョンにつながったのかを示した数値のことです。

どこに何の情報を入力すればよいのかがわかりにくいようなデザイン性の低いエントリーフォームだった場合、ユーザーがページから離脱してしまう可能性もあります。

入力欄が多すぎないか、何度も入力し直さなければいけないような仕様になっていないか、エラーが発生しないかなど、ユーザーの目線に立ってエントリーフォームを構築していきましょう。

404ページのカスタムデザインによるリンク切れの対応

Webサーバーの中に指定されたURLデータが存在しなかった場合に「404 Not Found」と表示されるページがありますが、これを「404エラーページ」と呼びます。

この「404エラーページ」ですが、デザインを加えたり、情報設計をしたりすることが可能です。誘導したいページのリンクを貼り、検索窓を設置することによって「404エラーページ」をただのリンク切れ通知ツールではなく、新しいユーザーをサイトへと迎え入れる玄関口にすることができます。

オウンドメディアにおけるデザインの組み立て方

オウンドメディアのデザインを行なっていく際には、具体的にどのようなステップを踏んでいけばよいのでしょうか。

サイトを通して発信したいコアメッセージを言語化する

発信したいコアメッセージは、自然とオウンドメディアがターゲットにしているユーザーへと刺さるものになるはず。

まずは、ターゲット層に響きそうな言葉を洗い出してみましょう。

ターゲットイメージを設定したら、そこから連想できる言葉を挙げていきます。それらの言葉を、独自性やわかりやすさ、おぼえやすさなどの観点から総合的に評価し、コアメッセージとして昇華させていきましょう。

オウンドメディアの運用目的に必要な機能要件を整理する

オウンドメディアのコンセプトを明確にしたら、サイト運用に必要な機能を洗い出していきます。

外注ライターなどによる記事投稿を想定している場合は、外部投稿機能の実装が必要です。ECサイトであれば、商品の検索機能やカート機能、決済機能などの搭載がマストでしょう。

重要なのは、サイト制作前の段階でこの洗い出しを念入りに行なうこと。制作が始まってから新しく機能を追加すると、時間・費用面でのロスにつながってしまうので避けたいところです。

サイトの在り方からサイト構造をサイトマップに落とす

サイト構造とは、サイトの階層構造のこと。数多くのコンテンツを適切に分類し整理することで、ユーザーにとって見やすく使いやすいサイト設計になります。

このサイト設計は非常に重要な項目です。オウンドメディアとして何を優先的に伝えたいのか、伝えたい情報の優先順位はどうするのかといったサイトの在り方を事前に固めたうえで、ページを一覧化するサイトマップを構築していきましょう。

サイトコンセプトに沿ったデザインルールの作成

オウンドメディアのコンセプトを、サイトデザインに落とし込んでいくことも大切です。

色調やフォントの種類、余白や文字サイズなどによって、サイトの雰囲気はガラリと変わります。サイト制作前にデザイン要素を練り上げ、ルールとして統一しておかないと、サイト内でデザインの“ブレ”が発生してしまいます。

デザインの“ブレ”は、ユーザーに違和感を与える可能性もあります。せっかく構築したブランドイメージを損なわないためにも、明確なデザインルールを作成しておきましょう。

各ページのデザイン・コーティング

いよいよ、それぞれのページのデザインやコーディングに入っていきます。

デザイン面では、レイアウトの工夫やイラスト・写真の挿入位置、色調や文字配置など、細かいところにも気を配ることが大切。行間が狭く読みにくかったり、余白が少なく読む気が起こらなくなったりしないよう、ユーザー目線で使いやすいサイトを追求しながら設計していく必要があります。

また、コーディング面では動作の不具合がないかなど、入念な調整を行なうようにしましょう。

サイトの機能要件とサイト構造で生じるストレスを減らす方法を実装

機能要件とは、必ず実装するべき機能のこと。実装されていないとサイトとして成り立たない重要な部分なので、ここは確実に盛り込んでいきます。

また、下層ページの階層が深くなりすぎる、ページ遷移数が多すぎるなど、サイトの構造上発生してしまうユーザーストレスを軽減することも意識しましょう。前述したUI・UXの観点からも、操作ストレスはユーザーのページ離脱につながってしまいます。

リスティング広告とヒートマップを使って検証と改善を繰り返す

オウンドメディアと併せて、リスティング広告を運用することでターゲットユーザーの集客を実現することができます。

リスティング広告とは、検索エンジンの検索結果に連動して表示される広告のこと。このリスティング広告の特長は顕在層、つまり見込み層にアプローチできる点にあり、効果検証がしやすいのも大きなメリットです。

また、サイトの各ページにおけるユーザーの行動を色で表現するヒートマップというツールによって、サイトを訪れたユーザーの動向を可視化することが可能に。人気のコンテンツや、逆に機能していないページを的確に把握し、今後の改善に生かすことができます。

「またこのサイトを訪れたい」とユーザーに思ってもらえるようなWebデザイン

よいWebデザインとは何なのか――。その定義を、一概に定めることはできません。サイトの運用目的やサイト制作者の主観によっても、定義は変わってくるからです。

しかし、Webデザインには感性の部分だけでなく、実はロジカルに組まれた部分をはじめとするさまざまな要素が含まれています。たとえば、ユーザーに対する「思いやり」。サイトを訪れる人たちのことを考え、使いやすさや見やすさをとことん考え抜く。Webデザイナーの仕事は「またこのサイトを訪れたい」とユーザーに思ってもらえるようなWebデザインを追い求めることなのです。

「Webサイト制作を行なううえで、ユーザーにとって最適なデザインを盛り込みたい」「でも、どのようなデザインが最も効果的なのかがわからない」――。こういった疑問に対して、私たちは20年以上にわたるホームページ制作やサイト運用の実績を通してお応えしてきました。無料相談を行なっておりますので、どうぞお気軽にご連絡ください。