山梨県パソコン入門書　ホームページ執事（無料のパソコンオンラインスクール）

画像の解像度と印刷

いずれも、ブログやホームページに掲載している写真は低解像度なので、そのファイルをそのまま印刷に使用すると、解像度不足のため、ぼやけた、不鮮明な写真になってしまいます。

印刷する際には、撮影してパソコンに保存した時のオリジナルの高解像度の写真が必要になります。

おすすめはできませんが、印刷品質を気にしないのであれば、ブログやホームページに掲載している写真をそのまま使用するこもできます。

原稿として提供する場合

実際に名刺やパンフレットなど、原稿として提供する画像に関しては、とにかく高解像度のものを提供しましょう。

ここでいう高解像度とは、未圧縮のJPEG、つまり最高画質の設定にして撮影した写真、形態やスマートフォンなら撮影時のメガの数字が多ければ多いほど良いです。

テレビに例えるなら昔の病室の脇に置いてある画面の小さいアナログテレビと最新の4Kや、フルハイビジョンのテレビくらいの違いがあります。

以下では、更に詳しく解像度とピクセルについてご説明します。

「解像度（dpi）」と「pixel（ピクセル）」

デジタル画像（JPEG）などをそのまま印刷した事がある方は経験したことがあると思いますが、パソコンの画面上に表示される画像サイズと、実際印刷をした時のサイズは、同じではありませんよね？

また、パソコンのモニターでは普通に表示されているのに、実際印刷するとモザイクのように粗くなってしまったことはありませんか？

画像を扱う際、よく耳にする“解像度”と“ピクセル”の基礎知識を理解しておくと、トラブルなくキレイに印刷物を作成することができます。

解像度（dpi）

画像はすべて点（ドット）が集まって表示されています。

単位の「dpi」は“dot per inch（ドット パー インチ）”の略。
つまり、1インチ（2.54cm）あたりにどれだけの密度で点が集まっているかを指す数値を『解像度』というのです。

解像度による画像の違い

▼Wikipediaより引用


Wikipedia　解像度

出力に適した解像度

解像度が高ければ高いほど印刷品質は良くなります。

しかし「どれでも高い解像度にすれば良い」というわけでもありません。
壁に張るポスターや、手元で見る印刷物、ウェブサイト上で表示する画像など、それぞれ用途に応じた解像度を選択する必要があります。

・リーフレットなどの商業印刷 300～350dpi
・A1～A2サイズのポスター 150～250dpi
・Webなどのモニター画像 72dpi～96dpi
※一般的な目安です

解像度を制作物の適正値より上げ過ぎても、印刷品質が向上するわけでもなく、かえってファイル容量が大きくなりスムーズに印刷できない場合があります。
また、低すぎても画像の粗が目立ってしまうので注意しましょう。

pixel（ピクセル）数

そして解像度と密接な関係にあるのが『pixel（ピクセル）数』。
1つの画像データに含まれる点の総数をいいます。画素数ともいいます。
画素数は拡大・縮小してもその点の数は変わりません。（画像編集ソフトなどで調整することは可能）

ちなみに、よくデジタルカメラなどで耳にする、“メガピクセル”は100万画素、“5メガピクセル”は500万画素の画像ということなのです。
どちらの方が高画質かというと、当然数字の大きい5メガピクセルの方が高画質です。

解像度による印刷サイズの違い

画像の印刷サイズやpixelサイズは、数式に当てはめると簡単に計算できます。
掲示物や印刷物を作成される方は参考にしてみてください。

ピクセル数（pixel）⇒用紙（mm）に変換：（ピクセル数/解像度）×25.4

用紙（mm）⇒ピクセル数（pixel）に変換：（用紙×解像度）／25.4

解像度が高ければ、見た目もきめ細かい画像になりますが、同じピクセルサイズで解像度が低い画像に比べると印刷サイズは小さくなります。

