と言っても本が買えるパートナーサイトは2つしかなかったのですが、一方ではマイルが倍増して貯まるキャンペーンをやってました。
もう一方では、特にキャンペーン等はなく、普通に通常のマイルが貯まるだけでした。

最初はキャンペーンをやってるほうから買おうと思ったのですが、いざそのサイトを開いてみるとどうも気が進まず、買う気になれません。というのは、

• 聞いたこともないサイト（企業）であること
• Webサイトのデザインが安っぽいというか、微妙・・・

という理由です。
取るに足らない理由と思われるかもしれませんが、消費者としての視線だと「何となく」気が乗らないのです。
聞いたことも無いサイトだからと言っても、航空会社のパートナーサイトになっているくらいなのですから、おそらくきちんとした企業が運営しているのだと思われます。
ただ、そのショッピングサイト（デザイン）を見ていると、
「せっかく会員登録してもすぐに閉鎖されてしまうのでは？」
とか
「個人情報やクレジットカード情報は大丈夫？」
とか感じてしまうのです。

結局、僕はキャンペーンでマイルがお得なこのサイトを利用するのはやめて、もう一方のサイト（こちらは誰でも知っているような有名なショッピングサイト）で本を購入しました。

ホームページは企業の顔

Webデザインというのは、まさにその企業の顔（看板）です。
特に、「名前を聞いたことの無い企業」の場合、ユーザーはそのホームページの見た目の印象で、企業に対して先入観を抱いてしまいます。ここで注意しておきたいのは、「誰でも知ってるような有名企業」の場合、ホームページ以前に既にユーザーからの信頼感が構築されているので話は別だということです。

つまり、実際は立派なビルを構えるような大きな会社だったとしても、名前を聞いたこともなく、そのビルを訪れたこともないユーザーにとってはホームページの印象がすべてになってしまうわけです。
いくら会社概要ページなどに立派な数字を掲載していても、ユーザーは、そのページまでじっくり読み進んでくれる前に、ぱっと見たときのホームページの印象が「すぐに閉鎖されそう」とか「うさんくさい」というものだったら、その時点でユーザーは引き返してしまう可能性も高いでしょう。

これではせっかくホームページを開設している意味が無い、というよりもまさに逆効果（イメージダウン）になってしまっていると言えます。こういう状態ではホームページなんて無いほうがまだマシです。

逆の言い方をすれば、ホームページのデザイン次第で、実際以上の信頼感をユーザーに与えることができるということです。それほどデザインは重要なものなのです。

一応補足しておきますが、ここで言う「良いデザイン」というのは、何か画期的なデザイン性や奇抜さ、芸術性などを意味しているのではなく、使いやすくて見やすくて、きちんとプロのデザイナーが作ったと判別できるようなクオリティの高さと信頼感を備えているデザインのことです。

デザインの重要性はWebサイトの分野（種類）によって違う

たまに、SEOなどのノウハウ本などを見ていると、デザインにこだわってもあまり意味がないというような記述を見かけることがあります。
例えばアフィリエイト（広告収入）などを目的としている無料の情報サイトなどの場合、確かにデザインにあまりこだわっても意味はないように思います。
（と言ってもある程度以上のレベルの見やすいデザインは不可欠だと思いますが）

これで誤解しないで欲しいのは、この件はサイトの分野によって考え方がまったく異なるということです。
つまり、デザインにとことんこだわる必要がある分野もあれば、そこまでこだわらなくても結果には大差ない分野もあるというわけです。

例えば、会社案内サイトやショッピングサイトは、ホームページをぱっと見た感じの印象がとても重要な分野の主たるものだと思います。

逆に、例えば、ブログで何かのノウハウを無料で公開して広告収入を得ているサイトや、写真やイラストなどの素材集を無料で配布しているサイトとか。こういうサイトではユーザーはコンテンツ（掲載内容）にしか興味がないので、そこそこ使いやすいデザインだったらまったく問題ありません。
しかし、これらのサイトが「無料」でなくて「有料で会員制」ということになると話は別です。ユーザーは、デザインも含め、サイト全体に信頼感を強く求めるようになるでしょう。

