目立つバナーの作製 #2　色の誘目性

投稿日時：
カテゴリ：HTML・CSS・Webデザイン

前回のWeb系ブログコラムでは「既存サイトに新規バナーを追加する」際に検討すべき要素として「色の視認性」ついてお話ししました。今回はシリーズの第2回目として「色の誘目性」について説明したいと思います。

色の誘目性とは、簡単に言うと「人目の引きやすさ」の事です。
色には目立ちやすい色があります。例えば赤、オレンジや鮮やかな青などは注目を集めやすい色です。一方で濃い灰色や鈍い緑などはあまり目立たない色になります。イメージとしては、鮮やかな原色は色の彩度が高いと考えるとわかりやすいと思います。このような誘目性の高い色をバナーに使用することで、容易に人目を引くことが可能です。

それでは、目立たせたいバナーに誘目性の高い、言い換えれば彩度の高い色を使用するだけで良いかと言うと、そう単純ではありません。バナーに使用する色の組み合わせによっては、第1回でお話した視認性の高さを確保できなくなる可能性もあるので、使用する際には注意が必要です。確認になりますが、色の視認性とは、字やモノの認識しやすさの度合いのことでした。
例えば、誘目性の高い真っ赤な背景色の上に赤いりんごの画像を配置しても画像は目立ちません。逆に何の画像が配置されているかを読み手に判別させるというストレスを与える可能性もあります。その場合は、真っ赤な背景色を修正して、具体的には誘目性を確保するための赤は細い枠線のみで使用するにとどめ、背景色には白かそれに準じた明度の高い色を使用する、といったバナー自体の視認性の高さをしっかりと保つ工夫が大切になります。

別のパターンとして、Webサイトのテーマカラーに誘目性の高い赤などを多く使用するデザインがあります。この場合単純に赤色を使用しても、周りに同じ色が並ぶため、期待する誘目性を実現することは難しいです。その場合は「補色」の性質を利用すること、解決することがあります。補色とは、下の色相環の図で対立する色同士は互いを最も引き立てあう関係にある色のことです。黄色と組み合わせて最も目立つ色は紫ですね。この性質を利用すると、例えば緑をバナーに使用することで、元々誘目性の高い赤が多く使用されているWebページであっても、特定のバナーに誘目性の高さを追加することが可能になります。

鮮やかな色の原色をそのまま使う場合、色の効果をストレートに伝達するにはとても良い方法ですが、デザインとの兼ね合いで少し浮いてしまう場合もあります。その場合は彩度や明度を少し増減させることで全体のまとまりが良くなる場合があるので、試行錯誤を行うことで期待する色を実現できることが多いと思います。

今回は、誘目性の高い色を使用することで人目を引きやすくなるが、視認性を損なわないための工夫の有無も考えながら使用することが大切である、というお話をしました。今後にお役立ていただけましたら幸いです。

（担当：斉藤　万幾子）

jQuery外部ライブラリ「Colorbox その2」

投稿日時：
カテゴリ：VBA・Javascript・PHP・その他プログラミング全般

不定期掲載「jQuery外部ライブラリ紹介」
今回は前回紹介したjQuery外部ライブラリ「Colorbox」の続きを紹介します。

前回のサンプルはコチラで、画像ファイルをポップアップ表示しましたが、今回はインライン機能を使用したポップアップ表示を見てみましょう。
サンプルはコチラです。実行結果とソースコードを確認してみましょう。

	<head>
		<meta charset='utf-8'/>
		<title>Colorboxのサンプル</title>
		
		<!-- 「colorbox.css」「jquery.js」「jquery.colorbox.js」を組み込む -->
		<link rel="stylesheet" href="./colorbox.css" />
		<script src="./jquery.js"></script>
		<script src="./jquery.colorbox-min.js"></script>
		
		<script>
			$(function(){
				
				/*
				id1にcolorboxを適用する。
				inline:trueでインライン機能をONにする。
				*/
				$("#id1").colorbox({inline:true, width:"50%"});
			});
		</script>
		
	</head>
	<body>
		<p>
			<a id="id1" href="#inline" title="インラインで表示">表示する</a>
		</p>
		<!-- 下記の要素をポップアップ表示する。最初は非表示にしておく。 -->
		<div style="display:none">
			<div id="inline">
				表示したいHTMLをこちらに記述してください。
			</div>
		</div>
	</body>

これも色々なサイトで使用されています。
colorboxメソッドのプロパティに「inline:true」を指定する事により、このような機能を簡単に実現できます。
このお手軽さがColorboxの特徴なので、ぜひ参考にしてみてください。

