伝わるデザイン

画像と写真

解像度不足はNG

写真のようなビットマップ画像(ラスター画像)は、100%より高い拡大率にしないようにしましょう。ビットマップ画像は、ピクセルの集合として画を表現しているため、どんな画像も画面上で100%以上のサイズで表示すると、解像度が荒くなってしまいます。見た目の印象も悪いですし、受け手の目にも負担をかけてしまいます。むやみに解像度の高い画像を使うと、ファイルサイズが大きくなりすぎるという問題が生じますが、実際に表するサイズより大きいものを使うように心がけましょう。サイズの大きい写真を使う場合は、圧縮率の低いBMP形式やTIFF形式の画像でなく、JPEG形式にすれば、サイズが大きくてもファイルがそれほど重くなりません。

なお、印刷する場合は、画面上よりもさらに高い解像度が必要になります。

写真は歪めないで、同じ形にトリミング

写真を配置するときにまず、大切なことは、歪めないことです。写真を歪めるのは避けましょう。また、並列で複数の写真を並べる場合は、形を揃えると美しくなります。もちろん、このときに写真を歪めて形を揃えるということではダメです。必要なところだけをトリミングして、形を整えましょう。WordやPowerPointを含む多くのソフトでは、ページ内で画像のトリミングを行なうことができます。Illustratorの場合はクリッピングマスクの機能を使うと便利です。

引き出し線は細く、規則正しく

模式図などを書いたときには、「引き出し線」を使って各部位の名前を入れたりします。この引き出し線の引き方で、図の印象ががらりと変わってしまいます。左は引き出し線を何となく引いた例です。これでは、線の角度に統一感がないうえに、線が太くすぎるので、少々不格好です。こんなときは、右の2つのように、自分なりのルール(角度や長さなど)を決めてすべて同じような線を引くと、統一感のあるスタイリッシュな印象になります。引き出し線にはこのような配慮が必要です。

写真の色を統一する

照明の具合やカメラの種類、顕微鏡の種類によって、写真全体の色が変わってしまうことはよくあります。一つひとつの写真を見るだけなら、あまり気になりませんが、いくつかの写真を比較のために並べて表示したい場合、写真ごとの色味の違いが理解の妨げになったり、美しさを損ねたりします。Photoshopを使えば、色味の統一を簡単に行なえます。方法は以下のとおりです。

  1. 色味を統一したい写真をPhotoshopで2枚同時に開きます(もちろん3枚以上でもOK)。
  2. どちらか一方のウィンドウあるいはタブを選択した状態で、<イメージ>→<色調補正>→<カラー適用>と進みます。
  3. <ソース>から色を統一したいもう一方の写真を選択します。
  4. OKをクリック。



必要に応じて画像オプションのパラメータを変更して下さい。デフォルトのままでも基本的にはうまくいきます。

写真の深度合成

立体物の写真を撮るとき、全体にピントを合わせるのは難しいものです。どうしても、部分的にピンぼけになってしまいます。とくに顕微鏡で小さなものを撮影するときにこのような問題が生じます。そのような場合は、深度合成を行なう必要があります。深度合成とは、別々の部分(深度)にピントが合った複数の写真を用いて、それぞれの写真のピントの合った部分だけを互いに合成して、全体にピントが合ったような1枚の写真をつくるテクニックです。深度合成を行なえるソフトはいくつかありますが、Photoshopなら簡単に合成を行なうことができます。合成にあたって、同じ対象物について同じ角度から焦点の位置だけを変えて撮影した複数枚の写真を準備しておきます。たとえば、以下のような3枚の写真です。枚数が多いほど全体にきれいにピントのあった写真が作れますが、3〜10枚ほどあれば充分なことが多いです。合成の手順は以下のとおりです。

  1. 合成したい写真をすべて開きます。
  2. レイヤーが背景になっている場合は、レイヤーウィンドウで<背景>を<レイヤー>に変えます。
  3. それぞれの写真をコピー&ペーストして、一つのファイルの中に移動させます。(各画像がレイヤーとして扱われます。下の図のように。)
  4. まずは位置合わせ。全部のレイヤーを選択した状態で、<編集>→<レイヤーを自動整列>を選択します。
  5. <自動設定>を選択して、OKをクリック。これで、画像ごとの位置や角度のズレが補正されます。
  6. レイヤーの選択を解除しないまま、<編集>→<レイヤーの自動合成>と進みます。
  7. <画像をスタック>を選択し、OKをクリック。これで、ピントの合った部分同士を合成していきます。
  8. 時間がかかる場合がありますが、しばし待ったら完成です。必要に応じて<レイヤーの結合>などを行ない、一つの画像として保存して下さい。

