Monthly Archives: 4月 2013

ブラウザのフォントを変更する方法

この記事を読むのに必要な時間:01分28秒

Google ChromeやFirefox、IEで表示されるフォントは、Webサイトが指定していない限り、各ブラウザの設定に依存します。

基本的には、どのブラウザもMSPゴシックがデフォルトの設定になっていますが、設定をカスタマイズすることによって、自分の好きなフォントでWebサイトを閲覧できたり、作業が可能になります。

Google Chromeのフォントを変える方法 >>
Firefoxのフォントを変える方法 >>
Internet Explorer(IE)のフォントを変える方法 >>


Google Chromeのフォントを変える方法
まずは、ブラウザの設定画面に進みます。

Google Chromeのフォントを変える手順 その1

設定画面の下部の「詳細設定を表示…」をクリックすると、設定画面のすべてが表示されます。

Google Chromeのフォントを変える手順 その2

「ウェブコンテンツ」の項目の「フォントをカスタマイズ…」をクリック。

Google Chromeのフォントを変える手順 その3

ここで、フォントの種類やサイズを変更し、「完了」でOKです。

Google Chromeのフォントを変える手順 その4
※ブラウザのフォントを変更するときの注意点

例えば、こんな感じに設定することもできます。




Firefoxのフォントを変える方法
左上の「Firefox」から「オプション」へと進みます。

Firefoxのフォントを変える手順 その1

「コンテンツ」タブの「フォントと配色」の項目で好みのフォントやサイズに変更→「OK」で完了です。

Firefoxのフォントを変える手順 その2

「詳細設定」や「配色設定」でより細かいカスタムが可能です。

Firefoxのフォントを変える手順 その3
Firefoxのフォントを変える手順 その4
※ブラウザのフォントを変更するときの注意点 >>


Internet Explorer(IE)のフォントを変える方法
右上の「歯車マーク」→「インターネット オプション」をクリック。

IEのフォントを変える手順 その1

「全般」タブの「フォント」に進むと変更できます。
Firefoxと同様に「色」などの設定も可能です。

IEのフォントを変える手順 その2
IEのフォントを変える手順 その3
※ブラウザのフォントを変更するときの注意点


ブラウザのフォントを変更するときの注意点

注意しなければいけないのが、各ブラウザともに「デフォルトに戻す」ことがちょっとやっかいな点です。

少し面倒な手順を踏まないといけないため、最初の設定をメモするなりキャプチャー(ディスプレイに表示されている画像や動画像を、画像データとしてファイルに保存すること)をとるなりしておいた方が良さそうです。


以上が、ブラウザのフォントを変更する方法です。

自分好みのフォントにすることで作業効率が意外にも上がったりするので、読みやすいフォントがある方や自分好みの設定にしたい方などは、是非お試しを。

それでは、今回も最後までありがとうございます!


Posted in Firefox, Google Chrome, Internet Explorer, その他, 便利ツール | 3 Comments

Webを活用して副業したり売上をあげるマーケティングセミナー開催


2013年は、Webを大大大活用してガッツリ稼いじゃいませんか?

いきなり何言ってんの??という感じかもしれませんが… 真面目(?)なWebマーケティングセミナーのお知らせです。

まずは、こちらの動画を…



今回、開催するセミナーは、2つ。

1. 知名度ゼロの会社でも、ホームページからの売上を3か月で324%UPするセミナー

★こんな方々が対象です。
・毎日忙しすぎて、マーケティング戦略(売上をあげる効率的な考え方)をじっくり考えたことがない…
・LPOやリスティング広告、SEOをどうすればいいのかわからない…


2. 初心者がWebの副業からはじめて、いつか本業より稼げるようになっちゃおうセミナーDX

★こんな方々が対象です。
・今は会社員だけど、将来、独立・起業をしたい!
・今は会社員で安定しているけど、将来が不安だから副業をやって稼ぎたい!


講師は、僕がカッコイイ大人、カッコイイ男と崇める(笑)、当社代表・岩崎(以下、せいきゅん)です。

せいきゅんは、尊敬できる人というか、文字にすると軽くなってしまうのが残念なのですが、生き方が本当にカッコイイのです。

