なぜPhotoshopではなくAffinity Photoを使っているかというと、iPad版のPhotoshopでは当時背景の玉ボケ風な加工が出来なかったからです。

現在のPhotoshopアプリはどうなっているか分かりませんが、私がAffinity Photoを購入した当時はそうでした。

PS4やPS5でも一眼レフで撮影したような、背景が綺麗にぼけたスクショをSNSに掲載して楽しみたいですよね。できれば玉ボケ風な加工もしてみたい！と思う方もいるのではないでしょうか。

この加工方法はiPadで出来ますので、iPadを持っている方なら誰でも手軽にできると思います。今回使うipadアプリは

• Lightroom
• Afiniteyphoto
• Phonto

この3つです。Afiniteyphotoで全て出来ると思いますが、私はLightroomと Phontoがとても簡単で使いやすいのでこの3つのアプリを併用しています。

こちらが完成品のスクリーンショット。今回はこのスクリーンショットの加工方法をご紹介します。

グループポーズで撮影するときのコツ

背景をぼかす加工をする時のグループポーズ撮影時のコツをご紹介します。これは私のこだわりなので、参考程度にお読みください。

被写界深度表現をオフにして撮影

グループポーズには被写界深度を調整する機能があります。これをオンにすると、背景をぼかすことができます。被写界深度表現のボタンを左に持って行くとぼかしMAX、右に持って行くと若干ぼかしが入るイメージ。

ところがこの機能、被写体の大きさによっては、背景とキャラクターの境目がボケて、画像が汚くみえてしまいます。

このようにキャラクターが大きい場合はそれほど気にならないのですが、キャラクターがー小さいと、キャラクターと背景の境目がくっきりせず、変にぼやけてしまうのです。

被写界深度表現オン

被写界深度表現オフ

キャラクターと背景の境目が変にぼやけていると、アプリで背景にぼかし加工をした時にキャラクターが綺麗に目立たないため、私は右のスクショのように被写界深度表現をオフにして撮影しています。

逆光の時はライトで調整

撮影場所や時間帯によっては、逆光になってしまう時があります。逆光で撮影すると、このようにキャラクターの顔に影ができてしまいます。

このような場合はグループポーズの機能「ライトの調光/拡張設定」をつかいます。今回はライト1と2を使い、キャラクターの左右、少し離れた場所からライトを当て、顔にかかった影を消してみました。あまり近い場所からライトを当てると白飛びするので、ちょっとカメラを引いてライトを当てるようにすると良いでしょう。

ライトの光の強さはタイプ1〜3で変わりますので、お好みで調整してください。

キャラクターのライティングは常に100にしています。こうすることで、暗い場所でもキャラクターは明るく表示されるようになります。

グループポーズには全体的な明るさを調整する項目もありますが、加工で明るくするのでここでは使っていません。

Lightroomでトリミング・色・明るさ調整とノイズ除去

キャラクターの撮影が終わったら次はLightroomで好きなサイズにトリミングをしたり、色味や明るさ調整、ノイズ除去などを行います。完成したスクリーンショットは次のものです。

今回は上の数値で調整をしています。この辺もお好みで。

Affinity Photoで背景をぼかす

背景にぼかしを入れたり、玉ボケ風な加工をする場合、Affinity Photoを使います。ここではAffinity Photoの起動から完成したスクリーンショットの書き出しまで説明します。

アプリ立ち上げとスクリーンショット選択

Affinity Photoを起動させたら、右上の＋ボタンをタップし、 Photosから読み込むをタップ、加工するスクショを選びます。

念のため複製をつくるがどっちでもいい

一応失敗した時用に私は複製をしておきますが、これはどっちでもいいです。右の四角で囲っている部分をタップすると、レイヤーを確認する事ができます。いま、複製したので、ピクセル背景というレイヤーが２枚ある状態です。

複製をつくる時や、ペンツールを使う時は左の赤で囲ってある紫のマークをタップします。このマークの機能は後ほど使います。

