イラスト・画像メインのサイト作りはテキストの充実・ファイルの圧縮・サーバースペックが重要

Pocket

イラストたくさん載せたい、写真たくさん載せたいなどのサイト立ち上げは結構難しい

何故かって画像は重いのと、画像ばかりだと検索エンジンに評価させることが難しい

何も考えずに画像メインサイトをとりあえずやってみよう的にやってしまうと後でめんどくさいことになるというか、つまりかなりの確率で失敗するので最初に注意しておきたい笑

画像メインサイト作りのポイント

〜〜項目〜〜〜〜〜〜〜〜〜〜〜〜〜〜

❤︎1、画像(写真やイラスト)は最初の段階から最適化しておくべしべし

❤︎2、画像の重さに耐えうるサーバーを活用することが絶対必要よ❤︎

❤︎3、画像(写真やイラスト)だけでは検索に弱い

❤︎4、イラストや画像メインのサイト作りのポイントまとめ

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

スポンサーリンク

❤︎1、画像(写真やイラスト)は最初の段階から最適化しておくべしべし

  • 画像はあらかじめ必要最小限まで圧縮、リサイズしておく
  • できるだけ速く表示させる工夫をする

が必要

1,画像はあらかじめ必要最小限まで圧縮、リサイズしておく

最初の段階からやっておきたいことの1つとして、画像はサイトにアップロードする前に

適正なファイルサイズに圧縮しておくことが必要

つまり、都度、画像は最適化してからサイトにアップすることが望ましい

ワードプレスなら後からでもプラグインを使って圧縮できますが時間がもったいないです

蓄積した重い画像は何かと圧迫して全ての動作に支障をきたしてきます

Web上の画像の解像度は72pixで十分とされていますし、1カットアイキャッチ画像で最高でも200MB未満、記事内に使うものは60MB未満くらいには抑えておいた方がいい

それでも蓄積していくと当然重くなってくるので、とにかく見栄えが許す限り圧縮しておきたい

また、“Flickr” などの画像を直リンクしてもいいサービスを使うという手もある

ただ”Flickr”になにか問題が生じたり、日本はサービスから除外するなんてされた場合画像はみんな一気にリンク切れになる

だから画像メインのサイトの場合それは致命的に感じますが、そこは個人の判断によるでしょう

2,できるだけ速く表示させる工夫をする

画像サイトで重要な1つは、表示速度をなるべく圧迫しないことが大事だったりする

そのために圧縮が必要ってことで、そしてそれは限界があるので、他の工夫も必要ってことです

なるべく速く表示させる工夫をネチネチしましょううw

(ワードプレスの場合重い画像の表示をわざと遅らせておいてページ表示速度を優先させることによってユーザーに離脱されないよう工夫したりもできる)

圧縮や表示速度改善については下記のページを参照ください
ブログサイトの表示速度を上げる方法

❤︎2、画像の重さに耐えうるサーバーを活用することが絶対必要よ❤︎

そしてサイト立ち上げの時、どのサーバーにしたらいいかな?

となると思う

画像メインのサイトなら間違い無くいずれは重くなるので、その重さに耐えうるスペックのサーバーを選択しておくべき

これは後で転送量足りなかったとかなるとかなり面倒なことになるので多く見積もっておいた方が自分のためで結局コストてきにも満足に繋がる

私のオススメは

▶︎エックスサーバー

エックスサーバーはとにかく自動で対処できるようにしてくれてる部分が多く、他のサーバーより楽です。

安定感も断然いいし。。。サポートも充実してます。

もちろん何個もサイト作れるし。。。

私は他にサーバーを使ってますし、色々なサーバーもサポートさせていただいたことがありますが、

とりあえずエックスサーバーにしておいて間違いない感触です。

サイトの規模が大きくなってきたらプランを上げればいいし。

で、

そして画像メインの場合、その画像の閲覧の仕方もどうやって見やすくしてくのか?ということがありますが、

例えばそれだけで言えば、Wixというサービス、ツールはプラグインがかなり充実していてスッキリと見やすくカスタマイズしやすい↓

Wix Site_REACH_rhjam project pf

Wix Site_REACH_rhjam project pf

そして有料レンタルサーバー&ワードプレスの組みあわせでももちろんプラグインでカスタマイズできる↓

ワードプレスプラグインカスタマイズ画像サイト_imagegen7net

ワードプレスプラグインカスタマイズ画像サイト_imagegen7net

Wixは無料のままでもカスタマイズ性に優れてて独自ドメインにして、サービス内で有料にしていくとやや割高に感じる。。。。。。

独自ドメインやサーバーについての詳しくは下記のページも参照ください
独自ドメインブログで窓口を広げるために知っておきたいこと

❤︎3、画像(写真やイラスト)だけでは検索に弱い

そしてこれです…………………….

基本的に画像情報のみでは検索エンジンに評価されづらい

ってかこれはよく言われることですが、私は実際に体験しています笑

テキストのしっかりあるサイトと、画像ばかりのサイトを比べるとそれはもう酷い違いです笑

とにかく、画像だけで勝負するならSNSなどの拡散力、知名度がないときついでしょう

仲間内に拡散してもらえる状況かもしくは有名人とかでない限り広げてくのは難しいとおもう

