retina_ecmg

ワードプレス

【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetinaディスプレイ対応方法

WEBサイトのRetina対応、そろそろ始めたい?

あ、でも”初心者お断り”系のカスタマイズはちょっと…

画面が真っ白になるよーなアブナイことはしたくない

ここはひとつ、プラグインとかでサクッといっちゃいたいんすけど

OKです。みなさんお入りください。

必要とされていく、高解像度ディスプレイ対策

MacのRetinaディスプレイをはじめ、モニター環境はどんどん高解像度化し、画面も大きくなっています。普段Windows環境で更新している中でふと、MacやiPadで自分のサイトを覗いてみると・・・

ンン…!? 画像がボヤけとる… 歳とったなぁ…

retina_ins1

いや、それは歳のせいなんかじゃあないんです。Windowsで閲覧する分には全く問題ない。でもMacで見るとやっぱり画像がボヤケて見える。ディスプレイの解像度の違いですね。そして今や、モバイルやタブレットさえも解像度が高く、画面も大きくなってきている…

画像をRetina対応させたい!可愛い我が子のようなサイトを思うと、人様の前でキレイでいてほしい…そんな気持ちにもなりますよね。分かります。だってこんなに違うんですから・・・ 

Before | After(ボーダーラインを移動して比較)

そんな、うっかり目が肥えてしまったあなたに送ります

上記画像解像度は体感イメージ。Mac環境で違いが分かりやすくなります。
スマートフォンなど、画面の小さなデバイスでは違いが分かりにくくなります。

Retinaディスプレイで綺麗に表示させるには?

Retinaディスプレイで元画像のクオリティーをそのまま再現するためには、単純に2倍のサイズの画像をアップロードすればいいのは有名な話です。

でも、そんな大きい画像をむやみにペタペタ貼っていたら、ページの読込みはどんどん遅くなっていきます。せっかく立ち寄ってくれた天使さんに、ページ表示されるまでいつまでもグルグルマークを眺めさせるわけにはいきません。

retina_ins2

WEBサイトの”場所別”Retina対応

でも難しいのはイヤ。サイトが真っ白になりそうなコワーいカスタマイズもイヤ。だから、私たちでも簡単にできる方法で解決しましょう

ここではブログサイトを例に、サイト内の構成場所ごとに分けて紹介していきます。

WEBサイト全体をRetina対応させるために4箇所に分けて紹介していきますが、必要になるのは【画像形式の使い分け】と【2つのプラグイン】だけ。初心者にも優しい方法です。

使用しているテーマなどの環境によって結果が異なることもあると思います。あくまで実例として参考にしてください。私の使用テーマはTCDテーマです。

【事前知識】

retina-ins2

画像形式の使い分け

Retina対応化するにあたっては特に、前提として必要になる知識です。
貼り付ける画像形式、なんとなーく統一してませんか?

特に「PNG一択!いつだってフルサイズ挿入!」でオラオラ突っ走っているとしたら…イエローカード。ブログレベルに必要なことだけをまとめています。まずはここから。

1. 記事画像・アイキャッチ画像

retina_01

Windowsでは軽い画像を表示させる

Windowsでは2倍サイズの画像を必要としません。つまりそのままだと、Windowsでの閲覧者にとっては「ただ重いページ」になってしまいます。Windowsでは従来通り、サクサク表示させましょう。プラグインひとつで。

Macで表示される重たい画像の圧縮

Windowsでサクサク。じゃあMacでは?やっぱりサクサク表示してもらわないと困ります。じゃあ、それも解決しましょう。こっちもプラグインひとつで。

2. ウィジェット画像

retina_02

ウィジェット画像をギュッ!と凝縮表示

ウィジェットにだってリンク付き画像を表示させたい。ほな、2倍サイズの画像をアップロードして「width」で半分の大きさに表示指定。そうすれば綺麗に表示され・・・アラ?

いつものwidth指定が・・・効かない!?
という、独自の世界観を持つウィジェットさん対策。

3. ロゴ画像

retina_03

サイトの顔だって凝縮表示

WEBサイトの顔とも言えるロゴ。ぼんやりしてる表情をシュッ!と引き締めてあげましょう 

requlog_logo

TCDテーマなら余裕の3ステップ。ついでに上のようなGIFアニメーションに挑戦してみるのもアリです。あわせて紹介中 

