Photoshopの文字入力:編集やフォント設定方法を総まとめ

Photoshopの文字入力・段落の設定

記事内に商品プロモーションが含まれる場合があります

この記事では、Photoshopでの文字入力の方法とポイントを解説します。フォトショ初心者の方でも分かるよう、一部初歩的な部分も詳しく説明しているので、必要に応じて読み飛ばして頂ければと思います。

対象バージョン
Photoshop CC/CS6/CS5/CS4/CS3/CS2

1. Photoshopで文字を入力・編集する

すでにご存知の方も多いと思いますが、まずはPhotoshopでの文字入力の流れを説明します。

1-1.文字入力で主に使うところ

Photoshop文字入力の方法
文字入力で使うところ

1.横書きツール

文字入力をするときは、まずツールバーで横書きツールを選びます。

2. 文字パネル

画面右側の文字パネルは、フォントサイズやフォント種類をはじめとして、文字入力に関する細かな設定をする場所です。使い方は後で詳しく説明します。

文字パネルが表示されていない場合は、メニューバーの[ウィンドウ](上の図の★のところ)から[文字]をクリックすれば現れるはずです。

3.オプションバー

オプションバーでも文字の設定ができます。文字パネルとオプションバーどちらでも文字設定ができますが、文字パネルの方が細かな設定ができます。

1-2.文字入力の流れ

文字ツールを選んだ状態でドラッグ

文字ツールを選んだ状態で、文字をのせたい範囲をざっとドラッグしましょう。すると、文字入力のためのボックスが作られます(このボックスはテキストボックスやバウンディングボックスと呼ばれたりします)。
ボックスの角にある□をドラッグすることでボックスのサイズは自由に変えられます。

実際に文字をキーボードで入れていく

ボックスが作られたらあとはキーボードで文字を打っていくだけです。フォントの種類や色、大きさなどは、入力後でも自由に変えられます。

1-3.入力後にフォントの設定をする

文字を選択する

たとえば、今入力した文字の色を変えてみましょう。まず、変えたい文字をドラッグして選択しておきます。ここでは”ためし”の部分を選択しました。
次に文字パネルの「カラー」(画像のオレンジ枠の部分です)をクリックして変えたい色を選びます。

文字の一部の色を変える

すると、画像のように”ためし”だけ色が変わりました。

フォントサイズやフォント種類も、同様のやり方で変えることができます。ボックス内の全文字の設定をまとめて変えたいときは、全文字を選択した状態で設定を変えても良いですし、一旦キーボードのescを押すなりして、ボックスを閉じてから文字パネルで設定を変えてもOKです。

2. 文字パネルでフォントや装飾を設定

文字入力の方法は分かりました。しかし、パネルには何かと設定がたくさんあって分かりづらいですよね。ここからは文字パネルの各設定の意味を全て説明します。

2-1. 見方

フォトショ 文字パネルの見方

まず文字パネルの上半分から見ていきます。ちょっと分かりづらい部分にはがついています。

A) フォント種類

ここで文字の種類を選びます。

B) 文字の太さ

フォントの種類によっては5〜6段階から太さを選ぶことができます。また、太さの設定ができないフォントもあるので注意しましょう。

C) フォントサイズ

ドロップダウン▼からサイズを選択することもできますし、直接数字を入力してもOKです。”500″みたいにべらぼうに大きい数字を入れてもOKです。

D) 行間

行間とは?

こだわりがなければ(自動)を選んでおけば、フォトショさんが自動調整してくれます。また、alt or のショートカットを使えば、ここの数字を触らなくても細かく行間を狭めたり広げたりできます。行間をよく調整する人からすると、とても便利なショートカットですね。 ※ Macの場合alt=optionです。

カーニング・トラッキング・文字ツメについては、後でまとめて説明するので一旦飛ばします(スキップする)。

H) 垂直比率

Photoshop垂直比率とは

垂直比率とは「文字の縦の長さ」の度合いを表します。通常100%で、例えば125%にすると縦長の文字になります。あまり使う機会は無さそうですね。