逆に、解像度が低い画像は同じピクセルサイズで解像度が高い画像に比べ、印刷サイズは大きくなりますが、その分点も大きくなり画像が粗くなりますので、注意が必要です。

解像度ごとの印刷サイズは過去の記事も参考になさってください。
【まとめ】デジタルカメラの画像サイズ

画素数による画面解像度

ここまで、印刷を中心に解像度についてご説明してきましたが、テレビやパソコンなどのディスプレイにも解像度があります。

画面解像度とは、コンピュータ等のディスプレイにおける解像度のことを言います。
ピクセル数が多ければ多いほど、表示できる画面サイズも大きくなります。

以下の表はピクセル数の少ない順に画面モードの種類を並べたものです。

▼Wikipediaより引用

各画面モードの詳細は以下のリンクを参照してください。
Wikipedia　画面解像度

読みやすい文字組みにはルールがある

皆さんこんにちわ。

今回は印刷物をデザインする際に文字を読みやすくするための簡単な法則をお話しますね。

プロのデザイナーなら当たり前のようにやっていることかもしれませんが、文字組みの際にホワイトスペースを意識するということです。

ホワイトスペースとは文字を黒と考えた時の白い部分、つまり余白のことです。
この余白の取り方によっては、文字がとても読みにくくなってしまうことがあるのです。

下の文字組みを見て読みにくいと感じませんか？

では下図の文字組みはどうでしょうか？
先ほどより読みやすいと感じるのではないでしょうか？

実はホワイトスペースには下のようなルールがあります。

　字間　＜　行間　＜　段間

文字と文字の間の余白は、行と行の間の余白よりも狭くなくてはいけません。
また行と行の間の余白は、段組の段と段の間の余白よりも狭くなければならないのです。

こうしたルールをきちんと守ることによって、読みやすい文字組みになるのです。

デザイナーなら知っておきたい　無料フォントダウンロードサイト
【まとめ】無料のデザイン・イラスト素材サイト

デザインの配色に迷ったら参考にできるサイト

皆さんこんにちわ。

今回は無料で使えるカラーツールについてお話しますね。
ご存知の通り色が与える印象はとても強いものです。
人を元気づけたり活動的にならせたりする色もあれば、気持ちを落ち着かせ冷静な気持ちにさせる色もあります。
私たちは知らず知らずのうちに目にするものの色から少なからず影響を受けているものですね。

ではこれをデザインする側の観点から考えてみましょう。
人にはそれぞれ好みの色があるものですが、プロのデザイナーなら自分の好みを優先させるよりも制作物の目的の達成に最も適した色選びをするはずです。
配色は見る人に特定のメッセージを伝え、時には人を何らかの行動へと促すこともあるからです。
では今制作しようとしている物を主に利用する性別や年代の人はどんな色を好むのでしょうか？
また扱っている企業を適切に表現するのはどんな配色でしょうか？

こうした色選びを自分で考えながら行うこともできますが、以下のサイトを参考にしてみるのはいかがでしょうか？

kuler

kuler

Color Scheme Designer

類似色や補色の組み合わせの配色を表示してくれます。

Color Scheme Designer

COLOR SCHEMER ONLINE

クリックした色に合った配色を表示してくれます。

COLOR SCHEMER ONLINE

I Like Your Colors

URLを入力するとそのサイトで利用している色を抽出してくれます。

I Like Your Colors

webセーフカラー配色辞典

各テーマごとに配色を表示してくれます。

webセーフカラー配色辞典

Mariのいろえんぴつ

ホームページの配色やトーン別の配色を表示してくれます。

Mariのいろえんぴつ

デザイナーなら知っておきたい　無料フォントダウンロードサイト
【まとめ】無料のデザイン・イラスト素材サイト

オススメ有料デザイン・イラスト素材サイト

オススメ無料デザイン・イラスト素材サイト

デザイナーが知っておかないと損なツールまとめ