僕は整理整頓が好きな性格なのでそんなに煩雑にはしていないつもりだったのですが、ハードディスクの大容量化に甘えていたということなのか、とりあえず急いで削除する必要もないから・・と残っているファイルが大量にありました。
最近は以前にも増して整理が好きになりつつある僕なので、今回のハードディスクの交換はむしろ良い機会だったようにも思えています。

整理整頓は爽快感がたまらない

近頃、いらないものを捨てたときの何とも言えない爽快感にハマっています。
掃除するのはいろんな意味でメリットがあるとは思いますが、一番はこの爽快感による精神衛生上のメリットなんじゃないかとも思えます。

以下には、この精神衛生上のメリット（爽快感）のための僕個人なりの仕事の進め方（というか超細かいスッキリ術のようなもの）を書くつもりなんですが、別に目新しい情報でも何でもない地味な話なんで、興味がなければここで離脱してください。

効率的な業務遂行のために整理整頓を

会社に入って制作の仕事をやっている人は、同僚が作ったデータを引き継いで編集することもよくあると思います。
僕も昔は制作会社で働いていましたし、今も外部の制作会社さんと連携してプロジェクトを進める機会がよくあります。

そんなときに、前任者が作ったデータがあまりにも煩雑だといろいろと効率が悪く無駄な時間を浪費してしまうことがあります。
これはデザインがごちゃごちゃしていて分かりづらいとかいう意味ではありません。
ファイル名にはじまり、フォルダの中に必要なファイルが無かったり、不要なファイルが紛れ込んでいたり。あとはPSDやPNGファイルのレイヤーの構造だとか。
ちなみに中身の話なのでお客さんには関係の無い話です。

編集する必要が今後発生しないレイヤーはグループごと結合する

フォルダやファイルの名前くらいだったらルールを決めている会社も多いでしょうし、それぞれの担当者レベルで整理整頓している人も多いと思います。
PSDのレイヤーをグループごとにまとめて整理している人も全然いると思います。というか普通は整理しているのかもしれません。レイヤーをグループ（フォルダ）にまとめるのは本当に便利ですもんね。昔のPhotoshopには無かった機能ですが、これが登場したときはまさに画期的に使い勝手が向上しました。

ただ、レイヤーをグループにまとめて、編集不要なものはグループごとロックしている人はいるんですが、これを一枚のレイヤーに結合しちゃっている人は今まで見たことがありません。（自分以外）

例えばWebサイトのデザインを作るとき、ヘッダー・フッター・メニューの部分なんかは全ページ共通なことも多いわけですが、こういう部分は最初に作った1ページ目で編集可能な状態にしておけば、その他のページでは編集可能にしておく必要がないですよね？であればグループごとに結合しちゃいましょう。
結合してしまえば、レイヤー数が減るのでスッキリして他の部分の編集がやりやすくなりますし、もちろんファイルも軽くなるという目に見える利点もあります。
その結果、仕事の効率があがってミスも減るとかのメリットが考えられますが、もちろん僕が思うに最大のメリットはこの爽快感（スッキリ感？）です。

後から変更になった場合に編集できないと困るという人もいるかもしれませんが、そういうときは、編集可能にしておいた最初の1ページ目に変更を反映させてそれを書き出せばいいだけですよね？

HTMLコーディングをする前に、画像の状態でクライアントに確認を取らなければいけない場合は、編集可能にしておいた最初の１ページを変更したら、そのレイヤーグループを持ってきて、また結合させて同じ位置に配置しておけばいいだけです。
別々のファイルにそれぞれ同じの編集を加えるよりも間違いが少なく手間もほとんど変わりません。プロフェッショナルの皆さんなら一瞬で終わることでしょう。

一応補足しておきますが、何か理由があるなら結合する必要はないです。もちろん。

不要なレイヤーは削除する

非表示にしているようないらないレイヤーがあれば削除しておきましょう。
例えばタイトルの装飾パターンを2つ作って自分の中でどちらを採用するか迷ってしまった場合とか、制作途中であれば、一応削除しないで非表示にしておく理由もあるとは思いますが、制作が完了してクライアントにもOKをもらった後であれば、補欠バージョンのレイヤーはもういらないですよね？であれば削除しましょう。
スッキリしてとてもいいです。