検索に頼らずに広げるにはやはりその人自体の拡散力が必要になってくるですもん

だから画像メインだとしても、

テキストコンテンツ、本文、ブログ内容を併用して充実させていく必要がある

それを怠るとアクセスの全くないサイトの出来上がりです笑

つまりサイトてきな固定ページ(静的ページ)とブログなどテキストメインのページ(動的ページ)を併用して育てていけるのがいい

それがやりやすいのが独自ドメイン&有料レンタルサーバー&ワードプレスの組み合わせ

そして画像にも代替テキストやキャプションも入れやすくなってて、画像ばっかりのサイトでも拾ってくれやすくできる。。。。
(すごい効力を感じるわけでは全くないけど 笑)

画像をサイトにアップロードするとまず、下図のように表示される↓

画像アップロード詳細

※❶はアップする前からつけてる画像ファイル名
(これは日本語にしていると、このアップ時に文字化けみたいな英数字の長い名前になってしまうので、アップする前に英語かアルファベットにしといた方が自分がわかりやすい)

※❷画像縦横サイズと、ファイルサイズ
(なるべく軽くしておきたい)

※❸画像のurl(外部リンクにしたり、リンクなしにしたりも可能)

※❹画像のタイトル
(画像の上にカーソルを置くだけで表示される)

※❺これが “代替テキスト”で、検索エンジンにも伝わるっぽいとされる部分で、画像をテキストで表現できる枠として考えるといいと思う

キャプションや説明もあった方が良いらしいですが、ここで書くくらいなら本文で書いた方がすっきりする感じ。。。。

どうしても画像だけにしたいなら入れた方がマシかもです

で、さらに下の方に上級者用の設定がありますが、属性タイトルをつけたり、リンクの種類を指定したりもできる

画像上級者用の設定

例えば画像から外部へのリンクにしてそのリンクにリンク評価を与えたくないとかの場合もここで設定できる

代替テキストは alt=” ” に当たるところで画像のキーワード的な部分で、画像をテキストで表現しているようなイメージ

ワードプレスのように画面で簡単に入れられないとしても、HTMLエディタ内で書き込めばOK

<a href="リンク先URL"><img src="画像ファイル名(画像保存場所)" alt="画像の説明"></a>

詳しくはこんな感じ

  • キャプション: 簡単な説明。テキストは画像の下に表示されます。
  • 代替テキスト: メディアを説明するテキスト。スクリーンリーダーにより使用されます。
  • 配置: コンテンツ領域における画像の位置
  • サイズ: アップロード時に生成された各種サイズの画像から選択されたサイズ
  • リンク先: 画像がクリックされた場合の転送先
  • 画像タイトル属性: HTMLタグ「img」のタイトルを設定します。画像の上にカーソルを移動した際に表示されるポップアップテキストとして使用されます。
  • 画像 CSS クラス: HTML タグ「img」に CSS クラスを付加します。カスタム CSS プラグインや子テーマを使用して画像にスタイルを設定できます。
  • リンクを新ウィンドウまたはタブで開く: HTML link に target="_blank" を追加します。
  • リンク rel: HTML link の rel 属性、または リンクタイプ を設定します。
  • リンク CSS クラス: HTML link に CSS クラスを追加します。カスタム CSS プラグインや子テーマを使用してリンクにスタイルを設定できます。

https://wpdocs.osdn.jp/投稿・ページヘのメディア挿入より引用

で、この設定はサイトのページに貼ってからも編集し直せる

アップした画像内容の編集

画像を貼ってから鉛筆マークをクリックすると、、、、

画像代替テキストalt属性とメディアファイル設定

※❷のリンク先ですが、外部リンクにしたりリンクなしにしたりもできるのですが、例えばリンクなしで良い場合でも、メディアファイルに設定しておいた方が見てくれる人に対して親切だと思う

クリックしても大きく表示されない “なし” の設定のままの方も結構いるけれど、クリックして大きく見られるようになってる方が柔軟性があるように感じる

(※現在ワードプレスのエディターではちょっと仕様が変わってるけど)

❤︎4、イラストや画像メインのサイト作りのポイントまとめ

=================

  1. 画像は都度、必要最小限まで圧縮・リサイズしておく
  2. 画像の重さに耐えうるスペックのサーバーを選択しておく
  3. できるだけ速く表示させる工夫をする
  4. テキスト、本文の内容も必要で充実させるべき
    (完全に画像だけのサイトにしたいなら検索エンジン以外の集客力が必要)

=============

4つともとても重要〜w

何年か運営してると画像も増えて重くなってくる。。。

そして後からそのあたり整理するのってかなり面倒です。

なので最初から画像の扱いはちゃんとしておいた方がいい。。。。

私も色々失敗が多いので勉強し直してます 笑

ってことで

楽しいクリエイトあれ!

しゃらんるあぁああああああ❤︎

\(`^`)b

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤色々やり散らかしております、宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

Twitter-REACH_rh Facebook-REACH_rh G+ -REACH_rh Insta-REACH_rh note-REACH_rh

YouTube-REACH_rh SoundCloud-REACH_rh PIXIV-REACH_rh CREATORS BANK_REACH_rh

関連コンテンツ

Pocket