キャラクターを選択してマスクレイヤーを作る

ぼかしを入れない部分を作るため、マスクレイヤーを作ります。

①のマークをタップした後、②のマークをタップします。そして、付属のペンでキャラクターを適当になぞると、ほぼ正確にキャラクターを点線が囲ってくれます。

③のモードを追加にしていると選択範囲を増やすことができ、〉マークを押して減算にすると選択範囲を狭めることができます。

今、キャラクターと道の一部が選択されていますが、この選択されている部分にマスクがかかるため、この部分はぼかしが入りません。

例えば道のぼかしを入れない範囲を広げたい場合、モードを追加にして道のぼかしたくない部分をペンでなぞると選択範囲が広がり、その部分はぼかしが入らなくなります。

マスクをかける部分、つまりぼかしを入れない部分が決まったら④を押してください。すると、次のスクリーンショットのようになります。

赤く選択されている部分がぼかしが入る部分になります。赤くない部分にはぼかしは入りません。この状態でペンでキャラクターの周囲をなぞると、さらに綺麗に選択範囲の微調整を自動でしてくれます。人物の写真などで髪の毛のような繊細なものを選択する時、細かく切り抜いてくれるので便利な機能です。

出力はマスク付き新規レイヤーで行なっています。他にも出力方法はありますが、私はこれが便利なので使っています。出力方法を決めたら適応を押しましょう。

これでマスクレイヤーが完成しました。レイヤー一覧の赤で囲っている部分を2回タップするとピクセルとマスクに別れて表示されます。

Affinity Photoで背景をぼかすコツ

次に背景をぼかしていきます。ぼかし方法にも色々ありますが、私が玉ボケ風にしたい時は最大ぼかしを強めに入れて、ふんわりとぼかしたい時はガウスぼかしを強めに入れています。毎回どちらのぼかしも入れていますが、その時の気分によりぼかしの程度を調整しています。

背景を綺麗にぼかしたい場合、背景に存在するキャラクターを消す必要があります。キャラクターを消さずに最大ぼかしやガウスぼかしを入れると…。

こんな感じになります。このスクリーンショットは、分かりやすいように最大ぼかしを強めに入れています。このぼかしを入れた背景に先ほどのマスクレイヤーを重ねると…。

上に被せたキャラクターからはみ出してぼかした部分が見えてしまっているんですよね。赤くマーキングしたところは特に目立っています。ちょっと汚いですよね。

こうならない為にぼかしを入れる背景のキャラクターを消す必要があります。キャラクターを消すのはとても簡単。

手順は次の通り。上のスクショを参考にしながら読んでくださいね。

• 背景をぼかす画像をレイヤーの中から選ぶ（右上赤枠）
• 左上赤枠内の紫マークをタップ
• 左縦列赤枠で囲ったマークをタップ
• インペインティングブラシを選択
• ペンで消したい部分をなぞることで消去出来る

このようにペンでなぞった部分が赤く表示されて、ペンを画面から話すと赤い部分が次のように消去されます。

最大ぼかしとガウスぼかしを入れる

次のスクリーンショットのように、ぼかしを入れる背景画像を選択したまま、右縦列、赤枠で囲っマークをタップします。すると、色々なぼかし方を選択する画面に。

ここでは最大ぼかし、ガウスぼかしを選びました。

最大ぼかしをいれるとキラキラ感がでて、玉ボケ風に仕上げる事ができます。ただし、あまり強く入れすぎると背景が何だか分からなくなるので注意が必要です。上のスクショの左の赤枠内にある循環をタップすると丸く光るので玉ボケ風になる仕組みです。押さないと四角く光ります。

半径を上げることにより、玉のサイズが大きくなりますのでお好みで。

ガウスぼかしを入れた際に、時々スクショの外周にぼかしが入らない事がありました。そのような時はアルファの保護をタップすると全体にしっかりぼかしが入ったので、同じような現象に遭遇した方はアルファの保護を押してみてください。

