シンヤB （プロセス）
ブロガーのためのiPhone・本気・写真術ワークショップのテキストを先にかくというのをしている。あと、二つかいておきたいことがある。ひとつが、アウトプットの考え方で、もうひとつが、リタッチについてだ。
（ロジ）
アウトプット（出版）としては、写真を中心としたブログを作るさいのチェックポイントを書いておきたい。
ブログでの写真の使い方についてのノート（考え方）
ノートなので、箇条書きである。
- ブログのデザイン
- 写真の縦横比率
- 写真のピクセルサイズ
- 写真ファイルのサイズ（データの重さ）
- 写真ファイルのフォーマットと圧縮率とカラースペース
- ページ単位でのデータサイズ
- ブログでの使い方
- 写真と文章の組み合わさり方
- アイキャッチ
さて、ひとつひとつかいていこう。
WordPressのテーマ、自分のブログのデザインを検証する。
いろいろなWordPressのテーマがあり、デザインによって写真のレイアウトや表示のされかたが違う。ワークショップにてプロセスをみてもらうが、まずは、自分のブログがどのように写真を表示するのかを検証をする。
スマートフォンでの表示のされたかた、ノートパソコンのブラウザーでの表示のされかた。ピクセルサイズや、余白がどのように設定されているかなどを理解しておく。この情報がないと、アウトプットをどうしていくのかを考えるのが難しくなる。
ちなみに、本文に使っている写真だけでなく、自分が使っているプラグインが自動で生成する画像のデータサイズも把握しておく必要がある。つまり、ページ上の全ての画像について理解しておくべきなのだ。これは、ノートパソコンとFirefoxアプリがあれば、すぐにできるので、ワークショップの冒頭に、参加者の皆さんのページを検証の予定。
ブログ写真の縦横比について。
iPhone 7のカメラアプリが撮影する写真の縦横比は、4:3 (「1008 px x 4」 : 「1008 px x 3」)である。px = ピクセルという意味。
補足として、アイキャッチのサイズなどについては、永遠のテーマの一つであるので、別に解説する。
さて、「4:3」と「3:2」の比率は、写真を「縦長」に使う場合、ブログ上で、読んでいる人の間が持たないし、文字情報とのバランスもよくないと感じるので、縦横比は、「1:1」か「5:4」をおすすめしたい。
この二つの比率であれば、縦長でも横長でも、そのままで大丈夫だし、インスタグラムとFacebookでも、そのまま流用が可能である。
縦長の写真は、ブログでは使わないときめて、iPhoneの「4:3」をそのまま使うという手もあるとは思う。
写真のピクセルサイズについて。
写真のピクセルサイズとは、写真がなにピクセルでできているのかということだ。ピクセルの数字が大きくなるほど、画質がよくなる傾向といえるが、数字が大きいほどデータサイズも重くなる。
iPhone 7のカメラアプリが撮影する写真は、4032 x 3024 px (12.2M px)である。
さて、どれぐらいのピクセルサイズがいいのかは、自分のブログのデザインを検証したさいのデータをもとに決めていくことになる。iPhoneの画面上での表示は、〇〇 x 〇〇 px、ノートパソコン上のブラウザーでの表示は、〇〇 x 〇〇 pxであるので、〇〇 x 〇〇 pxがもっとも効率がよいだろうというような形。
写真のデータサイズ（重さ）について。
写真のデータサイズについて、ものくろコーチに聞いたところ、彼のおすすめは、「一枚の写真が200KB以下」「ブログページ全体で1MB以下」とのことだった。さすが、私のコーチ、厳しい。実際にやってみるとわかりますが、この数字は、ハードルが高い。一枚の写真を200KB以下にすることは簡単なのだが、全体で、1MB以下にするのは楽ではない。
例えば、一つの写真が150KBだとしょう。1MBとすると、6枚しか写真を使えないことになる。150KBで6枚という数字を覚えておいてほしい。
写真のファイルフォーマットと圧縮率とカラースペースについて。
ブログで一般的に使われる写真の画像フォーマットは、JPGとPNGである。
JPGは、圧縮が得意なので、圧縮してデータサイズを小さくしていくことができる。しかし、圧縮すれば、するほど、画質は悪くなる。
PNGは、高画質が得意で、背景などを透過することもできる。そもそものデータが重いので、ファイルサイズが要注意のフォーマットだ。
まとめると。
- ブログで使う写真は、特別な理由がない限り、JPG。圧縮率（画質）は、なるべく低い方がデータサイズが小さくなるのでいいが、画質とのバランスを考える必要がある。テストをしてあるので、以下にリンクをはっておく。このテストは、するぷろXアプリを使っておこなった。
- 後々に使うための保存ということであると、PNGは可逆圧縮、JPGは不可逆圧縮なので、PNG（もしくは、TIF）が良い。
- 今回のワークショップには、直接関係ないが、Web用に作られる写真イメージは、sRGBのカラースペースでないと、いまのところ、色あせや、色がぬるくなったりし、綺麗に表示されないので注意が必要。
[blogcard URL=”https://shinyab.com/archives/1771″]
[blogcard URL=”https://shinyab.com/archives/1783″]
[blogcard URL=”https://shinyab.com/archives/1798″]
[blogcard URL=”https://shinyab.com/archives/1823″]
[blogcard URL=”https://shinyab.com/archives/1867″]
[blogcard URL=”https://shinyab.com/archives/1878″]
ページ単位でのデータサイズについて。
ページを検証したさいの内容をもとに、全体のデータサイズについて考える。単純に書くと、1MBなのか、2MBなのか、10MBなのか、ということを決めていかないとならない。これも、ワークショップの中で、議論していきたい。
ブログでの写真の使いかた。
ページ単位でのデータサイズが決まったら、それをもとに、どのように写真を使っていくべきか、シュミレーションをする。
写真と文章の組み合わせかた。
ワークショップでは、コンテンツとして有効、効率的な写真の使い方についても話し合う。
アイキャッチの件。
さて、やっと、アイキャッチにたどりついた。アイキャッチは難儀な課題をかかえている。ちなみに、サムネイルとも呼ばれることもあるので注意が必要（一応、サムネイルは、古い呼び方であったとされている）。
- テーマによって、どこに、どのように反映されるのかが違う、そして、OGPとしては、どうあるべきか、という課題。
- 全ての状況をカバーすると考えると、1200pxぐらい必要で、縦長、横長、正方形のどれになってもなりたつ画像、という課題。（将来的に、テーマが変わってしまったらどうなるのか、という課題もある）
- そもそも、アイキャッチって必要なのだろうか、という課題。
これらのことについても、ワークショップでは、課題として話し合う予定。
アイキャッチのシュミレーションをするのに便利なサイトがあるので、以下にリンクしておく。
[blogcard url=”https://saruwakakun.com/it/seo/eyecatch”]
[blogcard url=”http://ogimage.tsmallfield.com/v1/”]
via PressSync