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

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

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

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

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

レイアウトとは何か

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

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

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

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

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

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

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

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

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

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

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

で、結局どうするのか?

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

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

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

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

ウェブサイトのデザインについて

今週二度目の投稿です。

本日はこのウェブサイトのデザインについてお話したいと思います。

皆さんお気付きの通り、このウェブサイト、とても読みづらいです。

現在の状態は、レイアウトらしきものは確認できるものの、記事の入るメイン部分とサイドバーがベタッとくっついており、どこからどこまでがサイドバーで、どこからどこまでが読むところなのか、判別しづらい見た目となっております。

検索バーなんて途中で切れちゃってますし、背景も潔いほどの白ですし…

まさしくインターネット黎明期のホームページはたまたカラーテレビ以前の代物か!といった様相を呈しております。

さすがに(近い)将来は今みたいな見た目ではないと思うので、敢えて現在の状態をキャプチャしておきますが、こんな感じ↓です。

デザインがされておらず、読みにくい状態のウェブページ

その理由については、RIM Worksのセンスがないとか、手抜き工事であるとか諸説あるのですが、「割り切った」または「開き直った」というのが本当のところです。

それは、一つにはウェブの世界に「考えるよりもやった方が良い」という哲学(というか風潮)があるということもありますし、もう一つは自分の性格を考えてのことです。

本来の私の性分ですと、事前に色々下調べをして完全に準備ができてから始める、という流れが自然なのですが、これまでの経験上、それだといつまで経っても始まらないという状態に留まりがちでした。

こういうのを何回も繰り返しているうちに自己嫌悪に陥っていくのですが、そこで始めないよりはマシとかどうせ最初の方なんて誰も見てないなどと開き直ることを覚え、こういう恥知らずなことも平気でこなせるようになってきたのです。

ただ、これって必ずしも悪いことではないんです。

これだけ価値観が多様化した世の中になると、自分で完璧だと思っていたものが他人にとってはそうでもない、というようなことが多く起こるようになります。また、自分の作品に磨きをかけている間に流行が過ぎてしまう、というようなこともあるでしょう。

それならば、取りあえず必要最低限のものを出して、そこから改善していった方が生産的である、という考え方が出てきても不思議ではありません。

自己弁護のように聞こえる、というかそれ以外の何物でもないのですが、業界とか状況によっては取りあえず始めてみることが大事だったりするのです。別にそれを体現するためにこんな残念デザインを放置している訳ではないのですが…

ちなみにこのウェブサイトはWordPress(ワードプレス)で作っているのですが、設定しているテーマは_s(アンダースコア・エス)を基にしたものです。今後はこのツルっとした見た目を改善していく、というのもブログで紹介していきます(おっ、そんな隠れた目的もあったんですね)ので、乞うご期待!

念のため、最後に一言。

お仕事としていただいたウェブサイトは注文通りに納品いたしますので、どうぞご安心を!

ウェブサイト開設のお知らせ

はじめまして!RIM-Worksと申します。

何か団体っぽい物言いで始まりましたが、実際には一人でやっております。

そんな私は何者かと申しますと、都内某所に妻子と暮らす30代の男でございます。

以前はサラリーマンとしてIT企業に勤めていたのですが、現在は訳あって主夫あるいはイクメンという名の無職者となってしまいました。とはいってもリストラとかではなく、もっと家族と時間を過ごすために自発的に退職したのです。

カッコよく言うならば、フリーランス・エンジニアといったところでしょうか。

さて、それでこのウェブサイトは何かというと、端的にいってしまうと私という商品の広告です。

それは、ある時はポートフォリオ・サイトであり、またある時は作業日誌であり、そしてまたある時は商品のレビューという名のアフィリエイトであるようなものです。

時折、日々の恨みつらみを吐き出すブログ的なものにも変わります。

基本的に自己本位な広告ではありますが、似たような境遇の人あるいは何か情報をお探しの方のお役に立てれば嬉しいです。

ふつつかものではございますが、以後何卒よろしくお願い申し上げます。