この記事の目次 - Contents -
そもそもデザインって何のためにするのか考えたことある？
ほら、事故起こした際の言い訳で「アクセルとブレーキ間違えちゃった」ってやつがあるじゃないですか。
普通自動車第一種免許を持っていて、自動運転ではないクルマを動かしたことがある人なら、もれなくわかると思うんですが、アクセルとブレーキって全っ然違うじゃないですか。
見た目も踏み心地も匂いも手触りも、何もかも違う。
なぜ全然違うのかというと、加速のペダルと停止のペダル、真逆の操作を間違えたりなんかしたら事故につながるから。
これ間違えるのは、もう運転しちゃいけないレベルであり、そんな人に免許を発行している公安委員会が「責任取れ」っつう話なんですよ。
ということで、「運転する人が感覚的に間違えるはずのないものを作ること」。これこそがデザインなんです。
機械の操作や場所のガイドなんかを、『考えず』に『感覚』で目的に導くための《形》こそが。
デザインというと、大半の人がカッコよくてキレイなものだと思っているみたいですけどね。変わったものを作るべきとか。
だから「デザイン性を重視してるから使いにくい」なんて言葉は激しく矛盾してるんですよね。
カリフォルニアのNu Metal バンド、KoЯn（コーン）のロゴは、メンバーのジョナサン・デイヴィスが利き手と逆の手で殴り書きしたデザインが使われていますが、しっかりバンドのイメージを映したアイコンになっています。目的達成。
目的があるのなら、サイトはすべてブログ型に
というわけで、ここではユーザーがそのサイトに来れば目的を達成できる＝発信側のビジネスにつながるものこそが、Webデザインであるということで進行します。
じゃあその、目的を達成しやすいデザインとは具体的にどういうもんなんでしょう。
それは漢字ひらがなカタカナを混じえ7文字で表現すると、『ブログ型にする』です。
ブログは、
- 継続して書いていけば、何度も見に来てもらえる
- 来てもらうごとに接触が増える
- コンテンツを増やしやすい構造であり、ページが多ければ検索にもヒットする確率が高まる
という素敵な特徴があり。
だいたい、更新のない会社案内しか載ってないようなサイトなんざ一度見たら、再びアクセスしようなんてことは思わないですもんね。
WordPress デザインで成果出す、って？
そもそも成果ってなに？なにをもって成果っていうの？を定義してみます。
- 検索エンジンのシステムに対しても親切な設計
- 困ってる人がサイト上に書かれている解決策にたどり着きやすい
- 結果、自社サービスに関する『問合せ』とか『申込み』がある
この順番で、目的である3に辿り着くこと。これを成果とします。
コンビニの冷蔵庫にはミネラルウォーターとお茶が間違われないようにデザインされており、駅の案内板は目指す出口まで迷わないようにデザインされており、バイオハザードの洋館は迷いやすいようにデザインされている。
要は、目的達成のためのガイドなんです。デザインてのは。
「感じるな、考えろ。」
ってことです。
1. 検索エンジンのシステムに対しても親切な設計にしろ
検索エンジンに親切な、つまりはSEOの効果を考えたデザインってどんなのでしょう。
注目のパーツは3つ
［1］メニュー
ヘッダーやフッターの部分に横一列に並べてある、サイト内のカテゴリへのリンク。
いわゆるグローバルメニューとかグローバルナビゲーションとか言われているあれ。
［2］パンくずリスト
画像：吉野家公式ウェブサイト
たいてい上記ヘッダーにあるメニューの直下にあって、ページの階層を示すもの。
［3］サイドバー
画像：ハム速
です。いずれも、ほとんどの有名テーマは気を利かせて初めから装備されている機能です。
もし付いていなくたって大丈夫。
WordPressにはプラグインという素敵な機能拡張があるのですから。
で、なんでこれらが注目ポイントになるのかというと、適切にこれらの場所にサイト内のコンテンツへの内部リンクを付けることによって、クローラーがスムーズに巡回してくれるからなのです。
クローラーとは
クローラーって何かって？
ネット（Web）上の文書や画像やその他のファイルを周期的に収集してインデックス（索引というかリストというかそういう形）化するためのプログラムのことです。
クローラーとはCrawlerと書くわけで、あの赤ん坊のハイハイが語源ながら競技的には一番速い泳法であるクロールCrawlと同じつづりです。
なのでWebという海に浮かんでいるファイルをクロールで泳ぎながら集めてる様子を想像すれば、うっすらとイメージがわくでしょう。
これらのファイルを集めた後に整理してインデックス化し検索結果の順位を付けていくわけですが、デザインでもって、これをやりやすくしてあげるわけです。
2. 困ってる人にとって目的である解決策にたどり着きやすく
人間の、視線誘導の型で有名な2つあるじゃないですか、いわゆるF型とZ型。
F型
左上の位置から右に一直線、徐々にポイントを下に移動しながら全体へ。つまりFというかEというか。
Z型
上段を見て中間は斜め読み、そして下段へ行く。
もちろん日本語で縦書きのサイトならこの限りではありませんが、世のサイトのほぼ10割近くが横書きであることを考慮すると、F型やらZ型やらのその有効性や価値が感じられてきます。
2カラムか3カラムか、サイドバーは右か左か
ちなみにカラム（Column）とは、新聞や雑誌など印刷物の段組みの、縦方向のかたまりのことをいいまして、まんまWebページでのレイアウトでもこの言葉を使用しています。
Columnをカナにすると〈コラム〉となりそうなもんですが、そこは評論やエッセイなどのコラムと日本語において区別するために分けたのかもしれません。英国の首都 London を「ランドゥン」というようなものですね。
2カラム vs 3カラム
で、下の華麗な図をご覧いただき、右と左で見比べてください。いったいどちらが推奨のレイアウトなのか。
一刻も早く本文に書かれているであろう課題解決の内容に辿り着きたい、という訪問者の気持ちになり、さらに人の視線の動きをZ型やF型に照らし合わせるといかがでしょうか。見えてきませんか。
そうです。最初の視点が左上にくることを考えると、左のサイドバーの、なんと邪魔なことでしょう。
2カラムの場合、サイドバーは右か左か
と、なると。当然2カラム同士で争ってみても、サイドバーを右に置くべきか左に置くべきかは論じるまでもありませんね。
一番気を使わなきゃならないことは、検索した答えを求めて訪れてきたユーザーを、一秒も戸惑わせてはいけないのです。
理屈ではなく感覚で、答えまで連れてってやらなければならんのです。
3. 結果、自社サービスに関する『問合せ』とか『申込み』、いわゆるCTA (Call to action) がある
そうですね、みんなとりあえずの終着点はお金なんですから、訪問者の方々にタダの情報を提供するだけでなく、その中の何名かには問合せやメルマガ登録などのアクションを促したいところですよね。
そう、CTA (Call to action) です。日本語では『行動喚起』なんて訳されています。
よく記事の下にある
- 「この記事が気に障ったらいいね！しよう」
- 「雑穀クリエイターに合格するための5つのメソッド（無料）ダウンロード」
- 「『水素水のひみつ』メールマガジン（無料）を購読しませんか」
というようなアレです。
いわゆるCTAといえば、記事直下に置かれたこれらのカード型のリンクをイメージしがちです。
しかしあくまで『行動喚起』ということならば、クリックあるいはタップしてもらうための配置や文言、すべて含めて考えていく必要があります。
自分がいくら「こんな目立つところにリンク置いてあるのに！気付かないなんてバカなの？」と思っても、訪問者は意外にわからないもんです。
なので、メニュー・サイドバー・記事の中・フッター等々あらゆる箇所に設置しておくのが本当の優しさではないでしょうか。
きちんと記事、つまりコンテンツで訪問者の期待に応えられているならば、宣伝のように複数の場所にCTAを設置していてもそんなうるさく感じないと思いますし、うるさく感じるのならばその人とは合わないんだと割り切りましょうよ。
情報はすべて無料で取れるだけ搾り取ってやれ、なんて人も世の中いっぱいいますからね。
まとめ
デザインてのは、最終的に〚自社サービスに関する『問合せ』とか『申込み』などなんらかのアクションをとってもらうため〛にするのです。
目的達成のために存在するんです。
もちろん記事あってのデザインです。なのでいくらオシャレなイケメソでも中身がスカスカならば、まともな人からは簡単に愛想つかされるし寄ってくるのはバカばかり、なんていう悲劇も待ってますよ。
最新記事 by 高橋 としあき (全て見る)
- 実店舗や自営業者の電子決済導入は損か得か？ - 10/30/2017
- アイキャッチ画像の文字組みにも、ちょっとだけこだわってみる。 - 08/24/2017
- Web上で「他者と差別化する」ための、競合調査の手順 - 08/15/2017