Monthly Archives: 7月 2013

ホームページとWebサイト、Webページの違いとは?

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

多くの方が、「ホームページ」と「Webサイト」は同じ意味合いで使っていると思います。

Webの初心者の方は、「ホームページ」、そうでない方は、「Webサイト」や「サイト」などと呼んでいるイメージでしょうか。

しかし、「ホームページ」と「Webサイト」、また「Webページ」は、意味合いが違うのです。

ホームページとは
もともとは、IE(インターネット・エクスプローラー)やFirefox、Google Chromeなどのブラウザを立ち上げたとき、最初に表示されるページのことをホームページと呼んでいました。

ほとんどの方が、ブラウザを立ち上げると、GoogleやYahoo!などのポータルサイトのトップページが最初に表示されると思います。本来は、これをホームページと呼ぶのです。

ブラウザの最初に表示させるページを設定する管理画面を見ると、「ホームページ」と表記されているのが確認できます。




このように、Googleやyahoo!などのWebサイトのトップページをホームページとして設定する人が多かったため、Webサイトのトップページのことを「ホームページ」と呼ぶようになったのです。

よくWebサイトで、別のページからトップページに戻るリンクに「ホームへ戻る」などと貼られていることがあるのを見たことがある方もいるのではないでしょうか。



つまり、ホームページとは、Webサイトのトップページのことを指します。

Webサイトとは
Webサイトとは、www(World Wide Web・ワールド ワイド ウェブ)上の、特定のドメインで運営されているWebページ全体のことを指します。

例えば、www.google.co.jpやwww.yahoo.co.jp、www.example.comなどのWebページの総称です。

Webをつけずに、「サイト」などとも呼ばれます。

Webページとは
こちらは、割りとわかりやすいですかね。
Webサイトが全体を指すのに対し、Webページは、個々のページのことです。

つまり、Webページの集合体がWebサイトというわけです。

まとめると…
※クリックで拡大

誤った認識が常識に
しかし、本来、ホームページとは、Webページの中のトップページだけを指すものが、誤った認識によって、あらゆるWebページを指す言葉、つまりホームページ = Webサイトとなってしまったのです。

キーワード選びは気をつけて
Webに精通していない方ほど、Webサイトをホームページと呼ぶ傾向にありますので、SEOやリスティング広告のキーワード選び、Webサイト内でどちらを使用するかなど気をつけた方がいいです。

検索数も集まる属性も大きく変わります。


では、まとめます。

今日のまとめ
Webページ
個々のページのこと

Webサイト
Webページ全体のこと

ホームページ
Webサイトのトップページのこと

現在では、誤ったまま認知され、「ホームページ」 = 「Webサイト」となってしまっている。



「ホームページ」と「Webサイト」の違いを知ってるからどうというわけではありませんが、Webマーケティングを行うにあたって、知っておいた方がいい知識かなと思います。

今日は、以上です。
いつもありがとうございます!


Posted in Webの知識, Webマーケティング全般, 初心者向け | Tagged , | Leave a comment

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

Googleの著者情報をWordPress(ワードプレス)で表示させる方法

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

最近、よく見かける著者情報ですが、Web関係以外のジャンルのサイトでは、まだまだ浸透していないようです。


著者情報は、検索結果での占有率が上がり、とにかく目立ちますので是非お試しください。
※ただ、現状は、個人のアカウントしか表示させることができないため、ECサイトなどはもしかしたら逆効果に働く可能性もあるかもしれません。

設定方法は以前にお話ししましたが、WordPress(ワードプレス)での方法が書いてなかったのでご紹介します。

方法はいくつかありますが、その中でも特に簡単なものをご説明します。

▼WordPress(ワードプレス)以外の方や著者情報ってなに?という方はこちらへ
Googleの検索結果画面に著者情報を表示させる方法 >>

プラグイン All In One SEO Packで設定
All In One SEO Packとは、多くのワードプレスユーザーが使っているSEO用プラグインのことで、タイトルタグメタディスクリプションの設定、Googleアナリティクスの設定など、SEOを総合的に管理できます。

まずは、ワードプレスの管理画面(ダッシュボード)から「プラグイン」→「新規追加」に進み、「All in One SEO Pack」と検索し、インストール、有効化させます。

All in One SEO Packの設定画面に行き、「General Settings」の中の「Google Settings」→「Google Plus Default Profile」欄に著者情報を表示させたいGoogle+のURLを入力します。

All in One SEO Packを利用してWordPress(ワードプレス)でGoogle著者情報を出す手順 その1
All in One SEO Packを利用してWordPress(ワードプレス)でGoogle著者情報を出す手順 その2

ページの上部と下部に置かれている「設定を更新」ボタンを押して保存するのを忘れずに。

Google+側の設定
Google+側の設定については、こちらをご確認ください。
著者情報を表示させる方法 その1 Google+側の設定 >>

設定に誤りがないか確認するツール
設定後、構造化データ テスト ツールを使用して、Googleが著者情報を抽出できるか確認しましょう。

▶構造化データ テスト ツール
▶構造化データ テスト ツールの使い方

これで設定は終了です。

とても簡単ですので、是非お試しを!


今日は、以上です。
いつもありがとうございます!


Posted in Google, SEO, WordPress(ワードプレス) | Tagged , , | 2 Comments