写真を並べるレイアウト

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

前回のWeb系コラムではWebサイトをレイアウトする際の情報の優先順位についてお話しました。
今回は、ギャラリーのように写真をたくさん見せるレイアウトについて、具体例を見ていきたいと思います。

cssにおけるfloatというプロパティを使うと、写真や文章等の情報を簡単に横方向に並べることができます。
ネットショップやギャラリーなど、多くの写真を使用するWebサイトでは、様々な色が使用されている写真を目立たせるため、通常はボタンなどの色をあえて目立たせず、背景の色も白や黒などの無彩色を選択することが一般的です。
背景色に赤色や青色などの色を使用すると、写真自体の色が背景色の影響を受けて、別の色に見えてしまうこと現象が発生する可能性が高くなります。ですので、特に商品画像などでは実物の色とディスプレイ上の色を極力近くさせるために、白や灰色や黒などの、無彩色を背景色として選択すると良いです。

Pocky Street

例えば上記のサイトでは、

白背景を活用することで商品の色が目立つデザインになっています。

BEIZ graphics

黒い背景色は、写真家やデザイナーのポートフォリオなどによく使われる背景です。
背景が黒色なので、写真を明るく見せることができます。
文字の色は灰色を使うことが多いです。白色を使うとコントラストが強すぎてしまうと感じられることがあるためです。

REAGAL SHOES

最後に、写真に重ねられているアイコンについて見てみましょう。
上記のサイトでは、商品画像自体が白背景でトリミングされており、その上に矢印のアイコンを重ねて表示するデザインを使用しています。
このようにデザインすることで、商品背景の白色とのコントラストができ、商品画像と矢印の双方を目立たせることが可能となります。

この背景は濃い目の茶色で、無彩色ではありません。しかし、白色で商品画像との間に細枠が設定されています。これにより、茶色自体の効果を受けにくくすると同時に、矢印アイコンや商品画像とのコントラストをつけることに成功しています。

以上、多くの写真を効果的に表示するレイアウトについて、3つの例をご紹介いたしました。デザイン時の参考としていただければ幸いです。

（担当：斉藤　万幾子）

リレーションシップで注意すべきこと

投稿日時：
カテゴリ：アクセス・SQL Server・データベース全般

Accessのリレーションシップを設定するには二つの方法があります。

・リレーションシップウィンドウで設定する
・クエリで設定する

クエリのデザインビューでは、複数のテーブルを追加すると自動的にリレーションシップが設定されます。
（フィールド名とデータ型が同じであり、しかもいずれか一方または両方が主キーの場合、自動的に結合されます）
そのため、クエリで設定する方法を使っている方が多いのではないでしょうか。

実は、リレーションシップの作成方法により下記のような違いがありますので、目的により使い分けをする必要があります。

【リレーションシップウィンドウで作成した場合】
・ファイル内の全てのオブジェクトで認識されるリレーションシップ
・一側テーブルにサブデータシートが作成される

【クエリのデザインビューで作成した場合】
・そのクエリおよびそれを利用したフォームやレポートのみで認識されるリレーションシップ
・テーブル同士はリレーションシップを認識していないため、サブデータシートは作成されない
・参照整合性および連鎖更新や連鎖削除の設定はできない

通常の場合はリレーションシップウィンドウで全体に適用されるリレーションシップを設定し、たとえば特殊な抽出をするために外部結合を使う場合など、そのクエリのみに適用されるリレーションシップのためにクエリのデザ

インビューで設定するという使い分けをします。ご参考としていただければ幸いです。

（担当：瀧川　仁子）

「図解」でわかりやすく伝える

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

PowerPointでは、文字だけでなく図を利用して概念や手順を伝えることがよくあります。
図解により「視覚化」することで、さらに理解しやすく説得力あるプレゼンテーションとなります。

一般的に、ドキュメントによる「説明」の手段としては下記があります。
・文章　＝「読む」
・箇条書き　＝「見る」
・図解　＝「見る」
報告書などの場合は文章主体となりますが、プレゼンテーションは「読む」のではなく「見て」理解できるものでなければなりません。
そこで、PowerPointによるプレゼンテーション資料は箇条書きと図解が中心となります。

