【Photoshop入門】Webデザインをはじめよう！第3回 Webデザインに文字を配置しよう

連載

PhotoshopでWebデザインをはじめよう！

Photoshopを使ってデザインベースに文字を配置していきます。事前に、最終的なWebページにおいて、画像テキストにするところ、通常のテキストにするところを決めておきましょう。それぞれのメリットとデメリット、文字を入力する際の注意点、文字の見た目を調整する方法を解説します。

__
Photoshop CC 体験版
ダウンロード

__
サンプルファイル
ダウンロード

2種類の文字：画像テキストとテキスト

第2回「シェイプを駆使してデザインのベースを作ろう」で、Webページのデザインのベースを作りました。今回は、そのデザインベースに文字を入れていきましょう。

とその前に、Photoshopを一度離れて、ブラウザーを立ち上げ、お気に入りに入っているサイトを見てください。ページを注意深く見てみると、ページに表示される文字には2種類あることがわかります。

1つは画像になっている文字（以下、画像テキスト）、もう1つはマウスでドラッグして選択・反転できる文字（以下、テキスト）です。

画像テキストとテキスト、それぞれの特徴は以下の通りです。

種類 画像テキスト テキスト メリット

デメリット

使用例

Photoshopでデザインをする際は、最終的なWebページにおいて、文字をこの2種類のどちらにするのかまで考えておきましょう。ここは写真の上に文字を乗せたいから画像テキストで、ここは長い文章だからテキストで、などなど。

なお、画像を多用してしまうと、ページの表示速度が遅くなったり、アクセシビリティが失われたりする場合もあります。また、CSS3やWebフォントといった技術の登場で、テキストでもデザインできる幅が広がっています。

「どこを画像テキストにするか」「どこをテキストにするか」については、絶対的な正解はありません。閲覧者の環境などを考え、デザイン段階でサイト全体のルールを作っておくとよいでしょう。

今回のサンプルでは、グローバルメニューや主要な見出しは画像テキストにし、お知らせなどの更新性の高い部分や、コンテンツの導入部分で文字が多い部分についてはテキストにします。

文字を入力する

では、Photoshopに戻りましょう。

画像テキストにする文字であれ、テキストにする文字であれ、Photoshop上で文字を作成する方法は同じです。

サンプルファイルのphotoshop-web-design-03before.psdを開いてください。これは、第2回で作成したデザインベースです。

横書きにするので、［ツール］パネルの［横書き文字ツール］を選択します。画面の任意の箇所をクリックし、文字を入力します。上部のツールオプションバーや［文字］パネルで、フォントの種類、大きさ、揃える方向などを調整できます。

Photoshopの文字ツールで作成した文字は、「テキストレイヤー」と呼ばれるレイヤーに格納され、入力後も文字の内容を編集できます。

縦書きにしたいときは？

縦書きにしたいときは、［縦書き文字ツール］を使います。［横書き文字ツール］で入力した文字であっても、ツールオプションバーの［テキスト方向の切り替え］をクリックすれば、縦書きに変更できます。

画像テキスト部分の見た目を調整する

画像テキスト部分は、ツールオプションバーや［文字］パネルで［アンチエイリアス］（文字の輪郭をなめらかに表示する処理）の設定を「鮮明」にしておきます。

好きなフォントを選んで入力します。でも、入力した文字のままだと、見た目に美しくないことがあります。文字と文字の間隔、つまり字間（じかん）が広かったり、詰まっていたりするからです。このような場合は、カーニングやトラッキングを行って、字間が適切になるように調整します。

また、文章の場合は、行間（ぎょうかん）を微調整することで、より自然な読みやすい文字組を実現できます。

画像テキスト部分で、入力した文字の見た目が気になる場合は、以下の作業を行いましょう。なお、ショートカットの方向キーは、横組の場合です。縦組の場合は、この逆になります。

字間のカーニング

文字と文字の間にカーソルを合わせて、［文字］パネルの［文字間のカーニングの設定］で調整します。カーソルを合わせた状態で、option（alt）+ ［←］や［→］でも調整できます。