4. スライダー画像・サムネイル画像

retina_04

スライダーもサムネイルも、まとめて綺麗に

残すところはあと2つ、スライダーと小さなサムネイル画像たち。まとめて美しくします。

ユーザー体験の最低基準は上がっていく

以上、ブログサイトを例にRetinaディスプレイ対応方法を紹介しました。

デスクトップやラップトップ、モバイルデバイスに至るまで、ディスプレイの高解像度化は進んでいます。また、WEBコンテンツを表示させる通信技術もどんどん発達しています

個人的な見解ではありますが、画像をきれいに表示させるサイトは今後、「差別化→一般化」していくのではないでしょうか(SVGやベクター素材の利用も含めて)。少なくとも、ユーザー体験の最低基準は上がっていくでしょう。

私自身、検証していく中で「WEB画像の取扱い」についての理解が深まりました。ぜひWEBサイトのクオリティーアップにチャレンジしてみてください。

スポンサーリンク

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読…
  2. Todoistとも連携。複数のメールアカウントを一括管理するMac・iPhone…
  3. 子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と…
  4. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  5. 理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方

関連記事

  1. blog-theme-mag_ecmg-ps

    ワードプレス

    【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト…

    本当のことを話します。ワードプレスのブログテーマ【MAG】。このサ…

  2. intuitive-custom-post-order_ec

    ワードプレス

    ほら、こんなに直感的。投稿記事の順番を並び替えるWordPressプラグインIntuitive Cu…

    記事の順番だって、自由に決めたい。ブログなどのトップページで表示さ…

  3. annotation-image-ecmg

    ワードプレス

    ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文字を追加しよう

    注釈画像も、自由自在。前回までの記事では、Windows用の万能ツ…

  4. LightShot-Screenpresso_ecmg

    WEBデザイン

    辿り着いたブログ用キャプチャーツール、LightShotとScreenpresso。機能比較と併用の…

    併用すれば、もっとハカドる。スクリーンショットに特化したキャプチャ…

  5. facebook-fast-display_ecmg
  6. show-title-tag_ecmg

    マーケティング

    もっと・・見せてくれませんか?タブに隠れた見えないタイトル。Show Title Tagを使って全表…

    ちょっと見せてるぐらいなら・・全部見せてください。誤解しないで。ブ…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. retina_ecmg
  2. tcd-mag_ecmg-ps
  3. tcd-theme-selection_ecmg-ps
  4. adjust-the-button_ecmg
  5. display-speed_ec
  6. todoist_ec

タスク管理で、自己管理。

todoist

人気記事

  1. compress-jpeg-png-images-ecmg
  2. chrome-font_ecmg-1
  3. child-theme_ecmg
  4. media-setting_ec
  5. todoist-basic_ec-ps
  6. child-theme-mechanism_ecmg-ps

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. facebook-fast-display_ecmg
  2. widgetoon-js-count-jsoon_ecmg
  3. like-button-card_ecmg-ps
  4. chrome-font_ecmg-1
  5. intuitive-custom-post-order_ec
  6. child-theme-mechanism_ecmg-ps

ブログのRetina対応、始めませんか?

retina-os-solution

掘り出し記事

  1. insert-card-link_ecmg
  2. screenpresso-capture-ecmg
  3. mergely-ecmg
  4. LightShot-Screenpresso_ecmg
  5. feedly-count-problem_ecmg
  6. todoist-re-schedule_ec

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. facebook-fast-display_ecmg
  2. gif-animation_ec
  3. intuitive-custom-post-order_ec
  4. original-share-button_ecmg-ps
  5. child-theme_ecmg
  6. lightshot_ecmg

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. tcd-theme-user-review_ecmg
  2. valuable-content-from-image_ec
  3. improvement-flow_ecmg
  4. tcd-mag_ecmg-ps
  5. todoist-tips_ecmg
  6. todoist_ec

人気記事

  1. jpg-gif-png_ecmg
  2. child-theme-mechanism_ecmg-ps
  3. media-setting_ec
  4. chrome-full-screen-capture-ecmg
  5. compress-jpeg-png-images-ecmg
  6. chrome-font_ecmg-1
  7. screenpresso-initial-setting_ec

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  2. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  3. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  4. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  5. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
PAGE TOP