アクセス（Access）講座一覧｜フロンティアリンク
Access/Excel/VBA/Webプログラミングの1日速習講座

前回のWeb系コラムはリンクの基本的なデザインと、予測可能性についてのお話をしました。
今回は、Webサイト全体の段組みを考える際に大切な「余白」に焦点を当ててみたいと思います。

余白とは、ボタンや画像を配置して余った場所、ではありません。
余白とは「意識的に」使用するものであり、余白を活用することで、文章やボタン・メニュー等の「まとまり」をユーザーにより分かりやすく認識させることが出来ます。結果として、伝えたい情報をより伝えやすくしたり、より分かりやすい操作が可能となります。

美ゆ輝

例えば上記のWebサイトについては、左のサイドバーを見ますと、珍しい縦書きのリンクとなっています。
縦書きのリンクですので、一般的なリンクに付く下線などもその性質上入っておりませんが、クリックしやすくするため、十分な余白がとられています。
縦書きのリンクという「クリック可能と思わせる予測可能性」が低い現状を、十分な余白を配置することでリンク一つ一つを把握しやすい構成になっていることが確認できます。

このように、ゆったりした余白をとることで、余白が隔てるパーツの一つ一つをすっきりと見せることができます。
これはリンクに限ったお話ではありません。
例えば次の例などでは、より広い要素を各グループとして、余白で区切られていることが確認いただけるかと思います。

鈴懸

装飾は多くありませんが、余白を生かして、下のグローバルナビゲーション、左のサイドバー、店の画像などの要素を、それぞれグループとして表現することに成功しています。
画像と画像の間にある余白と、左のサイドバーまでの余白にも違いがあります。これにより、それぞれの要素が別の意味を持つことを、余白で表現しています。

このように、余白を活用することで、色や枠線等のデザイン要素の利用を抑えつつ、情報を整理して表示することが可能になります。言い換えれば、余白の取り方に違いを持たせることによって、情報をグループ化して整理するレイアウトが可能となります。
これを逆の視点で考えますと、異なるグループ要素の余白の取り方を統一してしまうと、グループの役割の違いを把握しにくくなる可能性が高くなるということでもあります。

余白には文章・ボタン・リンクなどの要素を隔て、そのグループのイメージを把握しやすくする役割がありますので、全体のバランスを考えながら余白の設定を行う必要があります。
実際の余白設定については「デザイン的な好み」も絡んできますので、一概に「これがよい」という話をすることは難しいですが、多めの余白は優雅な印象（ただし、行き過ぎると間延びした印象）を与え、少なめの余白は緻密さや緊張感といった印象に繋がります。最初のうちは試行錯誤もあると思いますが、余白をきちんと設定できるようになると、安定感のある美しさをより実感できると思います。

以上、本日は余白の取り方と、その際の意識すべきポイントについてご紹介いたしました。

（担当：斉藤　万幾子）

前回のWeb系コラムではボタンのデザインによってユーザーの操作性が変わってくるというお話をしました。今回のコラムでは、Webページにおけるユーザーの操作性を決める上で、ボタンと同様に重要なポイントである「リンク」についてのお話をしたいと思います。

ユーザーがトップページに来訪したとき、別のWebページに移動してもらうためには、ボタンまたはリンクを押してもらう必要があります。
従って、ボタンだけでなくリンクについても、ユーザーが「クリックできそうだ」と思わせるための仕掛けが必要ということになります。
では「クリックできそうなリンク」の特色とは、どのようなものでしょうか。

一般的なリンクの条件は以下の通りです。
１、下線が引かれている
２、青色の文字である

実際、このようなリンクは様々なWebサイトでよく目にするのではないかと思います。
実はこの「なんとなくクリックできると分かる」という予測こそが、リンクにとっては重要な要素となります。
リンクが「リンクである」ことを正しく認識できないと、別のページにユーザーを誘導する機能が働かないことになりますので、結果としてリンク先のWebページの閲覧が行いにくくなる可能性が高くなります。
ですので、リンクの下線を外したり、色を変える際には一考が必要かもしれません。
ちなみに現在では、リンク先を訪問した場合にリンクの色が紫色に変わることも、一般的な認識になりつつあるようです。

ここで、少し別の視点のお話をしましょう、青色の特色についてです。
人によっては識別しにくい色が存在し、特に、赤色や緑色の区別がつきにくくなる場合が多いそうです。
一方で、青色は誰でも比較的判別しやすい色とされています。
ですので、リンクに青色を使うということは、誰もが識別しやすいということに加えて、ユニバーサルデザインともマッチしていると言えます。

