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

前回のWeb系コラムでは、見やすいデザインを「コントラスト」の視点に注目してお話しました。今回は簡単にWeb全体をすっきりさせるデザインの基本的なコツについて説明したいと思います。

多くの情報をWebページに載せるとき、少し騒がしい印象を与えてしまうことがあります。デザインの基本的なコツを押さえて制作することで、ページ全体をすっきりと見せることが可能になります。
ポイントは、同じデザインのものを規則的に並べることです。同じデザインとは言い換えれば「デザイン上の共通の特徴」と考えられますが、このような特徴が存在する場合は色・形を問わず全てが当てはまります。

以下の例を見ますと、画像と文字がワンセットのデザインとなって規則的に繰り返されています。写真がたくさん配置されているデザインですが規則性の美しさによってすっきりとした印象を与えています。

浮世絵のアダチ版画

上の例を少し詳しく見てみますと、画像右下の「ギフトランキング」では背景色「白」と「ベージュ色」が規則的に繰り返されています。同じ色を繰り返すことは単調な印象を与えがちですが、このように繰り返す際に色に変化をつけることで、より印象深いデザインを制作することができます。

同じデザインのものを規則的に並べるというコツは、バナー作成やボタン作成などの狭い範囲の視点においても大変有効です。例えば以下では、上部のボタン部分に同じようなデザインのアイコンが規則的に繰りかえされています。

琉球村

以下も、角丸の形が規則的に繰り返されている例です。

琉球村

多くのWebサイトは規則的なデザインの繰り返しによって構成されています。従って、もし既存のWebページに追加のバナーを作成する場合は、バナーを挿入する周りのデザインに繰り返されている規則がないかどうかを確認して、必要ならばそのデザインを取り入れるという工夫も大切になります。
同じデザインのものを規則的に並べるというコツは、Webページ全体だけでなくバナー作成やボタン作成においても使用することができる、非常に応用範囲の広いものです。ぜひ使ってみていただければと思います。

今回はデザインの基本的なコツとして「同じデザインを規則的に繰り返す」ことでWebページ全体から細部に至るまですっきりと見せることが可能であるというお話をしました。今後のご参考としていただければ幸いです。

（担当：斉藤　万幾子）

前回のWeb系コラムでは、「メインカラー」が来訪者の第一印象を決定し、次のステップであるコンテンツ閲覧にスムーズに導くための大切な要素の一つであるというお話をしました。今回はメインカラーを決めた後、どのように「見やすい」デザインを作るかというお話を、「コントラスト」という視点に注目して説明したいと思います。

まずは「コントラスト」の意味を確認しましょう。
コントラストとは「色の明るさの差」を意味します。赤色、緑色など色の違いは関係ありません。色の明るさの差が大きいことを「コントラストが高い」、反対に色の明るさの差が小さいことを「コントラストが低い」と呼びます。

コントラスト＝「色の明るさの差」です。

見やすいWebページやバナー画像などを作る際には、コントラストの高低を活用することが重要なポイントとなります。
コントラストを活用してデザインを考えるべき理由は大きく分けて3つあります。

1点目の理由は、コントラストの活用により、文字の可読性を上げることが可能だからです。
コントラストを高くすることで、文字の読みやすさが格段に改善されます。例えば、白背景に黒い文字は最もコントラストの高い色設定の一例ですが、画面上でも紙においても、白背景に黒い文字は読みやすいというイメージを思い浮かべていただけるのではないかと思います。掲載する情報量の多いニュース系のWebサイトなどでは、多くの文字を読みやすくするために、背景の色は白に近い色、そして文字の色を黒に近い色を選択することが多いです。

2点目の理由は、重要な箇所の強調が可能だからです。
Webページ全体を俯瞰する場合、視線が最初に向かうのはコントラストの高い箇所です。この点を利用しますと、あるバナーを強調したい場合はバナーと「Webページ全体」のコントラストを高くすることによりユーザーの視線誘導が可能となります。

3点目の理由は、Webページ全体の統一感を実現することが可能だからです。
Webページにおける来訪者の視線を集める最も簡単な方法としては、バナーに赤や黄色などの強い色を使うことがあります。一方でこの方法はWebページ全体の統一感を損なう可能性があるという点も同時に意識する必要があります。強い色を使用せずに来訪者の視線を集めるためには、同色からコントラストの高低の変化をつけることが一つの解決方法になります。前回のWeb系コラムで説明した「メインカラー」が存在する場合は、メインカラーを元にしてコントラストの高低をつけることにより、メインカラーによる印象を強めると同時に、重要な箇所を強調することが可能になります。

