Webデザインを1ランクアップさせるコツ

サイト全体に統一感を持たせるコツ

鈴木 英美

商品やブランドごとにページのデザイン性が違っても、サイト全体に統一感は出せるのでしょうか？

例えば、https://ayatori.co.jpというサイトがあって、その中に、ブランドA・ブランドB・ブランドCという独立したサイトを作ってしまった場合などに、統一感がないという悩みがよく発生します。

「独立した」というのは、この図の場合、ayatori.co.jpという基本のベースがあるにも関わらず、「ブランドA・ブランドB・ブランドC」の商品ごとにターゲットが違うので、それぞれの担当者が自分の思う世界観でサイトを作ってしまい、勝手にドメインを取ってサイトを立ち上げてしまうという状況をさしています。大手のBtoC企業でよく見かけるパターンです。

マーケティング戦略的に、このような独立させた売り方も存在はします。
ayatoriという企業ブランドを隠しながら、ブランドA・ブランドB・ブランドCをそれぞれ独立したブランドとして見せる場合ですね。

しかしサイト全体の統一感がなくなってしまいますので、ayatori企業ブランドの中で、この3つを見せたい場合の解決案をいくつか紹介いたします。

ヘッダーとフッターの統一

単純な例ですが、このように、ayatori.co.jpの企業サイトで使っているヘッダー、フッダーをそれぞれのブランドサイトでも使うというものです。
これが統一感を出す方法として一番単純で有効なものだと思います。

企業サイトに行く必要がない、つまり、そのブランドサイトで完結している場合などはヘッダーが統一されていないこともありますが、横断的にブランドサイトを見て欲しい時や企業としての活動を広く知ってもらいたい時は、ヘッダー、フッダーを共通のものにすると統一感が出てくるのでおすすめです。

もし各ブランドでドメインが分かれていて、別サイトとなっていてもヘッダーだけ揃えるということは可能です。
テクニックや知識が必要になってくるので詳しくはお問合せくださいね。
→お問い合わせはこちら（外部サイトに移動）

片岡 泰仁

それぞれのコンテンツ量をそろえる

もうひとつ、サイト全体の統一感を出す方法をご紹介しましょう。
今、A,B,Cでそれぞれ載せているコンテンツが違うのですが、この載せるコンテンツをある程度合わせることです。
この例で言うと「商品情報・キャンペーン情報・開発秘話、CM集」を揃えるようにしてください。全部のページで合わせることは難しいかもしれませんが、「ヘッダーとフッダーが共通」「コンテンツもある程度揃っている」ということでサイト全体の統一感が出せると思いますよ。

コンテンツを同じ順番で載せてしまうと、「ブランドごとに分けてそれぞれの世界観を作っているにもかかわらず、それではワンパターンになってしまうのではないか」というご質問もありますが、ヘッダーとフッターで挟まれたコンテンツの部分は自由なエリアです。
デザイナーと協力してそれぞれの世界観を作っても問題ないですし、そのなかでブランドの世界観を出すことは十分可能なはずです。

わざわざドメインを分けるのではなくて、ayatori.co.jpの中にブランドというディレクトリを作って、その中でA,B,Cを展開する方法も良いでしょう。
ドメインは一つで済みますし、ヘッダー、フッダー共通で持っている情報もほぼ似たようなものとなるので、サイト全体の統一感は担保できるかと思いますよ。
ちょっとしたことで意外と統一感は出せます。

片岡 泰仁

ブランドごとにドメインを取るデメリットとは

SEO的考えると、ドメインを分けることにはデメリットが多いといえるでしょう。
googleからの評価はドメインごとにあるので、ドメインを複数持ってしまうと評価が分散してしまうのです。
せっかくであれば、ayatori.co.jpでこれまで獲得した評価を引き継ぎたいので、ayatori.co.jpの中にブランドを作る方がのぞましいです。
こうすると、それまでの評価は引き継げますし、ayatori.co.jpのコンテンツが増えるので、googleからの評価もあがっていくと考えられます。

また、デザインの視点からは外れてしまいますが、複数ドメインを持つとドメイン管理も複雑になってしまいます。
例えば、A,B,C　でそれぞれの担当者いた場合、契約するドメインがバラバラだったり、ある担当者が制作会社に丸投げしてドメインを取ってもらったりすると、その担当者がいなくなった時に、「このドメインどこで買っているんだっけ？」「契約はどこでしているんだっけ？」「ドメインとサーバーを自分で管理したいけれど、業者がなかなか譲ってくれない…」というトラブルが起こる場合があります。
このようなことにならないよう、なるべく自社で統治して一つのドメイン運用をした方が管理しやすいし安心ですね。