このファイルを後から別の人が編集する場面がもしかするとあるかもしれませんし、補欠なんかが隠れているのはややこしくて間違いの元です。

レイヤースタイルのカラーオーバーレイ

さらに細かい話なんですが（笑）、Photoshopのレイヤースタイルで、「カラーオーバーレイ」だけが適用されているレイヤーがあるんだったら、そのスタイルは結合させちゃったほうが気持ちいいですね。

その他のレイヤースタイル（ドロップシャドウとかグラデーションオーバーレイとか）は、あとから微妙な調整をしたり、レイヤースタイルのコピー・ペーストをしたりすることが多いのですが、カラーオーバーレイだけの場合は結合させても特に困ることってないですよね？たぶん。
まあ、さすがに僕もここまでは徹底してるわけじゃないんですが、余裕があるときはたまにやってます。

こんな細かい話を長々と書いてしまいましたが、最後まで読んでくれた皆さんありがとうございます。
それではまた。

これはもちろんメニューに限った話ではなく、例えばコンテンツ内部のデザインにおいても同様で、同じ種類（並列）の情報であれば同じ形で同じように並べておくべきですし、逆に、別の種類の情報を同じ形にして一緒に並べてしまうと、わけが分からなくなってしまいます。

何年も前のことですが、僕が制作させていただいたWebサイトで、トップページをこういうレイアウトでデザインしたものがあります。

ごく普通な感じで、ヘッダー、左サイドにメニュー、コンテンツエリア、フッター。と分かれています。
メニューは左サイドにまとめてずらっと並べていたのですが、ひとつだけ目玉コンテンツがあり、それに移動するための大きなボタンをコンテンツエリアの上のところにドカンと置きました。

サイトが完成してしばらくして、更新作業をご依頼いただけたので打ち合わせに伺ったある日のこと。

クライアント：
「知り合いに、ホームページに【目玉コンテンツ（仮名）】が載ってるから見てね！と言ったのに、後日、その知り合いから【目玉コンテンツ】がどこにあるか見つけることができなかったと言われた」

と、クライアントに相談されました。
私としては、トップページの一番目立つところにボタンを配置したはずだったので、見つけられないわけがない！と一瞬思いましたが、そのクライアントの知り合いが言うには、

クライアントの知り合い：
「左サイドのメニューが並んでいるところばっかり探していたので、真ん中にメニュー（ボタン）があるとは思わなかったのでよく見なかった」

というのです。
この意見は未熟な僕にとってかなり勉強になりました。

ユーザーは自分に必要なところだけを探す

多くの場合、Webページの上から下まで一言一句もらさずに熟読してくれる人なんてほとんどいません。
読み物系のコンテンツ（ブログ等）を除き、Webサイトは基本的に辞書みたいなものなので、ユーザーは自分に関係ない部分には興味がありません。ぱぱっと眺めて、関係がありそうなところをとりあえずクリックして進んでいき、探していた情報を見つけて目的を達成したら、さっさとサイトから出て行きます。
ずらずらと書いてある挨拶文なんか読んだことありますか？
よほどその挨拶している人に興味でもない限り、熟読する人なんてほとんどいないと思います。

その時のサイトはトップページに掲載してあるコンテンツ（内容）はごく少ないものだったのですが、それでも見つけられなかった・・・ということは、本当に左サイド以外の部分は一切見ていなかったのだと思います。

結局その時は、コンテンツエリアの大きなボタンはとりあえずそのままにしておいて、左サイドメニューの中にも同じ項目をひとつ追加しました。
ちなみになぜ最初からそうしなかったのかというのは、その【目玉コンテンツ】が他のページとはかなり異質な内容だったので、メニューを並列にするのはちょっと変だと思ったためです。
なので、メニューのエリアに項目を追加はしましたが、あくまで他のメニュー項目とは異質なコンテンツであると分かるようなデザインにして差別化しました。

情報の種類ごとにブロックを作ってレイアウトする

色々なサイトを作っていると、クライアントによっては、少しでも空いている場所があるととにかく何かを詰め込もうとする方がいらっしゃいます。
例えばとてもよくあるのが下図のような例。