最後に少し例外的なリンクも見てみましょう。

楽天

下線の無い青色文字が、リンクとなっています。
このようにデザインした理由としては、ページ内でのリンク数が多いため、すべてに下線を引くとかえって視認性が悪くなってしまうからではないかと思われます。
リンクの下線を削除し、リンクの色だけを変更しているサイトの例としては他にもWikipedia等がありますが、一般的にはページ内でのリンクが多いWebサイトの場合、リンクの下線を削除して色だけを変更することが多いようです。

以上のように、視覚的な美しさとWebサイト自体の機能のバランスをとりながら、有効なリンクを作っていただければと思います。

（担当：斉藤　万幾子）

前回のWeb系コラムでは、サイトにおける視線についてのお話をしました。
今回はさらに話を絞って、どのWebサイトにもある「ボタン」についてのお話をしたいと思います。

ボタンは、ユーザーが操作を行うインターフェースであると同時に、作り手にとってはユーザーを誘導するためのツールでもあります。
この2つの側面を軸に、ボタンの特徴と設置時の注意点について確認していきたいと思います。

ボタンは、まず「ボタンである」とユーザーに認識してもらう必要があります。
ボタンが「ボタンである」と認識させるためのポイントは、
・形状
・位置
の2点となります。

セゾンカード

まず、ボタンの形状から説明しましょう。
Webサイトには様々なデザインがあり、Webサイトごとに異なるボタンがあります。
これらのデザイン等を踏まえた上で、まずは「押せそうな」デザインを考える必要があります。
具体的には、長方形、円形、角丸等を使って「立体的」に作ることで、ユーザーに「押せそうだ」という予測を与えることができます。平面のWebの世界において、3次元の感覚を共有させるデザインが、ボタンの形状においては大切なのですね。
デザインの上で可能ならば、周囲と異なる色で、はっきりした境界線をつけることも、より「押しやすいボタン」の形状に繋がりますので、おすすめです。

天気予報コム

次に、ボタンの位置について説明しましょう。
いわゆるグローバルナビゲーションやサイドバーのように、どのWebサイトでも同じような位置にあるようなボタンに対しては、そのボタンを押すと何かアクションが起こるという予測を持たせやすくなります。
言い換えれば、一般的によく目にする場所以外に存在するボタンは、それ自体がボタンなのか、あるいは単なるデザインなのかがユーザーにとっては判断しにくくなりがちということになります。

では、どのようにすれば、このような「よく目にする場所以外に存在するボタン」の存在を、ユーザーに分かりやすく知らせることが出来るのでしょうか。
一般的には、アイコンや画像等をボタンと併せて活用することで、ボタン自体の存在をアピールすると共に、ボタンを押した際の動作をユーザーがイメージしやすいようにすることで対応します。
例えば、スタッフ紹介ページへ繋がるリンクを貼ってあった場合には、人のアイコンまたは写真をボタンに配置します。これにより、リンクの存在をユーザーに対してより強く印象づけることが可能になります。

デザインに「クリックしたくなる配慮」を加えることで、ユーザーがWebページを閲覧する際のストレスを減らすことが可能になります。このポイントをぜひ頭の片隅に置きながら、ボタンを作成してみていただけたらと思います。

（担当：斉藤　万幾子）

前回のWeb系コラムまで、3回連続で「色の持つ効果」についてのお話をしました。今回は色についてのシリーズの番外編ととらえていただければわかりやすいかもしれません。色の配色によって来訪者の目の動きをコントロールすることができ、それをサイト設計に生かすことの重要性についてお話をしたいと思います。

そもそも「すべての情報をすべて伝えたい」ということは、なかなか難しいです。「伝えたい情報に優先順位をつける」ということをサイト設計の準備の時点で決めておくことが望ましいです。優先順位の高いものや先に読んでもらいたい箇所を目立たせることで、来訪者の目の動きをコントロールすることができます。そのための最も手軽に使える手段の一つとして「色」の活用があります。

基本的な方法としては、大切な部分には強めの目立つ色を使い、その周囲には強めの色を引き立たせる色や余白を確保します。そうすることで「伝えたい情報」と「伝えたい順番」を明確化することが出来ます。この方法を頭に入れながら、いくつかのWebサイトをみることもよい勉強になるかと思います。

もう少し具体的な作業方法についても触れておきましょう。まず、もっとも重要な部分や先に読んでほしい箇所には強い色を使います。その周囲には彩度が低い色を使い、重要な部分がより目立つようにします。余白を多めにとるものよい方法です。
そして、二番目に重要な部分や読んでほしい箇所は、もっとも重要な部分よりも目立たせてはいけません。基本的には同じようにしてデザインを決めますが、注意して色や余白を選んでいくことになります。三番目に重要な部分や読んでほしい箇所も、それと同じように決めていきます。