上のスクショはぼかしを入れ終わった状態。入れた順番は最大ぼかし→ガウスぼかしです。この順番をガウスぼかし→最大ぼかしにすると、画面が凄く光っておかしかったのでこの順番にしています。なんでそうなるかは不明。

今回の加工ではあまり最大ぼかしをいれませんでした。今回は

• 最大ぼかし　5.0
• ガウスぼかし　8.0

という設定にしています。

背景ぼかし後の仕上げ

背景は無事にぼかし終わったのですが、よく見るとキャラクター周囲が汚いですね。マスク部分の選択時に選択しきれなかった細かい部分が汚れのように見えています。

次はこの汚い部分を消去し画像を綺麗にしていきます。次のスクリーンショットのように、レイヤー一覧からマスクを選択。左上は紫のマークを選択している状態です。そして左縦列の赤枠で囲ったマークをタップします。

マスクレイヤーで使うのは2色、黒と白です。

• 黒は消去
• 白は表示

いらない部分を消したい時は黒を選択して塗り潰しましょう。逆に表示させたい時は白を選択して塗ると、塗った部分が再表示されます。

例えばキャラクターの外周のいらない部分を黒で消去していた時にキャラクターの腕を間違って消してしまった！なんて時は、白を選択して消えた部分を塗ると再表示されます。

キャラクターの周りを綺麗にした完成品が次のスクリーンショット。

地面をぼかしていない部分からぼかしている部分へ自然に移行したい場合は、上のスクショに表示されている不透明度、流量、硬さの%を下げ、幅を大きめにしてなぞると柔らかくぼやけてみえます。

他にも方法がありそうですが、私はこの方法で地面を徐々にぼかしています。

質感が荒い部分はぼかしブラシでごまかす

キャラクターの周囲は綺麗にしたものの、肌の質感が荒くて汚いと感じたらぼかしブラシを使うと綺麗になります。

レイヤー一覧からピクセルを選択して、左縦列の赤枠で囲ったマークを選択。その中にぼかしブラシという項目があるので、これを使ってキメが荒いと思う部分を塗っていきます。そうする事で上のスクリーンショットのように肌のキメも整いますよ。

完成したスクリーンショットを書き出して終了

完成した画像を書き出してみましょう。左上赤枠中のマークをタップし、書き出しを選択します。

画面左下の共有ボタンをタップします。すると書き出しされる画像が左の1番上に表示されて、表示された項目の中に画像を保存という項目があるのでタップ。これでiPadの写真に保存されました。

Phontoで最終調整と文字入れ

それでは Phontoアプリを使って最終調整をしましょう。この調整もAffinity Photoでできると思いますが、私は Phontoのフィルターが好きなのでこちらを使っています。

今回もColor Controlで微調整をした後、アイテム追加から正方形の図形を選び、カラーを白、透明度15にしてふんわりした雰囲気に調整してみました。

上のスクリーンショットは白いフィルターをかけた場合とかけない場合が分かるもにのです。

差は微妙だけど気になる方は使ってみてください。Phontoでの詳しい調整の方法はこちらの記事を参考にしてくださいね。

【FF14】iPadで簡単！スクリーンショット加工・編集♪

【FF14】iPadで簡単にできるスクリーンショット加工・編集のご紹介です。使っているアプリはLightroomとPhontoの2つだけ！

gamer-mam.com

まとめ

今回はiPadアプリ「Affinity Photo」を使ったスクリーンショットの背景をぼかす方法をご紹介しました。

慣れるまでちょっと大変かも知れませんが、素敵なスクリーンショット加工が自分で出来るようになると、とても楽しいですよ！

この記事がPS4やPS5でFF14を遊んでいる方で、背景を綺麗にぼかすスクリーンショット加工がしたいという方のお役に立てれば嬉しいです。

それでは今回はこの辺で。

