イージー・ホームページ

誰でも簡単にホームページの開設・運用を

  • 画像に文字をのせて画像の効果を向上させよう【GIMP2.0】

画像に文字をのせて画像の効果を向上させよう【GIMP2.0】

アイキャッチや見出しに、画像を使って伝えたい内容を表示する場面が多々あると思います。
素材をもっと効果的に加工する「画像にテキストを追加」の方法を説明していきます。

使用するアプリケーションは、無料の画像編集ソフト『GIMP 2.0』です。
まだGIMPをインストールしていない方は、「できる！無料画像編集ソフト「GIMP」」でダウンロードサイトからインストールまでを説明していますので、そちらを参照しながらインストールを完了してください。

また、GIMPでファイルを開く方法は「」で説明していますので、そちらを参照しながら画像ファイルを開いてください。

画像素材の用意にお困りの方は、非常に安価で画像素材取り放題の『写真素材ダウンロードサイト【写真AC】』の活用をオススメします。
写真ACのクオリティに満足出来ない方には『写真・イラスト・動画素材販売サイト【PIXTA（ピクスタ）】』がオススメ。写真ACよりも購入費用がかかりますが、その分写真のクオリティは高いです。

目次

画像へのテキスト編集

テキストツール

ファイルを開いたら、GIMP画面左側にあるツールアイコン一覧の中から上図の「A」マークのアイコン「テキストツール」を選択します。

テキストツールを選択後、画像内のテキストを表示させた箇所の先頭になりそうな場所をクリックすると、上図のようにテキスト編集パレットと□のハンドルが現れますので、まずは表示させる文字を入力していきます。

テキストを入力すると、入力したテキストの四隅に□のハンドルが表示されます。
テキストボックスは、少し長めの文章を箱組したりする場合に利用しますが、キャッチコピーなどの編集の場合は調整する必要はありません。テキストボックスは、調整しなければ文字幅に合わせて拡大・縮小します。

テキストボックス領域の編集をする場合は、画像のトリミングと同じですのでそちらを参照ください。

テキストレイヤー

入力されたテキストは、レイヤーと呼ばれる重ね構造の中で編集されます。
GIMP画像右下に、上図のようなレイヤーを表示するエリアが表示されていると思います。
テキストのレイヤーは「A」の文字のサムネイルで表示されています。

テキストレイヤーは、透明なフィルムに文字を表示させて編集しているようなイメージです。
編集元の画像が変更されることはなく、テキスト編集がうまくいかず最初からやり直したい場合などは、テキストレイヤーを削除して最初からやり直すことも可能です。
レイヤーを削除する場合は、削除したいレイヤーが選択状態（背景が真っ黒）を確認して、レイヤーエリア右下にある「×」ボタンで削除することができます。

テキスト編集パレット

入力したテキストは、「書体」「文字の大きさ」「文字の装飾（太字、斜体、下線、取消線）」「ベースライン」「文字間」「文字色」をそれぞれ編集することができます。

編集範囲の選択

文字の編集は、一文字の変更から全文字一括変更まですることができます。
変更対象は、選択された文字のみとなります。

変更したい文字の前から変更したい文字（範囲）の最後までをドラッグします。
全体を編集する場合は、テキストの最初から最後までをドラッグします。
すると、対象となる範囲内の各文字が黄色い罫線で囲まれます。
黄色い罫線に囲まれた文字に対してのみ、編集が反映されます。

書体の変更

GIMP画面右上に、上図のような「書体一覧」エリアが表示されていると思います。
書体の変更は、このエリアに表示されている書体から選択します。
書体名の左側に書体見本も表示されるので、変更後の参考になると思います。

文字の大きさ

文字の大きさは、テキスト編集パレットの文字の大きさを調整する欄で変更します。
文字の大きさを示す数字は、エリア右側にある上下三角のボタンでも調整できますし、直接数字を編集することができます。

この編集方法は、下記に説明します「ベースライン」「文字間」にも該当します。

文字の装飾

太字や斜体、下線、取消線などは、Wordなどにある機能と同じです。
必要に応じた編集を行ってください。

ベースライン

あまり使うことはありませんが、ベースラインとは文字の上下の位置を変更する機能です。

文字間

パレットでは「カーニング」とバルーンが表示される欄が、文字と文字の間を調整する機能です。

一箇所だけ文字間を空けたい場合は、空けたい文字と文字の間をクリックすることでその部分の文字間だけを広げたり狭めたりすることができます。

全体の文字間を広げたり狭めたりしたい場合は、全体を選択する事で均等に編集することができます。

色の変更

パレットの「文字色」の部分をクリックすると下図のような“カラーピッカー”が表示されます。

ホームページ用の画像は『RGB』カラーですので、上図の黄色い枠を調整することで対応できます。

RGBについて

RGBは、R（レッド）G（グリーン）B（ブルー）各色の発光の量によって色が決まります。
ですので、各色のボリュームが高いほど発色が良かったり明るくなります。
逆に、ボリュームが少ないと発色が悪く、暗くなり、全てが0の時、光が無い状態の黒になります。

ピッカーの各色のスライダーで色の調整ができますので、求める色になるようスライダーで調整を行ってください。

写真の中に文字色にしたい色が合った場合は、ピッカー内の「HTML 表記(N)」の横にスポイトのマークが含まれたボタンがありますので、そのボタンをクリックした後、画像内の文字色にしたい箇所をクリックすれば必要な色を抽出してくれます。

色の設定が完了したら、ピッカー画面下にあるボタンの中の「OK」ボタンで文字色を確定させます。

文字の改行

文字の改行は、改行させたい箇所（文字と文字の間）をクリックしてから「Enter」キーで改行されます。

テキストボックスの移動

入力した文字の表示位置を変更したい場合は、GIMP画面左上にあるツールアイコン一覧の中から、上図の「移動ツール」アイコンを選択します。
あとは、文字の何処でも良いのでクリック、そのまま移動させたい場所までドラッグすればテキストボックスが移動します。

【注意】
文字ではない場所をクリックしてしまうと、テキストレイヤーから画像レイヤーに選択が切り替わり、ドラッグしてしまうと画像の位置が変わってしまいます。確実に文字の部分を選択するようにしましょう！
もし画像の位置を動かしてしまった場合は、「Ctrl + Z」ボタンで元に戻すことができます。

入力情報の変更

一度入力・編集したテキストも、改めて入力し直すことができます。
ただし、テキスト全てを選択して入力し直すと、書体以外の情報は初期の状態に戻ってしまうので注意してください。

テキストの加工が完了したら、JPEG画像などホームページで使用できる形式のファイルににエクスポートして終了します。

如何でしたでしょうか。
画像もテキストを付加するだけで、イメージが大きく変わってきたり、訴求効果がアップしたりします。
効果的な画像で、より分かりやすいホームページを作成しましょう！