I) 水平比率

Photoshop水平比率とは?

水平比率は「文字の横の長さ」の度合いを表します。例えば125%にすると横長の文字にします。「カタカナを半角のように見せたい!」というときには80〜90%にしてみると良いでしょう。

J) ベースライン調整

Photoshopベースラインとは

ここで、文字の上下の位置を調整できます。通常は0に設定されています。例えばこちらの図では、”う”のベースラインだけを10ptにしてみました。すると、”う”の位置がぴょこんと上に上がります。

文字入力をしていて「なんかこの文字だけ位置が低くてバランスが悪いなぁ」というときに便利です。

K) 文字色

説明するまでもありませんね。クリックして好きな色を選びましょう。

2-2.カーニング、トラッキング、文字ツメとは?違いは?

(E)カーニング、(F)トラッキング、(G)文字ツメの3つはどれも字間を調整するものです。機能が似ているので、混乱してしまう人も多いかと思います。ここでは細かな定義や構造は置いておき、どうやって使うのかに絞って解説していきたいと思います。

トラッキング・カーニング・文字ツメの違い
それぞれの字間調整の違い

E) カーニングとは?

Photoshopでのカーニングは、字間を1文字ずつ調整したいときに使います。というより、1字ずつしか調整することができません。

カーニングとは

カーニングで字間を調整するときには、まず”調整したい字と字の間”にカーソルを置きます。次にカーニングの数字を変えます。これでカーソルが置いてあった部分の字間が変わります。とはいえ、1文字ずつ調整するのにいちいち数字を変えるのは面倒ですよね。というわけでショートカットを使いましょう。

覚えたい!
字間を調整したい文字と文字の間にカーソルを置いて alt or
サルワカくんの顔(通常)
サルワカくん
カーニングの選択肢にある[メトリクス]と[オプティカル]については、後ほど説明します⇒飛ぶ

F) トラッキングとは?

トラッキングとは、複数の文字列の字間をまとめて、均等に調整するものです。トラッキングで字間を調整するときは、①調整したい文字列を選択、あるいは全体を選択した状態で、②文字パネルのトラッキングの数字を変えるだけでOKです。

トラッキングにもショートカットがあります。そしてこのショートカットは、カーニングと同じ alt or です。つまり、字と字の間にカーソルを置いてこのショートカットを使うとカーニング調整になり、複数の文字列を選択してこのショートカットを使うと、トラッキング調整になります。ちょっと分かりづらいと思うので、ここまでの説明を忘れて、こう覚えましょう↓。

重要
字間を微調整したいときは、調整したいところにカーソルを置くなり、選択するなりしてalt or

G) 文字ツメとは?

Photoshopの字間調整が分かりづらいもう1つの理由に「文字ツメ」があります。上の2つは、文字の右側のスペースを調整するのに対して、文字ツメは文字の左右両側のスペースを調整します。「日本語に使うと字間が良い感じになる」と言われることもある文字ツメですが、カーニングとトラッキングだけ使っても問題なく字間調整できます。というわけでタイポグラフィーを本格的に勉強しない限り、文字ツメの存在は忘れ去ってしまっても良いでしょう。

【まとめ】結局どうやって字間調整すべきか

なるべく手間をかけずに字間を調整するために、以下の方法をおすすめします。

字間調整の手順
  • 【まずまとめて調整】字間調整したい文字列を選択して %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-13-18-44-42 トラッキングの数字を変更
  • 【次に微調整】「もっと詰めたい or 広げたい」ところにカーソルを置くなり、選択するなりして
    alt or

3. 細かなテキスト・フォント設定をする

次に文字パネルの下の部分の解説をしていきます。

文字パネル オプション
文字パネル下半分の解説

この画像がほとんど解説の全てなのですが、一部ざっと説明も書いておきます。

3-1.文字の加飾機能について

太字について

