スマホとFacebook

最近ホームページ作成ソフト、DreamWeaver を最新バージョンに更新しました。DreamWeaver CS5.5 です。

http://putit.biz/goods/B004VDDY28.html

今までは7年前に購入した DreamWeaver を使っていましたが、今になって3万円以上出して更新した理由は、上のホームページにも書いておきました。

ちなみに、赤い丸が二つあるヘッダーの画像には何の意味もありません。何もないとさみしいので入れてあるだけです。

さて DreamWeaver CS5.5 ですが、まず、画面サイズの違うデバイス(スマホ、タブレット、PC)などをターゲットにして、それぞれに別々のCSSファイルを用意し、それぞれのデバイスでどのように表示されるかをその場で確認することができます。これをマルチスクリーン機能と呼びます。

そして、Androidなどのアプリを作る簡易的な機能もあります。こちらはまだ試していません。

要は今起きている変化への対応がなされている、ということですね。

ちなみに上記のホームページ、見る時に使うデバイスの画面サイズに応じて、CSSを三つ用意し、3種類表示が変えてあります。サイズの違う装置をお持ちの方は、アクセスして確認してください。

例えばiPhoneや小型のAndroidスマホなどで見ると、ヘッダーは表示されず、商品情報が上の方に来るように調整してあります。

タブレットなど中型のデバイスだと、ヘッダーを小さめに表示します。

もちろん、こうした機能は DreamWeaver CS5.5 を使って実装したものです。

Facebook への対応もしてあります。上記のホームページには「いいね」ボタンも置いてありませんが、これは Facebook からリンクを使って紹介することを考えてデザインしてあるからです。

上記ページのソースを表示してもらうと、<head>タグ内に以下のような部分があ
ります。

<meta property=”og:title” content=”Adobe Dreamweaver CS5.5 Windows版”>
<meta property=”og:description” content=””>
<meta property=”og:type” content=”article”>
<meta property=”og:url” content=”http://putit.biz/goods/B004VDDY28.html”>
<meta property=”og:image” content=”http://ecx.images-amazon.com/images/I/41mMqrKbf7L._SL160_.jpg”>
<meta property=”og:site_name” content=”お勧め商品紹介”>

これは Open Graph protocol と呼ばれるもので、Facebook などでリンクとして紹介した場合に、何をタイトルとして見せ、何をイメージとして見せるか、などを指定する部分です。

使い方は、以下のサイトがわかりやすく紹介しています。
http://d.hatena.ne.jp/amachang/20110117/1295233078

Open Graph protocol をきちんと書きこんだページをfacebookでリンクすると、ページのタイトルや画像として、意図したものを確実に表示させることができます。

実を言うと、今までスマホやタブレットは、アフィリエイトの対象としてさほど注意を払っていませんでした。自分自身がWEBを見る時はほとんどPCを使っている、ということも理由の一つかと思います。

でも、ある時 Google Analitics でモバイルの欄を見てみると、え?全アクセス数の10%以上がスマホ?

これはやはり、以前の携帯からのアクセスの場合とは全く違う状況の出現でした。携帯の場合、ほとんどのアクセスは携帯専用サイトへのもので、PC用に最適化されたサイトへのアクセスはごくわずか。広告コードも携帯用には別のものを用意しなければいけませんでしたから、一つのサイトを画面サイズに合わせた見え方ができるように整備する必然性を感じなかったのです。

Google Adsense のパフォーマンスの統計にも「プラットフォーム」という欄があって、デスクトップ、ハイエンド携帯端末、タブレットという区分がなされています。2月の収益の内、4分の1はハイエンド携帯端末とタブレットでした。画面をこうした小さめの装置向けに最適化していないにもかかわらず、ですから、少し真剣に考える必要があるなあ、と思った次第です。