Category Archives: Webサイト制作

iPhoneやiPadでサイトをホーム画面に追加したときに出すアイコンの作成方法

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

iPhone、iPad、iPod touchのウェブブラウザ「Safari」には、Webクリップと言って、閲覧中のサイトのショートカットのためのアイコンをホーム画面に追加することができます。

iPhoneなどのSafariで表示されるアイコンとはこれ。

iPhone、iPad、iPod touchのSafariで表示されるアイコン
ホームにアイコンを追加する方法
iPhoneでは簡単にホームにアイコンを追加できます。
僕も頻繁に閲覧するサイトでよくやります。

まず、下のメニューの真ん中の「四角から矢印が飛び出ているマーク」をタップします。

「四角から矢印が飛び出ているマーク」をタップ
すると、メール送信、TwitterやFacebookで投稿などができる画面になります。ここの「ホーム画面に追加」を選択します。

ホーム画面に追加
任意でタイトルをつけることができます。(デフォルトでは、そのページのタイトルタグが表示されます。)
タイトルを決めたら「追加」をタップ。

Webくリップは、任意でタイトルをつけることができる。
簡単にアイコンが追加されました。

ホームにアイコンが追加された。
アイコンの作成方法
しかし、このアイコンは何も設定していないと、閲覧中のサイトのスクリーンショットが表示されてしまいます。
そこで、本題のアイコン作成方法です。

デフォルトではアイコンは、閲覧中のサイトのスクリーンショットが表示される。
アイコンのサイズ
アイコンのサイズは、正方形なら勝手にリサイズされます。
サイズの大きいiPadのことも考慮して、150✕150ピクセルくらいで作成しておけばいいかなと思います。

アイコンの保存形式
保存形式は、png、gif、jpg、bmpのいずれも使用可能です。

ちなみにこのWebクリップのアイコン画像は、角丸&つや出し加工が施されています。
僕は、今までこれが面倒そうで手を出さなかったのですが、なんとこれ勝手に処理してくれるんです。ラッキー。