中央のエリア（コンテンツ）が長くて、サイドのメニューの下に空白が出来ているとき、メニューやバナーはもう無いので、それ以外の文章とか何かで、何とかして空白部分を埋めようとされる方がいらっしゃいます。
ここにメニューやバナー以外のコンテンツを入れた場合に心配なのが、異なる種類の情報が同じエリアの中に混在してしまうため、デザイン上のルールの一貫性が崩れ、ユーザーに混乱を与えてしまうことです。
極端な例ですが、下図のようなページってとても分かりづらいですよね？
たぶんその存在にすら気付いてもらえないメニューも発生することでしょう。

メニューはメニューで、コンテンツはコンテンツで、それぞれを同じエリアの中にまとめておいて、双方が混ざらないように線引きし、きっちりと分けてレイアウトすることは、分かりやすいサイトを作るためにとても有効な手段です。

なんだかメニューの話ばかり書いているうちに長くなってしまいましたが、最初のところに書いた通り、これはメニューに限った話ではありません。
コンテンツエリアの中では、並列の情報であることをユーザーに直感的に伝えるデザイン上の工夫があると、とても分かりやすくなると思います。

先日、テキストリンクのスタイルに関するエントリーの中で、訪問済みリンクの色の変化について少し書きました。
青いテキストはまだ閲覧していないページ、紫になっていたら既に閲覧済みのページ。と、使い勝手の向上につながる情報を色でユーザーに伝えることも可能なわけです。

目次

• 情報の種類と色を関連付ける
• 現在位置を把握するために色を使う

色を選定するときは、それぞれの色が持つ特性や相性などをよく踏まえる必要がありますが、とりあえず今回はそっちの話にはふれません。

情報の種類と色を関連付ける

例えば、リンクが設定されているテキストの色を青にしているサイトでは「青い文字＝リンクが設定されている」という関連付けがされているということになります。
この場合、リンクではないテキストを強調だとか見た目のデザイン上の理由で青にしてしまうと、ユーザーはそれをテキストリンクなのかと誤解してしまう可能性が生じます。
このようにユーザーを混乱させないために、最初に定めたルールを一貫して守りデザインを制作することが大切です。

ちなみに画像のボタンは、テキストリンクと同様にリンクが設定されている要素なのでテキストリンクと同じ色使いだとさらに良いかもしれませんが、何らかの事情で難しければ、ボタンはボタンで統一されていれば特に問題はないと僕は思っています。

その他にも場合によって色々と考えられますが、例えばレイアウトを色で明確に区別したり、もっと細かいパーツ（見出し、箇条書き、引用、注釈、補足、問い合わせ先など）に、特定の色やスタイルを関連付ける（例：薄い背景色を敷いて他の文章と区別する等）と、特に文章がズラ～っと長いページとかでは格段に分かりやすくなり、見た目にも良いアクセントになります。
ただし、ひとつのデザインの中で色の数を増やしすぎるとまとまりが無くなり、様々な意味で逆効果になってしまうので注意しましょう。

このページの上に戻る↑

現在位置を把握するために色を使う

Webサイトはページ数が多くなればなるほど、ユーザーに構造を把握してもらうのが困難になります。
大抵の場合、ユーザーはひとつのWebサイトにじっくり時間をかけてはくれません。
また、検索エンジン経由で訪れるユーザーはトップページから入ってくるとは限りません。

現在サイト内のどのページを閲覧しているのかを分かりやすく伝えることは、ユーザーがWebサイト閲覧する上でとても役に立ちます。
このためには「パンくずリスト」や「メニュー項目をフォーカスしておく方法」がよく使われます。
フォーカスというのは、並んでいるメニュー項目の中で現在位置の項目だけを別の色に変化させるなど、他のメニュー項目と差別化させておく方法です。

また、大規模なサイト、複数のジャンルの製品を扱っている企業などのサイトで時々使う方法として、カテゴリごとにテーマカラーを変えてデザインすることがあります。
この場合、色は変化してもサイト全体の統一感を保てるようなデザイン上の配慮が必要です。（完全な別サイトとして別デザインを制作するなら問題ありませんが）

このページの上に戻る↑