Copyright (C) SQUARE ENIX CO., LTD. All Rights Reserved.

私も現在PS5でFF14をプレイしていて、バトルはそこそこ、主にスクリーンショット撮影と加工をメインにあそんでいます。

以前はiphoneでアプリを2つ使い加工していたのですが、背景を玉ボケ風にしたい時は、iPadアプリのLightroom、AFFINITY PHOTO、Phontoの3つのアプリを使用するようになりました。

しかし、AFFINITY PHOTOを使って被写体を切り取ったり、背景を玉ボケ加工にする作業はちょっと手間が掛かるんですよね。そこまで作業する気力がない時とか、お手軽、簡単に可愛くスクショ加工をしたいときは、iPadのLightroom、Phontoの２つのアプリを使っています。（最近愛用しているiphone6の挙動がおかしいのでスクショ加工はiPadで行っています）

今回はこの2つのアプリを使ってタブレットできる簡単で可愛いスクリーンショット加工の方法をご紹介します。

加工・編集するスクリーンショットを撮影しiPadに保存

こちらは最近Instagramに投稿したスクリーンショットです。このスクリーンショットはiPadのアプリ「Lightroom」と「Phonto」で加工・編集をしたものです。今回はこちらのスクリーンショット加工の手順をご紹介します。

私はPS5で撮影したスクリーンショットをTwitterとシェアし、Twitter経由でiPadに画像を保存しています。次のスクリーンショットは光調整など全くない室内で撮影したものです。

グループポーズで背景がぼやける設定にした場合、ぼかしが強すぎると被写体と背景の間のラインが汚くなってしまうので、背景が景色ではない単調な壁の場合、私は背景に全くぼかしを入れない設定にしています。

色味も暗いですがLightroomで調整するので問題ありません。

Lightroomでサイズ・明暗・色彩などの調整をする

Lightroomの右の項目「切り抜きと回転」を選択して画像を回転、縦横比を4×5にして切り抜きます。（このスクリーンショットは、すでに明るさや色味、ノイズ軽減などの調整済みのものです）

スクリーンショットの大きさは縦横比4×5にすると、先ほどInstagramに掲載したサイズの画像になります。4×5のサイズはTwitterにも同様のサイズで掲載することができます。このサイズにすると16×9や1×1よりも掲載したときにとてもインパクトのあるのでおすすめです。

スクリーンショットのサイズ調整をした後はLightroomで明るさや色味、ノイズを軽減などお好みで調整します。

私の場合、背景に景色がある場合と背景が白い壁の場合でプリセットを変更しています。背景が壁の場合のLightroomの設定は次の通りです。スクリーンショットの色味を見ながら結構適当に調整していますので参考程度にどうぞ。

このように簡単に色彩や明るさ、ノイズの軽減などができました。完成したスクリーンショットはこちら。

Phontoアプリで調整・文字入れ等の装飾をする

上の画像を更に全体的に明るくしたり、色味を調整したい場合、文字入れアプリでもあるPhontoを使って調整を加えることができます。仕上げの調整をPhontoアプリで行いながらコピーライト等の文字入れも行いましょう。

Phontoを立ち上げ、編集する画像を選択します。

すると次のスクリーンショットのように、フィルターを選択する画面になりますので、必要であればお好みで使いましょう。

私はほとんどColoer Controlを使っています。時々Fadeを使って違う色味を楽しんだりしています。

オリジナルの画像よりもっと明るくしたり色味を調整したい場合は、Color Controlでさらに明るさや色味の調整を行います。彩度・明るさ・コントラストはレバーで調整します。今回のスクリーンショットの調整は次のように行っています。

彩度

明るさ

コントラスト

調整後、画像は次のようになりました。全体的に明るくなり、柔らかい色合いになったと思います。

Phontoアプリで画像を優しい雰囲気に仕上げる

