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

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

＜Web担当者編 第１回＞
GIMPとは何か？についてお伝えします。

担当は濱田です。

このセミナーでは、高価なPhotoshopの代わりに無料の画像加工ツール「GIMP」を導入し、Webサイト運営に欠かせないバナー作成の手順を解説します。

キャンバスの新規作成や画像のインポートといった基本操作から、矩形選択ツールや塗りつぶしツールを使ったバナーの「縁（飾り枠）」の作り方まで紹介します。

最終ステップとして、完成した画像の保存や各種ファイル形式へのエクスポート方法までを網羅した、Web担当者の作業効率を上げるための実践的な入門講座です。

” GIMPとは何か？”をテーマに、
今日お伝えしたいことは２つあります。

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

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

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

皆さんは「GIMP」という無料の画像加工ツールがあることをご存じでしょうか。GIMPは無料で提供されているオープンソースの画像編集ソフトフェアです。WindowsやMacなど様々なOSに対応しており、無料でありながら多才能な機能を持っています。

無料のGIMPと、代表的な有料ソフトであるPhotoshop。この2つの大きな違いはどこにあるのでしょうか。

結論から言うと、基本的な画像編集機能において両者に大きな差はありません。どちらも初心者向けの基本ツールから上級者向けの高度な機能まで幅広く備えており、あらゆるユーザーに対応しています。

また、操作性や使いやすさに関しても、どちらもシンプルに洗練された操作画面（インターフェース）を採用しているため、大きな違いを感じることなくスムーズに使用できます。

容量に関してはGIMPをインストールするのに約90KBとお手軽にインストールすることが出来る一方、Photoshopでは約3GBと、快適に利用するにはパソコンに一定以上の性能が必要です。その分、ツールの機能の幅広さや正確な編集ができるツールを備えているのはPhotoshopです。

まとめると、プロ用として使用するならPhotoshop、カジュアルに使用するならGIMPになります。

では実際にGIMPをインストールしていきましょう。最新の日本語版のGIMPはこちらのURLからダウンロードできます。(https://www.gimp.org/downloads/)

GIMPのページを開いたら「Download GIMP 2.10.22 directly」をクリックすればインストールファイルのダウンロードが開始されます。GIMPのインストールファイルがダウンロードされたら、ダブルクリックでインストール開始です。

インストール時に 「Select Setup Lanugage」という画面が表示されますが、ここでは日本語が選択できないので「English」で問題ありません。その後「Install」をクリックし、完了したら「Finish」で画面を閉じてください。

これでGIMPのインストールは完了となります。GIMPを起動すれば自動的に日本語になっているはずですが、もし他の言語になっている場合は、「編集」→「設定」→「ユーザーインターフェース」→「言語の設定」で言語の変更が可能です。

次に2つ目、GIMPを使ったバナー作成手順です。

まず、新しく作成するための土台を作成します。「ファイル」→「新しい画像を作成」をクリックしキャンバスサイズを設定します。

キャンバスサイズとは全体の見える範囲のことを指し、例えば素材の画像がキャンバスより大きければ素材画像の大きさを調整しない限り、一部しか表示されません。キャンバスサイズを指定しOKをクリックすれば新規でキャンバスが作成されます。

画像ファイルを開いたりインポートしたいときは「ファイル」→「開く/インポート」をクリックして、開きたい素材画像を選択しましょう。

ですがこのやり方だと新規で作成になってしまうので、先ほど新規で作成したキャンバスに追加したい場合「ファイル」→「レイヤーとして開く」をクリックし、追加したい素材を選択しましょう。

今説明したのは基本的な画像の開き方で、ドラッグ＆ドロップで簡単に開くことも出来ます。

続いて新規で追加した画像に簡単な装飾を加えるやり方を説明します。GIMPにはよく使用される矩形選択ツール（くけい選択ツール）というものがあり、正方形や長方形で選択範囲を作成でき、さらに角を丸くしたり塗りつぶしたりと様々なことが出来ます。

今回はその矩形選択ツールを使って縁を作成していきます。まずは、ツールボックスから矩形選択ツールを選択します。

続いて、選択したい範囲をドラッグすると長方形の選択範囲が作成されます。今回はキャンバス全体を選択しましょう。矩形選択のツールオプションからサイズで、キャンバスと同じサイズを入力します。入力したら、左上角の座標をどちらも0に設定します。こうすることでキャンバスにちょうど選択範囲が収まります。

次に「選択」→「選択範囲を縮小」をクリックし、選択範囲を小さくします。選択範囲の幅は画像の大きさによって異なるので、縁の大きさを考えたうえで調整してください。
選択範囲を小さくした範囲が縁の太さになります。

調整したら、選択→選択範囲の反転をクリック、これで縁が選択範囲になりました。別の方法でも縁を作ることは可能ですが、矩形選択ツールでの縁の作り方はこのような手順で作成します。

最後に縁に色を付けます。 色を付けるするには塗りつぶしツールを使用します。ツールボックスにある塗りつぶしツールを選択し塗りつぶしたい色を選択し、塗りつぶしたい箇所をクリックすると色が反映されます。

ではこの画像をエクスポート（書き出し）していきましょう。「ファイル」→「名前を付けてエクスポート」をクリック→ファイル名、保存場所、ファイル形式を選択したら「エクスポート」をクリックすることで選択したファイル形式で保存されます。

作業データを保存する場合は「ファイル」→「名前をつけて保存」で名前を入力すれば保存されます。

以上でGIMPを使った画像作成までのステップをご説明しました。

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

次回は「Webで使う画像について」詳しく解説いたします。最後までご覧いただきありがとうございました。