Cute.Guides作成にあたって厳格なルールは設けていませんが、編集者は、下記のガイドラインをもとにガイドを執筆することとします。
ガイドに画像を使用する際には以下の２点に留意しましょう。
①権利を侵害しない
著作権や肖像権など他者の権利に充分に注意を払いましょう。上のボックス「ガイドを作成する前に一読しておくページ」で紹介されている資料にしっかり目を通しておいてください。
②不必要に重たい画像をアップしない
アップロードする画像ファイルの容量に注意しましょう。必要以上にファイルが重たいと、画像が表示されるのに時間がかかってしまい、読者に悪い印象を与えてしまいます。せっかく、良い内容のガイドを書いたのに、表示速度が原因で評価を下げてしまうのは残念ですよね。
以下は、上記の「②不必要に重たい画像をアップしない」ための対策方法です。参考にしてください。
手順１. 使用する画像について、ガイドに表示させたい大きさをあらかじめ決めておく。
表示の大きさは、ピクセルという単位を使い、幅と高さで表現します。例えば、幅40ピクセル×高さ30ピクセル （単位を省略すると 40×30）、というように表記します。以下のページには、様々なサイズの実寸サンプルがありますので、参考にしてください。
Examples of standard web advert sizes, from the IAB recommendations published Nov 2009 by NEXO Design, Nnemo
ご自身がガイドで使用する予定の画像についても、あらかじめ、何ピクセルで表示するかざっくりでいいので決めておきましょう。このとき、コツが二つあります。
1) 長辺を何ピクセルにするか決める
たいていの場合、元の画像は、正方形ではなくて長方形だと思いますが、この場合、まず長辺を何ピクセルにするかを決めましょう。長辺さえ決めておけば、あとは、サイズ変更ソフトウェアが、元の縦横比率を維持して、自動的に短辺のピクセルを調整してくれます。
2) 想定よりも少し大きめにしておく
画像をガイドにアップした後も、Cute.Guideの編集機能で大きさを変更することが可能ですが、「もっと大きく表示しよう」と拡大の編集を行った場合、画像が荒くなってしまいます。逆に「もっとちっちゃく表示しよう」と縮小の編集を行った場合、画像の品質はほとんど変わりません。このため、アップロード前にリサイズしておく画像は、想定よりも若干大きめにしておくことをおすすめします。
手順２. Cute.Guidesにアップロードする前に、その画像を手順1で決めた大きさにリサイズする。
サイズを変更する前に、そもそも元の画像ファイルの容量と大きさをチェックしておきましょう。
3) 元の画像ファイルの容量と大きさを調べる
Windowsならファイルを右クリックし、プロパティを開きます。「全般」のタブにサイズ（ファイル容量）の情報があり、「詳細」のタブに大きさの情報があります。特に、デジカメで撮影した画像は巨大になりがちです。ウェブでその画像の見た目が悪くならない限りは、容量を削られるだけ削りたいです。ファイル容量を削るための一番の方法は、画像を適切な大きさに加工することです。例えば幅4608× 高さ3456ｍの元ファイルについて、ウェブサイトに表示させるなら、デザイン的にせいぜい幅800くらいかなと想定すれば、およそ6倍も違ってますよね。
4) 画像ファイルの大きさを加工する
さて、それでは実際に大きさを加工してみましょう。加工するには様々なソフトがあります。例えば、Windowsを使っているなら、「ペイント」というソフトでリサイズが可能です。
Windowsソフト「ペイント」による加工手順 ： 該当の画像を「ペイント」で開く → ホームタブの「サイズ変更」ボタン
また、以下のとおり他のフリーの加工ソフトにも使いやすいものがたくさんあります。
面倒な画像のサイズ変更をワンクリックで！リサイズツール7選 by ferret
これらのソフトの中から使いやすそうなものを実際に試して画像サイズを適切な大きさに加工してください。ファイル容量がグッと減るはずです。
なお、画像ファイルをCute.Guidesにアップした後、Cute.Guidesの編集機能によって表示サイズを調整することも可能ですが、このCute.Guidesの編集機能では、ファイルの容量が削減されませんので、あらかじめ上の手順を踏んでいることが前提です。