Phontoアプリで色彩や明るさを調整したものの、画像が全体的に黄色っぽい雰囲気になってしまいました。もう少し可愛く優しい雰囲気に仕上げるため、今回はフィルターのようなものを画像の上に追加してみました。

Phontoアプリの画面左下にある三本線マークをタップすると、アイテム追加という項目が出てきます。こちらをさらにタップすると、次のような図形がたくさん出てきます。

この図形をスクリーンショットに入れて装飾として使ってもいいのですが、今回はこれをフィルターの代わりとして使ってみました。

上の図形の中から画像をしっかり覆えそうなものを選択します。今回は左から2番目、上から二番目の単純な正方形を選択しました。

この図形、色やサイズが変更できますので、次のようにサイズを画像が覆える大きさに変更し、色も変更します。

このスクリーンショットを可愛く優しい雰囲気にしたかったので、色はピンクを選択しています。そして透明度を10まで減らすと上のスクリーンショットのように薄いピンクのフィルターが画像にかかったようになります。

完成した画像は次の通りです。左がピンクのフィルターをかける前で右がピンクのフィルターをかけた後です。雰囲気が本当に変わるのでお好みで気分に合わせて使ってみてください。

スマホアプリのPhontoにもアイテム追加の項目がありましたので、この方法はスマホでもできると思います。

まとめ

今回はFF14のスクリーンショットをipadで簡単に加工・編集する方法をご紹介しました。スクリーンショット撮影や加工は本当に楽しくて、ついつい時間を忘れてしまいますよね。

時間があるときは背景を含めてしっかり加工をするのも楽しいですし、時間がない時やちょっと頑張る気力がない時などでも、このように簡単に可愛いスクリーンショット加工ができます。簡単なスクリーンショット加工方法を探している方はぜひ試してみてください。

それでは今回はこの辺で。

背景にぼかしを入れる加工方法を知りたい方はこちら♪

【FF14】Affinity Photoでスクショの背景をぼかす方法【iPad/SS加工】

【FF14】ipadアプリAffinity Photoで背景をぼかす・玉ボケ加工をする方法をご紹介します。

gamer-mam.com

Copyright (C) SQUARE ENIX CO., LTD. All Rights Reserved.

私はFF14やモンスターハンターなどゲームのスクリーンショットを撮影・加工してSNSに掲載することが好きなゲーマーです。

今回の記事は、ブログに画像を載せる時の選び方、画像圧縮・ブログに掲載するときの注意点をご紹介します。合わせて私がいつも利用している画像圧縮サイト＆ソフトも掲載しました。

ご自身のブログに掲載した画像が汚くて困っているという方、画像圧縮後も画質があまり落ちないようにしたいと思っている方、ぜひ参考にしていただけたらと思います。

画像圧縮が必要な理由

私はブログでかなり綺麗な画像を掲載することに力をいれています。
それは私がInstagramでの活動がメインで、常に被写体が綺麗で可愛らしく見えるように考えいてゲーム内スクリーンショットを撮影しているからです。

残念ながらInstagramでは画像をアップしても画質が落ちてしまうんですよね。
それでも同じ趣味の方々と、可愛い自分達のゲームキャラのスクリーンショットを掲載しあい、楽しく交流させていただいています。

Instagramの場合、主に携帯でしか見ませんし、画像も小さいのでそれ程劣化が気になる事はありません。しかし、Instagramだけでは説明しきれない部分もあるんですよね。

以前ブログ記事にしましたが、Instagramのフォロワーさんからの色味調整などのお問い合わせに対して、どのように自分が画像を編集しているかとか。

そのような場合、ブログではInstagramで掲載したスクリーンショットについて説明しきれなかった事を追加して説明したり、載せきれなかったスクリーンショットを掲載したり、装備の名前を記載して、見てくれた方がそのスクリーンショットがどんな装備を使用しているかが分かるようにしています。（すべてのスクリーンショットに対してではありませんが・・・。）