Photoshopでこの太字機能を使うことは、ほぼ無いと言ってもよいでしょう。というのも、文字パネルのフォント種類選択の横のドロップダウンで「フォントの太さ」を設定できるからです(さきほど解説したここ)。太字にしたい場合も、この太字機能 は使わず、フォント種類選択の横にあるドロップダウンで設定するようにしましょう。

オールキャップ オールキャップスとは

オールキャップとはアルファベット表記を全て大文字にする設定のことです。aaaと入力してもAAAと表記されます。はじめから大文字で入力すれば良い話なので、使う機会はあまりないでしょう。

スモールキャップ スモールキャップとは

スモールキャップとは、アルファベットの小文字を大文字で小さく表示する設定のことです。つまりABcdeと入力したら、ABCDEと表示されます。こちらも頑張って覚える必要はないでしょう。

上付き文字 上付き文字 と下付き文字 下付き文字

数学の「◯乗」などの表記をしたいときに使うと便利です。使うときには、上付きor下付きにしたい文字を選択した状態で 上付き文字下付き文字 をクリックしましょう。

取り消し線について 取り消し線

取り消し線もフォトショの使用用途によっては便利なのかもしれませんね。僕は使ったことがありませんが…。

3-2.アラビア語やドイツ語などを入力したいときは?

変わった言語を入力する方法

アラビア語やフィンランド語など、変わった言語を入力したいということも人によっては稀にあるかもしれません。そんなときは、文字パネルの言語設定(画像オレンジ枠の部分)から使いたい言語を選ぶことになります。ただし、言語によっては他にもいくつか設定が必要になる場合があります。たとえば、アラビア語を入力するときはPhotoshopの環境設定まで変える必要があります。

参考
アラビア語の入力|Adobe
気になる方はこちらが参考になるかと思います。

3-3.文字が荒いorギザギザしてると感じた時の対処法

文字がギザギザしたときの対処法

