ウェブサイトのレイアウトを考える

ウェブサイトを作成するにあたっては、事前に様々な事柄を考えておく必要があります。

基本的なところでは、ウェブサイトのタイトルやURLなど、公開以前に設定が必須となるものもありますし、そもそも何を書くのか、という動機的なものもあるでしょう。また、企業など営利目的でウェブサイトを運営する主体は、(お金が余っている場合は別として)誰をターゲットにどのようなメッセージを送るのかをあらかじめ決めておかなかればいけません。

このサイトは以前書いたように完全な見切り発車で立ち上げてしまった訳なのですが、それでも一応タイトルやURL、ホームページを運営する目的や書く内容などはある程度事前に考えています。

そこで本日は、これらの情報を読み手に効果的に伝える手段の一つであるウェブサイトのレイアウトについて考えてみたいと思います。

レイアウトとは何か

ところでレイアウトとは何でしょうか?

本題に入る前にインターネット上の百科事典であるWikipediaの定義を参照してみましょう。

レイアウト(英語: layout, lay-out)とは、デザイン(紙、ウェブ等)、建築設計、インテリア(展示会場・展覧会場設計、ショールーム設計などを含む)、書籍・雑誌・新聞などの編集等々において、何をどこにどのように配置(割り付け)するかということ、また、そのような配置(割り付け)をする行為も意味する。

要は配置のことですが、強調するならばどこに何をどのように置くかといったところでしょうか。新聞や展示などは様々な種類の情報やものが対象となりますが、ウェブサイトの場合は記事やメニュー、サイドバーやウィジェットなどもうちょっと限定されていますよね。そうすると読み手に対して、どこに何をどのように配置すれば効果的に情報が伝わるかと言えるのではないでしょうか。

どのようにレイアウトするか

それでは、一体どのように配置するのが適切なのでしょうか。

ネット上に数多あるウェブページを見ても、正解を一つに絞るのは難しそうです。ブログサービスなどでは、デザインの設定画面で「左カラム(左サイドバー)」か「右カラム(右サイドバー)」か、あるいは「両カラム(左右サイドバー)」かを選ぶところがありますが、最大公約数的にはこのあたりが妥当なところなのかもしれません。どれを選択するかは、つまるところ(外観も含めた)目的に応じて自然に決まってくるものなのでしょう。

では、目的とレイアウトの関係とはどのようなものでしょうか。「読み手に対して、どこに何をどのように配置すれば効果的に情報が伝わるか」という観点からすると、まずは読んでもらうことを目的に据えたいところですが、世の中にはその枠に収まらないウェブサイトもあります。

例えば、SEO目的のサイトです。今は検索エンジンが対策を取ったため、それほどでもなくなりましたが、一昔前は特定のキーワードの検索結果で上位表示させるために、当該キーワードを羅列したり、上位表示させたいサイトへのリンクを貼っただけで内容がないウェブサイトなどがありました。その時はクローラー(検索エンジンがウェブサイトの分析に使うプログラム)の動きを意識して、左にキーワードを並べた記事、右にサイドバーを配した右カラムが優位なんてことも言われていました。私も昔Webマーケティングの仕事をやっていた時に「クローラーは上にあるキーワードの方が重要だと考える」と教わりましたが、サイドバーの位置なんてCSSで変えられるので、あんまり意味はないんじゃないかと思っています。実際のところは分かりませんが…

また、これもSEOと関係があるのですが、バナー広告だらけのページもありますね。あれも特定のキーワードの検索結果で上位表示させて、とにかく人を集めて一つでも多くクリックしてもらうのが目的なので、一番目立つところにバナー広告が貼り付けられています。一番といえば、ド真ん中なんでしょうけど、そこまで主張しない場合は、人の目の動きを意識して配置すると効果的らしいです。とはいえ、最近は検索エンジンの方が内容の薄っぺらいページを上位表示しないようになってきているので、左のサイドバーに置くか、記事の上の方にさり気なく貼り付けたりしているのが多いように見受けられます。

ただ、人間の目の動きを意識するのは、普通のウェブサイトでも大切なことだと思います。「Zの法則/Fの法則」なんていうのがありますが、うまく活用すれば読みやすさに繋がりそうです。結局のところ、読んでもらってナンボですから。アラビア語とか右から左に読む人にも通用するのか気になるところですが…

で、結局どうするのか?

さて、それで当ウェブサイトのレイアウトはどうなったのか。

現在のところは、ご覧の通り両カラムになっていますが、将来的にこのままにするかはまだ決めていません。一応、ホームページ作成の目的は「自分広告」なので、読んでもらうことが第一なのですが、広告運用とかSNSマーケティングとかもやってみたいというのが本音です。ただ、間違ってクリックさせるようなことはしたくないので(そもそも広告のガイドラインにも抵触すると思いますし)、外部のウェブサイトに移動する場合は、それが分かるようにしたい。そこで暫定的に採用したのが、左サイドバーは記事のカテゴリーやタグなどを中心とした内部リンク、右サイドバーはSNSのウィジェットやバナー広告などの外部リンクという両カラム構成です。

ただ、これも最終解ではなく、右サイドバーが全くクリックされないような状況であれば、改善を図ることになると思います。結局のところ、PDCAサイクルを回しつつ、目的が達成できているか確認していく、というのは最適解なのかもしれません。

見直すことになったら、またその経緯を記事にしていきたいと思います。