と言っても、決してスマートなカッコ良さではなく(笑)、泥臭いことを先頭切ってやるタイプの人で、とにかく自己犠牲がハンパない!

当社キャストやクライアントさまはもちろん、フラリと相談に来る学生や社会人の方に対しても必ず全力でサポートします。

僕は、いつも端から、もっとお金になることしようよ… なんて邪(よこしま)な目で見ています。(嘘)

僕のWebマーケティングの根底を作ってくれたのもこのせいきゅんなのですが、なによりも、こんなにおもしろい人はなかなかいません。(笑)

この表情、ただ者じゃない。

そんなせいきゅんのサポート付き全力セミナーの日程は、以下の通りです。
少人数制のため、定員になり次第締め切らせていただきますので、お早めにどうぞ。

1. 知名度ゼロの会社でも、ホームページからの売上を3か月で324%UPするセミナー
5月9日(木)19:00~21:00
5月30日(木)14:00~16:00

2. 初心者がWebの副業からはじめて、いつか本業より稼げるようになっちゃおうセミナーDX
5月22日(水)19:00~21:00
5月30日(木)19:00~21:00

■会場:渋谷区文化総合センター大和田2階 区民学習センター
アクセス:JR渋谷駅西口徒歩5分

■受講料:1000円(税込)

■詳しくは、こちらをご覧ください!
http://www.freelifec.com/


今年は、僕らと売上げバシバシ上げちゃいましょう!
副業はじめちゃいましょう!

いつもありがとうございます!

なんだか、せいきゅんへのハードルを上げてしまったような気が…


Posted in セミナー, フリーライフWebマーケティングスクール | Leave a comment

「検索の仕組み」とは?Googleが検索結果を出す方法

この記事を読むのに必要な時間:01分55秒

4月になり、新たにWeb担当者になった方や、Web系の企業に入社した方も多いのではないでしょうか?

そこで、Googleが、新ウェブマスターや新たにサイト運営について学びたいという方に向けて、Googleと相性の良いサイトを作るために役立つ5つの最新情報を紹介しています。

Googleが好むサイトを作るために役立つ5つの最新情報

1. 「検索の仕組み」について
2. 携帯端末に最適化されたウェブサイトの構築方法ついて
3. 「検索エンジン最適化(SEO)クイックチェックシート」
4. ウェブマスター アカデミー
5. Google+での情報発信の拡大について


Googleが「検索の仕組み」についてのサイトをオープン
この中で、今日お伝えするのは、1の「検索の仕組み」についてです。



Googleは、毎日、数十億を超える検索に対し、一瞬で結果を出します。この間、なんと0.5秒!

今回、このGoogleの「検索の仕組み」が、
・クロールとインデックス
・アルゴリズム
・スパム対策
・ポリシー
この4つの項目別に動画などを使って、とてもわかりやすく説明されています。

クロールとインデックス
クロールとは、「Googlebot」のようなクローラーが自動的にWebページを収集する作業のことです。

インデックスとは、WebページがGoogleなどの検索エンジンに登録されることです。

今や数兆ページにもなる膨大な数のWebページからGoogleは、どのように検索結果を表示させているのかについて書かれています。

アルゴリズム
アルゴリズムとは、Googleが検索する人に適切な検索結果を出すために定めているルールのようなものです。

検索者が求めている情報をより早く提供するためにGoogle検索エンジンがどうやって進化しているのかについて説明されています。

スパム対策
ここで言うスパムとは、Googleが推奨していない、というよりも禁止している方法で検索結果の上位に表示させようとすることです。

この項目は、こういうことはやってはいけません!というさまざまなスパムなどについての説明です。

ポリシー
ここでは、ユーザーを第一に考えたGoogleの方針について書かれています。


個人的には、アルゴリズムの項目内にある動画が、とても興味深くおもしろい内容でした。
Google検索エンジンの進化を時系列的にさまざまなエンジニアの方が説明してくれます。


YouTubeの動画に字幕をつける方法はこちら >>