（担当：奥田　英太郎）

ファイルに含まれる「情報」を確認する

投稿日時：
カテゴリ：エクセル・パワーポイント・ワード

WordやExcelなどで作成したファイルを社外にメールで送る、または媒体に保存して配布する機会は多いと思われます。そのファイルに「個人情報」や作成途中の情報が含まれていて、簡単に見ることができるのはご存じでしょうか。
ファイルを右クリック→ [プロパティ] で表示されるダイアログの [詳細] タブを確認すると、作成日時の他に「作成者」「前回保存者」「会社」などの情報が確認できます。

その情報を誰でも見ることができると、問題になる事があると思います。
例えば、下請け会社が制作したデータを客先に納品したり、他の人が作成したファイルを編集して別のデータに変更することもあるでしょう。
また、下記も修正や削除を忘れがちなものとして挙げられます。
・作成途中に確認のために付けた「コメント」
・別のデータを元に作成したときの、以前のヘッダーやフッター
・Excelの非表示の列や行
・PowerPointのノート

それらを一つ一つ確認していくのは手間がかかりますし、見落としもあります。
Office2007以降では、下記の方法で一度に削除が可能です。

1)ファイルに含まれる情報の確認方法
（2007）[オフィスボタン]→[配布準備]→[ドキュメント検査]
（2010）[ファイル]タブ→[情報] →[問題のチェック]→[ドキュメント検査]

2)ファイルに含まれる情報の削除方法
[検査] →検出された項目の [すべて削除]

（担当：瀧川　仁子）

話の「順序」における論理思考とは

投稿日時：
カテゴリ：プレゼンテーション・ロジカルシンキング

ビジネスパワーアップコラム＜ロジカルシンキング編＞　第十三回

前回のロジカルシンキング編コラムでは、論点の関連づけを考える際の思考方法である「帰納法」についてのお話をしました。帰納法で考える際には、

1. 複数の論点に存在する「類似点」を見い出すこと
2. その類似点に適用可能な「共通キーワード」を考えること

以上の2点に留意することが基本であることを押さえておく必要がありました。

これまでの3回のコラムでは「論点同士の関連づけ」に関する考え方を採り上げてきましたが、ここでもう一度「ピラミッド思考の原則」を思い出してみたいと思います。第七回のロジカルシンキング編コラムにてお話しました通り、話を上手に広げる際には「ピラミッド構造」を意識することが重要でした。ピラミッド思考の原則とは、

・掘り下げ＝「縦方向思考の原則」
・広がり　＝「横方向思考の原則」
・優先順位＝「順序の原則」

この3つの原則をまとめ上げたものであり、物事を考えるときには「掘り下げ」「広がり」「優先順位」の3点を常に考慮する必要がありました。

これまでのコラムではこれら3つの原則事項のうち、「縦方向思考の原則」「横方向思考の原則」及びそれに関連する「論点の関連づけ」についての説明をしてきました。今回のコラムからは、ピラミッド思考の原則を構成する最後の要素である「順序の原則」についてのお話をしていきたいと思います。

皆さんは、プレゼンや商談、あるいは社内会議等の場面で、「聞きたい話はこの話ではないのに」「いつになったら本題が始まるのだろう」などと感じたことはありますでしょうか？　これまで説明をしてきた「掘り下げ」「広がり」及び「関連づけ」は、論理的に話を展開する上での重要なポイントであることには間違いありません。しかし、この「いつになったら本題が・・・」というイメージで分かるとおり、「説明の順序」が適切でなければ、個別の論点・話題がどれだけ論理的に説明されていたとしても、全体としての効果は大きく損なわれてしまいます。ですので、「論理的な話の構成を考える」上では、「順序」も非常に大切な役割を果たすことをまずはイメージしていただければと思います。

説明の順序を検討する際の最初のポイントは、自身が使用している論証法が「演繹法」と「帰納法」のどちらであるかを確認することとなります。演繹法は「ロジックライン」のイメージから分かるように、「大前提 → 小前提 → 結論」という流れが固定されています。そのため、演繹法を使用している場合には、ロジックラインの流れに従って順番を構成すればよいことになります。一方で、帰納法を使用している場合には、グループ化した各構成要素同士の順序を論理的に決定する必要があります。例えば東南アジアの構成要素の説明順序について、「ベトナム」「タイ」「マレーシア」と説明するか、「タイ」「ベトナム」「マレーシア」と説明するかを「論理的な理由に基づいて」決めなければならないということですね。