トップページにありがちな、バナーの乱立を防ぐには

鈴木 英美

「トップページに商品やキャンペーンのバナーが乱立してしまい、ページが見づらい」といったお悩み、よくありますね。
バナーが並びすぎると、ユーザーはどれを押したらいいかわからなくなったり、全てが目立たなくなってしまったりします。
しかし担当者としては、自分が作ったコンテンツを見てもらいたいのでトップページにおきたい、と思う気持ちもわかります。
他にも、社内事情が絡んでいることも…。

積極的にコンテンツを増やし、webマーケティングに力を入れているということについては、素晴らしい取り組みですよね。

サイトをリニューアルした直後は、担当者も制作会社も情報の整理をして掲載すべき情報を精査しているので、このような状態にはならないでしょう。

このような状態が起こりがちなのは、分類が難しい情報も「おすすめ情報」というエリアに登場させることが可能な場合ではないでしょうか。
まずは初心に立ち返って、情報の整理をもう一度することが大事です。

上記の図で説明しますと、「1.ブランド情報、2.新商品・キャンペーン情報、3.当社のご案内」とカテゴライズできるでしょう。
見出しを入れるだけでも、乱雑な情報がセグメントに分けられることで、情報の理解が速くなりますね。

また、整理する時に、もともとあったブランドDとブランドEを載せる必要があるかどうかを精査するなど、社内統制も必要かと思います。

バナーであるということは、おそらく他のページからもリンクがされているかと思います。google検索などで直接検索されることも多いはずなので、トップページをスッキリさせるためには無くしてもいいかもしれません。

そもそもバナーは、あまりクリックされないことをご存じですか？
情報整理の段階で、載せる場所を今一度考えてみてください。
上記の図のおいて「『あやとりとは』と『採用情報』はヘッダーメニューにおいた方がよさそうだ」「サイトを作った当時はFacebookページをたくさん見て欲しかったのでバナーを作ったが現在の主流はフッターなどにFacebookのロゴリンクを作ってそこから飛んでもらうことだ」など、情報整理、取捨選択、配置場所を考えていただくことでより整ったサイトにすることができます。
FacebookなどのSNSは、バナーよりロゴの方が直感的にわかりやすいですよね。

片岡 泰仁

メインビジュアルにスライドバナーを設定するのは効果的なのか

鈴木 英美

先程のバナー乱立問題とよく似ていますね。
図にあるように、矢印ボタンを押すとビジュアルがスライドするタイプのデザインですね。
このデザイン、よく見かけますが、実際の効果について教えてもらいましょう。

先程のバナー乱立問題で、バナーはあまりクリックされないとお伝えしましたが、このスライドバナーもクリック率が多くないというデータも取れています。
ここにもおそらく担当者の思いが色々詰まっていて、キャンペーン情報や会社理念などを出したいと考えているのだと思いますが、もともとクリックされにくいということを理解した上でどうしたらいいかを考えてみてください。
方法としては、例えば下図のようにスライドをとって、エリアを分けて表示するという方法があります。

こうすることで、メインビジュアル①・②・③は常に表示されている状態になります。

ヒーローヘッダーという、トップページに目立つ形で会社理念やキャッチコピー、キャンペーン情報を載せるという見せ方をするサイトもたくさんありますが、いくつか見せたいものがあるのであれば、このようにエリアを分割して多くを表示するという方法もあります。

ちなみにスマホで表示した時は、レスポンシブという技術を使います。
表示画面が小さくなったらメインビジュアル②と③はメインビジュアル①の下に潜り込むようにレイアウト設計すると見やすいかと思います。
下に潜り込ませると、イメージが重なることでだいぶ高さが出てしまいますが、それはデザインの工夫で解決できます。
例えば、潜り込ませるメインビジュアル②と③は横並びにすることによって、スマホでもそれほど高さがなく見やすいレイアウトになるかと思いますよ。

片岡 泰仁

Webサイトのデザイン品質を安定させるには

鈴木 英美

