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

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

＜Web担当者編 第3回＞
「写真を調整してみよう」についてお伝えします。

担当は濱田です。

本セミナーでは、Web担当者に向けて無料ツール「GIMP」を活用した実践的なバナー作成と写真加工の手順を解説します。

まず事前準備として、作業効率を高めるための初期設定や、ベースとなる「キャンバスサイズ」と素材自体の「画像サイズ」の違い、画像のインポート方法といった基本操作を解説します。

さらに、デザインの要となる「レイヤー」の概念と基本操作を網羅し、切り抜きツールを用いたトリミングや、写真の「明るさ・コントラスト・色味」を美しく補正する具体的な加工ステップを紹介します。

”写真を調整してみよう”をテーマに、
今日お伝えしたいことは3つあります。

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

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

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

今回から実際にバナー画像を作成していきましょう。まず、バナーを作成していく前にGIMPの初期設定を行うことをお勧めします。初期設定をすることで、自分がより使いやすいようにカスタマイズすることができて作業効率も上がります。

「編集」から「設定」→「ユーザーインターフェース」で、テーマやアイコンの見た目や色、ツールボックスの配置の設定等が可能ですので自分が使いやすいように設定しましょう。

次にキャンバスサイズと画像サイズについて解説します。写真の大きさには「キャンバスサイズ」と「画像サイズ」の2種類があり、キャンバスサイズはベースになる大きさで、キャンバスサイズを変更しても画像そのものの大きさは変わりません。

画像サイズは画像そのものの大きさ、画像サイズを変えると画像全体の大きさも変わります。おさらいですが、キャンバスの作成は「ファイル」から「新しい画像を作成」で作成することが可能です。

作成した後でキャンバスサイズの変更をしたい場合は「画像」から「キャンバスサイズの変更」→「リサイズ」で可能です。

それでは素材となる画像をインポートしていきましょう。新規作成からのインポートは「ファイル」→「開く/インポート」をクリックし、使用したい素材の場所を選択します。

現在の画像に別の素材画像を追加したい場合は「ファイル」→「レイヤーとして開く」から追加することが出来ます。一番簡単な方法としてドラッグアンドドロップで追加することもできます。

画像サイズの変更をする場合は、ツールボックスから拡大縮小ツールで変更したい画像をクリックすることで可能です。

画像を加工する上で、最初にレイヤーについて理解しましょう。レイヤーとは画像の階層の様なもので、層を重ねわせて1枚の画像を表現します。

パーツごとにレイヤーを分けて作成することで、編集したいパーツだけ編集することが出来ます。レイヤーの順番で前面に配置したい時や背面に配置したい時に容易に出来ます。

それでは実際にレイヤーを追加してみましょう。右下にレイヤーダイアログがあり、レイヤーを選択します。 レイヤー作成するにはレイヤーダイアログから「新しいレイヤーを画像に追加します」をクリックし、レイヤー名、幅、高さ、レイヤーの塗りつぶしの色を選択してOKを押すことで作成することが出来ます。

レイヤーを複製したい場合、複製したいレイヤーを選択、「レイヤーを複製」をクリックすることで追加されます。レイヤーを複製すると複製されたレイヤー名の後に「コピー」とつくので、名前をダブルクリックすることでレイヤー名を変更できます。

レイヤーを非表示にしたい場合、レイヤーの右側にある目のアイコンをクリックすることでレイヤーが非表示になります。表示したい場合はもう一度目のアイコンがあった位置をクリックすると表示されます。

レイヤーを並べ替えたい場合、並べ替えたいレイヤーを並べ替える先までドラッグ＆ドロップすることでレイヤーの重なる順番を変えることが出来ます。また、並べ替えたいレイヤーを選択した状態で「レイヤーを一段上に移動」「レイヤーを一段下に移動」をクリックすることで一段ずつ移動も可能です。

GIMPにはレイヤー自体を完全に「ロック（固定）」する専用のボタンはありませんが、実質的に同じ効果を得られる便利な機能があります。

1つ目は、移動したいレイヤーを選択し、Shiftキーを押しながらドラッグする方法です。これにより、選択したレイヤーだけを狙って動かすことができます。

2つ目は、移動ツールのツールオプションにある「機能の切り替え」で、「アクティブレイヤーを移動」を選択する方法です。この設定にしておけば、現在アクティブ（選択中）になっているレイヤーだけを確実に編集・移動できるようになります。

続いて必要に応じてトリミングを行います。トリミングとは画像の一部を切り取り、必要な部分のみを残すことです。

ツールボックスから切り抜きツールのアイコンを選択、または「ツール」→「変形ツール」→「切り抜き」から行うことができます。

ツールを選択後、画像の上をドラッグして切り抜きたい範囲を指定しましょう。範囲が選択された後は、ドラッグ操作で位置の微調整やサイズ（拡大・縮小）の変更も可能です。

最後に、切り抜く範囲の中で左クリックをすれば、きれいに画像を切り抜くことができます。

次に画像を加工していきます。写真全体が暗い場合は明るさなどを調整していきましょう。

明るさとは、明度または輝度（きど）のことで、明度はRGBカラーでの計算上の明るさ、輝度（きど）は人間の目が感じる明るさです。ここでいう明るさとは明度のことを指します。

色味とは特定の色を指すものではなく、全体的に青っぽい色を「青みがかった」等の色合いのことです。

コントラストとは、画像の最も明るい所と、最も暗い所の明るさの差です。この差が小さいと画像にメリハリが無くなってしまいます。コントラストが高い写真は暗い所と明るい所の差が大きくなります。

それでは早速調整してきましょう。「色」→「明るさ・コントラスト」を選択するとウィンドウが開き、明るさ、コントラストを写真に応じて調整してOKを押すと補正されます。

次は色味を調整します。「色」→「レベル」を選択するとウィンドウが開きます。チャンネルから調整したい色味を選択し、グラフ下の三角をドラッグすることで色味を調整することができます。

反対側にも画像を追加して最後に少し装飾を加えてみましょう。だんだん完成に近づいてきました。

の２点についての内容でした。

次回は今回作成した画像に対して、文字入れを行っていきます。最後までご覧いただきありがとうございました。