アフィリエイト作業をしていくうえで、僕自身が困ったことやつまづいたことの対処法を忘備録としてまとめています。
今回紹介するのは、サイト作成ソフト『シリウス』の画像の設定に関するものです。
シリウスで作成したサイトの画像をスマホでも鮮明に表示する方法
一生懸命時間をかけてシリウスでサイトを作って、いざ！アップロード♪
PCサイトでは何の問題もなく表示されていたのに、スマホで確かめてみたら画像がぼやけてしまって何が表示されているかわからない・・。
ちなみの画像がぼやけてしまっている場合は、当然スマホの画面を拡大しても画像（文字）はぼやけたままです。
サイトを訪れてくれる方の大半がスマホユーザーの今、これは大きな問題ですよね。
特にアフィリエイトサイトでは、上の画像のようにユーザーの口コミを引用してくることってけっこうあります。
- スクリーンショットした口コミの文字がぼやけて読めない
- 使い方説明の画像の文字がぼやけて読めない
- 細かい部分まで見てもらいたい画像なのに全体にぼやけてしまっている
シリウスで作成したサイトの画像がスマホのみぼやけてしまう場合は、以下のようにシリウスの設定を変えてみて下さい。
step
1メニューバーからサイトオプションを選択
step
2記事中の画像を【原寸サイズで表示】に変更
①iPhoneサイト設定
②詳細設定
③記事中の画像を【原寸サイズで表示】に変更
記事中の画像が【縮小変換して表示】もしくは【縮小変換して表示（中央揃え）】になっていると、PCでは鮮明に表示されている画像もスマホではぼやけて表示されてしまうことがあります。
設定を変更した後は、早速記事を再度アップロードしてみて画像の表示のされ方を確認してみて下さい。
先ほどは、文字が小さいうえにぼやけてしまっていましたが、鮮明にはっきりと見えるようになりました。
もちろん、スマホの画面を拡大しても画像は鮮明なままです。
それでも解決しない場合は・・？
シリウスの設定を変更したにもかかわらず、スマホに表示される画像がぼやけてしまう場合は、以下のことが考えられます。
- 元々の画像サイズが小さい
- 画像を保存するときに圧縮されてしまっている
- 元々の画像が小さい
コピー元の画像サイズが元々小さかった場合は、残念ながら先ほどのシリウスの設定では解決しません。
PC、スマホどちらで見ても画像はぼやけてしまいます。
元々サイズの小さな画像は、拡大表示をすると余計に画像の粗さが目立ってぼやけて見えてしまいます。
こういった場合は、もともとの画像サイズのまま使用するか、大きなサイズの画像を探すしかありません。
画像のサイズが大きければ、PC・スマホどちらでも画像が鮮明に表示されます。
でも、なんでもかんでも大きければいいかと言ったらそれもちょっと違います。
サイズの大きな画像は、鮮明に表示はされますがデータサイズが大きい為サイトの表示速度が遅くなるというデメリットがあります。
逆に、サイズの小さな画像は多少画像がぼやけることはありますが、データサイズが小さい為サイトの表示速度に影響を及ぼすことはありません。
シリウスには、画像の大きさを変更するリサイズという機能があります。
スマホで撮影した画像などは、そのままサイトに挿入すると大きすぎてサイトの読み込み速度が遅くなってしまうことがあります。
シリウスでの画像のリサイズの仕方
step
1メニューバーから【画像管理】を選択
step
2サイズを変更したい画像を右クリック→【画像のリサイズ】を選択
①サイズを変更したい画像を右リック
②画像のリサイズを選択
step
3画像のサイズを変更
①ここの数値を小さくすることで、画像サイズを縮小することができます
②【比率固定】にチェックを入れておくと、縦横それぞれの数値を変更しても元の画像が縦長になったり横長になってしまうのを防ぐことができます。
- 画像を保存するときに圧縮されてしまっている
サイトから画像を保存したりスクリーンショットを使ったりする場合に画像が勝手に圧縮されてしまう場合があります。
スマホ表示ではもちろん、PCでの表示まで画像がぼやけてしまうことってありませんか？
こんな場合は、画像保存時のファイル形式を【jpg】から【png】に変更してみましょう。
【png】は画質の劣化をせずに保存が可能なので、細かい文字なども綺麗に表示させたいときなどに便利です。
同じ画像をスクリーンショットして、【jpg】と【png】でそれぞれ保存してみました。
【jpgで保存した画像】
引用元：Amazon「オカムラ製オフィスチェアVC1」購入者の口コミレビューより
【png】で保存した画像
引用元：Amazon「オカムラ製オフィスチェアVC1」購入者の口コミレビューより
ちょっとわかりづらいかもしれませんが、【jpg】の画像より【png】で保存した画像の方が鮮明に表示されています。
【jpg】と【png】ってどう違うの？
ｊｐｇ画像
メリット
- 画像ファイルのサイズを小さくできる上に、比較的高画質
デメリット
- 画像が荒く、ぼやけることがある
- 画質が劣化する
png画像
PNG画像
メリット
- 画質が劣化せず、透明や半透明の画像も扱える
デメリット
- 画像ファイルのサイズが大きくなりがち
まとめ
アフィリエイトサイトにとって、図やイラスト、写真などはとても大切です。
画面いっぱいギッシリ文字だらけのサイトなんて、誰だって読みたくありませんよね。
わかりやすいイラストや画像入りのサイトは、訪問者の離脱率を防ぐためには欠かせない存在です。
ちなみに僕の場合は、シリウスでサイトを作るときは毎回必ずスマホの画像設定は【原寸サイズで表示】にしています。
最初は、こんな設定ができることに気づかず、スマホで見るとぼやけていたり文字がつぶれて見にくいサイトばかり作っていました。
あなたのサイトは大丈夫ですか？
不安な方は、今一度自分のサイトをスマホから見直してみて下さいね。
それでは、今回はこの辺で！
