このサイトにおけるデザインの機能について

ご覧の通りこのサイトのテーマはSEOであり、ビジュアルデザインは非常にあっさりとしたものになっています。とはいえ手を抜いているというわけではなく、明確な指針のもとに綿密に設計してこの形になっています。このサイトで重視しているデザインの機能について、重視している順に紹介します。

1. テーマの類似した他サイトとの差別化

一度の訪問でもユーザーに独自の印象を残し、次に訪問したときには「ああこのサイトは前にも見たことがある」と思い出してもらえること、つまり記憶に残すことというのが、このサイトのデザインにおいて最も重視しているポイントです。

このサイトは「SEO 検索エンジン最適化」などという差別化も何もない陳腐なサイト名で運用しています。これは、このサイトの開設が2002年と古く、その当時はSEOや検索エンジン最適化などいった言葉は一般に認知されておらず、十分にユニークなものだったことの名残です。

しかしそれから数年のうちにSEOは一般化し、このサイト名はすっかり陳腐化しました。それでもサイト名を変えたくないとなれば、それ以外の部分でできる限りの差別化を図るしかありません。デザインにおける差別化の目標は具体的には次の2点です。

  • 他の類似のサイトとの違いを明確に印象づけ記憶してもらう
  • よく見かけるサイトとして親近感や信頼感を持ってもらう

上記はいずれもユーザーの記憶と密接に関係したことだという共通点があります。ここで威力を発揮するのが色彩設計です。ウェブページを見て最初に目に飛び込んでくる情報は、画像のモチーフや文字情報ではなく色彩であり、印象や記憶に残るのも色彩だからです。

現在のグリーン基調の配色は2006年に自分でリデザインしたときに決めたものを踏襲していますが、その時点ではSEO関連の他サイトにグリーン基調のものはあまりなかったというのが、この配色を採用した理由の一つです。しかしこの配色には他の理由もあります。

2. 信頼性やプロらしさを演出する

このサイトは現状のところ情報発信が中心で商売っ気のない運用ですが、僕の仕事上の看板という意味合いも持っています。つまり情報発信のためのサイトであると同時に、専門家としての僕をアピールするという目的も担っているというわけです。

そこで課題となるのが、信頼性や堅実さの演出です。また、テーマであるSEOの性質にはスパムのイメージが常につきまとうことから、安全性を演出する必要も感じていました。まとめると、ここでの目標と解決策はそれぞれ次のようなものになりました。

  • 安全性の演出:自然(オーガニックw)で穏やかな印象を伝えると共に、青信号に見られるように安全のイメージがあるグリーンを基調とした配色にする
  • 堅実さの演出:基調色のグリーンに対する補色である赤系統の色の中から、堅実な印象を持つダークレッドを補助色として採用する
  • 信頼性の演出:新奇性よりも堅実さを重視して調和の取れた配色を意識し、使いやすさに配慮して標準的で平凡なレイアウトを採用する

このサイトの場合、イメージ作りにおける役割のほとんどは配色が担っています。より基本的な部分でいえば、配色が調和のない雑然としたものだった場合、どうしても素人っぽさが出てしまい、信頼性やプロらしさとはほど遠いものになってしまいます。

また上記で補助色としたダークレッド(少しブラウンに近い)は、見出しの文字色として、続く文章を読むための勢いをつけるという役割も同時に担わせています。これはひいては、文章を読みやすさを助けるという意味でもあります。

3. テキストを読みやく理解しやすくする

写真サイトや動画サイトでない限り、基本的にはどんなサイトもすべて文字情報が主役です。つまりウェブデザインにおいて、文字の読みやすさや文章の理解のしやすさは、何よりも優先させるべき重要事項だということです。

読みやすさや理解のしやすさを向上させるために最も必要なことは文章そのものの品質を高めることですが、視覚的なデザインにおいてもある程度は補うことができます。ここでの目標と解決策はそれぞれ次のようなものになりました。

  • 余計な装飾をしない:目の疲労を抑え集中力を維持しやすいように、見出しや引用、リストなどのマークをはじめとして、画面内にゴテゴテした余計な装飾をしない
  • 文字サイズを大きくする:ニュースサイトなど文字情報主体のサイトの文字サイズを参考に大きめの文字サイズを設定する
  • 文字と背景に明度差をつける:文字色と背景色に高いコントラストを確保すること、また本文文字色を無彩色にすることで、疲労を軽減する

デザイン上の余計な装飾をできるだけ省くということには、個人的に特にこだわっているポイントです。文章を読んで理解するためには集中力の維持が不可欠ですが、過剰に装飾されたデザインのサイトは文章に集中できません。

これは僕の個人的な問題かもしれませんが、例えば見出しや引用やリストなどの装飾でチェックマークや矢印などカラフルなマークがついていたり、見出しに本文となじまない背景色が設定されていたりすると、集中力はどんどん落ち、読む気が失せて、理解度も低くなりがちです。

