こんにちは、キノトロープアカデミーです。

「キノトロープアカデミー」は、Web業界のトップランナーである株式会社キノトロープの社員が講師を務めるオンラインアカデミーです。リモートワーク時代に不可欠な「個のスキル」を高め、職人のような「匠」を目指す人を増やしたい。そんな願いを込め、基礎から経営判断、業務フローまで、一生モノのナレッジを惜しみなく公開していきます。

＜Web担当者編第4回＞
「画像に文字を入れてみよう」についてお伝えします。

担当は濱田です。

本記事では、無料画像加工ツール「GIMP」を使ったバナーへの文字入れ方法について、フォント選びから具体的な装飾テクニックまでを解説します。

画像内に文字を入れるメリット・デメリットや、ユーザーの閲覧環境（PC・スマートフォン）に合わせた文字サイズの注意点といった、エクスポート前に確認すべき重要なポイントを紹介します。

さらに、ゴシック体と明朝体が与える印象の違いに加え、GIMPへのフォント追加手順、文字ツールでの入力方法、文字を目立たせるドロップシャドウ（影）の細かな調整ステップまでを網羅した実践的な内容となっています。

” 画像に文字を入れてみよう”をテーマに、
今日お伝えしたいことは3つあります。

今回は、Web担当者の方向けに解説します。Webサイトを運営する上で、日々のちょっとした画像加工や修正ができれば、作業効率が一段と上がると考えている方も多いかと思います。

でもPhotoshopは買ってもらえないし、高価なツールを準備するのが難しい、という方に朗報です。

【Web担当者編】のシリーズでは、Webサイトに必要不可欠な画像の加工方法について、フォトショップ等の高価なソフトを使わなくとも行う方法を解説します。

画像に文字入れをする前に、エクスポート（書き出し）した後のことを考えてみましょう。表示するディスプレイに依存してサイズが変わるので、PCのディスプレイでは読めていた文字が、スマホやタブレットなどで小さくて読めないということになる可能性があります。

またエクスポート（書き出し）した画像は文字も含め画像になっているため、Webサイトに訪れるユーザーはテキストをコピーすることができませんし、検索もできません。

また、運用面でもテキストを後で修正しようとなると、その画像の作業データからでないと編集できないため手間がかかります。

そして、デバイスに合わせた自動調整もできません。

HTMLで文字を作成すればPCでもスマートフォンでもレイアウトを変更することが出来ますが、文字も含めて画像の一部となっている場合は、作業データからでないと調整は不可能です。もちろん、ユーザー環境に応じた最適化は不可能です。

続いては画像に文字を入れるうえでフォントの与える印象と効果について解説します。フォントを選ぶ際には、伝えたいイメージ、そのフォントを見る人に与える印象等、適切なフォントを選ぶためにフォントが与える印象について知っておきましょう。

今回はゴシック体と明朝体の2つのフォントを紹介します。

まずゴシック体の特徴としては、文字の装飾がない書体です。縦横の線の太さが同じになるようにデザインされており、全体的に均一な印象があります。

太字にしたときの文字の印象が強いため、見出し等強調する部分での使用に適していますが、ゴシック体の様な太い文字で、長い文章を書くと黒々としてしまうため、可読性が下がります。

ゴシック体は力強い、安定感、親近感、カジュアル、男らしさ等の印象を与えます。

続いて明朝体です。明朝体の特徴は文字の装飾がある、筆で書いたような書体です。

横線が細く、はねや払いがあり線の太さに強弱があるフォントで、長い文章で使っても読みやすいですが、どんな明朝体でも良いというわけではなく、太い明朝体では可読性が下がってしまいます。

明朝体は大人っぽさ、綺麗、真面目、高級感、和風等の印象を与えます。

GIMPにフォントを追加したいときは、GIMPの特定のフォルダにフォントを配置し、再起動することで追加されます。
「編集」→「設定」→「フォルダ」→フォントを選択し、フォント用フォルダがどこに格納されているのか確認します。格納先が分かったらその場所にフォントを追加して完了です。

それではいよいよ文字を入れていきましょう。ツールボックスから文字ツールを選択します。するとツールボックスの下にツールオプションが表示されるので、先ほど追加したフォントから「Aa」と書かれた文字フォントボタンをクリックします。すると追加したフォントが選べるようになります。

文字を入力する際は、文字ツールを選択した状態で、文字を入れたいと思う場所に左クリックすることで文字を打ち込むことが可能です。

今回文字の色は白で作成しますが、文字の色を変えたい場合の方法をご紹介します。文字ツールのツールオプションから「色」と書いてある右側の箇所をクリックすると色を変えることができます。

文言の一部だけ色を変えたい場合は、変えたい文字をドラッグし、テキストウィンドウから色を変更する必要があります。

文字が背景と被ってしまい見えづらい場合は、目立たせるために影をつけてみましょう。文字の周りに黄色の点線がある場合、その枠内で影を作ることになるためテキストレイヤーを選択した状態で、プルダウンメニューから「レイヤー」→「レイヤーサイズをキャンバスに合わせる」で調整する必要があります。

調整したらプルダウンメニューから「フィルター」→「照明と投影」→「ドロップシャドウ」でプレビューを見ながら、影の位置やぼかし具合を調整していきます。

主にドロップシャドウで調整する箇所はこちらになります。XとYが書かれている箇所は影の位置を調整できます。Blur radiusと書かれている箇所は影のぼかし具合で、数値が大きいほど強くぼやけます。 Colorは影の色を調整できます。 Opacityは影の透明度を調整でき、数値が小さいほど透明になります。

ドロップシャドウの設定詳細
X Y : 影の位置を調整
Blur radius : 影のぼかし具合を調整
Color : 影の色
Opacity : 影の透明度を調整