※記事内に広告を含みます
皆さん、本日も閲覧ありがとうございす。
山本電卓と申します。
自身の漫画を個人のWEBサイトに投稿・公開する際にGoogleフォトの画像URLを利用して漫画を公開する方法があります。
しかし、Googleフォトと画像URLの仕様を把握していないと公開した漫画の画質が落ちてぼやけた表示になってしまう場合があるのです。
そこで今回はGoogleフォトを利用して漫画がぼやける原因と、キレイに漫画を表示・公開する方法を紹介させていただきます。
よろしくお願いいたします
( ｀・∀・´)ﾉ！
▼当サイトはXserver（エックスサーバー）を利用しています。
レンタルサーバー エックスサーバー
Googleフォトとは
画像・動画を管理できるオンラインストレージサービス
GoogleフォトはGoogleアカウントがあれば誰でも画像や動画を管理できるオンラインストレージサービスです。
無料の範囲では15 GBまで利用できます。
15 GBまでと制限があるのが気になるかもしれませんが、私の使用量が19話の途中までの漫画データ（約370ページ分）と他の記事の画像を含めても約195 MBですのでまだまだ余裕ですね◎
また、Googleアカウントは複数所有することもできますのでその数だけGoogleフォトも利用できます。
Googleアカウントも「名前」「ユーザー名（メールアドレスにもなる）」「パスワード」「電話番号」「生年月日」「性別」を入力すれば無料で作成できます。
名前はニックネームで構いませんし、生年月日などは特に確認されるわけではありませんので極端な話、本当の情報である必要はありませんが、パスワードを忘れた時などに確認のためここで登録した情報を入力する必要があります。
※電話番号はGoogleからの確認コード記載のメッセージを受け取る必要があるのでメッセージを受け取れる電話番号をしっかり入力しましょう。
2年間利用がないアカウントは削除される可能性が…！
2021年9月現在、Googleに関するサービスの利用が2年間なかった場合はデータが削除される可能性があります。
もちろんいきなり削除されるわけではなく、削除対象になる可能性がある場合にまず通知が来るという形になりますのでそこはご安心を。
漫画を公開するために利用する場合でも長期間放置しないように注意しましょう。
Googleフォトの「共有アルバム」で公開ができる
Googleフォトでは選択した画像や動画をまとめる「アルバム」を作成することができます。
また、そのアルバムを「共有アルバム」という公開用のアルバムに設定することで中の画像や動画を他の人も閲覧できるようにすることができます。
URLを共有することで公開
Googleフォトの「共有アルバム」を作成した場合、URLを発行でき、それを送り、共有した人が閲覧できるようになります。
また、設定によっては共有した人もそのアルバムを編集することも可能になります。
画像URLで別サイトに表示
Googleフォトの共有フォルダに入れた画像にはそれぞれ画像URL（アドレス）があり、この画像URLを個人サイトなどに貼り付けることで同じ画像をその場所に表示させることができます。
また、htmlで「<img src=”画像URL”>」と入力しても共有アルバム内の画像を表示させることができますね。
この画像URLは画像を表示さるだけのもので、先述のアルバムを共有するURLとは別のものです。
他人がWEBサイトに表示させた画像URLから共有アルバム内に入ることはできませんのでご安心を。
通常の「アルバム」内の画像にも画像URLはありますが、その画像URLを貼り付けても自分以外の人には表示されません。
ブログなどで他の人にも画像を表示させたい場合は共有アルバム内の画像URLを貼り付けましょう。
共有アルバムの注意点…！
位置情報に注意…！
最近のスマホなどのカメラアプリには撮影した場所の情報を写真に加える機能があります。
こういった位置情報は共有アルバムで公開した画像からも確認することができてしまいます。
端末、もしくはカメラアプリ側で位置情報機能をOFFにするか、Googleフォト側で位置情報共有をOFF、もしくは削除するなどを行いましょう。
バックアップ・同期機能に注意…！
アプリでGoogleフォトを利用する場合、バックアップや同期の機能がONになっていますと意図せず端末の画像がGoogleフォトに保存されてしまう場合があります。
いきなり共有アルバムに入ることはありませんが、バックアップと同期機能はOFFにしておくと安心ですね。
Googleフォトの共有アルバムを利用する場合は公開専用のアカウントを作ろう！
先述のように、公開したくない画像や情報がGoogleフォトを介してアルバムを共有した人に見られてしまう可能性もありますので、Googleフォトの共有アルバムを利用したい場合は他の人に見られても問題ない画像や動画のみを扱う公開専用のGoogleアカウント・フォトを作成した方が安全と言えるでしょう。
Googleフォト×漫画公開の特徴
サーバーの負担をなくせる！
漫画データはどうしても容量が大きく、重くなりがちです。しかも読み切り漫画でも数十ページ、連載漫画ですと数百ページもの量になります。
こういった漫画データを個人サイトに直接アップロードしますとサーバーにかなりの負担になってしまいます。
しかし、Googleフォトの共有アルバムから得た画像URLを貼り付けて表示させることでサーバーの容量を消費せずに容量の大きい漫画データをどんどん貼り付けていくことができます◎
1ページずつの縦スクロール表示になる
今回紹介するGoogleフォトの共有アルバムを使用して漫画を表示させる方法では、通常の画像のように貼り付けるだけですので当サイトで公開しているような1ページずつの縦スクロール表示になります。
【various sun】第1笑:アスナのアルル・カビス(31P)
そのため4コマ漫画や日常系漫画、私の漫画のように見開きを使用しない漫画を公開するのに向いていますね。
見開きページを1つの画像として表示させることはできますが、横幅に制限があるので全体的に小さくなってしまいます。
また、スライドショーなどの機能を利用することで漫画のように横スクロール表示もできなくはないですが、その場合はWEBサイトに直接漫画データをアップロードする必要があるかと思います。
GoogleフォトでWEＢサイトに漫画を表示させる方法！
①漫画制作＆書き出し
漫画制作
私はイラスト・漫画制作ソフトCLIP STUDIO PAINT（通称：クリスタ）で下描きから仕上げまで完全デジタルで制作しています。
▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】
CLIP STUDIO PAINT PRO
▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】
CLIP STUDIO PAINT EX
クリスタを購入する3つの方法と全ての手順を紹介します！！【Ver.3対応】
クリスタは難しい？漫画完成までの描き方を紹介します！（個人差あり）
また、過去作のアナログ原稿を公開したい場合はクリスタで読み込むといった方法もあります。
WEB公開漫画用の書き出し
漫画が完成しましたらWEB公開用の書き出しをします。
クリスタで書き出し！作品を画像ファイルで保存する方法と補足説明！！
その際、モノクロ漫画でトーンを使用している場合はグレースケールで書き出しするのをおすすめします。
トーンはWEB上で表示しにくいのでグレーに変換した方がキレイに表示できるためです。
※クリスタでは書き出し時にトーン部分をグレースケールに変換してくれる機能があります。
ちなみに、私は右ページ・左ページも意識して制作していますのでWEB公開用の漫画データではコマ枠を中央に移動させています。
②漫画原稿データをGoogleフォトの共有アルバムに入れる
Googleフォトで「共有アルバム」を作成する
Googleフォトにて「共有アルバム」を作成するにはまず通常のアルバムを作成します。
Googleフォトにログインしましたら左側の項目から「アルバム」を選択し、アルバム一覧画面で右上にある「アルバムを作成」を選択します。
すると以下の画面になりますのでアルバム名を入力し、「写真の追加」を選択します。
スマホやタブレットでGoogleフォトのアプリを使用している場合はGoogleフォト内とデバイス内のデータの一覧が表示されるのですが、
パソコンでGoogleフォトのサイトを開いている場合はGoogleフォト内だけのデータ一覧が先に開きますのでそこからさらに右上の「パソコンから選択」を押すことでパソコンのフォルダを開き、漫画データを選択・アップロードすることができます。
これで通常のアルバムを作成できましたのでさらにこのアルバムを共有アルバムに変換します。
※画像では例として1ページだけアップロードしています。
アルバムを開いている状態で右上のメニューアイコン→「オプション」と選択し、「リンクの共有」をONにします。
すると共有に関する設定項目が表示されますがこのアルバムを他の人に教えて共有はしませんのでそのままウィンドウを閉じます。
不安でしたら「共同編集」「コメントと評価」をOFFにしてもいいでしょう。
※「リンクの共有」のチェックを外すと共有が解除されます。
※「写真の撮影場所を共有する」にチェックを入れますと画像に付いている位置情報も公開されますのでOFFのままにしましょう。そもそも漫画データに位置情報は付いてませんが。
アルバム名の下に「共有中」と表示されましたら共有アルバムの完成です。
Googleフォトの左側の項目で「共有」と選択して表示される共有アルバムの一覧にも表示されるようになります。
ここからさらに漫画データを追加したい場合はアルバムページの右上にある「写真を追加」アイコンを選択します。
アルバムには最大20000個の画像や動画を追加できるようですが、さすがに管理がややこしくなると思いますのでお好みで1話ごと、もしくは2～3話ごとにアルバムを分けた方が良いかと思います。
共有アルバムから画像URLを取得する
Googleフォトの共有アルバムに漫画データを入れましたら、アルバムページで漫画データを選択して1つだけ開いている状態にしましょう。
この状態で画像上で右クリックをしますと（Google Chromeの場合）以下のメニューが表示されますので「画像アドレスをコピー」を選択します。
※「画像をコピー」ではないので注意。
これでデバイスのクリップボードに画像URLをコピーできますので漫画公開用のWEBページにてこの画像URLを貼り付けることで漫画データを表示させることができます。
③WEBサイトに漫画データをアップロードする
自身のWEBサイトの記事制作画面の画像貼り付け操作にて、URLから挿入する方法で先ほどコピーした画像URLを貼り付けて漫画データの画像をアップロードしていきます。
これでWEBサイトのサーバーに負担をかけずに容量の大きい漫画データを表示させることができます。
1度Googleフォトのアルバムの共有を解除して再び共有を設定した場合、同じアルバム内の同じ画像でも画像URLは変更されます。
何かしらの理由で1度共有を解除した場合は画像を貼り直しましょう。
Googleフォトで漫画を表示させるとぼやける原因と解決法！
Googleフォトの画像URLをそのまま貼り付けると漫画がぼやける！？
実は先述の方法でそのまま漫画データを貼り付けた記事を実際にブラウザで確認しますと、なんだか元の画像よりも画質が落ちてぼやけた表示になってしまいます。
WEBサイトに画像を表示する場合はどうしてもある程度のぼやけは出るものですが、さすがにぼやけ過ぎですよね…。
実は、Googleフォトでコピーした画像URLには最後の方に表示させる画像のサイズが表記されているのですが、ここの数値が元の漫画データのサイズよりもかなり小さい数値になっていたのです…！
w＝画像の幅（width）
h＝画像の高さ（height）
※単位は「px」
これは画像URLに表記されるサイズがGoogleフォトで1枚画像を開いて画像アドレスをコピーした時に表示されている画像サイズになるという仕様が原因なのです。
※この表示の時の画像サイズになっている↓
Googleフォトからの漫画データのぼやけをなくす方法！
先述のようなGoogleフォトの画像URLの貼り付けによる漫画データのぼやけをなくす方法はもちろんあります◎
方法は簡単で、画像URLの画像サイズの数値を自分で再入力すればいいのです。
元の画像サイズを入力してもいいですが、画像URLの数値を2倍にするだけでもかなりぼやけは解消されます。
自分でお好みの数値を入力したい場合は元の漫画データの縦横比を同じにしましょう。
【ちなみに】WordPressの場合
私が使用しているWordPressでは、画像URLの数値を2倍に変更して漫画データを貼り付けて100％表示にしますと記事作成画面ではかなり大きい表示になり、画像の横幅がはみ出した表示になります。
横幅の推奨サイズを超えるとこのような表示になるようです。
※公開するWEBページではちゃんと全体が表示されます。あくまで記事作成画面の話です。
そこでWordPressの画像表示を％指定する機能で50％表示に設定をするといい感じの表示になりました◎
※画像のサイズ変更方法はWordPressのバージョンによって変わる場合があります。
画像URLで2倍のサイズにして50％表示にしたら結局同じになるのでは？と思われるかもしれませんが、これでも画質の差が出てくるのです！
アップロードされた漫画の画質を比べてみよう！
ではGoogleフォトの画像URLをそのまま貼り付けた漫画データと2倍のサイズを再入力して50％表示にした漫画データの画質を比べてみましょう。
※ここではさらに画像に枠線を表示させています。
●そのまま貼り付けた漫画データ
●2倍のサイズを再入力して50％表示にした漫画データ
ぱっと見の印象も違いますし、拡大表示しても違いが分かりますね。これで紹介した作業の必要性も感じていただけたのではと思います。
元の漫画データは同じものでも貼り付け方によってここまで差が出るのです。
画像元作品
【various sun】第5笑：日の出すんよ(21P)
【補足】右クリック禁止設定で作品を守ることもできる
ブラウザでWEBサイトを閲覧する場合、画像上で右クリック（長押し）してメニューを開くことで画像をコピーしたりすることができてしまいます。
しかし漫画作品は立派な著作物ですので制作者的にこの仕様は困ってしまいます。
例えばWordPressではプラグインを利用して自分のサイトの画像上での右クリック（長押し）をできないようにすることができます。
こういった工夫で自分の作品を守ることもできます。
【注意事項】各サービスの変更に気をつけよう
今回紹介した方法はサイト制作に別サービスのGoogleフォトを利用する形になります。
2021年9月現在、この方法でうまくいってますが、それぞれの仕様や利用規約が変更される可能性も0ではありません。
そのことも念頭に置いていただければと思います。
Googleフォトの仕様を理解してキレイな表示の漫画を読んでもらおう！
当然ですが、世の中のWEBサイトの仕様は漫画公開のことを考えてくれていません。そのため、読者にストレスなく漫画を読んでもらえるように自分で工夫をする必要があります。
その中でも漫画そのものの画質を落とさずに表示させるのは大事なことの1つですね。
今回の記事で少しでも漫画公開で困っている方の助けになればなと思います。
それではここまで閲覧ありがとうございました！
お疲れ様でした！！
▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】
CLIP STUDIO PAINT PRO
▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】
CLIP STUDIO PAINT EX
▼動画視聴型お絵描き講座【Palmie（パルミー）】