今回はコントラストの高低を活用することで、Webページやバナーの可読性の向上、また来訪ユーザーの視線誘導が可能であるというお話をしました。バナー画像制作やWebページリニューアルのヒントとして、参考としていただければ幸いです。

（担当：斉藤　万幾子）

Webサイトの印象を左右する要素は複数存在しますが、コンテンツの内容やレイアウトに目が行く前、言い換えればWebサイトの「第一印象」に大きく影響を与える要素の一つとしては「色」が挙げられます。

「色」は来訪者のWebサイトに対する第一印象を決定し、次のステップであるコンテンツ閲覧に導くための大切な要素です。逆に、第一印象で来訪者に違和感を与えてしまった場合、期待したコンテンツの閲覧をせずに別のWebサイトへと移動してしまう事が多くなります。仮にその場ではコンテンツを閲覧した場合でも、閲覧している最中に違和感を感じさせたことに変わりはなく、来訪者のWebサイトでの滞在時間を短くする一因となる可能性もあります。

UX（User Experience＝ユーザー体験）を考えることの重要性を最近はよく耳にしますが、これは「画面を通しての体験が心地良いかどうかを考えること」と同義です。ユーザーの体験に最も重きを置くUXの視点から考えた場合、心地の良いWebサイト制作には「ユーザーが持つ違和感をできる限り減らすこと」が重要であり、この点からも色選択の重要性をイメージしていただけるのではないかと思います。

Webサイトの印象を左右する色を、ここでは「メインカラー（主な印象を与える色）」と呼ぶ事にします。メインカラーは、業界によって使用頻度の高い色が異なることはご存知でしたでしょうか。例えば音楽系サイトでは「黒」、ECサイトでは「白と彩度を抑えた色の組み合わせ」が比較的多いです。

黒は他の明るい色と組み合わせて簡単に高いコントラストを生み出すことが可能です。コントラストが高いWebサイトは、スタイリッシュな印象を与えやすいため、音楽系では黒がよく使われていると考えられます。また、白と彩度を抑えた色との組み合わせは、商品数が多いECサイトの場合、主役である商品がどのような色であっても活かしやすい点がメリットであり、キャンペーンの際よく使用される彩度の高い色との相性も良い点も、大きなメリットとなります。

業界によって使用頻度の高い色が存在するということは、来訪者がその色自体、あるいは色から派生する印象を好んでいる可能性がありますので、その色の使用を検討することは、よい第一印象を与えるデザインを考える上での一つの入り口になり得ると私は考えています。また、色の選択によって、来訪したユーザーが「自分のためのWebサイト」であるという印象を強めることも可能です。このような点からも、「色」はWebサイト制作において、とても大切な要素であることをつかんでいただけるのではないかと思います。

Webサイトの「色」を決定する際に押さえておきたいポイントとしては、来訪者に対して与えたい印象を先に決定しておくことが挙げられます。例えば、にぎやかで楽しく活発な印象を与えたいアミューズメント系のWebサイトで、黒がメインカラーの場合はどのような印象をユーザーに与えると考えられますでしょうか。お化け屋敷のWebページでもない限り、訪れたユーザーは恐らく予想と異なる第一印象を受けるため、別のWebサイトへと移動してしまう可能性が高いと思います。

従って、まずはお客様が期待していると思われる印象をあらかじめ整理し、その印象を実現可能な色の候補を検討するという順序が良いと思います。ちなみに、お客様が期待していると思われる印象については、業界によって千差万別です。例えば弊社の場合は、メインカラーの青を「信頼感」「清潔さ」「親しみやすさ」などを考慮した結果として選択しています。

一方で、相反する印象を色だけで与えることは難しいという点も押さえておく必要があります。例えば「親しみやすく威厳のある印象」を色の選択だけで実現することは一般的には難しいため、コンテンツやレイアウトとのバランスを考慮しながら、別の実現方法を考える必要が生じます。Web担当者の場合、ちぐはぐな印象を制作会社へ提出ことは、期待通りの制作物が出来上がらない一因となる可能性がありますので、事前に検証を行う必要があります。少しの手間を惜しむことが、後々の出来映えを大きく左右する可能性がありますので、この点はぜひ留意していただければと思います。

今回は「色」が来訪者の第一印象を決定し、次のステップであるコンテンツ閲覧にスムーズに導くための大切な要素であるというお話をいたしました。より良いWebサイト制作のヒントとして、参考としていただければ幸いです。

（担当：斉藤　万幾子）

前回のコラムでは、人気のあるWebページのレイアウトにマジカルナンバーが使われているというお話をしました。今回は、コーディングの基本に立ち返りまして、HTMLで作られたWebページにCSSでデザインを加える3つの方法を見てまいりたいと思います。