分かりやすいWebデザインを作るなら、閲覧者に不要な学習を強制しないことは大事なので、本来はテキストリンクのスタイルは変更しないほうが無難です。特に意味がないなら、わざわざ独自のルールを作るのはやめましょう。
しかしながら、場合によってスタイルを変更したほうが良いこともあります。

目次

• 青色よりも下線が大事
• 強調のための下線は紛らわしいのでやめよう
• 下線が鬱陶しい場合は代わりにアイコンを使う
• 訪問済みリンクの色の変化について
• ボールドへの変化はレイアウト崩れの原因になる

以下にいくつか例を挙げて解説していきます。

青色よりも下線が大事

Webサイトをデザインするとき、配色のデザイン上の都合でどうしても青だと判別しにくかったり、他の色との相性が悪い場合があります。
そんな場合は色は青じゃなくてもいいと思いますが、下線はつけたほうがいいです。
僕が思うに、テキストリンクに関しては色よりも下線のほうが重要です。ブラウザで閲覧する文章において、他に下線をつけるべき要素がないからです。
今はテキストリンクの色が青でないサイトなんていくらでもあるので、閲覧者も青以外のテキストリンクには慣れていると思うんですが、実際に自分が閲覧しているときってどうですか？

この場合の色は出来れば他のテキストとは別の色にしたほうがいいですが、これもケース・バイ・ケースというか、文章の中で部分的な単語に対して頻繁にリンクを設定する場合、行の中で文字色の変化があまりに頻繁に繰り返されることによって、文章が読みにくくなってしまう場合があります。
そんなときは色は同じでも下線だけはつけておきましょう。

このページの上に戻る↑

強調のための下線は紛らわしいのでやめよう

たまに、リンクではないテキストに、強調したいという理由で下線をつける人がいますが、これはかなり紛らわしいのでやめたほうがいいです。
インターネットとは関係ないWordとかの文書だったらもちろん構いませんが、インターネット上に公開される文書では、下線があるとクリックできるように見えてしまいます。
例えばこの部分、クリックできそうに見えませんか？

このページの上に戻る↑

下線が鬱陶しい場合は代わりにアイコンを使う

下線が繰り返されて多すぎるとごちゃごちゃして鬱陶しい印象になってしまう場合があります。
例えば行間があまり開いていなくて、リスト項目になっているテキスト。
つまり下のような場合です。

こんな場合、下線を外したほうがすっきりして見やすくなるので、代わりに矢印のアイコンとかをつけておくとクリックできることが分かりやすいと思います。

このページの上に戻る↑

訪問済みリンクの色の変化について

ブラウザの標準仕様では、訪問済みリンクは紫系の色に変化します。これも本来はこのままのほうが分かりやすくて良いとは思います。
ただ、なぜ訪問済みのリンクは色を変えておく必要があるのかを考えると、当然ながら、自分が訪問済みのページと未訪問のページを判別するためです。
つまりこの判別の必要が特に無い場合は、訪問済みだからってリンクの色は変える必要がありません。
例えばこのページの右側にいくつか設置されている「このページの上に戻る↑」といテキストリンクは、訪問済みでも色を変える必要がありません。

なお、訪問済みリンクの色に関しても、デフォルトの紫系の色がもっとも分かりやすいのは言うまでもありませんが、前述の通り配色のデザイン上の都合で紫を使いたくない場合もあると思われ、そんなときは未訪問の色と別の色だったら特に問題はないと思います。
どちらにしろこの場合も下線はつけておいたほうが分かりやすいです。

このページの上に戻る↑

ボールドへの変化はレイアウト崩れの原因になる

ホバー状態（テキストリンクの上にマウスポインタがのった状態）で、テキストをボールド（太字）に変化させているサイトを見かけることがあります。
大胆な変化のほうが分かりやすいと思ってこのようにしているのだと思いますが、ボールドにすると単語の横幅まで変化してしまうため、右に続く文章全体まで動いて（ずれて）しまい、デザイン的に微妙です。
また、横幅の狭いボックスの中でこれをやると、単語の横幅が広がることによってホバーのときだけ折り返されてレイアウトが崩れてしまうこともあります。
きっちり整ったデザインを維持するためにも、ボールドへの変化はやめておくことをお勧めします。

このページの上に戻る↑