強く、彩度も高い、目立つ色と聞いて、初めに浮かぶのは「赤」かもしれません。
バーゲンセールの広告などでよく見られますが、赤は視覚的にも心理的にも強い印象を与えることができます。

LIVING AND DESIGN

しかし、すべての重要な個所に赤を使うべきかというと、そうではありません。Webサイトのデザインに合った「目立つ色、視線をつかまえる色」というものがあります。
この色を使うことで、Webサイトの特色を生かしたまま視覚を誘導することができるのです。

たとえば、彩度の高い黄緑色を使って視線のコントロールに成功しているのが、このWebサイトです。

宮城野高等学校同窓会

彩度の高い黄緑色が、Webサイトに来てまず最初に視線を集めます。うっすらとみえる葉っぱの画像との相性も良く、若葉を感じさせるようなWebデザインです。
黄緑色の箇所のまわりには、白い余白が適度にとられてあり、それによって視線の誘導がより容易になります。

また、ロゴの色とも合う濃い目の明るい青を使って、視線の誘導に成功しているのがこちらのWebサイトです。

みなと銀行

フォーマルな印象を強める濃い青を使い、銀行という業種に合った色で必要な箇所を目立たせています。目立たせる箇所以外は、コンテンツ自体も白か薄い水色にしています。このようにロゴ等の企業カラーを重視した配色にすると、Webサイト自体のまとまりも一層強まる場合があります。

これまで見てきたように、サイト設計における色の決め方としては、まず目立たせたい箇所に使う「強めの色」と、その周辺や背景に使う「背景の色」を決めておくと良いでしょう。
「背景の色」は通常は彩度が低い色を使うことが多いです。これにより、彩度の高い色を「強めの色」として使用することができます。もちろん、彩度の高い色を背景の色に持ってくることもできますが、彩度の高い色を長く見続けていると目が疲れてくることがあります。なので、キャンペーンサイト等インパクトを与えることが狙いのWebサイトを除き、通常は使わないことが多いです。

このように、サイト設計の前に以下の2つを決めていくことで、これから作成するWebサイトにおいて想定される来訪者の目の動きを事前にシミュレーションすることができます。

・どこをまず読んでほしいのか、どこに注目を集めたいのか
・強めの色と背景の色

また、この2点を決めてから取り掛かることで、時間のかかるコンテンツ内容を公開に即した、整理された形で考えることができます。

（担当：斉藤　万幾子）

前回のWeb系コラムでは「色の持つ効果」についての第二回ということで、白を取り上げました。
今回はシリーズの3回目、「灰色」についてです。
灰色の使われどころに留意しながら、Webサイトを見ていきます。

「灰色」を使ったWebサイトも多く目にすると思います。
そもそも「灰色」のイメージを考えてみると、雲り、曖昧など、あまりよくない言葉があるかもしれません。一方で、「灰色」を使うことで、都会的でシャープな印象をより強めるなど、すっきりと洗練された印象を導くこともできます。このような側面を活用すれば、Webサイトをワンランクアップさせることも可能といえるでしょう。

具体的に、Webサイトをみていきましょう。

Audi

灰色を全体にもってくることで、知的で、内面からにじみでるような格好良さがうまく表現されています。グラデーションのかかった灰色を背景におき、高級車にふさわしい質感を与えています。
また、ポイントとなっている彩度の高い赤色があります。無彩色が中心のWebサイトでは、彩度の高い、やや強めの有彩色を使っても、うるさい印象にはなりにくいです。むしろ、ポイントとなる色として重宝できるということを、覚えておくとよいかもしれません。

ちびまるこちゃんのたのしくわかるミツウロコ

灰色は基本的に無機的な色で、どちらかというと冷たい印象を与えます。その場合は、画像を使うことで、その印象を薄められることがあります。
比較的キャラクターの色がカラフルであっても、薄い灰色の背景が与える穏やかさによって、キャラクター同士がうるさくなりすぎずに、うまくまとめられています。

CODA

有彩色と組み合わせがしやすい灰色の特徴が、うまく出ているWebサイトです。彩度の高い緑色やオレンジ色に注意が向きやすく、伝えたい情報への視線の誘導がとてもスムーズにデザインされています。

無彩色で主張をあまりしない灰色のポイントを押さえて、Webサイトのデザインに是非活用してみて下さい。

（担当：斉藤　万幾子）