角丸&つや出し加工は勝手に処理してくれる。
Webサイト側の設定
<head>内に、以下の記述を追加するだけです。
<link rel="apple-touch-icon" href="http://www.example.com/アイコン.png"/>
※URL(http://www.example.com/image/アイコン.png)は適切なものに変更してください。

ちなみに、つや出し加工を施したくない場合は、こちらでOK。
つや出しはありなし選べますが、角丸はとれません。
<link rel="apple-touch-icon-precomposed" href="http://www.example.com/アイコン.png"/>
※URL(http://www.example.com/image/アイコン.png)は適切なものに変更してください。

WordPress(ワードプレス)の設定方法
自分のブログでしか試していないので、他にも方法はあるかもしれませんが、ここでは僕の方法を載せておきます。

アイコンは、「メディア」→「新規追加」でアップロードします。

WordPress(ワードプレス)で画像をアップロードする方法 その1
「ファイルのURL」これが画像を表示させるために必要なURLになります。

WordPress(ワードプレス)で画像をアップロードする方法 その2
そして、WordPress(ワードプレス)の管理画面から「外観」→「テーマ編集」→「ヘッダー(header.php)」

WordPress(ワードプレス)でheader.phpに記述を追加する方法 その1
WordPress(ワードプレス)でheader.phpに記述を追加する方法 その2
WordPress(ワードプレス)でheader.phpに記述を追加する方法 その3
ここの<head>内に、以下の記述を追加しました。
<link rel="apple-touch-icon" href="http://www.example.com/image/アイコン.png" />
※URL(http://www.example.com/image/アイコン.png)を先ほどの「ファイルのURL」に変更してください。


SafariでWebクリップされる可能性って結構あると思います。
簡単に設定できるので、お客さまに「おっ」と思ってもらえるだけでもやる価値はあると思います。

今日は以上です。
ありがとうございました!


Posted in iPhone, Webサイト制作 | Tagged , | Leave a comment

ファビコンの作成方法|faviconの簡単な作り方

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

ファビコン(favicon)って知ってますか?

ファビコンとは…
Favorite icon(フェイバリット・アイコン)の略で、IEやGoogle Chromeなどのブラウザのアドレスバーに出るアイコンのことです。


みなさんも見たことあると思います。
こういうのです。

ブラウザごとのファビコンの表示
ちなみにこのファビコンは、ブックマークのアイコンにも使われます。

ブックマークでのファビコンの表示

ファビコンのメリット
ファビコンを設定するメリットは単純に目立つから。

最近は、タブブラウザが増えてきました。
ですので、いくつもタブを開いて、あっちのサイトに行ったり、こっちのサイトに戻ってきたりと、複数のタブを行ったり来たりしながらネットサーフィン(最近言わない?)する方が増えていると思います。

たくさんタブを開くので、戻りたいのに戻って来れない方もたくさんいます。
そんなときの目印になるんですね。

ブックマークも一緒です。
ファビコンを設定しておくことで、見つけてもらいやすくなります。

ファビコンの画像はシンプルなものを
まず、設定する画像ですが、ファビコンは16ピクセル✕16ピクセルと、とても小さいので、あまり細かい画像は向いていません。

僕も最初は、似顔絵イラストを設定する予定だったのですが、細かすぎてなんだかよくわからないものになってしまいました。

ファビコンを細かい画像で作成するとこうなります。

ですので、ファビコンには単純な画像を用意してください。
GoogleやYahoo!、Bingを見ると、とてもシンプルです。

Google、Yahoo!、Bingのファビコン
作成サイズは、32ピクセル✕32ピクセルで
ファビコンの表示サイズは、16✕16ですが、IEでショートカットを作成されたときもこのファビコンが適用されるので、(まあショートカットが作成される可能性はあまりないかもですが…)32ピクセル✕32ピクセルで作っておきましょう。

ショートカット時のファビコンの表示
保存形式はicoで
ファビコンは、gifやpngでも表示されるのですが、IE(インターネット・エクスプローラー)ではサポートされていないようで表示されません。

IEのシェア率は、まだまだ相当ありますので、ここは、王道のicoでいきましょう。

png等で画像を用意したら、icoに変換してくれるサイトに行きましょう。

「ファビコン 作成」とかで検索すると、無料で変換してくれるサイトがたくさん出てきますが、僕はこのサイトを使わせてもらいました。
▶http://ao-system.net/favicon/index.php


※クリックで拡大

「ファイルを選択」で画像を選択したら、「favicon.ico作成」、「ダウンロード」これだけです。

favicon.icoをサーバーにアップロード
ダウンロードしたら、サーバーのルートディレクトリ(一番上の階層)にアップロードします。

ブラウザで確認
ここまで完了したら、一度ブラウザで確認してください。
IEでのチェックも忘れずに。

ルートディレクトリにファビコンを設置できない場合
ルートディレクトリに設置できない場合や、ディレクトリごとに違うファビコンを表示させたい場合は、<head>内に以下の記述をすればOKです。

ルートディレクトリに設置したのにも関わらず表示されない場合も、こちらの方法を試してみてください。

<link rel="shortcut icon" href="http://www.example.com/image/favicon.ico" />
※URL(http://www.example.com/image/favicon.ico)は適切なものに変更してください。

WordPress(ワードプレス)でアイコンを出す方法
favicon.icoを使用中テーマのメインディレクトリに設置します。

ちなみに僕は、
「wp-content」→「themes」→「twentyten」内にアップロードしました。

そして、header.phpの<head>内に以下の記述を追加します。
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

これでアイコンが表示されると思います。


まあ、そこまで劇的な効果があるとは思いませんが、簡単に設定できるので、お遊び感覚でやってみてもいいかもしれません。

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


Posted in Webサイト制作, WordPress(ワードプレス), その他, 便利ツール | Tagged , , | 5 Comments

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

ライバルに勝つWebサイトの作り方。差別化を図るために必要な3つの方法

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

僕は大学を卒業してから三菱自動車で車の営業をやっていました。
もう10年以上も前の話ですが、買っていただいた車の中で一番多かったのは自分が乗っていた車です。

三菱自動車に勤めているので、当然自分の車も三菱車です。
自分の車なのでセールスポイントもウィークポイントもすべて知り尽くしていましたし、なにより愛着がありました。
だから、他のどの車よりも自信を持って勧めることができたのです。

ネットとリアルマーケティングの共通点
これは、ネットでも同じです。
Webマーケティングを取り組むに当たって、実際にネットで商品の購入や資料請求をやってみる。
ネットで買物したことのない人が、ネットで買物する人の気持ちなどわかるわけがないのです。

数年前、アフィリエイトを全開でやっていた頃はいろいろな商品、サービスを自分たちで体験しました。

FXのアフィリなら実際に口座を開設して運用してみる。
脱毛器なら、例え10万円近い商品でも購入。
ETCなら車載器を購入して取り付ける。

レーシックのアフィリを始めた頃は、サイトで紹介するクリニックの適応検査をすべて受け、さらにその勢いで手術まで受けました。
ちなみに車の査定のアフィリのときは本当に車を売りました… 笑

実際に試して、自分が一番良いと思った商品を前面に打ち出して訴求する。
そういうサイトは、大きな売上げを上げることが多かったです。
これは当然のことで、商品を実際に購入したり体験すると、お客さまの気持ちが本当の意味で理解でき、最強のコンテンツができあがるからです。

↓↓ちなみにこれがレーシックの体験サイトです。
イントラレーシック

逆に、自社サービスでもアフィリでも、自分が惚れ込んでいない商品やサービスを売るのは限界があります。
いくらメリットを謳ってもお客さまに響くわけがないのです。

もちろんアフィリエイトでなくても大きな効果があります。
ライバルの商品を実際に購入して、メールの返信内容や電話の応対、商品が届くスピード、梱包方法、アフターフォロー… こういったことをチェックします。
そして、良い点はさらに磨いて取り入れ、悪いと感じた点は自社では絶対にやらない。
とても参考になると思います。

簡単にできるWebマーケティングで大切なこと
そしてもうひとつ大事なこと。
それは顔出し。

顔出しはかなり効果があります。
誰が作ったのかわからないサイトよりも、顔写真が載っていて、きっちりとプロフィールが書いてあるサイトのほうが信用されます。

今は、フェイスブックのおかげでネットに顔出しすることを嫌がる方も少なくなってきましたが、ブログでもなんでもバンバン顔出ししたほうがいいと思います。
僕みたいな赤い髪でも効果があるくらいですから。

それでは今日のまとめです。

今日のまとめ
・サイトで扱う商品は実際に購入し、試してみる
・ライバル会社の商品を購入し、良い点、悪い点を調査する
・顔写真を掲載して信用を得る


そうそう、エコカー補助金絡みでサイトを作っていたときは、本当に車を買いそうになってしまいました… 笑

今日は以上です。
最後まで読んでいただき、ありがとうございます!


Posted in Webサイト制作, Webマーケティング全般 | Tagged , | Leave a comment