画像の扱い方・JPGとPNGの違い - スマホ対応

我々は進化に合わせて行くしかありません。
今ではあまり見ることもありませんが昔のブログなどでは扱う画像の重さはPC表示では問題ではありませんでしたが携帯で見ると画像が表示されるまで時間が掛かり、サイトに訪れた方が待ちきれずに逃げてしまう。と言う現象が起こり検索エンジン最適化が進化をして来た理由でもあります。

携帯はスマホになりiPhoneやandroidになりiPadのタブレットなどの登場でネットを利用する様になりブログをPCで見るよりも増えてしまった影響によるものです。

ムラゴンのブログは簡単に記事を書く事が出来てしまいます。

しかし、逆に便利だからこそ重要なHTMLを学ぶ事を忘れてしまったり、覚える事をしなくなってしまう弱点があると言える点があります。

ムラゴンのテキストエディターは、VIEW表示にされていれば、テキストを記入するだけでブログを書く事が出来てしまいます。初心者であれば、とても便利な機能ですがTHMLを覚える事も重要ですのでHTML表示に切り替えて記述を覚えることも必要と言えます。

便利な構造であるがために自動的にタグが勝手に入ってしまう現象が起きてしまっている。
HTMLを覚えて置かないと後から記事の修正や更新などが起きた時に使わないタグが消せずに残ってしまい邪魔になってしまう時もあります。

とは言え時間も無いし難しいので、ほとんどの方は覚えないとは思います。
しかし、物販の方はそんな事を言ってる場合ではありません、本気を出さなければなりません頑張ってください。

初心者からちゃんとしたプロになる　HTML+CSS標準入門: エムディエヌコーポレーション（MdN）; Digital Ebook Purchas

ブログを検索エンジンで上位をすれば、商品を売る事も出来ますしアドセンスやアフィリエイトでも稼ぐ事も出来てしまいます。

なぜブログを上位をさせる事が出来るのかを理解を深めることです
ブログを検索エンジンで上位をさせるには、裏技などはありません。

最初はテクニックよりも先に、しっかりとブログの書き方やルールを守り記事を書き上げることが重要であると言える部分です。
検索エンジン上位表示を理解をするには、とても長い時間が掛かりますが覚えてしまうと常に頭の中にルールがある事を理解しているので、そんなに負担では無くなっていきます。

今ではSNSなどやYouTubeとの連携でアクセスアップをすることも非常に簡単になりましたが、しかし機能は便利で手軽になりましたが、その分重要である基本を理解していないとサイトに訪れるユーザーはあっという間に逃げてしまう恐ろしさも同時に合わせ持っています。

人を引き付ける魅力的な動画の作り方などもあるので別にひとつのコンテンツとして学ぶべき点でもあります。ただやみくもに撮影した動画を見ているユーザーは途中で飽きてしまいます。動画を見ている側の立場になり撮影した動画の内容が如何に興味を持たせるのかが滞在時間を延ばす秘訣です。

以前にも記事にもしましたが、シンプルイズベスト！

「見やすい・表示が軽い・タイトルの記述が適切・説明がしっかりとされている・内部リンクが案内されている」

簡単なところですが、この部分が非常に重要であるのです。

適切な記述でしっかりとルールを守ってさえいればシンプルイズベストは、これだけでも十分に行けてしまうのです。
しかも、上手にブログの作り込みをされていれば、そんなに頻繁に記事の更新する事も無いです。

以前ネットで仕事とは別に、こどもの玩具を作って販売をしていました。
完全にオリジナルバージョンです。
パッケージまで全てオリジナルで自分でデザインをし制作をしていました。

検索エンジンの順位は1ページ目の3位をキープしていましたのでアクセスは多かったです。
月の収入は30万円ほどでした。クリスマス時期になると大忙しでした。仕事とは別でしたので当然、副収入です。

何でも売れば良い訳では無いのですが利益の高い物を売る事がコツです。
そして何より一瞬で見て興味が沸き、シンプルであり、利益の高い物をオンリーワン商品にすること。

サイト構造も同じくシンプルが一番である理由

邪魔な物を一切排除することで視線は集中する、興味があれば難しい説明なども必要とせず勝手にユーザーの滞在時間は伸びてしまうと言う訳です。あまり広告などを使い過ぎると邪魔になりユーザーは逃げてしまいますので注意をしなければなりません。
ブログを改造して1カラムのブログもあるぐらいです。

サイドバー不要論などメリットやデメリットが詳しく説明がされているので一度ご覧になられると良いと思います。

あなたの目線はどこにへ行くでしょうか？ムラゴンのブログで言えばユーザーはモバイルユーザーの比率が高く記事とは関係の無いサイドバーは不要であるのが分かります。Twitterのへの誘導もあるのですが無料のブログのために変な広告が出力されてしまいイメージが悪くなることもあります。

同じサイドバー設置でTwitterへの誘導を行うのであれば独自ドメイン運営で管理されたサイトで来られたユーザーを守ってあげられる配慮は必要であると言えます。

細かく分析をするとサイドバーに直接SNSのアイコン表示も読み込みのアイコンはサイトを重くさせる点でもあります。記事下へのアイコン設置は問題とはなりません。

ネット販売でヒットをすると簡単に家が買えてしまうほどパワーがあります。
以前に、たまたま何年もSEOの技術の勉強をしていたのですが、ある程度自分で学び覚えたのでテスト的に自分の実力を試してみたかったのがスタートでもあったのです。

ブログで商品を販売されていらっしゃるのであれば、一度しっかりとSEOの本などを読んで技術を学ぶ事をおススメ致します。闇雲にやっても無駄だと知る事が出来ます。
ただSEOばかりに特化してしまわない事も注意しなければなりません。サイトに重要なのはSEOだけではありません、バランスが大切です。

これだけやれば集客できるはじめてのSEO: ソシム; 本

スマホ対応のブログに適切な画像JPGとPNGの違いを知ってサクサクで快適なサイトを目指しましょう

知ってる知らないとは大違い

ひと手間掛けて他のサイトから大きく引き離す画像圧縮

JPGは、「色数の非常に多い画像」を得意としています。
ファイルサイズを大きく下げる（圧縮する）ことができるのがJPGです。
しかしJPGは、編集し保存を繰り返すと劣化します。

JPGとは違いPNGは何度保存しても画質は劣化しません。
特長として、PNGは透過に対応しています。
たとえば背景が透明な画像を作れるということです。PNGは基本的に画質が高いです。
色数の少ないベタ塗り系や線画などの画像の場合、PNGはJPGより高画質なうえ軽い
PNGは（位置情報など）を埋め込めないので安全
JPGに編集をかけて保存するなら、PNGで保存することで劣化を防ぐことはできます。

最近は、ブログでは高画質のJPGやPNGは使用せずWebP（ウェッピー）が主流です
モバイルサイトには適切な画像ですが残念な事に
ムラゴンではWebPは扱えません少し時代的に遅れているのが実態です。

そこでJPGからPNGに保存するのであれば
劣化させずに極力画像を圧縮してしまえば軽量に変換することで
ブログを快適にすることが出来るのです。

つまりは、ひと手間掛けることでブログが軽量になると言うことは
アクセシビリティ対応であると言える部分でもあるのです。

画像をドラッグアンドドロップするだけで軽量化が出来るのが
Googleが開発したSquooshです。
Squooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結
しかもWEB上で圧縮変換が出来てしまうツールです。

あなたの目で見て 19KBと378KBの違いが分かりますか？

スマホでの表示を考慮をすることで得られるポイントは非常に高いと言えます

圧縮したPNG画像：⇒ 19㎅ 👇