Lesson7-4　文字・画像のポイント

前のページでは、Webデザインにおけるレイアウトについて基礎知識をつけてきました。
このページでは文字や画像を配置する際のポイントについて解説します。

書体とは何か

Webデザインを行う際、文字というのは非常に重要な役割を果たします。
どのようなフォントでどう配置するかによって見た目の印象が大きく変わるのです。
また、大切なWebページの内容をしっかりと読んでもらえるかどうかも文字のデザインによって異なってきます。

それでは、文字とはそもそも何なのでしょうか。

それは紛れもなく、私たち人どうしの情報の伝達手段です。
私たちは文字によって情報を受け取り、発信しているのです。

書体を意識させない

例えば書籍を読んでいる際に、書体が気になって仕方がないということはありませんよね。
看板や広告などもそうですが、書体を意識させないというのがデザイナーにとっては大切なポイントです。

例えば、こちらの例を見てください。
本を読むときに適したフォントはどれでしょうか？

多くの人が②や③だと答えるはずです。
人によっては①や④の方もいるでしょうが、基本的に小説などの読み物は明朝体が適しています。

書体の個性が強すぎて、内容が入ってこないほどになってしまうと、書籍そのものの役割を妨害してしまうことにもなります。

自然で意識しなくても読めるフォントを選びましょう。

フォントの種類

明朝体とゴシック体

日本語のフォントは大きく分類すると、明朝体とゴシック体の2種に分けられます。
明朝体は縦線に比べると横線のほうが細く、横線の右端や曲がり角の右上に「山」がある書体です。
ゴシック体は基本的には線の太さが均等で、「山」がないような書体です。

セリフ体とサンセリフ体

セリフ体とは、文字の端に小さな飾りがついている文字を指します。
この書体は横線が細く、ローマン体とも言われます。
セリフ体は可読性に優れるため、書籍などでよく使用されています。

サンセリフ体は「セリフがない」という意味で、文字の端の小さな飾りがない書体のことを指します。
サンセリフ体は小さな文字でも読みやすいため、本文などでよく使用されます。

フォントファミリー

フォントには、同じものでも太さや斜体のバリエーションがたくさんあるものがあり、それをひとまとめにして「フォントファミリー」と言います。

一つのコンテンツ内で複数のフォントを使用する際は、同じフォントファミリーで統一すると、見やすくまとまりのあるデザインになります。

書体を選ぶときのポイント

まず、Webデザインを行うとき、どんな人に向けた、どんな目的のサイトであるかをしっかりと考えましょう。
その目的と、内容量などから、書体やサイズを選ぶことが大切です。

気軽で親しみやすいデザイン・・・ゴシック体
信頼感をアピールしたい・・・明朝体
和風の雰囲気を出したい・・・楷書体や行書体

このように日本語の書体でも様々目的に合わせて使い分けることができます。

また、文字の太さでも印象は大きく変わります。
おしゃれにシンプルな感じで仕上げたい場合には細い字を、
重厚感を持たせてしっかりとアピールしたい場合には太い字を使用しましょう。

画像やイラストの使い方

Webデザインにおいて、画像やイラストの使い方も非常に重要なポイントです。

画像は視覚的にも強い印象をユーザーに与えますので、その特徴を活かしてデザインしていくことが大切です。

Webページは最初の印象が重要

Webページに訪れるユーザーは最初の数秒でそのページを離脱するかどうかを判断していると言われています。

最近のページでは、ロゴやメニューバーの下にすぐに大きく画像が使われていることが多いですが、これはこの最初の離脱率を防ぐためのデザインです。

画像やイラストというのは、どんなものがこのページで伝えられているのかを端的にわかりやすく伝えてくれるので、ユーザーも読み込みの数秒で感じ取ることができるのです。

大きさや配置位置も考える

画像は大きさや配置する位置によってもユーザーへ与える印象がガラリとお変わります。

近年では、ページの横幅いっぱいに画像を配置し、画像の効果を最大限発揮できるようにする方法が主流です。

他には背景に大きく画像を使用したり、ページの横幅を3,4分割して画像を並べて配置したりする方法もあります。

参考ホームページ：星のや

また、たくさんの記事などを要素とする場合には、サムネイルの大きさを変えたりするのも印象が変わって面白いでしょう。

（サムネイルとは：画像や印刷物ページなどを表示する際に視認性を高めるために縮小させた見本のこと。）wikipediaより引用

参考ホームページ：北欧暮らしの道具店

解像度・ピクセル

画像を使いこなすために大切な知識として、解像度・ピクセルという言葉があります。
何となく意味は分かっていても正しく理解できているかどうか不安という方も多いのではないでしょうか。

画面解像度とppi

画像の解像度には、dpi（dots per inch）という単位もありますが、
Webデザインではこの単位はあまり重要視されません。

その代わりに画面解像度をしっかりと理解することが大切です。

画面解像度とは、ディスプレイに表示されるピクセル数のことを指します。
※ピクセルとは、デジタル画像を構成する最小の単位のことで画素とも言います。

例えばパソコンには、1280×1024ピクセルや1366×768ピクセルなどの画面があり、
これは縦横に並ぶピクセルの数で画面の解像度を表しています。
同じ15インチのサイズの画面でも、ピクセルの数が多いものはそれだけ細かな画素で構成されているということです。

ppiというのはpixel per inchのことなので、
このようなピクセル数とディスプレイの大きさの比率を表しています。

Webデザインにおいては、この比率によってページの見え方が異なることを知っておきましょう。

同じページでもppiが大きなディスプレイでは、文字なども細かく表示できますが、
ppiのちいさなディスプレイでは細かな表示ができず、
Webページそのものが相対的に大きく表示されることがあります。

画像ファイル形式

画像のファイル形式には、JPG、PNGなどがあります。
これらの形式も聞いたことがあっても、なかなかきちんと整理できていない方が多いはずです。

下の表にまとめましたので、参考にしましょう。

いかがでしたか。

このページでは、Webデザインにおける画像やイラストの使い方、
基本的な知識について学んできました。

次はこのLessonの最後のページです。
まとめとしてWebデザインを行うときのワンポイントアドバイスをまとめました。
引き続き進めていきましょう。