いつも同じ業者さんにデザインの制作を依頼しているにも関わらず、デザインのクオリティが違うというお悩みは多くよせられます。

特に大きめな制作会社依頼した場合に起こりやすいかもしれません。
大手制作会社には、多くのデザイナーが在籍、または外注先として登録しています。デザイナーの予定が空いているかどうかによって担当する人が変わるため、そのデザイナーのクオリティで仕事があがってくるからです。
このような点も踏まえて原因を考えると、基本的には意思疎通がしっかりとできていないという問題があると思います。

例えば、担当者が制作会社のディレクターに「可愛くてキラキラしたデザインでお願いします」といったメッセージを送ったとします。
受け取ったディレクターが特に何も考えずに、「キラキラしている感じの可愛い感じのデザインみたいなものをとりあえず作って」とデザイナーに伝えます。
そしてデザイナーもあまり考えなく作ったものを提出…。
すると、担当者のイメージとは全く違うものができあがることになります。

これまでの工程で何が起きているかというと、「かわいく」と「キラキラした」という言葉のイメージのすり合わせが担当者とディレクターでできていないというのが一番の問題といえます。「かわいい」「キラキラしたもの」という言葉から想起されるものは、人それぞれ違うのです。
ここの例で言うと、担当者は、「かわいい」ものはファンシーなクマのようなものをイメージ、デザイナーの「かわいい」はピンク系のものであると考えているように、それぞれ考えるものが違う可能性が大いにあります。この橋渡し役であるディレクターは、依頼があった時に「かわいくて」がどういったものか「キラキラ」のイメージしているところはどんなものかを、言葉だけではなくて参考のデザインやビジュアルを確認しながら、正確に理解しなくてはいけません。
そして理解したものをデザイナーに正確に伝えてください。
そうすればデザイナーも意図通りにデザインしてくれるはずですので、イメージと違う、間違ったものが出てくることはないでしょう。

同じイメージを見る、ビジュアルを見る、参考資料を見ることで、「私が思っている可愛いとはこういったもので、かっこいいとはこういったものなのです。」というように、イメージのすり合わせをしていくのが大切です。
また、見るだけではなくて、自分がそれを見てかっこいい、かわいいと思った理由を分析してみることを継続しておこなってください。
Webサイトだけではなく、目にしたおしゃれなパンフレットや気になるCMを見た時など「おっ！」と思えるようなものがあったら、なぜ自分の感情が動いたのかを分析するというのが大切だと思います。

片岡 泰仁

SEOに強いWebサイトデザインはあるのか

鈴木 英美

そもそも、SEOを考慮したデザインはあるのでしょうか？

結論から言うと、SEOとデザインに関係はないです。
下図はほぼ同じように見えていますが、中身のHtmlの書き方が実は全然違います。
サイトへの表示はstylesheetを使って見た目を揃えているので、SEO的に正しくなくても見た目では揃えられてしまいます。
SEOを考慮するときはデザインではなくHTMLを正しく理解することが大切になります。

たとえばGoogleでは、Googleの検索エンジンロボットが常に巡回しているわけですが、この検索エンジンロボットがページに入った時に、理解しやすいように正しくHTMLが書かれていれば、ロボットはその通りに理解してGoogleにデータを送ってくれます。
ただし、このHTMLの論理構造が正しくないと、検索エンジンロボットは間違った理解をしてGoogleに送るので、評価が変わってしまうのです。

HTMLは目で見てわかるかと言われるとなかなかわかりません。そこで、HTMLが正しいのか正しくないのかをチェックする無料サービス「W3C（外部サイトに移動）」が役に立ちますよ。
 
検証したいページのソースコードをコピーしてチェックにかけます。
厳密なチェックというわけではないので、Errorが出てきたらいけないのかというと、一概にそうともいえません。Errorがあっても何事もなく表示されますし、SEO的に影響がない時もあります。
ただ、デザイナーやコーダー以外の方がおこなうSEO対策の一助になればと思います。

片岡 泰仁

まとめ

今回ご紹介したお悩み以外でも、Webサイトおけるデザインについて知りたいこと、自社の場合はどう対応したらよいのかなど、もっと具体的に質問してみたいという方は、株式会社あやとりの無料相談会（外部サイトに移動） をご利用ください。

Webサイトの質を上げるデザイン確認のポイントコラムでも、関連する内容を取り上げていますので、当コラムとあわせてご覧ください。