「図解」を行うためには、下記二つの方法があります。

【オートシェイプ】
複数の図形を組み合わせて、概念や流れを説明する図を作成します。

（2003）[図形描画]ツールバーから選択
（2007・2010）[ホーム]（または[挿入]）タブ→[図形]から選択

この図形作成した複数の図形を「うまく配置」しようとして時間と手数をかけている方を、非常に多くお見受けいたします。ひとつひとつの図形の位置を合わせようとして微妙にずれてしまったり、追加した際にまたやり直したりなさっていないでしょうか。
実は図形の挿入の際は「適当に配置」しても問題ありません。文字の入力や大きさの調整などをした後に、一括で配置を調整すると効率的です。

（2003）[図形描画]ツールバーの[配置/整列]
（2007・2010）[ホーム]タブの[配置]

また、図形を線でつなぐ「コネクタ」、図形の重なりの順番を調整する「最前面（最背面）へ移動」、作成した複数の図形を一つとして扱うことの出来る「グループ化」など様々な機能があります。

【図表】（2003）または【SmartArtグラフィック】（2007・2010）
一覧から説明する内容に適したパターンを選択し挿入します。
既に構成ができている図に文字を入力するだけで図解が完成し、また項目の増減も容易です。
最初から作成するだけではなく、PowerPointでは既に入力された箇条書きをSmartArtに変換できます。

[挿入]タブ→[SmartArt]

（担当：瀧川　仁子）

プレゼンデザインの決め方

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

ビジネスパワーアップコラム＜プレゼン編＞　第十四回

前回のプレゼン編コラムでは、「パワーポイントに頼りすぎない」と題して、効果的なプレゼン資料を作成する上でのパワーポイントの使用に関する注意点をお話しました。今回はプレゼンを作成する上で、シナリオと並んで大切なポイントである「デザイン」に関するお話をしたいと思います。

効果的なプレゼンにおいてデザインが重要である理由は、聴衆及びプレゼンターそれぞれの立場に対して存在します。優れたデザインは聴衆側の「理解」や「記憶」のしやすさをサポートします。一方でプレゼンター側にとっては、優れたデザインを実現する際には様々な「制約」が課されることになりますので、その制約が「創造性」を生み出し、よいプレゼン内容に繋がるというメリットがあります。

では、「優れたデザイン」とは、どのようにすれば考え出すことが出来るのでしょうか。私は以下の3原則を、デザイン検討時の基本方針として、お薦めしたいと思います。

・「引き算」で考える
・余白を活用する
・均一性と対称性を活用する

「引き算」については「シンプルプレゼン」の考え方にも通じるのですが、「相手の理解にどうしても必要なもの」以外の要素は出来るだけ「差し引く」というイメージです。例えば、スライドの番号や会社のロゴ、グラフや表の背景、ワンポイントイラスト等ですね。プレゼンの構成を最初に考える際はどうしても「足し算」で考えざるを得ないのですが、ある程度「足し算」が終わった段階で、今度は「引く」作業を改めて行うことで、「本当に必要な要素」を見極めることが出来るようになります。相手の理解や記憶に対して不要なものを極力そぎ落とすこと、これが「引き算」の意味であり、理解しやすいデザインの第一歩となります。

余白の活用も大切なポイントです。適切な余白は「上質感」「安心感」「自然さ」を演出し、結果的に聴衆の関心を惹きつけ、理解や記憶をサポートすることに繋がります。逆に、余白が多すぎたり少なすぎたりすると、緊張感や間延びした不自然な印象等が生じ、聴衆の関心を惹きつけることが難しくなります。余白を考える上では、人間が最も美しく、また心地よく感じやすいと言われている「黄金比（縦：横＝1：1.618）」をベースとし、スライドを縦・横共に三等分した「三分割法」を活用し、そのグリッドの交点に要素を配置することから始めてみると良いと思います。