では、実際に「論理的な順序」を考える上での具体的な方法を説明したいと思います。順序の原則においては、論点同士の順序に関し、以下の3つの順序のいずれかを適用します。

・時系列順
・構造順
・重要度順

これら3つの順序の意味を簡単に説明しますと、

・時系列順＝因果関係もしくは実行ステップの順序
・構造順＝目に見える様子をそのまま書き表した順序
・重要度順＝類似性に基づくグループ内の度合いによる順序

となります。

説明の順序を考える上で「適切な順番」に悩んでしまうケースはよくあると思います。ですが、実際の「論理的な順序」を考える上では、実はこの3通りのパターンのいずれかが必ず適用されることになります。従って「順序構成については『時系列』『構造』『重要度』のいずれかしか存在しない」と覚えてしまえば、シンプルに考えを進めることが可能となります。

「時系列順」「構造順」「重要度順」の詳細については次回以降のコラムで改めて解説していきますので、今回のコラムにおいては、まずは

・論理思考においては適切な順序構成が重要である
・順序構成については「時系列」「構造」「重要度」の3パターンしか存在しないので、そのいずれかを適用すればよい

以上のイメージをしっかりつかんでいただければ幸いです。

（担当：佐藤　啓）

目立つバナーの作製 #1　色の視認性

投稿日時：
カテゴリ：HTML・CSS・Webデザイン

前回のWeb系ブログコラムでは赤色の持つ効果についてお話ししました。今回は「既存サイトに新規バナーを追加する」という状況において、具体的に検討すべき要素について説明したいと思います。

既存のWebページに新たなコンテンツを追加する際、「バナー」を配置することは来訪者を誘導する方法として大変有効です。既存のグローバルナビゲーションボタン（グローバルナビゲーションとは、各Webページに共通して表示されるボタンのことを言います）を改変して新規コンテンツを追加することは、特別な理由が無い限り、あまり実施されません。そこで、レイアウト上のソースコードの追加を少なく抑えるという観点から、新たなコンテンツを既存コンテンツへ追加する場合はバナーの作成を検討することが一般的です。

新規コンテンツをアピールするには、簡単に言うとバナー自体を目立たせる必要があります。人の目を惹き付けるバナーを構成する基本的な要素は以下の5つとなります。

・色の視認性
・色の誘目性
・色の識別性
・文字の可読性
・面積

上記の各要素を検討することは、バナーへ人の目を惹き付けるだけでなく、その後のクリック率を高めるためにも大変有効です。また、上記の要素を自社サイトに当てはめて最適な色を決定することで既存バナーの効果を改善することが可能です。ですので、今回のコラムからしばらく、「既存サイトに新規バナーを追加する」際に考慮すべき5つの要因をシリーズで説明していきたいと思います。

今回は「色の視認性」についてのお話です。

色の視認性とは、簡単に言えば、字やモノの認識しやすさの度合いです。例えば道路にある標識は、周りに木や家があっても情報伝達を実現するために視認性の高い色が使用されています。バナーにも同じことが当てはまります。バナーとは、クリックした先の情報をわかりやすくコンパクトにまとめた標識のようなものですから、バナーの周りにコンテンツがある状態を前提とした色の選択が大切です。

森の中で周りと同系色の木が目立ちにくいことは明らかです。目立つ色（視認性の高い色）とは、背景の色や周りのコンテンツの色から相対的に決定されます。視認性の高い色の相対的な決定の方法は、以下のルールに従っています。

・視認性が高い色は背景色や周りの色との「明度差」が大きい

明度とは、色の明るさの度合いのことです。従って明度差が大きい色として、極端な例として、白背景に黒色の文字のような組み合わせが挙げられます。
既存サイトの多くは背景色が白であることが多いですが、背景色が白の場合はバナーの色が薄目の色では視認性が低い、すなわち目立ちにくいということになります。逆に濃い目の色は明度差の大きさの観点から適した色ということができます。ただし、濃い色ならば全て良いというわけではありません。既存のWebサイトに使用されているテーマカラーの効果を活かす範囲で明度差の大きい色を検討することが大切です。
具体的にはテーマカラーの色の明度を少しずつ落とした色をいくつか作成し、それらの候補から最適な色を選択する方法があります。最初から極端に明度を落とした色を作ることは、テーマカラーの効果を活かしづらくなる可能性が高いためおすすめしません。

今回は背景色や周りの色との明度差を確保することが、目立つバナーを制作する上で検討すべきポイントの一つであるというお話しをしました。今後にお役立ていただけましたら幸いです。

（担当：斉藤　万幾子）