例えば、サンプルの右サイドバーに診療時間の「14:00～」を入力すると、1と4の字間が広くなっています。その場合は、［文字］パネルの［文字間のカーニングの設定］で狭くします。

選択した文字列のトラッキング

トラッキングとは、選択した文字列全体に対して、字間を調整することです。調整したい文字列の全体を選択して、［文字］パネルの［選択した文字のトラッキングを設定］で調整します。カーソルを合わせた状態で、option（alt）+ ［←］や［→］でも調整できます。

例えば、サンプルの右サイドバーに掲載する「診療時間」という見出しは、入力したままだと詰まって見えるので、行全体を選択して、［文字］パネルの［選択した文字のトラッキングを設定］で文字間を広げます。

文章の行間の調整

複数行を選択して、［文字］パネルの［行送りの設定］で調整します。カーソルを合わせた状態で、option（alt）+ ［↑］や［↓］でも調整できます。

例えば、サンプルのグローバルメニューのメニュー項目には日本語と英語を2行で掲載します。入力したままだと行間が広いので、［文字］パネルの［行送りの設定］で狭くします。

ベースラインシフトの調整

日本語のフォントだと、時間や住所の番地などのように、数字と半角記号（コロンやハイフン）を組み合わせると、記号が数字に対して下がって見えることがあります。この場合は、［文字］パネルの［ベースラインシフトの調整］で調整するといいでしょう。

文字のデザイン（文字組み）には、いくつかのポイントや指針はあるものの、絶対的な正解はありません。自分なりに研究してみましょう。

テキスト部分の見た目の調整は不要

テキスト部分は、オプションバーや［文字］パネルで［アンチエイリアス］の設定を「なし」にしておきます。

※Macの場合、マシンの設定でアンチエイリアスがデフォルトでONになっていることがありますが、Windowsの環境を加味して、アンチエイリアスをOFFにしてデザインします。

また、テキスト部分は長文となることが多いでしょう。長文を入力する際は、［横書き文字ツール］でクリック＆ドラッグしてボックスを作り、文字を入力するといいでしょう。ボックス内で自動的に改行してくれるので、文字の流し込みが簡単にできます。

テキスト部分の表示結果は閲覧環境に大きく左右されるので、テキスト内でサイズを変えたり、カーニングなどを設定することは控えましょう。一方、トラッキングや行間は、CSSで実現できるので設定しても大丈夫ですが、これらの設定にはルールを持たせましょう。

このようにアンチエイリアスをオン／オフで、画像テキストとテキストの区別がつきやすくなります。

文字の調整の最後に、見出しと本文など要素同士を揃えます。完成したものが、サンプルファイルのphotoshop-web-design-03.psdです。

※CS6からは、段落スタイルを保存できるようになりました。「段落スタイル」機能を使って書式を保存しておくと、同一の書式を使いまわすことができるので時間短縮になります。慣れてきたら活用してみましょう。

最後にちょっとした注意 文字のラスタライズについて

他の人がデザインしたデータを再編集することもあるでしょう。もし、そのデータで使用されているフォントがマシンにない場合、文字を編集しようとすると警告ダイアログボックスが出て、フォントの形を維持した状態で再編集不可（ラスタライズ）するか、別のフォントに置き換えるかの選択が必要になります。

なお、古いバージョンのPhotoshopデータを、最新バージョンで開くときにも、同様の警告ダイアログボックスが出ます。

また、「テキストレイヤー」は［ブラシツール］や［塗りつぶしツール］などで色を塗ったりすることができません。直接編集したい場合は、テキストレイヤーを右クリック→［テキストをラスタライズ］を選択し、通常のレイヤーに変換する必要があります。変換後は文字の再編集はできません。

ここまでで、ロゴ以外の文字要素が入りました。文字の入力そのものは簡単ですが、細部を読みやすく調整するのは難しくも楽しい作業です。第4回「ロゴを配置して、背景パーツを作成しよう」では、Illustratorとの連携でロゴマークなどを配置し、バナーやアイコンなどを作ります。