・三分割法の例

均一性と対称性については、複数の要素同士の関係や、余白等を考える上で大切なポイントです。例えば、文字の大きさや書体・位置はスライドを通して統一されているか、上下あるいは左右の余白は同じ大きさになっているか、斜め矢印の角度は線対称になっているか、等ですね。均一性と対称性にあまり配慮されていないスライドは、雑多な印象を与え、結果的には聴衆がプレゼンに魅力を感じない要因となることがあります。私自身は日頃のスライド等の作成でもこの「均一性と対称性」には非常に注意を払っています。

実のところ、私自身は小・中・高と「美術」が非常に苦手でしたので、今でもデザインには苦労しているところがあります。ですが、プレゼンに関していえば、デザイナーの方のような「専門的な能力」に不安があったとしても、これらの基本的なポイントを押さえておくだけで、「伝わりやすい」スライドを作成することは可能であると、私自身の経験からも思います。「デザインは苦手」という方がもしいらっしゃいましたら、まずは今回のコラムに記したような「デザインの基本」から少しずつ意識してみると良いのではないかと思います。参考としていただければ幸いです。

（担当：佐藤　啓）

情報の優先順位とレイアウト

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

前回のWeb系コラムでは余白の持つ役割についてのお話をしました。
今回は、Webサイトに掲載する情報の優先順位について、お話をしたいと思います。

Webサイトに掲載する情報については、重要なものや確実に確認をしてほしいものから、時間があれば一緒に確認をしてほしいもの、あるいは法律や社内規則等のルールによって掲載が義務づけられているもの等、様々な情報が存在します。

従って、Webサイトのレイアウトを考える際には、情報の配置場所をしっかりと決めておく必要があります。言い換えれば、情報に優先順位を設定し、優先順位の高いものから目立つ位置やデザインを割り当てていくことになります。
この際、重要な部分や特に見せたい場所には強い色を置くのが一般的です。
周囲にも強い色があったり、見づらかったりしては、強い色を使っても注意を引くことができません。
通常は強い色を使ったあとは、周囲の色はグレーのような、鮮やかではない色を配置し、また余白を多めに取ることによって色自体をすっきり見せるようにします。
例えば下記のWebサイトでは、左にある強めの配色の周りが、彩度の低い色でまとめられていることが確認できます。

Super Soul

もちろんですが、二番目に目立たせたい場所があった場合、一番目と同じようなデザインにしては、ユーザーはどちらを最初に見たら良いのか迷ってしまいます。従って、二番目に目立たせたいポイントについては一番目よりも控えめな色やデザインを選ぶ必要が出てきます。

FDA

航空会社の予約サイトです。目立たせたいキャンペーンなどのバナーを除けば、空席照会のボタンが一番優先順位の高い箇所になると考えられます。実際にこちらのサイトでは「空席照会」ボタンがユーザーの視線の動きを考えた場合に最も注目されやすい位置である「左側」にあるため、ここから空席情報をすぐに検索することが可能です。
グローバルナビゲーションボタンと同じ色で「空席照会」のボタンが作られているのは、その高い優先順位のためであると考えられます。

ここでのもう一つのポイントは色の違いによる優先順位のつけ方です。
例えば、このサイトでは赤色、青色、水色のボタンが左側にあります。
どのボタンも目を引きつける鮮やかな色が使われていますが、最も視覚の誘引性が高いのは赤色です。
ここでは、このWebサイトに来るユーザーがまず何をしたいかということを主眼に置き、よく使うボタンに対しては色も活用して優先順位を設定していることがわかります。ユーザーの目に入りやすくなれば、クリックされる確率も上がります。
「空席照会」といった重要なボタンには赤色のような鮮やかな色を使うことで、ユーザーの操作性がより上がることに繋がるのですね。

Webサイトのレイアウトを考える際には、情報の優先順位も意識して考えていく必要があることをご紹介いたしました。
ぜひこの視点を活用し、ユーザーにとって使いやすいWebサイトとは何かを考えていただければと思います。

（担当：斉藤　万幾子）