- Webサイトのアイキャッチや画像の編集を簡単にしたい！
- 画像に文字や矢印を挿入したい！
- 簡単に文字や図形の縁取りがしたい！
- 決まったサイズに画像を変換したい！
当サイトでも画像を使ってWordPressプラグインやさまざまな便利ツールの解説を行っていますが、画像の加工は思いのほか時間のかかる作業です。
解説系の記事で使っている画像の加工は、矢印や文字を使って、なるべく読んでいただいている方に分かりやすいように作っています。
Adobe PhotoShopやIllustratorなどの専門的なソフトは、立ち上がるまでに時間がかかる上日本語の挿入や矢印の加工が面倒なので、記事に使う画像の簡単な加工には向きません。
「PhotoScape X」は、当サイトでも画像の加工によく使っているソフトで、動作が軽く、文字や記号の挿入が簡単なのが特徴です。
今回は、Webサイトで使うアイキャッチや画像の加工に便利な「PhotoScape X」について徹底解説します！
「わかりやすい画像」とは？
インターネットビジネスラボでは、WordPressプラグインをはじめとするビジネスが便利になるツールを解説する時に画像を多く使っていますが、画像を作るときは次のようなことに気を付けています。
- アイキャッチ画像はテーマに合わせてサイズを変更
- 設定画面などの文字がはっきり見える画像サイズで保存
- 枠や矢印などを使ってポイントがわかるように加工
- 図形や文字は背景の画像と区別できるように縁取り（アウトライン）で加工
- 操作が必要な場合は番号をつけて、順序通りに操作できるようにわかりやすく加工
「PhotoScape X」はWebサイトで使うアイキャッチや解説に使う画像を加工するのにとても便利なツールです。
「PhotoScape X」のメリット
「PhotoScape X」はWindows版とMac版があり、どちらでも似た操作性で使える点が魅力です！しかも基本機能は無料！有料版もありますが、無料で十分です。以下のような加工が簡単にできます。
- 文字や記号の挿入
- 文字や図形の縁取り加工（アウトライン）
- 画像のサイズ変更
本来なら難しく面倒な加工が簡単に、サクサクとできる点が非常に優れています。
「PhotoScape X」の導入方法
「PhotoScape X」はWindowsとMacの両方で使えて、しかも公式ダウンロードサイトから取得できるため、手軽かつ安心です。
今回は、Windows10の環境から「PhotoScape X」の導入をします。
Windows10のアプリ一覧から「Microsoft Store」を起動し、右上の検索ウィンドウに「PhotoScape X」と入力すると1番目に見つかるので、クリックしてインストールします。
インストールが完了すると「起動ボタン」が現れるので、クリックしてアプリを起動させます。
Macをご利用の方はMac版「PhotoScape X」からダウンロードができます。
「PhotoScape X」の使い方
実際の画面をお見せしながら、「PhotoScape X」の使い方を解説します。
「PhotoScape X」の画面構成
下記は実際の「PhotoScape X」画面です。多くのメニューがありますが、画像の加工で使用するメニューは主に赤枠で囲んだ①～⑤です。
①「写真編集」タブ
②エクスプローラー
③画像ビューア
④編集メニュー
⑤キャンバス（実際に加工作業をする部分です）
②のエクスプローラーと③画像ビューアを使って目的の画像を選び、作業を始めます。
画像のサイズ変更する
アイキャッチのサイズはWordPressの標準の機能で自動的に調整されるため、それほど気にかける必要はありませんが、サイズの大きい画像はWebサイトの表示速度にも影響が出るので、なるべくテーマサイズに合わせてアップロードします。
加工する画像のサイズを変更するには、「写真編集」 ＞「サイズ変更」を選びます。
当サイトが使っているテーマのメインコンテンツ幅が960ピクセルなので、画像をその幅に合わせて縮小します。
①の縦横比固定にチェックを入れておけば、②で幅を指定すれば高さも自動で入力されます。③で変更後サイズを確認し④の「適用」をクリックすればサイズ変更が完了です。
画像に枠を付ける
画像に外枠を付けるには、「写真編集」>「フレーム」を選択し、好みの外枠を選びます。
「背景」を選ぶとカラーパレットが表示され、外枠の色を細かく選ぶことができます。
「適用」をクリックすれば外枠の設定が確定して編集画面に戻ります。
画像に文字を挿入する
文字を挿入するには、「写真編集」＞「挿入」を選びます。
編集メニューに「挿入」メニューが表示されるので、「テキスト」を選ぶと文字の挿入ができます。
文字挿入の画面構成
「写真編集」＞「挿入」＞「テキスト」でテキストの編集画面になります。画面構成は以下のとおりです。
①文字の入力ボックス → 挿入する文字を入力します。改行もOKです。文字のサイズを変えたい時は、入力ボックスをもう１つ追加してください。
②フォントの選択 → 文字のフォントで印象はガラッと変わります。毎回、テキトーに選ぶのではなく、「このwebサイトの画像にはこのフォント」というように決め、統一感を出しましょう。
③文字の装飾 → 強調の太字はよく使いますが、インターネットビジネスラボでは斜体は使わないです。これもやはり、基本の装飾を決めておくと迷いませんよ！
④文字色の選択 → これも基本の色を決めておきましょう。インターネットビジネスラボは、基本は黒、赤、青の3種類のみです。
⑤フォントサイズの指定 → 画像のサイズによるので、ちょうどよいサイズを毎回見つけてください。
⑥詳細オプション → 次の項目で解説します！
文字に縁取り（アウトライン）をつける
文字に縁取りをつけるには、詳細オプションの「アウトライン」にチェックを入れます。
②でアウトラインカラーが選択できます。今回は白を選択しています。アウトラインの厚み（太さ）は③の「厚さ」から数値とスライドバーで調整できます。
ここがポイント！
画像と文字の色が似ていると、文字が判読しにくくなります。そんな時にこの「アウトライン」が活躍します。でも、アウトラインはあくまでも「わき役」。目立たない色で、さりげなく主役の文字を引き立たせてあげましょう！
文字に影をつける
文字に影をつけるには、詳細オプションの「影」にチェックを入れます。
②から影のカラーが選択できますので、今回の場合は黒を選択します。③の「距離」「角度」「ぼかし」の値を数値とスライドバーから調整して、影の雰囲気を整えます。
これも文字に存在感を与える「わき役」ですが、インターネットビジネスラボではほとんど使っていません。シンプルイズベスト。アウトラインで十分だと考えています。
文字の整列
オブジェクト（文字や図形など）がいくつかある場合、Shiftを押しながらマウスでクリックすると、オブジェクトを複数選択ができます。
文字オブジェクトを複数選択し、右クリックメニューから、「オブジェクトを整列」>左揃え を選ぶと、文字がきれいに揃います。
ここがポイント！
複数の文字がある場合、整列されていると格段に印象が良くなります！
画像に矢印や囲いを挿入する
操作の手順などを示す場合には、矢印や囲いを使った方が視覚的に分かりやすいため、おすすめです！
画像に矢印を挿入する
画像に「矢印」を挿入するには 「挿入メニュー」>「矢印」を選択します。右側メニューの①～④で調整し、矢印をアレンジすることができます。
①矢印のカラーを選択
②矢印の線種を選択
③矢印のヘッド部分の大きさを選択
④矢印にアウトラインや影をつけて立体感を演出
画像に囲いをつける
画像を囲いで囲うには、①「挿入メニュー」＞「四角いマーク」を選択、右側（②～④）で調整することで、囲いをアレンジできます。
①囲いの形を丸や四角から選択
②囲いのカラーを選択
③囲う線の種類を選択
④囲いの線の太さや丸みなどの詳細を選択
画像を保存する
画像を保存するには右下のメニューから「保存」を選択します。さまざまな形式で保存ができます。
①保存しているメニューを呼出します。
②保存先のフォルダを選択して保存します。
③pngやgifなどの拡張子を選んで保存
④「PhotoScape X」の編集が可能な状態で保存 → pngやgifなどのファイルとして保存した場合。それを再編集することはできません。再編集が必要な場合、再編集がありそうな場合はこれを選んでください。
⑤画質を指定して保存 → これは100%のままでOKでしょう！
まとめ
今回は、Webサイトで実際に使うアイキャッチや画像を加工しながら「PhotoScape X」の使い方を解説しました。
「PhotoScape X」は起動が早く、サクサクと操作できるのでストレスなく使えるうえ、Webサイトの画像加工には欠かせない文字の縁取りや矢印の挿入などが簡単です。
「PhotoScape X」があれば、無料で見やすいい画像が簡単に作れますので、ｗebサイトで使用する画像の加工がお悩みであれば一度使ってみてください！