▲今回は6枚の画像を合成してみますが、そのうちの3つの写真。

▲すべての写真をレイヤーとして同じファイル内に移します。

▲自動整列ウィンドウと自動合成ウィンドウ

今回は6枚の画像を合成していますが、まだピントの合っていない部分があります。合成する枚数を増やせば、もっときれいになるはずです。なお、時計が動いてたので、秒針が3つになってしまいました。題材が悪かったです。動かないものを使うようにしましょう。

背景はできるだけシンプルに

スライドやポスターの文字の背景には、写真やイラストを入れないのが賢明です。下の例のようにイラストを淡い色にしてみても、読みやすさはそれほど改善されません。スライドやポスターでは、変にカッコよさを狙うよりも、字の読みやすさ、写真やイラストの見やすさを最優先すべきです。写真やイラストは、できるだけ文章のないところに配置しましょう。Illustratorであれば、「テキストの回り込み」という機能を使えば、自動的に文字がイラストをよけてくれます。

絵や写真の上に文字を配置するときは「袋文字」

基本的には写真や図の上に文字を配置するのは避けたほうがよいです。どんなに文字の色を工夫しても、背景が複雑だと文字が読みにくいためです。ですが、プレゼン資料やポスターを作っていると、写真の上に文字を置かなければならない状況に直面することも少なくありません。

背景が写真だったり、複雑な色の絵であったり、明暗の差が激しいイラストである場合は、文字に「」を付けると文字がはっきり見えます。しかし、PowerPoint上で文字に枠をつけると、本来の文字が潰れてしまいます。「枠が細くてあんまり潰れていないから大丈夫!」、なんてことはありません。多かれ少なかれ文字が潰れてしまえば、必ず視認性、判読性が低下します。

では、どうするか。背景のせいで文字が見えにくいときは、文字とは違う色で文字に「」や「光彩」をつけることである程度読みやすさが向上します。ただし、この方法には限界があり、文字ははっきり読めるようにならない場合が多いです。

さらに文字をはっきりさせるためには、「袋文字」を用いるのが一番です。文字を潰さずに文字の周りにきれいに枠を付けるということです。ここで重要なのが、枠の付け方となります。PowerPoint上で枠を作る場合は、下の図のように、枠が必要なテキストをコピー&ペーストで2つ作ります。2つのうち、前面にあるテキストはそのままにして、背面にあるテキストにだけ枠をつけます(当然、このとき枠をつけた方の文字は潰れます)。次にこの2つをテキストを「揃え」機能を使ってピタリと重ねます。あら不思議、こんなに簡単に、美しい白い枠が完成です。

方法さえ覚えてしまえば、この手法を応用して、いろいろなバリエーションの文字を作ることができます。枠の色や太さを変えたいくつかのテキストを重ねると、下のようにかなり目立つテキストの完成です。

下が、実践例。どんな場所においても、圧倒的に見やすくなります。

補足)Illustratorの場合

3つの方法で袋文字を作れます。1つは、PowerPointと同じ手順です。この方法だと、文字を変えたいときに、重ねた両方のテキストボックスを編集する必要があるので不便です。2つ目は、文字をアウトライン化してから、「外側だけに枠(線)をつける」とする方法です。この場合は、2つの図形を重ね合わせる必要はないのですが、図形化するため、文字を書き直すことができない。3つ目はIllustratorならではの方法です。文字はテキストのままにして、テキストを選択した状態で、アピアランス→新規線の追加→アピアランスで線を文字よりも下のレイヤーに移動。これだけです。この方法だと、袋文字を作った後にでも文字を自由に変更可能です。この説明ではわかりにくいかも知れないので、実際にやってみて下さい。


もどる すすむ






TOP

 制作者情報   更新情報   講演実績・サイトの実績   サイトポリシー   お問い合わせ 

オフィス伝わる

Copyright © 2018 Office Tsutawaru, All rights reserved.