同様に、内容と無関係な画像(笑顔で握手する外人の写真とか)を記事上部に掲載したり、誘導用の画像などで賑やかにサイドバーを飾ることも、集中力を低下させ、記事の通読を妨げます。こうしたことを避けるため、本文の部分にフォーカスしたレイアウトとデザインにすることも重視しています。

このサイトは記事ごとの文字数がかなり多めで、1記事あたりでソフトカバーの書籍の6〜8ページに相当する文字数が詰め込まれています。このため記事を通読するためにかかる時間も長くなりがちで、疲労の軽減や集中力の維持はデザイン上の重要な課題となっています。

4. ページの表示を速くする

ページが表示されるまでの待ち時間の長さは、一訪問あたりのページビュー数に直接的に影響します。待ち時間が長くなればそれだけ集中力が低下し、読み進める気力が失われていくからです。ページの遷移は瞬間的にできることが理想です。

  • HTTPリクエスト回数を減らす:CSS Sprite で画像をまとめたり、外部CSSを1ファイルにまとめたりすることでリクエスト数を減らして高速化する
  • ファイルをGZIP圧縮転送する:サーバでmod_deflateを有効にしてGZIP圧縮転送し、転送量を削減する。Minifyよりずっと効果的
  • JavaScriptの解析を遅延する:JavaScriptの解析はページのロードやレンダリングを中断するため、JavaScriptの読み込みはCSSやページ本文より後で読み込ませるか、非同期にする
  • 余計なものを削除する:装飾やウィジェットや広告のうち、どうしても必要なもの以外はすべて削除する。高速化だけでなく読者が気を散らす要素を減らすことにもつながる

このサイトで実施していることは主に上記のようなものです。ページの表示を速くすることは、この項の冒頭で示したような数字に表れやすい効果もありますが、それよりも重大なのは主に読者の心理面への影響です。このサイトでは信頼性や堅実さを重視していますが、表示が遅ければそれらが台無しになってしまうためです。

速いサイトを見ても特に何も感じないでしょうが、なかなか表示されないサイトを見れば誰でも、その制作者や運営者は能力的に劣っていると感じるはずです。また場合によっては、失礼で不遜な印象を受けるかもしれません。

飲食店や訪問先の企業などで、なかなか案内してもらえず玄関で長時間待たされて不愉快な思いをした経験は誰にでもあるはずですが、この不愉快さの理由は、時間を無駄にさせられたということに加えて、訪問客を軽視する失礼で不遜な態度を店や企業から感じるからです。これは避けなければなりません。

5. ソーシャルボタンと広告のクリック率を高める

本文やナビゲーションなどのサイトとしての必須の要素以外でこのサイトに表示されているものは優先順位の高い順に次の通りで、それぞれが括弧内に示した役割を担っています。

  • 各種ソーシャルメディアの共有ボタン(新規読者の獲得)
  • RSS購読リンク、Twitterフォローボタン、Facebookページいいね!ボタン(訪問者の固定読者化)
  • Adsense広告(コンテンツの収益化)

これらのクリックは利用者にとってもらいたい具体的なアクションであり、このサイトにおける一種のコンバージョンに相当するような意味を持っています。コンテンツを邪魔しない範囲内でこれらを最大化することもまた、デザイン上の課題の一つです。具体的には次のように配置しています。

  • 共有ボタン:記事を読み終わった直後のアクションを想定し、記事下の一等地に共有をうながすメッセージと共に配置
  • 購読ボタン:あちこち見て回った後のアクションを想定し、記事下の関連記事のリンクより下に購読を促すメッセージと共に配置
  • Adsense広告:サイトの閲覧に飽きて離脱するタイミングでのアクションを想定し、ページ上部とサイドバー下部に配置

この項で述べているアクションを引き出すという部分については、ここまで述べてきた他の項目と比較すると少し優先度が低くなっています。これは当然のことで、ユーザーにとって優れた体験を提供することが優先であり、アクションを求めるのはその後だからです。

終わりに

このサイトのデザインの方向性はわりと消極的なもので、何か特殊なことをして積極的に好印象を狙うようなアプローチはとっていません。特別な美しさや派手さなどは、サイトの性質や目的からみて不要であるか、場合によっては害になると考えているためです。

ウェブサイトは眺めて楽しむものではなくユーザーが操作するものですから、実用品のプロダクトデザインと同様、使いやすさを優先した機能美が求められます。ましてこのサイトは情報提供を中心としたものですから、主役である情報が前面に出ている必要があり、デザインはそれを補強するものでなければなりません。

そうしたことからこのサイトでは、悪印象を与えないことを第一に、統一感やシンプルさ、読みやすさ、スピードなどを重視したデザインになっています。とりわけ機能重視の配色にはこだわりを持っていますが、これは友人の坂本邦夫先生の影響です。(いつかこのサイトの配色を採点して欲しいものです)

何の派手さもない文字ばかりのこのサイトでも、ここまで述べてきたように、達成したい目標に沿ってわりと細かく考えて作られていたりします。SEOというと、何かデザインとは無関係な(場合によっては対立する)ものと考えられがちですが、実のところSEOとデザインは密接な関係があるのです。

この記事について