この動画を観ると、「検索する人が求めている情報を早く、そして確実に届ける」
Googleが、ここに向かって一丸となって進んでいるのがよくわかります。

Webマーケティングを行うにあたって、Googleの検索エンジンは切っても切り離せません。
新Web担当者の方も、そうでない方も一度、目を通してみてはいかがでしょうか?

「検索の仕組み」サイトはこちら >>

新年度からウェブマスターになった方へ贈る『知っておきたい Google検索5つの最新情報』はこちら >>

いつもありがとうございます!


Posted in Google, SEO | Leave a comment

Webページの読み込み速度(表示速度)が遅いときの改善方法

この記事を読むのに必要な時間:04分23秒

今回は、前回告知した通り、Webページの読み込み速度(表示速度)を測定する方法の続編です。

どうやって読み込み速度を改善したらいいのか、その方法についてお話しします。

このブログも今回ご紹介する方法で大きく改善することができました。
Webページの読み込み速度(表示速度)が遅くなる原因
では、まず、読み込み速度が遅くなる原因から。

Webページの読み込み速度が遅い原因
・パソコン、スマートフォンなどのデバイスの性能の問題
・回線速度の問題
・Webページの容量の問題

こんなところでしょうか。

デバイスの性能と回線速度の問題は、ユーザー側の問題になるので、今回は、3つ目のWebページの問題を改善する方法をご説明します。

画像を圧縮して容量を落とす方法
Webページの容量の問題を手っ取り早く改善するには画像の容量を下げることです。

ですので、まずは、PNGとJPG画像を圧縮するツールをご紹介します。

どちらも無料のオンラインサービスのため、インストールは必要ありません。また、登録なしで利用可能です。
PNGファイルを簡単&キレイに圧縮できるツール
パンダのキャラクターが目を引く『TinyPNG』です。

TinyPNGのインターフェイス

使い方は簡単。

画像をドラッグ&ドロップするだけです。(画像の最大容量は3MBまで、1度に処理できる画像は20個まで)

TinyPNGの使用方法

アッという間に89%も圧縮完了。スゴい!

TinyPNGの画像圧縮後の画面

ちなみに、これがビフォアー・アフターです。

どうですか?このクオリティ!

TinyPNGでのビフォア・アフター画像

PNG画像を簡単&キレイに圧縮できる TinyPNG はこちら >>
JPGファイルを簡単&キレイに圧縮できるツール
JPGは、『JPEGmini』がおすすめ。

とにかくUX(ユーザーエクスペリエンス)が素晴らしい!とてもよくできたサイトです。

JPEGminiのインターフェイス

こちらも使い方は超簡単!

「Try It Now」をクリックします。

JPEGminiの使用方法 その1

それから、「Upload Your Photo」から圧縮したい画像を選択するだけです。

JPEGminiの使用方法 その2

圧縮が終わると、どれくらい圧縮できたのか確認することもでき、また、オリジナル画像と圧縮後の画像を見比べることもできます。

この辺りのUXもイイです。

「Download Photo」をクリックすると保存できます。

JPEGminiの画像圧縮後の画面

こちらもビフォアー・アフター。

こっちのクオリティもヤバい!

JPEGminiでのビフォア・アフター画像

JPG画像を簡単&キレイに圧縮できる JPEGmini はこちら >>

こんな素晴らしいサービスが無料&登録なしで使えるなんてスゴい時代になりましたね。
画像をスクロールに合わせて表示させるjQueryプラグイン
実は、今日は、ここからが本題だったりします。

画像の圧縮と是非併せて使ってもらいたいのが、jQueryプラグイン『Lazy Load』。

jQuery(ジェイクエリー)とは、JavaScript(ジャヴァスクリプト)ライブラリの1つ。

JavaScriptは、文字や画像などにさまざまな「動き」がつけられる言語です。まあ、とりあえず、難しいことは置いておきましょう。

『Lazy Load』をWebサイトに組み込むと、画像を一気に読み込まず、スクロールに合わせて読み込むようになります。

ページの表示と同時に画像をすべて読み込まないので、読み込み速度が短縮されるのです。

最近、いろいろなWebサイトで見かけるようになってきました。

