アオウル博士: ITとセキュリティの専門家。ミマワリの頼れる相談相手。Webデザインのトレンドにも詳しい。
ミマワリ: アオウルのキャラクター。PCやスマホは毎日使うけど、サイトの更新作業で画像が綺麗に表示されず悩んでいる。
iPhoneやMacでWebサイトを見ると画像がぼやける…その原因はRetinaディスプレイです。レイアウト崩れを防ぎながら、プラグイン「Perfect Images」を使って全自動で高画質化する方法をIT専門家のアオウル博士が解説。TCDなどのデザインテーマ利用者も必見です。
博士、相談に乗ってください！ 最近、iPhoneを新しくしたんですけど、自分の会社のブログを見てガッカリしちゃいました。 パソコンで見ると普通なのに、スマホで見るとロゴや写真がなんだか「ぼや〜っ」としてて、すごく素人っぽく見えるんです。
それは「Retina（レティーナ）ディスプレイ」の洗礼を受けておるな、ミマワリ君。最近のiPhoneやMac、高画質Android端末では避けて通れない問題じゃ。
レティーナ…？ 聞いたことはありますけど、具体的に何が起きているんですか？ ちゃんと綺麗な画像をアップロードしてるつもりなんですけど。
今日はその「ぼやける理由」と、デザインを崩さずにくっきり表示させる「魔法のような解決策」を伝授しよう。特に、TCDのようなこだわりのテーマを使っている人には必須の知識じゃぞ。
第1章：なぜ画像がぼやける？ Retinaディスプレイの正体
まずは敵を知ることじゃ。なぜ「普通の画像」がぼやけるのか、この図を見てごらん。
従来のモニターは「1つのマス目に1つの点（ピクセル）」を表示しておった。しかし、Retinaディスプレイは、「同じ1つのマス目の中に、4倍（縦2倍×横2倍）もの密度」で点を詰め込んでおるんじゃ。
密度がすごいってことですね。でも、それなら画像も勝手に綺麗に表示してくれればいいのに…。
そこが落とし穴じゃ。 例えば、横幅300pxの画像をRetina画面で表示しようとすると、画面側は「600px分の細かさ」を期待して待っている。そこに300pxの画像を渡すと、「無理やり引き伸ばして」表示することになる。 小さい風船に無理やり空気を入れて大きくした状態を想像してごらん。表面がボヤボヤになるじゃろ？あれと同じことが起きておるんじゃ。
第2章：単純に「デカい画像」を使えばいいの？ 重大な副作用
なるほど！ つまり、300pxで表示したいなら、倍の600pxの画像を作ってアップロードすればいいってことですね！ 簡単じゃないですか！
ストップ！ それが最大の罠じゃ。 確かに理論上はそうじゃが、WordPressのテーマ（特にTCDなどデザイン重視のもの）で、何も考えずに大きな画像を貼るとこうなる。
- レイアウト崩壊：画像が枠からはみ出して、隣のサイドバーが下に落ちてしまう。
- 表示速度の低下：不必要に大きな画像はサイトを重くし、SEOの評価を下げる。
「画質は上げたいが、表示サイズは維持したい」。このジレンマをHTMLコードを書かずに解決するのが、今回紹介するプラグインじゃ。
第3章：救世主プラグイン「Perfect Images」の導入手順
以前は「WP Retina 2x」という名前で有名じゃったが、現在は機能強化されて「Perfect Images」という名前になっておる。これを使えば、以下のようなことを全自動でやってくれるぞ。
【Perfect Imagesの仕事】
- あなたが画像をアップロードすると、自動的に「Retina用の2倍サイズ画像」を裏で作ってくれる。
- サイトを見に来た人が「Retinaディスプレイ」なら高画質版を、「普通の画面」なら通常版を、自動で出し分けてくれる。
えっ、勝手に出し分けてくれるんですか？ それならデータ量も重くならないし最高ですね！ 導入は難しいんですか？
インストールするだけでほぼ完了じゃ。手順を見ていこう。
【導入ステップ】
- WordPress管理画面の「プラグイン」＞「新規追加」をクリック。
- 検索窓に「Perfect Images」と入力。（※「WP Retina 2x」でも検索可能）
- 作者名が Jordy Meow さんであることを確認して、「今すぐインストール」→「有効化」。
- 基本設定はこれだけでOKじゃ。管理画面メニューに「Meow Apps」または「Perfect Images」が追加されるので、設定を見て「Retina」の機能がONになっているか確認すれば完璧じゃ。
第4章：【重要】それでも崩れる？ 仕上げの「ひと手間」
プラグインを入れたら、過去の記事の画像も勝手に綺麗になりますか？
鋭い質問じゃ。プラグインの設定画面に「Retina画像の生成」というボタンがあるから、それを押せば過去の画像分も作ってくれる。 しかし！ ここで一つ注意がある。「記事に画像を貼り付ける時のサイズ設定」じゃ。
TCDなどのテーマを使っている場合、いくらプラグインを入れても、エディタ上で「フルサイズ（巨大なまま）」で貼り付けると、レイアウトが崩れることがある。だから、以下の手順を習慣にするんじゃ。
【レイアウト崩れを防ぐ鉄則】
- 画像をアップロードする時は、表示したいサイズの「2倍」の大きさの画像を用意する。（例：300pxで表示したいなら、600pxの画像をアップ）
- 記事に画像を挿入した後、右側のブロック設定（または画像詳細設定）を見る。
- 「画像サイズ」や「幅」の項目に、表示したいサイズ（300px）を手入力する。
こうすることで、「データの実体は600pxの高画質だけど、見た目のサイズは300px」という状態が作れる。これがRetina対応の正解じゃ！
なるほど！ 「大きな画像をアップして、表示設定で小さく縮める」のがコツなんですね。これならレイアウトも崩れないし、iPhoneで見たらクッキリ見えるわけだ！
その通り。画像が綺麗だと、それだけで「しっかりした会社」「信頼できるサイト」という印象を与えることができる。 たった一つのプラグインと少しのコツで、サイトのクオリティは劇的に上がるぞ。早速試してみるんじゃ！