Photoshopを使っていく中で、文字の表示が荒く見えたときは、まずこのオレンジ枠の部分を疑ってみましょう。ここが[なし]になっていると、文字の輪郭がギザギザしているように見えます。これを直したいときには[なし]から[滑らかに]へと選び変えましょう。[シャープ」「鮮明」などでもOKです。それぞれ試してみて、最もしっくりとくるものを選べば良いでしょう。

ちなみにですが、このギザギザを滑らかに見せる機能は”アンチエイリアス”と呼ばれたりします。

4. 文字パネルメニューの解説

文字パネルのパネルメニューの解説
文字パネルのパネルメニュー

文字パネルの右上のパネルメニュー をクリックすると、ずらーっとたくさんの項目が表示されます。ここからは、ざっとメニュー項目の意味・機能を解説していきます。

4-1.テキストの向き調整系メニュー

[テキストの向きを変更]

すでに入力した文字であっても、文字パネルメニューの[テキストの向きを変更]をクリックすると縦書き⇔横書きの切り替えができます。

[縦組み中の欧文回転]

縦書きの欧文回転

縦書き中のアルファベットの表示向きを変えられます。縦書きの文字列を選択しているときでないとクリックできないようになっています。

[縦中横]

縦中横

縦中横とは、縦書きの文字列の中で一部の文字だけ横書きにできる機能のことです。使い方は簡単。縦書きの文の中で、横に向けたい文字だけを選択して、文字パネルメニュー[縦中横]をクリックするだけです。

4-2.[文字揃え]とは?

続いて、文字パネルのパネルメニューには[文字揃え]というものがあります。[欧文ベースライン]や[中央]、[仮想ボディの上/右]などが選べるのですが、これは何なのでしょうか。この文字揃え設定、異なるフォントサイズで文字入力するときにとても重要になります。

フォトショ文字揃え

とはいえ、難しい話では全くなく、上の図を見て頂けばパッと分かるかと思います。[欧米ベースライン]だと異なるサイズの文字が綺麗に下に揃っていますね。一方で[中央]だと文字が真ん中のライン、[仮想ボディの上/右]だと上のラインに揃っていますね。このように文字の上下の位置を調整するのが[文字揃え]メニューです。

基本的には[欧米ベースライン]を選んでおけば良いかと思いますが「なんかバランス悪いな・・・」と感じたときには、ここでしっくり来るものがないか色々と試してみるのが良いでしょう。

4-3.加飾関係の文字パネルメニュー

文字パネルのパネルメニューの[OpenType]や[太字][斜体][打ち消し線]などは先程説明した加飾機能と同じものになります。文字パネルのアイコンからでも、パネルメニューからでも実行できるわけですね。

4-4.[文字幅を調整][システムレイアウト]とは?

文字パネルのパネルメニューの[文字幅を調整]と[システムレイアウト]については、基本的には触る必要のない部分です。[文字幅を調整]機能がONになっていると(メニュー横にチェックがつきます)字間が自動でほんのわずかに調整されます。一方のシステムレイアウトをONにすると、アンチエイリアス(文字を滑らかに見せる機能)がオフになり、テキスト全体の字間が自動で統一されます。いずれにせよ、カーニングやトラッキングなどで字間調整をしていると、これらのONとOFFが自動で行われるので意識する必要はないかと思います。

4-5.[分割を禁止]とは?

文字パネルメニューの[分割を禁止]は、文章の中で「途中で改行してほしくない単語」がある場合に使う機能です。例えば「サルワカ」という文字列を選択したうえで[分割を禁止]をクリックすると、サルワカという単語が
“サ
ルワカ”というように途中で改行されることが無くなります。あまりに長い文字列を選択して[分割を禁止]すると、機能が無効になったり、文字が消えてしまうことがあるのでご注意ください。

4-6.[文字パネルを初期設定に戻す]とは?

その名の通り、文字パネルのフォントサイズや行間などの設定を、初期設定の状態に戻します。何かと設定を変えて「ごちゃごちゃしてきたな…」というときに使いましょう。

5. 段落パネルで段落設定をする

段落パネルの設定

Photoshopでは、文字の中央寄せや左寄せ、改行位置などの設定は「段落パネル」から行います。簡単に段落パネルの使い方についても説明しておきます。

5-1.文字の右寄せ、左寄せ、中央寄せの設定

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-15-42-13

1番上のアイコンは、左からそれぞれ文字の「左寄せ」「中央寄せ」「右寄せ」の設定になります。これは説明するまでもないですね。

5-2.文字の両端揃え(均等配置)

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-15-42-13-%e3%81%ae%e3%82%b3%e3%83%92%e3%82%9a%e3%83%bc

こちらのアイコンは行の両端を揃えたうえでの左寄せ・中央寄せ・右寄せ設定になります。

両端揃えの段落設定

上の画像のように「ただの左寄せ」の場合だと各行の最後の文字とテキストボックスの間にちょっと空きができます。この例だと、それでも綺麗に行の右端が揃っているのですが、文章によっては行によって改行位置が左右にずれてしまうことがあります。

一方で、「両端を揃えて左寄せ」の場合、各行の最後の文字が、テキストボックスの端にきっちりと揃います。どんな文章でも同じ位置できっちりと改行されるため、非常に綺麗に見えるのですね。それで、両端揃え×左寄せの場合は、最終行がこの画像のように左に寄ります。

両端揃えの違い こちらのアイコンは最終行まで右端にきっちりと揃う設定になります。

両端揃え

この画像のような感じですね。

5-3.行の左右のインデント設定

行のインデント

こちらは、行の左右のインデント(左右のスペース)の設定です。たとえば、左側のアイコンのインデントの数値を10ptにすると、各行の左に10ptの余白ができます。テキストボックスごと動かせば良い話ではあるので、あまり使う機会はないかもしれませんね。

最初の文字のインデント

こちらは段落の1番はじめの文字だけを、指定した分だけ右にずらす機能です。きちっとした文章でよく見かけるやつですね。こちらは文章をたくさん打つときには、よく使う便利な機能でしょう。

5-4.段落の上下のインデント設定

段落のインデント設定

段落の上下のインデント

こちらは、段落上下の空白の広さの設定です。左側のアイコンが段落の上のスペース指定、右側のアイコンが段落の下のスペース指定になります。たとえば、段落の下のスペースを20ptにすると、こちらの図のようになります。薄いオレンジの部分が20ptのスペースになります。しっかりした文章をのせる場合には便利でしょう。

5-5.段落パネルの[禁則処理]とは?

禁則処理というと難しい言葉でちょっと抵抗感があるかもしれませんが、簡単にいうと単語の途中で改行しないようにする設定のことです。

[禁則を使用しない]を選択すると「みかん」の「み」のところでも改行がされます。一方で[強い禁則]を選択すると「みかん」という単語が途中で分割されずに、必ずどちらかの行に入ることになります。

まとめ
  • [禁則を使用しない]の場合
    果物といえばみ
    かん
  • [強い禁則]の場合
    果物といえば
    みかん

禁則の選択肢の中には[弱い禁則]と[強い禁則]がありますが、違いは”どこまで単語とみなすか”という程度の違いになります。どちらも試してみて、しっくりとくる方を使えば良いでしょう。

5-6.段落パネルの[文字組み]とは?

段落パネルの[文字組み]ではドロップダウンで[約物半角]や[行末約物半角]などを選べます。この”約物”とは句読点(、。)やカギカッコ(「」)などの記号のことです。つまりそれぞれの選択肢は次のような意味になります。

[文字組み]の種類

  • [約物半角]:カギカッコや句読点だけ半角にする
  • [行末約物半角]:行末のカギカッコや句読点だけ半角にする
  • [約物全角]:カギカッコや句読点だけ全角にする
  • [行末約物全角]:行末のカギカッコや句読点だけ全角にする

5-7.[ハイフネーション]とは?

ハイフネーション

ハイフネーションは英単語の分割についての設定になります。ハイフネーションにチェックを入れると、図の上の例のように、dynamiteという単語が行末で切れてハイフン(-)で繋がっています。これがハイフネーション機能というやつです。一方で、ハイフネーションのチェックを外すと、単語が途中で切れないようにまるっと改行します。ハイフネーションは、英単語をハイフンで分ける機能なんだな、という程度に頭に入れておけば良いかと思います。

6. Photoshopの文字についての困りごと対処マニュアル

ここからは、Photoshopの文字入力に関するありとあらゆる困り事の対応法を書いていきます。今後も、何か思いついたら追記していきます。

6-1.文字(テキストボックス)を一瞬でコピーする方法

複数の箇所に文字を挿入したいとき、いちいちテキストボックスを作って文字の設定をするのは面倒ですよね。そこで作成済みのテキストボックスをコピーしましょう。コピー方法は簡単です

覚えたい!
alt を押しながらテキストボックスをドラッグでコピー※ Macの場合は[option]

これによりドラッグした先に、全く同じテキストボックスがコピーされます。このショートカットは文字だけじゃなく図形など何かとコピーするのに使えるので覚えておきましょう。

6-2.入力した文字を修正ができない(ボックスが選べない)

編集したいテキストレイヤーをきちんと選択していますか?

レイヤーパネルで編集したいテキストのレイヤーが選ばれているか確認しましょう。

文字がラスタライズされていませんか?

例えば、テキストレイヤーの上にブラシで何かを描こうとすると、Photoshopさんから「ラスタライズしますか?」と聞かれると思います。このラスタライズとは簡単にいうと画像化のことです。つまり、ここで「OK」を選ぶと文字がただの画像になってしまいます。そのため、もう文字の色を変えたり、フォント種類を変えることはできません。ブラシや塗りつぶし等の加工はテキストレイヤー上にはせず、レイヤーパネルから 新しいレイヤーを作って行いましょう。

参考
ラスタライズについて
ラスタライズやスマートオブジェクトについてはこちらの記事が参考になると思います

6-3.パネルで色やサイズを変えても反映されない

変えたいテキストのレイヤーは選ばれていますか?

レイヤーパネルで変えたいテキストが選ばれているか確認してみましょう。

カーソルがチカチカしてませんか?

テキストボックスでカーソルがチカチカしているところでフォント種類や色を変えても、それから入力する文字にしか変更は反映されません。すでに入力したい文字の設定を変更したい場合は、変更したい文字をドラッグで選択しましょう。テキストボックスの全文字を変えたい場合は、一度escなどでテキストボックスを閉じてから、色などの設定を変えても反映されます。

6-4.縦書き↔横書きを変更するには?

この記事の前半のここの説明をご覧くださいませ。

6-5.パネルが一部しか表示されない

おそらく簡易表示になっています。文字パネルの右上にあるパネルメニュー をクリックして[オプションを表示]をクリックしましょう。

6-6.文字の向きを変更したいor回転させたい

フォトショ文字の回転

テキストボックスの角のあたりにカーソルを置くと両側矢印になるので、そこでぐるっとドラッグしましょう。

6-7.文字がギザギザに表示されてしまうときの対処法

この記事のここの説明をご覧くださいませ。

6-8.サイズの違う文字の高さがずれるときの対処法

この記事のここの説明をご覧くださいませ。

6-9.カーニングの「メトリクス」と「オプティカル」とは何?

文字パネルのカーニングのドロップダウンの中に[メトリクス]、[オプティカル]というものがあります。

「メトリクス」はフォントの持っている字詰め情報を元に、字間を自動調整してくれるものです。字詰め情報がないフォントも多数あり、それらのフォントでメトリクスを選んでも使いモノになりません。

一方で「オプティカル」はフォントに字詰め情報が無くとも、文字の形状を読み取り、自動で字間を調整してくれます。とはいえ問題は、この文字の形状を読み取る精度が、日本語フォントだとあまり高くないことです。ですので、どちらも、日本語だけの文字列、あるいは日本語と英語が混ざった文字列で使うのはあまりおすすめしません。

6-10.カーニングができない、数字が選べないのは何故?

カーソルが文字列のどこかに置かれていますか?カーニングにより字間調整は1文字ずつしかできません。そのため、カーソルが置かれていないとカーニングの数字は選択できないようになっています。

6-11.文字のスタイル設定を保存しておくには?

お気に入りのフォント種類や色、サイズなどの文字スタイル設定は[文字スタイルパネル]により保存しておくことができます。

文字設定を保存する方法

文字パネルで保存したい文字のスタイル設定にあらかじめ変えておきましょう。

文字スタイルパネル:新規作成

1

文字スタイルパネルで新規作成

「文字スタイル」パネルで新規作成 をクリックしましょう。

文字スタイル1+をクリック

2

[文字スタイル1+]をクリック

新規作成により[文字スタイル1+]というものが作られたと思うので、それをクリックしましょう。すると、文字設定のポップアップが開きます。

文字スタイルパネル:名前をつけて保存

3

名前だけ変えてOK

後から分かりやすい名前を入れましょう。細かな設定はここではしなくてOKです。

文字スタイルパネル:現在の文字設定を反映

4

●をクリック

最後にパネル下部の●をクリックしましょう。これにより、さきほど新規作成したスタイル設定に、現在文字パネルで設定されているスタイル情報が反映・保存されます

文字スタイルの呼び出し

5

簡単呼び出し

保存した文字スタイル設定を呼び出したいときは、呼び出したい設定を選択した上で、パネル下部のオレンジ枠で囲まれたアイコンを選びましょう。これだけでお気に入りのスタイル設定が、文字パネルのフォント設定に反映されます。

段落のスタイル設定も[段落スタイル]パネルから同じ手順で保存しておくことができます。

サルワカくんの顔(通常)
サルワカくん
この「文字入力の困りごと対処マニュアル」は今後も随時更新していきます。
サルワカ