ちなみに、このブログでも Lazy Load を組み込んでいるのですが、わかりますかね??

わかりづらければ、こっちのサイトの方が顕著にわかるかもしれません。
Lazy Load の使い方
それでは、Lazy Load の使い方です。

まず、「jquery.lazyload.js」をダウンロードします。

上記の「jquery.lazyload.js」のテキストの上にカーソルを置いた状態で「右クリック」 → Google Chrome、Firefoxの場合は、「名前を付けてリンク先を保存」、IEの場合は、「対象をファイルに保存」。「jquery.lazyload.js」のファイル名(そのまま保存すればOKです。)でダウンロード(保存)します。

jquery.lazyload.jsをGoogle Chrome、Firefoxでダウンロードする方法

jquery.lazyload.jsをIEでダウンロードする方法

jquery.lazyload.jsを保存する方法

次に、ダウンロードした 「jquery.lazyload.js」 を 「js」 など任意のディレクトリを作成し、サーバーにアップロードします。


そして、読み込み速度を改善したいWebページのhtmlファイルの headタグ 内に、

<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1′></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>

と書き込みます。



次は、読み込み速度を改善したいWebページのhtmlファイルの bodyタグ 内に、

<script type=”text/javascript”>
$(function() {
$(“img.lazy”).lazyload();
});
</script>

と書き込みます。



最後に、読み込みを制御したい画像を以下のように指定すればOKです。

<img class=”lazy” src=”image/画像.gif” data-original=”image/画像.gif” alt=”画像の説明” width=”幅” heigh=”高さ” />



実際にWeb上でチェックしてみてください。
WordPress(ワードプレス)で Lazy Load を使用
WordPressでWebサイトを運営している方はこちらを。

プラグイン画面で、「Lazy Load」と検索します。



「Lazy Load」をインストール。



有効化して完了。これだけです。


読み込み速度のカスタマイズ方法
読み込み速度を変更したい場合は、プラグイン編集画面で「Lazy Load」の「編集」を選択。


プラグインファイルから「Lazy-load/js/lazy-load.js」を選択。


distance:200 の「200」を任意の数値に変更します。

数値が大きくなるほど読み込み時間が速くなります。

反対に、数値を小さくすると画像がゆっくり表示されるようになります。



この辺りは、お好みで実際の表示速度を確認しながら微調整してください。

以上が、WordPressに「Lazy Load」を導入する方法です。
「Lazy Load」の効果を検証
それでは、気になる「Lazy Load」の効果を見てみましょう。

前回ご紹介した『GTmetrix』で検証してみました。



なんと、12.64秒から9.19秒… と3.45秒も短縮されました!スゴい!

というわけで、長々と書いてきましたが、画像の圧縮と「Lazy Load」を組み合わせれば、Webページの読み込み速度を改善することができます。

みなさんも是非是非お試しください!

今回もありがとうございました!


Posted in SEO, Webサイト制作, 便利ツール, 内部対策SEO | Leave a comment

Webページの読み込み速度(表示速度)を測定する方法

この記事を読むのに必要な時間:02分58秒

早く次のページを見たいのに、Webサイトの読み込み速度(表示速度)が遅くてイライラした経験ってありませんか?

あなたが感じているこのイライラ、実は、あなたのお客さまがあなたのサイトに感じているのかもしれません。

せっかく時間をかけて良いサイトを作ったのに、読み込み速度が遅いがために離脱され、他のサイトへ行ってしまう… これは大問題です。

SEOよりもユーザビリティを考慮して対策する。
「検索エンジンを対策する前に、まずは、お客さまに目を向けましょう。」と、このブログでも何度かお伝えしていますが、今回の問題も例外ではなく、Webページの読み込み時間がランキングに影響する問題よりも「読み込み速度が遅いがために離脱され、他のWebサイトへ行ってしまう…」この問題のほうがはるかに大きな問題です。

読み込み速度を改善しただけで上位表示は期待できませんが、ユーザビリティの向上にはかなりの効果があるはずです。

Webページの読み込み速度を改善するメリット
読み込み速度を改善すると、ユーザビリティの向上に加えて、以下のようなメリットが考えられます。