ブログの場合、撮影したスクリーンショットは綺麗なまま掲載できますが、それではかなり画像のファイルサイズが大きくなって、読者の方が閲覧するときに、大変重たくなってしまう可能性があります。そのため画像の圧縮は、読者の方が読みやすくするためにも、とても大切な作業と言えるのです。

画像を圧縮する時とブログ掲載時の注意点

ブログを始めたばかりだと画像の選び方がよく分からなくて、自身のブログに掲載した画像が荒くてきたなく見える！！なんてこともありますよね。

そんな時はまず元々の画像の容量・ファイルサイズをチェックしてみましょう。

元々300×400、50KBくらいしかない画像をこれよりも大きく掲載しようとすれば画像は当然引き伸ばされて汚くなります。

これはインデックスのサムネイルなどでも起こることで、元々サイズが小さい画像をアイキャッチとして使用した場合、サムネイルの方が設定サイズが大きいと、画像が引き伸ばされてピンボケして見えるという現象が起こってしまうことがあるんですよね。

そのため、画像の美しさを気にするのであれば、あまりサイズの小さい画像を使用することはおすすめできません。

アイキャッチは1200×630が推奨されていると言われています。

画像の見栄えを気にするのであればPC画面でも見ることを考え、圧縮後の長辺サイズを1200以上に合わせて圧縮すると良い思われます。

1200以上なんてブログにそのまま掲載したら大きすぎない？と思いますが1200で圧が強いと感じるなら掲載する時に半分くらいの長辺600くらいで掲載すれば良いわけです。

例えば次の画像。こちらはFF14のキャラクターのスクリーンショットを撮影して長辺1280に合わせて画像圧縮したものです。

今ご覧いただいている画像は圧縮後サイズ1280の50％設定をして掲載していますので長辺512くらいになっています。

こちらの元々の画像サイズが3802×4752 容量が10.6Mなのですが、当然こんなに大きな画像をブログに貼り付けると超重すぎて読む方が大変な思いをするわけです。

そこで画像を圧縮するサイトを利用し長辺1280、PNGからJPEGに変換設定し、JPEG画質を80から82にします。このJPEG画質は画像の荒さとファイルサイズを見ながらお好みで。（使っている画像圧縮サイトは後ほどご紹介します）

そうするとファイル容量が114KBまで落ちるけれど、圧縮前とほぼ変わらない綺麗な画像を掲載することができます。

元々大きなサイズの画像を小さく圧縮する分には圧縮後も綺麗な画像が出来上がります。そして元々大きな1280の画像を小さく掲載する分には綺麗な画像が掲載できます。

注意してほしいのは、元の画像サイズよりも大きく表示しようとしてしまったがために、画像が引き伸ばされて荒くなったりぼやけてしまうことがあるということ。

参考になるか分からないですが、画像を3種類掲載しておくので見比べてみてください。

画像サンプル3種類

ブログに掲載する画像が荒かったりぼやけてしまうという方は、まずご自分の使用する画像サイズを確認し、元サイズより大きいサイズで掲載していないか調べてみましょう。

人気の画像圧縮プラグイン＆ウェブサイトが合わなかった

ブログ運営に画像掲載は欠かせませんし、画像圧縮は閲覧スピードを快適にするためにも欠かせません。

私もネットで良い圧縮プラグイン＆ウェブサイトは無いか探してみました。しかし、私がネットで検索した時に、お勧めとしてヒットするプラグイン＆ウェブサイトは、私の思うような圧縮ができませんでした。

このプラグイン＆ウェブサイトは、かなりファイルサイズを圧縮してくれるのですが、スクリーンショットをブログに張り付けている作業中に気付いてしまったんです。

