Webに使われるマジカルナンバー

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

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

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

Flickr

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

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

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

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

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

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

（担当：斉藤　万幾子）

コールバックと無名関数

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

色々あるプログラミング言語の中でもJavaScriptの基本文法は特殊な部類に入ります。
当校の講義では、他言語経験者も含め初心者が理解しにくいものとして「コールバック」「無名関数」が挙げられます。

実は、それほど難しいものではないのですが、見慣れるまでは不思議に感じるのかもしれませんね。

下記のソースコードを見てみましょう。
jQueryを使用したイベント設定の事例になるが、ID「button」をクリックしたら、関数「eventFunction」が発動して、alertが出力されるソースコードになっています。

$(“#button”).click(eventFunction);
function eventFunction(){ alert(“イベント発動”); }

コールバックとは、関数名を引数等に設定する事を指します。JavaScriptではイベントの設定で多用されます。
上記の事例もそうだが、「○○が××されたら指定した関数を発動しなさい」と設定することになります。

無名関数はその延長に過ぎません。

$(“#button”).click(eventFunction);
function eventFunction(){ alert(“イベント発動”); }

このソースコードを無名関数で記述する場合は、clickメソッドの引数に関数名を指定するのではなく、直接functionを記述すれば良いです。

$(“#button”).click(function(){ alert(“イベント発動”); });

この際のfunctionには関数名を記述する必要はありません。そのために「無名関数」と呼ばれるのですね。

function内の処理が複雑になると、{}やらインデントやらでソースコードが見づらいと感じる事もあると思いますが、落ち着いてソースコードを解読してみましょう。それほど難しくはないと思います。

使い分けとしては、イベントと関数が1:1なら無名関数、多:1ならコールバックを使用する傾向にあります。

JavaScriptやjQueryの書籍、Webサイト等ではサンプルのソースコードに無名関数を使用する事が多いです。
従って、これが分からないとサンプルを読む事もできないのできちんと修めておくことをお薦めします。

（担当：奥田　英太郎）

「箇条書き」の基本ルール

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

PowerPointでプレゼン資料を作成する際には、文字情報は基本的に箇条書きとなります。
またWordでも、内容によっては箇条書きを利用して情報を伝えます。

　文章　…「読む」もの
　箇条書き　…「見る」もの　→　一目でわかりやすく情報を表現する

箇条書きと共によく利用されるのが、段落番号です。
手順や時系列的な順番のあるものは段落番号を使用します。

　箇条書き　＝　順番のない文章の列挙
　段落番号　＝　順番付きの文章の列挙

WordでもPowerPointでも箇条書き・段落番号は、対象範囲を選択し下記の方法または右クリック→ショートカットメニューで設定します。
なおPowerPointでは、行頭文字の色の変更や段落番号の開始位置の変更が可能です。

　（2003）ツールバーの [箇条書き] または [段落番号]
　（2007・2010）[ホーム] タブの [箇条書き] または [段落番号]

また、下記によって形を整えると、より読みやすくなります。
・「レベル」を変更することで、情報のグループを視覚的に把握しやすくします。
・行頭文字と先頭文字の間隔を、「インデント」により調整します。

（担当：瀧川　仁子）

人間の思考回路の基本構造

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

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

前回のロジカルシンキング編コラムでは、言葉の「定義」の重要性についてのお話をしました。同じ言葉であっても、相手と自分の「定義」が異なれば、相手の疑問に答えるための「共通のツール」が存在しないことになります。結果として、論理的な話を組み立てる「前段階」でのハードルが上がってしまうので、言葉の定義については細心の注意を払う必要があるということでした。

今回のコラムからは、いよいよ論理思考の具体的な組み立て方についてのお話を始めていきたいと思います。今回は論理思考を考える上で最も大切なポイントである「人間の思考回路の基本構造」について、お話をしたいと思います。

まず、皆さんの身近にいる方で結構ですので、「話が分かりやすい人」のイメージを少し思い浮かべてみて下さい。どのような特色がありますでしょうか？　声の大きさや話す速度、身振り手振り等、色々な特色が出てくるかもしれませんが、おそらくその中には「言いたいことがはっきりしている」ということが必ず含まれているのではないかと思います。

逆に、「話が分かりにくい人」のイメージも考えてみると、もっと見えてくることがあると思います。話を分かりにくくさせてしまう原因もいろいろ考えられますが、共通しているのは「何が言いたいのかはっきりしない」という点かと思います。

では、「言いたいことがはっきりしている」「何が言いたいのかはっきりしない」この違いの根本的な理由は、どこにあるのでしょうか？　実は、「人間の思考回路の基本構造」こそが、この問いに対する答えなのです。

人間の思考回路は「ピラミッド構造」である

この事実を知っているだけで、論理思考を具体的に行う際のイメージが非常に沸きやすくなります。

上の図に示すように、人間の思考回路は基本的に「一番大切なこと」「一番根本的なこと」「一番言いたいこと」（図では「テーマ」が該当）を先に理解し、その後で「それはなぜ？」と考えることで、考え方を徐々に「掘り下げ」つつ、同時に「他には何かないか」と考えることで、考え方の「広がり」を持たせるようになっています。これを図示すると、テーマを最上段に置き、階層を掘り下げる度に、その階層に含まれる要素が多くなる「末広がり」の形状を採ることが分かります。この形状は「ピラミッド」に似ていますので、人間の思考回路は「ピラミッド構造である」と考えられるのです。

先程の例で採り上げた「言いたいことがはっきりしている」「何が言いたいのかはっきりしない」という違いは、まさにこの「ピラミッド構造」に則して話をしているか、していないかという点に起因するのですね。

「言いたいことがはっきりしている」と感じられる場合、その方の話の構成は、前述の図における「テーマ」→「キーポイント」→「理由」という順番で、「話の大きなまとまり」あるいは「結論」「大切なこと」から始まって、徐々に話の内容が詳細になっていくことが多いと思います。言い換えれば、ピラミッドを「上から下に」掘り下げるイメージで話をしていることになります。

逆に「何が言いたいのかはっきりしない」と感じられる場合は、ピラミッドの一番下の階層である「理由」をいくつか述べた後で、「だから言いたいことは○○です」のように、一つの上のキーポイント、さらにその上のテーマとたどって行くことが多いと思います。ピラミッドを「下から上に」登っていく、すなわち徐々に話の結論が見えてくるという流れで話をしているわけですね。

私も含め、多くの人が物事を考える際には、一般的には「事実・状況・理由」や「自身が感じたこと」から論点をスタートさせることが多いと思います。そして、それらの事象が「総合的に」何を意味するかを考え、結論を練り上げていくことが多いと思います。すなわち、ピラミッド構造であれば「下から上に」登っていく形で、思考を深化させるわけですね。

しかし、自身の思考を深化させることと、相手に分かりやすく「論理的に」伝えることは「全くの別物」です。相手に分かりやすく伝える際には、自身の思考深化のプロセスと「全く逆の流れ」で話をする必要があるのです。すなわち、先に結論や大切なことを述べ、その掘り下げを順次行っていくことで、「言いたいことの本質は何か」「その理由はなぜか」を順序立てて相手が理解しやすくすることが大切なのです。ピラミッド構造であれば「上から下に」掘り下げる形で、深化させた思考を再度逆にたどりながら、説明をするわけですね。

「何が言いたいのかはっきりしない」場合、おそらくは自分自身の思考深化の流れと全く同じ形で、相手にも説明をしているのだと思います。自分自身の思考がはっきり固まっていない（＝結論を練り上げている最中）に話をしているのですから、相手も話の要点が見えにくいと感じるのは、ある意味で「当たり前」ですよね。もちろんですが、ブレインストーミング等の「アイデア出し」をする場面であれば、この思考進化のプロセスを複数人で行うことはあり得ます。ですが、自身の考えを「伝える」場面で、その考えを「練り上げながら」話をすることは、あまり効率的ではないことは容易にイメージできると思います。

まとめますと、論理思考を考える上での大切なポイントは、

人間の思考回路は「ピラミッド構造」である

また、

自身の考えを深めるプロセスと、それを分かりやすく伝えるプロセスは全くの別物である

ということになります。
是非、この「人間の思考回路」の特性を把握し、自身の思考深化、並びにそれを「相手に分かりやすく伝える」際に役立てていただければと思います。

（担当：佐藤　啓）

アイコンの使いどころ #2

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

前回のWeb系コラムでは「アイコン」の意味と、利用するメリット及び注意点についてのお話をしました。
今回は、「アイコン」の使いどころの違いに着目しながら、具体例を見ていきたいと思います。

まずは、アイコンによって情報が分類されているデザインをいくつか見ていきましょう。

Google Map

有名なところとして、まずはGoogle Mapのデザインを採り上げてみます。ここでは東京セミナールームの最寄である麹町を検索しました。左端を見ますと、最寄の駅の鉄道名が、実際の鉄道のアイコンと一緒に表示されて、視認性を高める役目をしています。アイコンを使用することで、目的地へ移動するための手段の一つである鉄道名の情報をユーザーが把握しやすくなっています。

givery recruting site

Webに主軸を置く会社のリクルーティングページです。「ビジネスビジョン」や「ストーリー」などがアイコンになっており、言葉だけではなかなかイメージが湧きにくい内容でも、アイコンを使用することによって理解しやすくなっていることが分かります。

いい生活

こちらの例にある右上のアイコンも、言葉だけではイメージしにくい内容の理解を助けるために使用されている例です。

続いて、デザインのワンポイントとしてのアイコンのデザインを見ていきましょう。

Goen Girl

中央付近にあるメニュー画像には、それぞれワンポイントとしてのアイコンが使用されています。

大幸薬品 コーポレートサイト

こちらも上のグローバルメニュー画像一つ一つに、アイコン使用されています。画像の言葉を補助する役目もあり、相乗効果によっていっそう視認性を高めているデザインです。

デザイン要素にもう少し「ワンポイント」を追加したい場合には、小さいアイコンを挿入すると効果的であることも多いと私自身は考えています。
アイコンの特性である「物事を直感的に伝えることを手助けする」点を活用すると、Webサイトの制作やリニューアルなどをより効果的に進めることが可能となります。皆様のWebサイトデザインの向上にお役立ていただければ幸いです。

（担当：斉藤　万幾子)