1番目の方法は、外部にCSSファイルを作り、それをHTMLファイルから読み込むパターンです。2番目と3番目は、HTMLファイルに直接書き込むパターンです。では具体的に見ていきましょう。

1番目の方法は、headタグの中でlinkタグを使用して、外部CSSファイルを読み込む方法です。

この方法が一般的には最も使用頻度が高いものとなります。コーディングを行う際は、外部CSSファイルを配置する場所に合わせてhrefの中身を適宜書き換えましょう。今回の例では、index.htmlのあるディレクトリにcssフォルダがあり、そのcssフォルダの中にあるstyles.cssを読み込んでいます。

2番目の方法は、headタグの中にstyleタグを置き、CSSのプロパティを直接書く方法です。

この方法では、CSSはstyleタグを記述したWebページにのみ適用されます。従って、例えばあるCSSを特定の1ページにだけ適用させたい場合の記述として適しています。もし複数のWebページに同じデザインやレイアウトを適用したいのであれば、この方法ではなく、前述の1番目の方法をお薦めします。

3番目の方法は、タグに直接CSSを書く方法です。

CSSを記述したタグにのみ、そのCSSが適用されますので、かなり限定的な書き方になります。1ページの中でもごく一部の場所にだけ特定のデザインを使用したいという場合にこの方法を活用することが個人的にはよいと考えています。

1番目はメンテナンス性に優れた方法なので、複数のWebページを持つWebサイトに向いています。2番目、3番目はそれぞれに適する場面を使い分ける判断が必要になります。
また、外部のCSSを読み込む別の方法として、styleタグの中に@importを置くことで、外部のCSSファイルを読み込むことも可能です。しかしこの方法は一部のブラウザで読み込み速度が少し遅いとの計測結果もあるようですので、使用する際は少し注意が必要かもしれません。CSSでデザインを加える3つの方法を適宜使い分けて、効率良くCSSを活用する際の参考としていただければ幸いです。

（担当：斉藤　万幾子）

前回のWeb系コラムでは「アイコン」が使用される具体例ついてのお話をしました。
今回は、Webに隠されている数字について、その使いどころに着目しながら、具体例を見ていきたいと思います。

メイン画像の下に、３つのコンテンツが並んでいるレイアウトをご覧下さい。
かなりポピュラーなデザインなので、似たようなデザインを何回か見た事があるかもしれません。
なぜ、このデザインに人気があり広く使われているのか、これを今回は解説して参りたいと思います。

Flickr

皆さんは「マジカルナンバー」という言葉を聞いた事はおありでしょうか。
マジカルナンバーとは、短期記憶の容量が5プラスマイナス2であることを発見した、アメリカの心理学者ジョージ・ミラーの考案した言葉です。
具体的には、マジカルナンバー＝5プラスマイナス2、すなわち「3～7」となり、この分量であれば、人間はパッと情報を見てすぐに記憶できると言われています。

Webページ制作では、このマジカルナンバーを重視する事が大切です。
なぜなら、人間が「パッと見てパッと判断できる」言い換えれば「短期的に記憶できる情報の量」には限りがあるからです。
プレゼンで覚えておくべき「数字」 コラムにもあるように、この数字を覚えておく事で、Web制作においても作業の効率を高める事ができます。

ここで、今回のFlickrのサイトをもう一度見て参りましょう。

真ん中下を見ますと、コンテンツ内容がマジカルナンバーの「３つ」にまとまっています。
この「３つの構成」はWebのコンテンツ制作において非常に有効です。
Webページは、まず情報を目でざっと探して、必要な箇所をつまみ食いのように読まれる特徴があります。
これをもう少し掘り下げて考えてみますと、「情報をざっと目で探す」には、コンテンツの構造が単純である必要があります。
そして「必要な箇所をつまみ食いのように読まれる」ためには、コンテンツの概要が把握しやすい工夫が必要があります。
この２点を表現したものが、今回のFlickrのページであると私自身は考えています。
Flickrのページを確認しますと、構造を単純化させる「３つ」のコンテンツが存在し、それぞれのまとまりの中にはその概要を短くまとめてあることがわかります。

マジカルナンバーを使ったコンテンツ制作は、その内容をまったく知らない初心者の方向けのレイアウトとして、特に利用価値の高いものであると私自身は考えています。
また、このレイアウトは、多様なサービス内容をシンプルに知ってもらいたい場合のレイアウトとしても有用です。
人気があり、直感的に理解しやすいレイアウトの裏側には「マジカルナンバー」の存在があるという点を、ぜひ覚えておいていただければと思います。

皆様が文章や情報をユーザーにわかりやすく提示する際の一助となれば幸いです。

（担当：斉藤　万幾子）