画像がとても荒くなっている！！！(; ･`д･´)

ぱっとみても分かるくらい画質が劣化していました。もうびっくりしました。ファイルサイズが小さくても画質がこれだけ落ちてしまうとなると、ブログには掲載できないと思ったくらいでした。

でもそのプラグイン＆ウェブサイトは、圧縮しても画質が落ちないと有名だったんですよね。
原因は分かりませんし、私だけかも知れないので、画質が落ちていない方もいるのかも知れません。

お勧め画像圧縮サイト

私は、他に画質が落ちなくて圧縮もしてくれるサイトを探し、同時に、画像の保存形式について再度勉強しなおしました。

今までどこのサイトでみたのか忘れたのですが、画像はpng保存がいいと記憶していたので、保存形式は何が良いのかもう一度確認しました。その結果、pngで保存するとかなりファイルサイズが大きいので、jpg保存にすることにしました。参考にしたサイトのリンクを下に貼っておきますね。

jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方

「ブログ書いてるけど、jpgとかpngとかって何か違いあるん？」って人は要チェック！jpg,png,gifなどの画像形式の最適な使い分け方についてまとめました。

ce-ya.net

背景透過をしなければ、jpg保存しても色味的には大丈夫だし、ファイルサイズもかなり小さくなることが分かりました。小さいと言っても先に上げた人気圧縮サイトの圧縮したサイズよりは大きいです。

圧縮サイトとしては下記のサイトが簡単で綺麗にしあがりました。私は普段は上のウェブサイト、文字をくっきりさせたい時は、PCにインストールするタイプの縮専を使用しています。ちなみにどちらも無料で使用可能です。

画像を縮小する！

Webブラウザで簡単に写真やイラストの縮小ができます。回転や反転、白黒変換も可能です。無料でお使いいただけます。

resizer.myct.jp

【縮小専用。】 まとめて画像縮小するWindowsフリーソフトウェア

写真や画像を一括縮小するWindows用フリーソフトウェア。

i-section.net

画像の比較

実際に圧縮してどのくらい変化があったのかを見ていきましょう。もしかしたら、人によっては気にならない感じかもしれませんが、画像を大きく拡大表示した場合、画質が落ちているのはかなり目立ってしまうと思います。

これは始めに使っていたTinyPingと元の画像の比較です。左がTinyPingで右が元画像です。ぱっと見た感じ分からないかもしれませんが、黄色く光っているところの部分をみてもらうと、左の画像は淵が荒くなっているのが分かりますか？これだとブログに掲載した時に画像の荒さが目立ってしまうんですね。

次に私が使用しているウェブサイトでの圧縮です。

今度は左が元画像、右が私が使用しているウェブサイト。先ほどと同じ場所、黄色く光っている部分を見ていただくと、右のjpg画像は左の元画像と殆ど変わりありません。

ファイルサイズもpng保存をするよりかなり小さくなります。（TinyPingの場合はpng保存ですが、かなりファイルサイズを小さくしてくれるので、TinyPingの圧縮には叶わないかも知れません。）

次はTinyPingの圧縮後と私が使用しているウェブサイトのjpg画像を比較します。
分かりにくいのですが左がTinyPingの画像で右がjpg。左は黄色くひかっている部分の淵が荒くなっていますが、右は柔らかく光っています。

文字をくっきり表示したい時の便利ソフト

現在使用している圧縮ウェブサイトは、画質も綺麗でJPEG画質も調整できるので、ファイルサイズが大きめの時は80、小さいときは９０にして使用しています。

しかし、欠点もあって、細かい字がぼやけてしまうんですよね。png保存にしたほうが文字はくっきり見えて良いのですが、ファイルサイズが気になるので、文字をくっきりさせたい場合は、先ほどリンクを貼った無料ソフトの縮専を使用しています。

縮専には画像くっきりというオプションがあるので、それを使用する事によりかなり文字がくっきり見えるようになります。

文字が小さいのでちょっと分かりにくいかも知れないのですが、一応比較画像をあげておきます。

上の画像は左が元のpng画像で右が縮専です。縮専だと圧縮してjpgにしても、文字がぼやけずくっきりした状態になります。

この上の画像は左が元画像、右が先ほど紹介したウェブサイトでのjpg圧縮後。少しぼやけて見えるんですけど分かりますか？なんだかピントがしっかり合わないなという印象をうけるんですよね。

このように私は、文字をくっきり見せたい時は縮専を使用するようにしています。

場合によっては画像だけでも表情（とくに瞳）がぼやけて見えてしまう時は、縮専で圧縮してみて、画質を確認してからブログにアップするようにしています。

縮専で画像くっきりで圧縮すると、稀に背景の細かい目地みたいなのが浮き出てしまう事があるので、圧縮後の画像を見ながら、ウェブサイトの圧縮が良いのか、縮専で良いのか、JPEG画質は８０まで落としても画質がそれほど落ちないか等を確認しながら仕上げていきます。

また、縮専のほうが圧縮後、若干ファイルサイズが多きいので、普段は先ほど紹介したウェブサイトを利用して、少しでもファイルサイズを小さくするようにしています。

まとめ

今回の記事は画像圧縮サイトのご紹介でした。

TinyPingも悪いわけではなく、私が画質重視のため、圧縮後の画質がどうしても自分のブログスタイルに合わなかったというだけの事です。

画像よりもファイルサイズを重視されたい方には最適なプラグイン＆ウェブサイトだと思います。

私は画像重視のブログサイトを運営しているので、時間はかかりますが1枚ずつ圧縮し、スクリーンショットの画質とファイルサイズを確認しながらブログにアップするようにしています。

今の所、この圧縮ウェブサイトとソフトには十分満足しています。
追記：2022年1月現在、PCではなくiPadでブログ運営をしておりますので、こちらの圧縮ウェブサイトのみ利用しております。

私と同じように、画像重視のブログサイトを運営されている方で、納得のいく圧縮サイト＆ソフトをお探しの方は是非紹介したサイト＆ソフトを試してみたください。

掲載した画像では、はっきり違いが分かりにくいですが、ご自分の画像を圧縮して比較すると分かりやすいかもしれません。

アイキャッチサイズ1200×630が推奨されている理由が詳しく知りたい方はこちらのサイトをご覧ください。

Cocoonのアイキャッチサイズの推奨はいくつ？非表示など各種設定も紹介

女性 せっかく用意したアイキャッチ画像が

hayato-blog.jp

使用するアプリはLightroomとPhontoの2種類だけで、難しい操作は一切ありません。具体的な数値設定も公開していますので、スクショをもっと可愛く仕上げたい方はぜひ参考にしてみてください。

まずは/gposeでスクショを撮影する

まず、撮影の流れを説明します。

スマホアプリで加工・編集する

携帯に保存した画像は携帯アプリで編集していきます。使用している携帯はiphone6、アプリはLightroom、Phontoの2種類です。

Lightroomでトリミング・明るさ・色味調整

このように設定してプリセットに登録しておくと便利です。

Phontoで色彩の仕上げと文字入れ

Lightroomで設定したあと画像は次のようになります。
左の画像です。
右の画像はこれから②のアプリPhontoで調整を始めるところです。

before　(編集前のスクショ）

after（編集後のスクショ）

私はレトロな感じが好きなので、このような色味を出すようにしています。この辺はお好みで調整してみてください。

説明すると長いのですが、実際の編集はとても簡単です。２つのアプリでできる簡単編集なので、手軽にスクショを編集して楽しみたい方はぜひ活用してみてください。

LightroomとPhontoで簡単に可愛いスクショが完成！

【FF14】iPadで簡単！スクリーンショット加工・編集♪

【FF14】iPadで簡単にできるスクリーンショット加工・編集のご紹介です。使っているアプリはLightroomとPhontoの2つだけ！

gamer-mam.com

【FF14】Affinity Photoでスクショの背景をぼかす方法【iPad/SS加工】

【FF14】ipadアプリAffinity Photoで背景をぼかす・玉ボケ加工をする方法をご紹介します。

gamer-mam.com