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

Pocket

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

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

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

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

 

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

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

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

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

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

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

 

スポンサーリンク

 

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

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

が必要

 

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

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

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

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

 

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

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

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

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

 

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

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

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

 

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

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

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

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

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

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

 

 

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

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

となると思う

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

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

 

私のオススメはエックスサーバーです
http://www.xserver.ne.jp/

今8/15まで初期費用が半額なんですねぃ。。。。。

 

最近ではロリポップのスタンダードプランも高スペックになっていて驚きです

さくらサーバー危し!?笑

 

サーバー

内容
エックス
サーバー

さくらの
レンタル
サーバ

ロリポップ!
ヘテムル
SSL
証明
無料
初期
費用
3,000円 953円 1,500円 2,000円
月額
(1年
契約
1,000X12
(1,2000円)
376.85…
X12
(4,761..円)
500X12
(6,000円)

800X12
(9,600円)



70G/日 80G/日 100G/日 80G/日
マルチ
ドメ
イン
20個 100個
データ
ベース
50個

20個

30個 70個
ディスク
スペース
200G 100G 120G 200G
メモリ 256G
※1
18G ? 128G
メール
サポ
ート
Mail&TEL Mail&TEL Mail&TEL Mail&TEL
内容 /
サーバー
エックス
サーバー

さくらの
レンタル
サーバ

ロリポップ!
ヘテムル

※1>契約時により違う場合あり
(サーバーパネルのサーバー情報で確認できる。ちなみに私は192Gだった)

価格は税抜き価格表示・プランはスタンダード的なものの内容です。
時期によってキャンペーンなどがあり、新規購入での初期費用の価格が下がっている場合も多いです。

 

とにかくできるだけ高スペックなサーバーを選んだ方がいい

転送量やメモリの低いサーバーだと制限がかかったりダウンしたり表示速度遅すぎじゃね!?ってことになりうるのです…………….

 

スペックチェックでの注意は転送量は最低でも 50GB/日 は欲しい

250GB/月 とかの表示にご注意くださいねw

 

そして画像メインの場合、その画像の閲覧の仕方もどうやって見やすくしてくのか?という工夫が必要です

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

Wix Site_REACH_rhjam project pf
Wix Site_REACH_rhjam project pf

 

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

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

 

Wixは無料でここまでできるという意味では驚異的

でも、サイトパワーを高めていくなら独自ドメイン&有料レンタルサーバー&ワードプレスでの方がやりやすい

Wixは無料の中では最強に思うけれどこのサービス内で有料にしていくとやや割高に感じる。。。。。。

詳しくは下記のページ参照
HPはどこのサービスがいいですかね?

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

 

 

❤︎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

 

 

検索エンジン対策の知識はあった方がいい

私も勉強し直してますw

▷Amazon▷これからのSEO内部対策 本格講座 ¥1,944

 

▷Amazon▷検索にガンガンヒットさせるSEOの教科書 ¥927

 

\(`^`)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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

twenty − 13 =