Webページの読み込み速度を改善するメリット
・ユーザビリティの向上
・離脱率、直帰率の低下を防げる。
・コンバージョン率(成約率)の低下を防げる。
・検索順位の上位表示にプラスになるかもしれない。(マイナスにならないかもしれないの方が合ってるかも…)


ユーザーの満足度が上がれば、成約に繋がる可能性も上がるわけですね。
というよりも、読み込み速度が問題で閲覧されないのであれば、スタートラインにも立てないですね…。

Webページの読み込み速度(表示速度)を確認する方法
ですので、ページの読み込み時間は、重要なポイントになるわけです。

まずは、自分のWebサイトの読み込み速度がどれくらいなのかを把握しましょう。

読み込み速度を確認する方法はいくつかありますが、今回は2つの方法をご紹介します。

ツールを使って計測する方法
まずは、ツールを使って計測する方法です。

そのツールは、『GTmetrix』。
インストールや登録なしでWeb上で読み込み速度を確認できるすぐれものです。

英語のサイトですが、シンプルなツールですので困ることはないと思います。

GTmetrixのインターフェイス

使い方は、URLを入力して「GO」をクリックするだけです。

GTmetrixの利用方法 その1

チェックしたいWebサイトのサムネイルが表示され、いかにも調査してます!的にスキャナーが上下するUX(ユーザーエクスペリエンス)がいい感じです。

GTmetrixの利用方法 その2

こんな感じで結果が出ます。

GTmetrixの測定結果

この下に測定結果のレポートがズラリと出るのですが、今回は読み込み速度の部分だけ説明します。

1. Page Speed Grade
これは、Googleが提供する表示速度計測ツール「Page Speed」での評価です。
数値が高い方が読み込みが速く、アルファベットはAが最高評価、Fが最低評価となります。

2. YSlow Grade
こちらは、Yahoo!が提供する表示速度計測ツール「YSlow」での評価。
詳細は、上記のPage Speed Gradeと同じです。

3. Page load time
指定したページの読み込みに要した時間です。

4. Download PDF
測定結果をPDFとしてダウンロードすることもできます。

このブログを計測した結果、Google、Yahoo!での評価は悪くないにしても、読み込み時間に関しては、8.94秒と改善の余地ありまくりですね…。

ただし、これらの評価は、諸条件によって変動しますので、あくまでも目安として考えてください。

Webページの読み込み速度を計測できる GTmetrix はこちら >>

Googleアナリティクスを使った確認方法
Googleアナリティクスでも読み込み速度を確認することができます。

左のメニューから「コンテンツ」→「サイトの速度」→「サマリー」もしくは、「ページ速度」と進みます。
※「レポート全体を見る」でより詳細なデータを見ることができます。

「サマリー」では、サンプルとしてチョイスされた数ページの平均表示時間やブラウザ別の平均表示時間などが確認できます。

Googleアナリティクスでページの表示速度を確認する方法。サマリー編

「ページ速度」では、各ページごとの平均表示時間などが確認できます。

Googleアナリティクスでページの表示速度を確認する方法。ページ速度編

こちらもどれくらいの精度での計測かわかりませんので、あくまでも参考程度として考えましょう。

Webページの読み込み時間による影響
Googleの調査によると、Webページの読み込みが0.5秒遅くなると検索数が20%減少する。

Amazonの調査によると、Webページの読み込みが0.1秒遅くなると売り上げが1%減少する。

こんなデータも出ているようですが、実際に、Webページの読み込み時間がどれほどWebサイトに影響するかは細かく調査しないとわかりません。しかし、表示速度が速くなることによるデメリットはないと思いますので、まずは、自分のWebサイトの現状を把握しておきましょう。

そして次回は、このページの読み込み時間を改善する方法についてお話ししたいと思います。

実は、このブログもこの方法で改善するまでは、表示時間15秒超えだったのです…。
それでは、次回をお楽しみに!

今回も、最後まで読んでいただき、ありがとうございます!


Posted in SEO, Webサイト制作, 便利ツール, 内部対策SEO | Leave a comment