<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>スマホサイト導入のすすめ -スマートフォンサイト制作で売上アップ。iPhone・Androidからの顧客・アクセス増の仕組み</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/" />
    <link rel="self" type="application/atom+xml" href="http://www.berryinc.jp/smartphone_blog/atom.xml" />
    <id>tag:www.berryinc.jp,2011-10-05:/smartphone_blog//4</id>
    <updated>2012-01-09T13:03:11Z</updated>
    
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type 5.12</generator>

<entry>
    <title>モバイル版インスタントプレビューの大きな欠点とは</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/post_4.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.19</id>

    <published>2011-12-29T13:16:49Z</published>
    <updated>2012-01-09T13:03:11Z</updated>

    <summary>Google検索の検索結果の一覧表示画面には、「インスタントプレビュー」機能があります。Googleは2011年3月9日の公式ブログで、インスタントプレビューがモバイルでも使用できるようになったことを伝えています。しかし、この機能には穴があります。なので僕は使っていません。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    <category term="google" label="Google" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[<p style="border-style: initial; border-color: initial; font-size: 13px; "></p><p style="border-style: initial; border-color: initial; font-size: 13px; ">Google検索の検索結果の一覧表示画面には、「インスタントプレビュー」機能があります。</p><p style="border-style: initial; border-color: initial; font-size: 13px; ">Googleは<a href="http://googlejapan.blogspot.com/2011/03/blog-post.html">2011年3月9日の公式ブログ</a>で、インスタントプレビューがモバイルでも使用できるようになったことを伝えています。</p><p style="border-style: initial; border-color: initial; font-size: 13px; ">しかし、<strong>この機能には穴があります</strong>。なので僕は使っていません。</p><p></p>]]>
        <![CDATA[
<meta content="ja" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>無題 2</title>
<style type="text/css">
.style1 {
	margin-right: 5px;
}
.style3 {
	letter-spacing: normal;
	background-color: #FFFFFF;
}
.style4 {
	margin-left: 40px;
}
.style5 {
	background-color: #FFFF99;
}
</style>




<MTIgnore><p>Google検索の検索結果の一覧表示画面には、「インスタントプレビュー」機能があります。</p>
<p>Googleは<a href="http://googlejapan.blogspot.com/2011/03/blog-post.html">2011年3月9日の公式ブログ</a>で、インスタントプレビューがモバイルでも使用できるようになったことを伝えています。</p>
<p>しかし、<strong>この機能には穴があります</strong>。なので僕は使っていません。</p><p><br /></p></MTIgnore>
<h3 class="h3-01">インスタントプレビューとは</h3>
<p>実際にサイトにアクセスする前に、サイトの中身が見れてしまうという便利な機能です。</p>
<p>
今どきのPCであれば、クリックとほぼ同時にページが表示されてしまうので、検索結果とサイトを行き来してもそれほどのストレスは感じないかもしれません。しかし、モバイルとなるとまた話は別です。デバイス、それにネット回線ともにPCに劣ってしまうモバイルにおいて、<strong><span class="style5">検索結果とサイトを行き来するという行為はかなりのストレス</span></strong>を強いられます。</p>
<p>なので、アクセスせずともランディングページが分かるというインスタントプレビューは、非常に使い勝手の良いサービスのように見えます。</p>
<p>
それでは、モバイルでインスタントプレビューを使いたい一番の動機は何でしょうか。それは、「モバイルでアクセスして大丈夫なサイトかどうか」を判断する材料であると思われます。端的にいえば、<strong><span class="style5">「モバイルに対応しているサイトか否か」を判断するための機能</span></strong>であるともいえます。</p>
<p>
&nbsp;</p>
<h3 class="h3-01">実際には使えない</h3>
<p>
しかし、実際には判断をすることはできません。なぜなら、インスタントプレビューで表示されているページと、<strong class="style5">実際にアクセスしたときに表示されるページが全く異なる</strong>ことがあるのです。それも、スマートフォン対応サイトにわざわざ作りなおしたサイトでそのような傾向が見られます。</p>
<h4><strong>事例研究　「消費者金融」の場合</strong></h4>
<p style="text-align: center">
<img src="https://lh3.googleusercontent.com/-lvaItSaX4fE/TwGhW1byHjI/AAAAAAAAGSo/g1lsbBydMK8/s480/IMG_0510.jpg" style="width: 320px; height: 480px; " /></p>
<p>iPhoneのSafariで「消費者金融」と検索してみました。</p>
<p>検索結果の右端に虫眼鏡のマークがあるのが見て取れると思います。</p>
<p>これがインスタントプレビューへの"チケット"です。ここをタップしてみましょう。</p>
<p style="text-align: center">
<img src="https://lh6.googleusercontent.com/-KbJB7nxoEas/TwGgfWOjQaI/AAAAAAAAGR0/EZpm4s7Zi9I/s480/IMG_0511.PNG" style="width: 320px; height: 480px; " /></p>
<p>このように、インスタントプレビューの表示へと変わります。サイトがプレビュー表示されているのがお分かりかと思います。</p>
<p style="text-align: center">
<img src="https://lh4.googleusercontent.com/-JUJ5wMqrp3c/TwGgfCKWjJI/AAAAAAAAGR4/GqSLBDfTFu4/s480/IMG_0512.PNG" width:="" 480px;="" height:="" 320px;="" "="" /></p>
<span class="style3"><p>
横向きにしたところ。プレビュー表示の数を増やしたいときには、横向きの方がよさそうです。</p><p style="text-align: center">
<img src="https://lh4.googleusercontent.com/-71wLoPlgq3Q/TwGgfy9z4HI/AAAAAAAAGSA/Hg1nhKuPcPM/s480/IMG_0513.PNG" style="width: 320px; height: 480px; " /></p>
<p>アイフルのサイトです。文字などが小さいので、パソコン向けのサイトなのでしょう。</p>
<p>アクセスしてみます。</p>
<p style="text-align: center">
<img src="https://lh4.googleusercontent.com/-gwniNtMBOKY/TwGggOOuvQI/AAAAAAAAGSM/vATQksntfCY/s480/IMG_0514.PNG" style="width: 320px; height: 480px; " /></p>
<p><span class="style2"></span></p>
<p style="text-align: left">
いかにも、パソコン向けのサイトが表示されました......が、</p>
<p style="text-align: center">
<img src="https://lh3.googleusercontent.com/-U4phkN0_vFw/TwGggGcV-HI/AAAAAAAAGSE/H8jJL6s0H5A/s480/IMG_0515.PNG" style="width: 320px; height: 480px; " /></p>
<span class="style3">「表示最適化中...」</span><p style="text-align: center">
<img class="style1" src="https://lh3.googleusercontent.com/-v9btIgcadkc/TwGggnZjqaI/AAAAAAAAGSQ/UcNmYlLVz1o/s480/IMG_0516.PNG" style="width: 320px; height: 480px;" /></p>
<p>
スマートフォン向けサイトへと表示が変わりました。<br />
<br />
<br />
このように、スマートフォン向けサイトへとリダイレクトがかかるようなサイトでは、<strong><span class="style5">リダイレクトする前のサイトがプレビュー表示されてしまいます</span></strong>。わざわざスマートフォン向けサイトを作っている側からすると悲しいお話です。</p><p><br /></p>
<h3>Wikipediaでは表示が一致した</h3>
<p>アイフルの結果に対して、インスタントプレビューと実際の表示が一致したスマートフォン対応サイトがあります。Wikipediaです。</p>
<p style="text-align: center">
<img src="https://lh6.googleusercontent.com/-MBvG-sVmUc4/TwGrqa4jXjI/AAAAAAAAGTc/hRQ9mn4eAZg/s480/IMG_0521.PNG" style="width: 320px; height: 480px; " /></p>
<p>
↓</p>
<p style="text-align: center">
<img src="https://lh6.googleusercontent.com/-7s792NGJEvg/TwGrqbOrBHI/AAAAAAAAGTY/XsI3JZXHYvk/s480/IMG_0522.PNG" style="width: 320px; height: 480px; " /></p>
<p>
CSSの振り分けなどに違いがあるのでしょうが、ここでは詳しく調べてはいません。</p>
<p>
&nbsp;</p>
<h3><b><font style="font-size: 1.25em; ">
レスポンシブWeb デザインではどうか</font></b></h3>
<p>それでは、ディスプレイ（スクリーン）の横幅によって表示が柔軟に変わるレスポンシブWeb 
デザインでは、インスタントプレビューはどのように表示されるのでしょうか。</p>
<h4>
<a href="http://hvanimalhospital.com/">
例1）HARPETH VARREYの場合</a>（<a href="http://www.berryinc.jp/smartphone_blog/web_1.html">前の記事でインスタントプレビューの例として紹介しました</a>）</h4>
<p>
<strong>インスタントプレビュー：タイトルのみ辛うじて表示されている</strong></p>
<p style="text-align: center">
<img src="https://lh3.googleusercontent.com/-kIH9WpbkqQ8/TwGnaClpiTI/AAAAAAAAGS4/xeebnMa_0uI/s480/IMG_0517.PNG" style="width: 320px; height: 480px; " /></p>
<p><strong>アクセスしてみると：空白の場所にはメニューが並んでいた</strong></p>
<p style="text-align: center">
<img src="https://lh4.googleusercontent.com/-jhxouXSyK50/TwGnapTM-7I/AAAAAAAAGTA/259gmkrvvyA/s480/IMG_0520.PNG" style="width: 320px; height: 480px; " /></p>
<p>結論：あまりうまくいっていない。</p>
<h4><a href="http://asuonline.asu.edu/">例2）ASU Onlineの場合</a></h4>
<p><strong>インスタントプレビュー：最適化された（レスポンシブな？）形で表示</strong></p>
<p style="text-align: center">
<img src="https://lh5.googleusercontent.com/-1ExALJCS_zo/TwGnaPHTJHI/AAAAAAAAGS0/ul8-Vdmj0sY/s480/IMG_0519.PNG" style="width: 320px; height: 480px; " /></p>
<p><strong>アクセスしてみると：インスタントプレビュー通りの表示が返ってきた</strong></p>
<p style="text-align: center">
<img src="https://lh3.googleusercontent.com/-4uvp7B03A0c/TwGnaJhtuxI/AAAAAAAAGS8/YC4RyH4iLyc/s480/IMG_0518.PNG" style="width: 320px; height: 480px; " /></p>
<p>結論：インスタントプレビューが正常に働いていた</p>
<p>&nbsp;</p>
<p>このように、レスポンシブWebデザインではうまくいくものといかないものが現れました。</p>
<p>&nbsp;</p>
<h3><span style="font-size: 1.25em">機能改善は期待大</span></h3>
<p>Googleのモバイル版インスタントプレビューは、実際には上記のように誤った結果を返してしまう場合があります。</p>
<p>しかし、この不具合はじきに解消されるでしょう。その根拠が、<a href="http://googlewebmastercentral-ja.blogspot.com/2011/12/googlebot-mobile.html">Googleウェブマスター向け公式ブログ『スマートフォン版 Googlebot-Mobile の導入について』</a>にて、Googleが<strong><span class="style5">「スマートフォン用ページのリダイレクトスキップ」</span></strong>の導入を宣言しているからです。</p>
<p class="style4"><i>これらの情報を用いる新たな機能として「スマートフォン用ページのリダイレクトスキップ」があります。この機能は、スマートフォンをスマートフォン用コンテンツにリダイレクトするページについて、検索結果から直接スマートフォン用ページへリンクするというものです。この機能により、検索結果ページをロードする際、リダイレクトに起因して発生する平均0.5〜1秒の遅延を短縮することが可能となります。</i></p>
<p>
これが導入されれば、リダイレクトをスキップして直接スマートフォン対応ページを表示してくれるので、インスタントプレビューも対応ページを表示してくれるのではないでしょうか。</p>
<p>
&nbsp;</p>
<h3><b><font style="font-size: 1.25em; ">まとめ</font></b></h3>
<p>現時点のインスタントプレビューはいくつかの制限があることが分かりましたが、今後の機能改善には期待できそうです。</p>
<p>また気になるものとしては、Wikipediaはインスタントプレビューと実際に表示されるスマートフォン対応サイトが一致したということ。理由はまた今度調べられたらと思います。</p>
<p>レスポンシブWebデザインではうまくいくものといかないものがありました。レスポンシブWebデザインも万能ではないというのは僕としては少し残念です。</p><p><br /></p>
<p>それではまた。</p>
</span>]]>
    </content>
</entry>

<entry>
    <title>Googleがモバイル化支援のサイトを作ってたので日本語訳してみた</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/google.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.18</id>

    <published>2011-12-28T10:52:21Z</published>
    <updated>2012-01-05T09:09:52Z</updated>

    <summary>GoogleがWebサイトのモバイル化を支援するサイト「GO MO」を立ち上げています。意外と日本語に訳しているサイトがなさそうだったので、僕が一部訳してみました。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    <category term="google" label="Google" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="マーケティング" label="マーケティング" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="統計資料" label="統計資料" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[<p>GoogleがWebサイトのモバイル化を支援するサイト「<a href="http://www.howtogomo.com/en/#homepage">GO 
MO</a>」を立ち上げています。</p>
<p><strong>意外と日本語に訳しているサイトがなさそうだったので、僕が一部訳してみました。</strong></p>
]]>
        <![CDATA[<meta content="ja" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>無題 3</title>
<style type="text/css">
.style1 {
	border-width: 0px;
}
.style2 {
	background-color: #FFFF99;
}
</style>
<p>GoogleがWebサイトのモバイル化を支援するサイト「<a href="http://www.howtogomo.com/en/#homepage">GO 
MO</a>」を立ち上げています。</p>
<p><strong>意外と日本語に訳しているサイトがなさそうだったので、僕が一部訳してみました。</strong></p>
<p>&nbsp;</p>
<p><a href="http://www.howtogomo.com/en/#homepage">
<iframe width="640" height="360" src="http://www.youtube.com/embed/Ja7abx3OPOQ" frameborder="0" allowfullscreen=""></iframe>

</a></p>
<p><i>Millions more people are using mobile devices to get online every day. Does your business have a mobile-friendly site? If not--or if you're not sure--you've come to the right place to get started.</i></p>
<h3><i><span style="background-color: #CBE1FA">【翻訳】日々、何百万という人がモバイルでネットにアクセスしています。あなたの会社やお店は、既にモバイルに対応したサイトを持っていますか？もし持っていなければ―もしくはよく分からなければ―あなたは今こそモバイルに対応すべきです。</span></i></h3>
<p>&nbsp;</p>
<p>
急増するモバイルからのアクセスに対し、企業側のモバイルサイト対応は追いついていません。いや、追いついていないというよりも、企業側はモバイルからのアクセスの実態を認識できておらず、「モバイルよりもPCサイトが何より重要だ」と考えている方がまだまだ多数派なのでしょう。</p>
<p>
&nbsp;</p>
<p>
それに対して<strong><span class="style2">Googleは業を煮やしている</span></strong>という印象を僕はこのサイトから受けます。Googleとしてはモバイルからの広告収入をもっと増やしたいという狙いがあるのでしょうが、そんなこととは関係なく、モバイルユーザーの満足度を上げることはこれからの時代ますます重要となってくることは間違いありません（なぜ間違いないのかという理由も、Googleはこのサイトで詳しく述べてくれています）。</p>
<p>
&nbsp;</p>
<ol>
	<li><i>なぜモバイルサイトが重要なのか(LEARN WHY MOBILE SITES MATTER)</i>　→　さまざまなデータをもとに、モバイルの重要性を滔々と語ります。このエントリーではここを訳しています。</li>
	<li><i>あなたの今のサイトがモバイルではどのように見えるか(SEE HOW YOUR CURRENT SITE LOOKS IN MOBILE)</i>　→　現状、どのように見えるかのテストができます。</li>
	<li><i>あなたのサイトをモバイル対応にするのに役立つ材料(FIND RESOURCES TO HELP BUILD YOUR SITE)</i>　→　モバイルサイトを作ってくれる企業を紹介。海外の企業ばかりなので日本では役に立ちません。</li>
</ol>
<p>&nbsp;</p>
<p><a href="http://www.howtogomo.com/en/#why-go-mo">
<img class="style1" src="https://lh6.googleusercontent.com/-I4KX9LhAU2Y/TwGHy4V5w8I/AAAAAAAAGQc/daJQKO3jVfo/s576/20120102193122.jpg" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(0, 0, 0); font-family: arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); width: 538px; height: 576px; " /></a></p>
<h3><b><font style="font-size: 1.25em; ">1.1　<i>モバイルサイトとは何で、なぜモバイルサイトが必要なのか（WHAT IS A MOBILE SITE AND WHY DO YOU NEED ONE?）</i></font></b></h3>
<p><i>Just because you can see your desktop site on a mobile phone doesn't mean it's mobile-friendly. Mobile sites are designed for the small screen, with the needs of mobile users in mind. A mobile-friendly site can help your business connect with customers and drive conversions.</i></p>
<p><i>
<span style="background-color: #CBE1FA">【翻訳】
デスクトップ用のサイトがモバイルで見れるからといって、モバイルで見るのに適したサイトというわけではありません。モバイル対応サイトというのは、モバイルユーザーの要求に応え、小さいスクリーンを想定して作られています。モバイル対応サイトはあなたの会社やお店と顧客とをつなげ、コンバージョンを加速させます。</span></i></p>
<p>&nbsp;</p>
<p>
モバイルの中でも特にスマートフォンは、パソコン向けのサイトをそのまま見ることができるので、モバイル（スマートフォン）対応サイトは必要ないと考えている担当者に向けた言葉です。ここでは<i>「小さいスクリーンを想定して作られています」</i>と紹介されていますが、他にも「<strong><span class="style2">3G回線では表示が遅い」「指でタッチするにはボタンが小さい」などの問題点</span></strong>があるのは<a href="http://www.berryinc.jp/smartphone_blog/ng.html">前の記事でも述べました</a>。</p>
<p>
&nbsp;</p>
<p><a href="http://www.howtogomo.com/en/#reasons-mobile-matters">
<img class="style1" height="576" src="https://lh6.googleusercontent.com/-Q8sbwzmc14w/TwGHywcR-NI/AAAAAAAAGQY/DEMzRs3dCnQ/s576/20120102193139.jpg" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(0, 0, 0); font-family: arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); left: 20px; top: 90px; width: 576px; height: 396px; " width="538" /></a></p>
<h3><b><font style="font-size: 1.25em; ">1.2　<i>モバイルが重要なわけ（REASONS MOBILE MATTERS）</i></font></b></h3>
<p><i>Your customers are already mobile. Are you?</i></p>
<ol>
<li><i>By 2013, more people will use their mobile phones than PC to get online.</i></li>
<li><i>Mobile searches have grown by 4X since 2010.</i></li>
<li><i>There will be one mobile device for every person on earth by 2015.</i></li>
</ol>
<p><i><span style="background-color: #CBE1FA">【翻訳】あなたの顧客は既にモバイルになっている。あなたもそうじゃないか？</span></i></p>
<ol>
	<li><i><span style="background-color: #CBE1FA">2013年までに、ＰＣよりもモバイルからネットにつながる人が多くなる。</span></i></li>
	<li><i><span style="background-color: #CBE1FA">モバイル検索は2010年と比べて2011年には4倍になった。</span></i></li>
	<li><i><span style="background-color: #CBE1FA">2015年までには、地球上のすべての人類に一人ひとつずつモバイルが行き渡る計算になる。</span></i></li>
</ol>
<p>&nbsp;</p>
<p>
「モバイル（スマートフォン）が普及している」という統計は本当に山ほどあるのですが、どの統計も何を言いたいかというと<strong><span class="style2">「モバイルが今後のWebアクセスのスタンダードになる」</span></strong>というわけです。世界中の人に1つずつというのは大変な普及ですね。世界には、別にモバイルなんていらない人も当然いるとは思うのですが。</p>
<p>
&nbsp;</p>
<p>
<a href="http://www.howtogomo.com/en/#reasons-mobile-matters">
<img class="style1" src="https://lh4.googleusercontent.com/-LHZ0NqaUNCE/TwGHzV69kLI/AAAAAAAAGQg/4qhkaFx-iYs/s576/20120102193142.jpg" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(0, 0, 0); font-family: arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); width: 576px; height: 396px; " /></a></p>
<p><i>Users expect their mobile experience to be as good as their desktop experience.</i></p>
<ol>
	<li><i>60% of users expect a mobile site to load in three seconds or less.</i></li>
<li><i>71% of users expect a mobile site to load as fast as a desktop site.</i></li>
<li><i>78% will retry a site two times or less if it does not load initially.</i></li>
</ol>
<h3><i><b><font style="font-size: 1.25em; ">
<span style="background-color: #CBE1FA">【翻訳】1.3ユーザーはモバイルでのWeb経験を、PCでのそれと同等のレベルで求めている。</span></font></b></i></h3>
<ol>
	<li><i><span style="background-color: #CBE1FA">60％のユーザーは、モバイルサイトが3秒以内に表示されることを望んでいる。</span></i></li>
	<li><i><span style="background-color: #CBE1FA">71％のユーザーは、モバイルサイトでもPCのサイト並みに速く表示されることを期待している。</span></i></li>
	<li><i><span style="background-color: #CBE1FA">78％のユーザーは、モバイルサイトが初めのうちに表示されない場合は、再度サイトを読み込んでみる。</span></i></li>
</ol>
<p>&nbsp;</p>
<p>
ユーザーからしたら、デバイスの進化とかデュアルコアとかメモリとか、そんなものどうでもいいんです。iPhone4SはデュアルコアのA5チップを搭載していますが、そんなことに興味があるのは一部のギークなわけで、ユーザーは結果しかみません。</p>
<p><strong><span class="style2">と　に　か　く　速　く　表　示　し　ろ</span></strong>　、と。</p>
<p>（この点ではまだ新聞や雑誌に勝ててないんですよね。新聞や本に表示スピードはないので。）</p>
<p>&nbsp;</p>
<p><a href="http://www.howtogomo.com/en/#reasons-mobile-matters">
<img class="style1" height="576" src="https://lh6.googleusercontent.com/-E14xWqfitXs/TwGHzlK-bbI/AAAAAAAAGQk/LMs5XHOjy1Q/s576/20120102193146.jpg" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(0, 0, 0); font-family: arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); left: 20px; top: 90px; width: 576px; height: 396px; " width="538" /></a></p>
<p><i>A bad mobile experience can cost you customers.</i></p>
<ol>
	<li><i>57% would not recommend a business with a bad mobile site.</i></li>
<li><i>40% have turned to a competitor's site after a bad mobile experience.</i></li>
<li><i>23% of adults have cursed at their phone when a site doesn't work.</i></li>
</ol>
<h3><i><b><font style="font-size: 1.25em; ">
<span style="background-color: #CBE1FA">【翻訳】1.4モバイルでユーザーに不愉快な思いをさせると、あなたは顧客を失うことになるかもしれない。</span></font></b></i></h3>
<ol>
	<li><i><span style="background-color: #CBE1FA">57％の人は、モバイルサイトが駄目だったときにはその会社を他の人にお勧めしたりしない。</span></i></li>
	<li><i><span style="background-color: #CBE1FA">40％の人は、とあるモバイルサイトが駄目だったときには競合のサイトに飛んでいってしまう。</span></i></li>
	<li><i><span style="background-color: #CBE1FA">23％の大人は、モバイルサイトがうまく表示されなかった時に携帯に文句を言ったことがある。</span></i></li>
</ol>
<p>&nbsp;</p>
<p>モバイルはいつでもどこでも一緒にいるパートナーです。そのパートナーがうまく働いてくれなかったときには、あたかも人間を相手にしているように腹を立ててしまうかもしれませんね。</p>
<p><strong><span class="style2">「たかがモバイル」などと馬鹿にしている時代は既に終わっています</span></strong>。（参照：<a href="http://www.j-cast.com/2012/01/02117841.html?p=1">iPhoneないと生きていけない　スマホにドップリ浸かる人たち</a> ）</p>
<p>&nbsp;</p>
<p><a href="http://www.howtogomo.com/en/#reasons-mobile-matters">
<img class="style1" src="https://lh6.googleusercontent.com/-9IsaieBzz3w/TwGHzx1NO6I/AAAAAAAAGQo/3WUp3LKib2Y/s576/20120102193149.jpg" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(0, 0, 0); font-family: arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); width: 576px; height: 396px; " /></a></p>
<p><i>Customers are connecting with the businesses in their local area on mobile.</i></p>
<ol>
	<li><i>95% of smartphone users have searched for local information.</i></li>
<li><i>61% of users calla a business after searching and 59% visit the location.</i></li>
<li><i>90% of these people act within 24 hours.</i></li>
</ol>
<h3><i><b><font style="font-size: 1.25em; ">
<span style="background-color: #CBE1FA">【翻訳】1.5顧客はモバイルで地域の企業やお店を検索しています。</span></font></b></i></h3>
<ol>
	<li><i><span style="background-color: #CBE1FA">95％のスマートフォンユーザーが地域の情報を探したことがあります。</span></i></li>
	<li><i><span style="background-color: #CBE1FA">61％のユーザーがその検索の後にお店に電話をかけており、59％が実際に足を運んでいます。</span></i></li>
	<li><i><span style="background-color: #CBE1FA">90％が24時間以内に行動に移しています。</span></i></li>
</ol>
<p>&nbsp;</p>
<p>
モバイルとPCの決定的にして最大の違いは、持ち運べるか否かということ、外でも気軽に使えるか否かということでしょう。「モバイル（mobile）」という言葉や「携帯」という言葉は、もともと「一緒に持ち運ぶ」という意味でしたが、それがそのまま「モバイルフォン（携帯電話）」の意味になってしまいましたね。</p>
<p>
なのでモバイルが、「外でネットにアクセスする」ということ、それが<strong><span class="style2">「外出先の見知らぬ地の情報を得る」</span></strong>という用途につながるということは想像に難くありません。これについても<a href="http://www.berryinc.jp/smartphone_blog/lp.html">前の記事で少し触れましたね</a>。</p>
<p>
&nbsp;</p>
<p><a href="http://www.howtogomo.com/en/#reasons-mobile-matters">
<img class="style1" height="576" src="https://lh5.googleusercontent.com/-zBzn3pCpp0c/TwGH0Gh7UeI/AAAAAAAAGQw/WVFBsv5mQdc/s576/20120102193152.jpg" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(0, 0, 0); font-family: arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); left: 20px; top: 90px; width: 576px; height: 396px; " width="538" /></a></p>
<p><i>Apps are fun and useful, but many prefer mobile sites for shopping.</i></p>
<ol>
	<li><i>81% of users prefer mobile sites to apps for researching prices.</i></li>
<li><i>79% prefer mobile sites for product reviews.</i></li>
<li><i>63% prefer mobile sites for purchasing.</i></li>
</ol>
<h3><i><b><font style="font-size: 1.25em; ">
<span style="background-color: #CBE1FA">【翻訳】1.6アプリは楽しいし便利だ、しかし多くの人はそれよりもモバイルでショッピングをすることを望んでいる。</span></font></b></i></h3>
<ol>
	<li><i><span style="background-color: #CBE1FA">81％のユーザーは、値段を調ベルト気にはアプリよりもモバイルサイトの方を好んで使う。</span></i></li>
	<li><i><span style="background-color: #CBE1FA">79％のユーザーは、レビューをモバイルサイトで見る方を好む。</span></i></li>
	<li><i><span style="background-color: #CBE1FA">63%はモバイルで買い物をする。</span></i></li>
</ol>
<p>&nbsp;</p>
<p><a href="http://www.howtogomo.com/en/#reasons-mobile-matters">
<img class="style1" src="https://lh3.googleusercontent.com/-9F1yu75k7QM/TwGH0VxQ1AI/AAAAAAAAGQ0/fsRxmWj03Y4/s576/20120102193155.jpg" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(0, 0, 0); font-family: arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); width: 576px; height: 396px; " /></a></p>
<p><i>Businesses like yours can drive purchases with a mobile-friendly site.</i></p>
<ol>
	<li><i>70% of mobile users have compared product prices on their cell phones.</i></li>
<li><i>65% have read product reviews on their phones.</i></li>
<li><i>50% of mobile searches lead to purchase.</i></li>
</ol>
<h3><i><b><font style="font-size: 1.25em; ">
<span style="background-color: #CBE1FA">【翻訳】1.7あなたのようなビジネスは、モバイル対応サイトにすることでコンバージョンを加速させることができるだろう。</span></font></b></i></h3>
<ol>
	<li><i><span style="background-color: #CBE1FA">70％のモバイルユーザーは、モバイルで価格を比較している。</span></i></li>
	<li><i><span style="background-color: #CBE1FA">65％はモバイルでレビューを読んでいる。</span></i></li>
	<li><i><span style="background-color: #CBE1FA">モバイル検索の50％は、顧客をコンバージョンへと導いている。</span></i></li>
</ol>
<p>&nbsp;</p>
<p>3番はちょっと意味が分からないですけどね。モバイル検索の半分もコンバージョンしているのかな、と。僕の翻訳が間違ってるのかな、と不安になります。</p>
<p>&nbsp;</p>
<p>次に述べられているのは、「<strong><i>モバイルサイト対応10個の処方箋</i></strong>」。</p>
<p>&nbsp;</p>
<p>
<img src="https://lh6.googleusercontent.com/-zMWjdyFJts8/TwGLrxU5t_I/AAAAAAAAGRg/a37K7xSbHNg/s576/20120102194733.jpg" style="width: 576px; height: 396px; " /></p>
<p>これは既にGoogle公式で訳されていますね。　→　<a href="http://adsense-ja.blogspot.com/2011/12/10.html">モバイル向けサイト作成のための10のヒント</a></p>
<p>次に事例研究。これはまたの機会にしますか。</p>
<p>&nbsp;</p>
<p>
<img src="https://lh4.googleusercontent.com/-387I3I__jwM/TwGLr8AbjII/AAAAAAAAGRc/M6t-QzpTpoI/s576/20120102194842.jpg" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(0, 0, 0); font-family: arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); width: 576px; height: 501px; " /></p>
<p>
&nbsp;</p>
<p>それではまた。</p>
<p>&nbsp;</p>
<h5>参考</h5>
<ul>
	<li>Google、Webサイトのモバイル化を支援する「GoMo」イニシアチブを発表　<a href="http://www.itmedia.co.jp/news/articles/1111/02/news028.html">
	http://www.itmedia.co.jp/news/articles/1111/02/news028.html</a></li>
</ul>]]>
    </content>
</entry>

<entry>
    <title>Google+をEvernote的に使ってみた感想～クラウドブックマークとしてのGoogle+～</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/googleevernote.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.17</id>

    <published>2011-12-27T06:48:46Z</published>
    <updated>2012-01-05T09:21:04Z</updated>

    <summary>ここ最近、「スマートフォンサイト制作」という軸で集中して情報を集めてきました。
僕がそのURLや情報をどこに集めているかというと、Evernoteかと思いきやGoogle+です。「Google+ってSNSでしょ？」と思われる方が非常に多いのではないかと思いますが、僕はクラウドブックマークとして使っています。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    <category term="google" label="Google" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[<div>ここ最近、「スマートフォンサイト制作」という軸で情報をそこそこ集めてきました。
</div>僕がそのURLや情報をどこに集めているかというと、Evernoteかと思いきや<a href="https://plus.google.com/">Google+</a>です。「Google+ってSNSでしょ？」と思われる方が非常に多いのではないかと思いますが、僕は<span class="style1"><strong>クラウドブックマーク</strong></span>として使っています。]]>
        <![CDATA[



<meta content="ja" http-equiv="Content-Language">


<style type="text/css">
.style1 {
	background-color: #FFFF99;
}
</style>



<p>ここ最近、「スマートフォンサイト制作」という軸で情報をそこそこ集めてきました。</p><p><br /></p>
<h3><font style="font-size: 1.25em; "><b>Google+に情報を溜める</b></font></h3>
<p>
僕がそのURLや情報をどこに集めているかというと、Evernoteかと思いきや<a href="https://plus.google.com/">Google+</a>です。「Google+ってSNSでしょ？」と思われる方が非常に多いのではないかと思いますが、僕は<span class="style1"><strong>クラウドブックマーク</strong></span>として使っています。</p>
<p>
<a href="http://www.youtube.com/comment?lc=zKDiHoRjcTrXSyhoOzc4mmX5GGO3_DMxarvPvRXbcjk">
Google+に対する僕の姿勢</a>　（<a href="https://www.facebook.com/Shurin.Yokota" style="cursor: pointer; color: rgb(59, 89, 152); text-decoration: none; font-family: 'lucida grande', tahoma, verdana, arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 14px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">横田 
秀珠</a>さんの動画にコメントしました。）</p>
<p>
<i>僕はFacebookとGoogle+を明確に使い分けてますね­。</i></p><p><i>Facebookは友達と交流する場っていうのはそのままなん­ですけど、Google+っていわばソーシャルブックマークなん­ですよね。</i></p><p><i>&nbsp;Google+の「サークルで共有」ってやつを使えば、<strong><span class="style1">色んな種­類でブックマークを作ることが可能</span></strong>ですよね。サークルに他のユー­ザを入れなくてもいいので、いわば（ちょっと矛盾してるけど）自­分だけのソーシャルブックマーク。ソーシャルっていうよりは、ど­こでも同期されてるクラウドブックマークですね。&nbsp;</i></p><p><i>それで、たまたま会社の人や同期と共有したいなって時には、その­ユーザだけサークルに入れれば良い。そういったブックマークの機­能としては、Google+ってすごく使い勝手がいいんです。&nbsp;</i></p><p><i>それで、こうした用途でも、ちゃんとGoogleの意図している­「人間による評価（投票）」って得られてるんですよね。上手く絡­め取られてしまっていて、ちょっと悔しいんですけど。笑&nbsp;</i></p><p><i>みんな、もっと<strong><span class="style1">はてブっぽく使えばいいのにな</span></strong>って、個人的には思­いますね。﻿</i></p><p><i><br /></i></p>
<h3><font style="font-size: 1.25em; "><b>どうやって使ってるの？</b></font></h3>
<p>下記が僕のGoogle+。「スマートフォンサイト」や「コーディング」というサークルを作成し、それに関する記事を次々投稿しています。</p>
<p style="text-align: center">
<img height="395" src="https://lh6.googleusercontent.com/-vKr7ma8Kbvw/TwFJvIO4ZkI/AAAAAAAAGPg/mVlzujjUWWg/s512/20120102150056.jpg" width="395" /></p>
<p>こうすることで、僕がどのように情報を収集しているかを、同じプロジェクトの皆とリアルタイムで共有できるので便利です。しかも、これらのサークルは一般には公開していません。このブログ執筆にあたってのメモなどを色々書いているからですが、<strong><span class="style1">クローズドな情報共有・交換にGoogle+は結構使えます</span></strong>。</p><p><br /></p>
<h3><b><font style="font-size: 1.25em; ">検索もラクラク</font></b></h3>
<p>もちろん検索もできます。例えば僕が、「過去に集めた記事から、『レスポンシブWebデザイン』に関する記事を書こう」と思ったら、</p>
<ol>
	<li style="text-align: center">上の検索窓から検索ができます。しかしこれはGoogle+全体から検索していますね。<br />
	<img src="https://lh6.googleusercontent.com/-5I0573Pgk_w/TwFNy6_dyUI/AAAAAAAAGPs/t3kXrahxGKw/s720/20120102152345.jpg" style="width: 492px; height: 720px; " /></li>
	<li style="text-align: center">そこで検索範囲を「すべてのユーザー」から「自分」にします。そうすると、自分の投稿から検索をかけてくれます。<br />
	<img src="https://lh4.googleusercontent.com/-mk2yXzD2rCU/TwFNzEdmVdI/AAAAAAAAGPw/ALmDQG5JaeQ/s720/20120102152438.jpg" style="width: 492px; height: 720px; " />
	</li>
</ol>
<p>
しかし、やっぱりGoogleはGoogle+をSNSとして作っているので、ブックマークとしての使い勝手は実際のところあまりよくない、というのが実情です。</p>
<p>
投稿がどんどん下に流されていって、<strong><span class="style1">下の方の投稿まで追いかけるのはかなり面倒です</span></strong>。</p>
<p>
&nbsp;</p>
<h3><font style="font-size: 1.25em; "><b>
Google+に未来を見たいから</b></font></h3>
<p>
僕はGoogle+に人との交流はあまり求めていません。「友達と交流したい」という欲求はFacebookで十分満たされているからです。</p>
<p>
一方で、僕はGoogleという企業のことは結構好きで、<strong><span class="style1">Googleさんは数少ない「未来を見せてくれる企業</span></strong>」だと思っているので、Googleさんのサービスは積極的に使用しています。そこで、<span class="style1"><strong>Google+を「情報のSNS」として利用してみようか</strong></span>というのが、僕の上記のような試みです。</p>
<p>
これからは、Google+で貯めた情報をGoogleDocsで整理してブログに書く、という順番になるのかなと思います。Evernoteはもっと「情報収集」に主眼を置いてタグ付けなどの機能を追加しているので、Google+もそのように進化してくれると嬉しいな、と思います。</p>
]]>
    </content>
</entry>

<entry>
    <title>レスポンシブWebデザイン～導入編～</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/web_1.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.16</id>

    <published>2011-12-26T04:50:02Z</published>
    <updated>2012-01-05T09:50:06Z</updated>

    <summary>レスポンシブWebデザインとは、ソースコードをそれぞれ別途用意するのではなく、デバイス（ウィンドウ）の大きさにしたがって臨機応変に表示を変えてあげるということです。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    <category term="デザイン" label="デザイン" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[レスポンシブWebデザインとは、ソースコードをそれぞれ別途用意するのではなく、<b>デバイス（ウィンドウ）の大きさにしたがって臨機応変に表示を変えてあげる</b>ということです。]]>
        <![CDATA[

<style type="text/css">
.style1 {
	background-color: #FFFF00;
}
.style2 {
	background-color: #FFFF99;
}
</style>


<h3><b><font style="font-size: 1.25em; ">レスポンシブWeb デザインとは</font></b></h3>
<p>
今やWebはパソコンの前にだけ座って見るものではありません。いつでも、どこでも、誰とでも見る時代。朝起きたらiPhoneで見て、通勤中にタブレットで見て、会社や学校ではパソコンで見て。デバイスはますます多様化し、<span class="style2"><strong>Webは私達の日常の至る所で使われる「インフラ」</strong></span>となりました。</p>
<p>
一方で、デバイス側（クライアント側）が多様化するというのは、Webデザインもパソコンだけに合わせていればいいというわけではなくなりました。そこで、<span class="style2"><strong>あらゆるデバイスにレスポンシブな（responsive 
: 反応してくれる）Webデザイン</strong></span>をすることが求められるようになりました。</p>
<p>&nbsp;</p>
<h3><b><font style="font-size: 1.25em; ">最適化サイトを作ることではない</font></b></h3>
<p>
これは、「スマホにはスマホサイトを、タブレットにはタブレットのサイトを用意する」ということとは趣が違います。ソースコードをそれぞれ別途用意するのではなく、デバイス（ウィンドウ）の大きさにしたがって<strong><span class="style2">臨機応変に</span></strong>表示を変えてあげるということです。（「臨機応変に」というのは、僕のレスポンシブに対する解釈です。いい線いっていると自分では思っています。）</p>
<h3>&nbsp;</h3>
<h3><b><font style="font-size: 1.25em; ">レスポンシブWeb デザインの例</font></b></h3>
<p>説明だけではよく分からないと思うので、実際の例を見てもらった方が早いでしょう。</p>
<p><a href="http://designm.ag/design/26-inspiring-responsive-web-design/">26 
Responsive Web Design</a></p>
<p>26個の例が載っています。英語のサイトですが、例を見るだけなので何も問題はありません。</p>
<p>サンプルのサイトに行ってみてから、<span class="style2"><strong>ブラウザの横幅を縮めてみてください</strong></span>。ほら、途中でサイトがガラっと変わったでしょう？</p>
<p><a href="http://hvanimalhospital.com/">例）HARPETH VARREYの場合</a>（三段階に分かれています）</p>
<p style="text-align: center"><a href="http://hvanimalhospital.com/">
<img class="style1" height="357" src="https://lh6.googleusercontent.com/-hBVyO3-Wf-c/TwEqux_pdnI/AAAAAAAAGN4/D7kx3poFuHE/s576/20120102125301.jpg" width="350" /></a></p>
<p>↓ブラウザの横幅を狭くすると</p>
<p style="text-align: center"><a href="http://hvanimalhospital.com/"><img class="style1" height="355" src="https://lh4.googleusercontent.com/-OVbQIT2dqIE/TwEqu6WH3bI/AAAAAAAAGNw/HAwmdYs-8Hk/s720/20120102125333.jpg" width="294" /></a></p>
<p>↓更に狭くして</p>
<p style="text-align: center"><a href="http://hvanimalhospital.com/"><img class="style1" height="355" src="https://lh5.googleusercontent.com/-YLy7_PbvKmw/TwEqux0QsWI/AAAAAAAAGN0/CO5Mjl88lBk/s720/20120102125355.jpg" width="171" /></a></p>
<p>国内の例では、<a href="http://panasonic.co.jp/jobs/">パナソニックの採用サイト</a>が挙げられます。</p>
<p style="text-align: center">
<a href="http://panasonic.co.jp/jobs/">
<img height="371" src="https://lh4.googleusercontent.com/-ipPgiKt9Jpg/TwEtHESqEPI/AAAAAAAAGOM/nYu1PbFfLLU/s576/20120102130400.jpg" width="354" class="style1" /></a></p>
<p>
↓</p>
<p style="text-align: center">
<a href="http://panasonic.co.jp/jobs/"><img height="364" src="https://lh3.googleusercontent.com/-tL4xGwXspro/TwEtHHOJ0OI/AAAAAAAAGOQ/wIz97EJMvMs/s720/20120102130440.jpg" width="288" class="style1" /></a></p>
<p>
↓</p>
<p style="text-align: center">
<a href="http://panasonic.co.jp/jobs/"><img height="361" src="https://lh6.googleusercontent.com/-s6FqjwjXv2w/TwEtHF90-KI/AAAAAAAAGOI/xxEb7MJLgfc/s720/20120102130517.jpg" width="206" class="style1" /></a></p>
<p>就職活動においてスマートフォンが必須というのは今や常識のようです。</p>
<p>企業がその時流に乗るというのは必然といえるでしょう。</p>
<p>&nbsp;</p>
<h3><b><font style="font-size: 1.25em; ">参考サイト</font></b></h3>
<p>レスポンシブWebデザインの考え方はそれほど新しいものではなく、実は<strong><span class="style2">2010年ほどから色々な形で紹介</span></strong>されています。</p>
<p>参考となるサイトもいくつもあるので、ここで少し紹介します。</p>
<p>&nbsp;</p>
<h4><a href="http://designblog.ecstudio.jp/design-2/responsive-design.html">
WebサイトをiPhoneに対応させる -レスポンシブ・ウェブデザイン-EC studio 企画デザインブログ　2011年3月30日</a></h4>
<ul>
	<li>レスポンシブ・ウェブデザインって</li>
<li>スタイル（CSS）の振り分け</li>
<li>ページ構造をデバイスで切り替える</li>
<li>各ブロックや要素のサイズを調整する</li>
<li>まとめ</li>
<li>レスポンシブ・ウェブデザイン 参考サイト</li>
</ul>
<p>レスポンシブWebデザインの導入方法が書かれています。How toとしてわかりやすいのでは。</p>
<p>&nbsp;</p>
<h4><a href="http://ascii.jp/elem/000/000/613/613028/">
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ASCII.jp 　2011年6月17日</a></h4>
<ul>
	<li>ウィンドウサイズを基準にデザインを調整</li>
<li>一般企業でも進む レスポンシブWebデザイン</li>
<li>レスポンシブWebデザインを選択する4つの理由</li>
<li>レスポンシブWebデザインを作る3つのステップ</li>
<li>レスポンシブWebデザインの導入場面</li>
</ul>
<p>導入方法に並んで、導入するメリットもわかりやすく書かれています。</p>
<p>&nbsp;</p>
<h4>
<a href="http://kachibito.net/web-design/responsive-web-design-resource.html">
iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやティップスいろいろ　2011年8月2日</a></h4>
<ul>
<li>Media Queries</li>
<li>CSSフレームワーク</li>
<li>WordPressテーマ</li>
<li>便利なツール</li>
</ul>
<p>こちらは主にリンク集。役立ちそうなツールやフレームワークなどのサイトを紹介しています。よくこれだけ集めたという印象です。</p>
<p>&nbsp;</p>
<h4><a href="http://photoshopvip.net/archives/32018">2012年に流行りそうなWebデザイントレンド厳選10個まとめ　2011年12月23日</a></h4>
<p>「1.レスポンシブWebデザイン」の項で、役立ちそうなサイトが多数紹介されています。</p>
<p>&nbsp;</p>
<h3><b><font style="font-size: 1.25em; ">導入方法などはまた今度</font></b></h3>
<p>実際の導入方法などは、また今度まとめて紹介したいと思います。</p>
<p>それでは。</p>
]]>
    </content>
</entry>

<entry>
    <title>スマホで買い物できない2つの理由と対策</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/ec.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.15</id>

    <published>2011-12-22T05:46:44Z</published>
    <updated>2012-01-05T09:44:53Z</updated>

    <summary>スマートフォンの急速な普及にともない、「スマートフォンでショッピングを楽しみたい」という需要はますます高まっています。
しかし、ショップ側はそうした要望に全く応えられていません。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    <category term="ec" label="EC" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="マーケティング" label="マーケティング" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[<h3><b><span style="font-size: large;">スマートフォンでのEC需要は大きいながらも　実際</span><span style="font-size: large; ">はスマートフォンでお買い物ができない</span></b></h3><div>という実態を浮かび上がらせる調査結果が発表されました。</div>
]]>
        <![CDATA[<h3><b><span style="font-size: large;">スマートフォンでのEC需要は大きいながらも　実際</span><span style="font-size: large; ">はスマートフォンでお買い物ができない</span></b></h3><div>という実態を浮かび上がらせる調査結果が発表されました。<br /><span style="background-color: #f7f7f7; color: #333333; font-family: 'ＭＳ Ｐゴシック', Osaka, 'ヒラギノ角ゴ Pro W3'; font-weight: bold; line-height: 20px;"><br /></span></div><div><span style="background-color: rgb(247, 247, 247); "><a href="http://estore.co.jp/pdf/Release_111209" target="_blank">ネットショッピングに関する意識調査とEストアーデータからみる傾向　

2011年のネットショッピング事情</a></span></div><div>
<a href="http://estore.co.jp/pdf/Release_111209">http://estore.co.jp/pdf/Release_111209</a><br />
</div><br />
<div><div><br />
以下、報告からの抜粋です。<br />
	<blockquote><b><em>①E ストアー、ネットショッピングの注文数は前年比 20％増。&nbsp;</em></b><em><br />
要因は</em><span style="background-color: yellow;"><strong><span style="background-color: #FFFF99"><em>「スマートフォンの普及」</em></span></strong></span><em>「女子買いの増加」「震災後の需要拡大」<br />
→2011 年 E ストアーにおけるネットショップ注文件数は、月別前年対比では平均で 22%増であり、特に６月以降は平均 25%増で推移している。 <br />
		</em>
<b>②<span style="background-color: #FFFF99;"><em>増加傾向のスマホ所有者。しかしネットショッピングは未だ PC で行う人が大多数。</em></span></b><em><br />
→スマートフォン所有者の大多数は PC で商品購入。理由はスマートフォンでの商品やショップの検索・比較・決済が面倒だから。<br />
→スマートフォン所有者は「PC で閲覧選択し、PC で購入する」が 66％、「スマートフォンで閲覧選択し、PC で購入する」 が 19%、「PC で閲覧選択し、スマートフォンで購入する」が 6％に。</em></blockquote><br />
本当はもっとスマートフォンで買い物を楽しみたいんだけど、実際にはスマホで買う気にはなれない、という一般ユーザーの悲痛な叫びが聞こえてきます。<br />
&nbsp;気になるのは理由ですよね。調査結果をみてみましょう。<br /><br />
	<h3>
<span style="font-size: large;">【意識調査】スマートフォン所有者のうちスマートフォンでネットショッピングをしない理由</span></h3>
	<ol>
		<li>商品やショップを探すのが面倒　　　　　56.4％</li>
<li>商品の詳細までがわからないから　　　38.8％</li>
<li>価格や商品比較が面倒　　　　　　　　　38.2％</li>
<li>決済時に入力しにくい　　　　　　　　　　 36.4％</li>
<li>使いにくいから　　　　　　　　　　　　　　　24.2％</li>
<li>使い慣れていないから　　　　　　　　　　18.2％</li>
<li>その他　　　　　　　　　　　　　　　　　　　　9.1％</li>
</ol>
<div><br />
つまり、スマートフォンでは画面が小さい（ブラウザ一つで画面いっぱい）が故に、</div><div><span style="background-color: yellow;"><br /></span></div><div><span style="background-color: yellow;"><b>
	<span style="background-color: #FFFF99">商品を探したり店舗をまたいで比較をしたりするのが難しい</span></b></span>という結果になりました。</div><div><br /></div><div>決済の際には名前に住所、電話番号にクレジットカードの番号などを入力する必要がありますが、</div><div><span style="background-color: yellow;"><br /></span></div><div><span style="background-color: yellow;"><b>
	<span style="background-color: #FFFF99">決済もスマートフォンでは困難</span></b></span>を覚える人が多数いました。</div><div><br /></div><div>「使いにくい」や「使い慣れていない」という回答も、上記のような悩みに収斂するのではないでしょうか。</div><div><br /></div>
<div>
	<h3>
<span style="font-size: large;"><b>考えられる対策</b></span></h3>
	</div>
<div><br />
現状、考えられる対策としては下記のようなものになるでしょう。</div><div>
<ol><br />
<li>商品を探しやすくするには、まずECサイトを<span style="background-color: yellow;"><strong><span style="background-color: #FFFF99">スマートフォン対応サイト</span></strong></span>にすることです。サイト内の回遊率・PV数は格段に上がります。とある不動産系サイトでは、スマートフォン対応にしたところPV数が約半年で25倍に膨れ上がったというデータもあります。</li>
<li>ショップを探すのが面倒であるということも、恐らく<span style="background-color: yellow;"><strong><span style="background-color: #FFFF99">「スマートフォンに対応しているサイトを探すのが面倒」</span></strong></span>という意味だと思われます。つまり、ライバルに先んじてスマートフォンに対応すれば、それだけで優位性が格段に高まるということになります。</li>
<li>商品の詳細が分からないというのは、単純に「商品の詳細をスマートフォンサイトでも（というか携帯サイトでも）<span style="background-color: yellow;"><strong><span style="background-color: #FFFF99">PCサイトと同等以上に詳しくすればいい</span></strong></span>」ということです。表示スピードが遅くならない程度に画像も貼ってしまいましょう。値段の高い安いに関わらず、詳細の分からない商品に消費者はお金を払いません。</li>
<li>決済時に入力がしにくいのは、実はHTML5を駆使するとかなり解決できます。この辺は自力で導入するよりも、<span style="background-color: yellow;"><strong><span style="background-color: #FFFF99">スマートフォン対応のASP</span></strong></span>を使った方が現実的です。ちなみに、「ASPがPCサイトをスマートフォンサイトに自動変換してくれているから、特別な対策は必要ない」と考えている方は危険です。僕は<a href="http://www.makeshop.jp/" target="_blank">MakeShop</a>の例しか知らないですが、スマートフォン表示は非常に心許ないものです。</li></ol></div>
<div>つまるところ、<b><u style="background-color: #FFFF99;">スマートフォン対応の、ECのASPを導入する必要性が高まっている</u></b>ということになります。</div><br />
<div>PCは今まで通りのASPを継続しつつ、スマートフォンサイトだけ専用ASPを導入するということもできるところもあるようです。<br />お客さんのことも考えて、早めの導入をお勧めします。</div><br />
<div><br />
参照<br /><ol>
<li>スマホ時代の2011年ネットショッピング事情 健康美容ニュース【健康美容EXPO】<a href="http://news.e-expo.net/topics/2011/12/post-101.html">http://news.e-expo.net/topics/2011/12/post-101.html</a><br />
</li>
<li>ECサイトの操作性に不満　スマホ所有者の66％がPCで閲覧＆購入：株／FX・投資と経済がよくわかるMONEYzine　<a href="http://moneyzine.jp/article/detail/201392/">http://moneyzine.jp/article/detail/201392/</a><br />
</li></ol></div></div></div>]]>
    </content>
</entry>

<entry>
    <title>スマートフォンでやること第一位は「webの閲覧」</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/web.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.14</id>

    <published>2011-12-21T05:46:01Z</published>
    <updated>2012-01-05T09:47:54Z</updated>

    <summary>スマートフォンを購入している人は、まず第一に何をしたいと思っているのか。アプリを楽しみたいという動機は、実は二の次なのです。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    <category term="マーケティング" label="マーケティング" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="統計調査" label="統計調査" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[<h3><h3 style="border-style: initial; border-color: initial; "><span style="font-size: large; "><b>スマートフォンで何をしたいと思っているか？</b></span></h3><span style="font-size: 13px; ">D2Cが2011年4月27日に発表した調査によれば、</span><br style="font-size: 13px; " /><span style="font-size: 13px; ">「スマートフォンを欲しいと思う理由」</span><span style="font-size: 13px; background-color: white; ">のトップが<strong><span style="background-color: rgb(255, 255, 153); ">「</span></strong></span><span style="font-size: 13px; background-color: yellow; "><strong><span style="background-color: rgb(255, 255, 153); ">パソコン用のwebページ</span></strong></span><span style="font-size: 13px; background-color: white; "><strong><span style="background-color: rgb(255, 255, 153); ">をそのまま表示・利用できるから」</span></strong>で</span><span style="font-size: 13px; ">63.5％となっています。</span>
</h3>]]>
        <![CDATA[<h3><span style="font-size: large;"><b>スマートフォンで何をしたいと思っているか？</b></span></h3>

<br />
D2Cが2011年4月27日に発表した調査によれば、<br />

<span style="background-color: #FFFFFF;">「スマートフォンを欲しいと思う理由」</span><span style="background-color: white;">のトップが<strong><span style="background-color: #FFFF99">「</span></strong></span><span style="background-color: yellow;"><strong><span style="background-color: #FFFF99">パソコン用のwebページ</span></strong></span><span style="background-color: white;"><strong><span style="background-color: #FFFF99">をそのまま表示・利用できるから」</span></strong>で</span>63.5％となっています。<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="427_3-2.JPG" class="mt-image-none" height="400" src="http://www.d2c.co.jp/news/427_3-2.JPG" style="margin-left: auto; margin-right: auto;" width="333" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">出典　D2C（<a href="http://www.d2c.co.jp/news/2011/20110427-558.html">http://www.d2c.co.jp/news/2011/20110427-558.html</a>）</td></tr>
</tbody></table>
<br />
<h3>
<span style="font-size: large;"><b>スマートフォンの利点は「個人・一瞬・手のひら」</b></span></h3>
なぜスマートフォンがwebの利用に好まれるのか。理由を考えてみると、<br />
<ol>
<li>パソコンは家族で共用でも、スマートフォンは<span style="background-color: yellow;"><strong><span style="background-color: #FFFF99">個人の持ち物</span></strong></span>です。どれだけ使っていても家族に遠慮する必要がないし、どんなサイトを見ていようが自由です。</li>
<li>パソコンは起動に時間がかかります。IT系の人は家に帰ってもパソコンをつけっぱなしという人が多いと思いますが、一般的にはそうでもありません。一方、「何かを調べたい」「あのサイトを見たい」と思うのは突然起こるもの。スマートフォンなら<span style="background-color: yellow;"><strong><span style="background-color: #FFFF99">一瞬で起動し、すぐにwebを観閲</span></strong></span>できます。</li>
<li>パソコンは大きくて重たいですが、スマートフォンは<span style="background-color: yellow;"><strong><span style="background-color: #FFFF99">手の平に収まります</span></strong></span>。部屋で寝っ転がりながら、テレビを見ながら、電車に乗りながら、自由にwebを楽しむことができます。</li>
</ol>
今までのガラケーでも上記のようなことは出来ましたが、ガラケーには表示できるサイト数やコンテンツにどうしても限界がありました。<br />
ガラケーの外に眠っていたパソコン版のサイトが、一瞬で、また手の平で見ることができる。そこに大きな可能性を感じているわけです。<br />
<br />
<br />
<h3>
<span style="font-size: large;"><b>真っ先に謳っている文句「手のひらネットライフ」</b></span></h3>
<br />
そうした需要が強いことは、スマートフォン端末の紹介サイトを見ることでもうかがい知ることができます。<br />
下記はSamsung製「Galaxy S」のサイトをキャプチャーしたものです。<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-SrDB-rbp0Fo/Tu3EMo-IViI/AAAAAAAAGLo/wPzEVxS6tL0/s1600/galaxy.bmp" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="193" src="http://1.bp.blogspot.com/-SrDB-rbp0Fo/Tu3EMo-IViI/AAAAAAAAGLo/wPzEVxS6tL0/s400/galaxy.bmp" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">圧倒的な高精彩＆手のひらネットライフスマートフォン<br />
（出典　
<a href="http://jp.samsungmobile.com/galaxys/">http://jp.samsungmobile.com/galaxys/&nbsp;</a>）</td></tr>
</tbody></table>
ここでまず表示されるのが、「 圧倒的な高精彩＆手のひらネットライフスマートフォン 」という文字。<br />
<br />
つまり消費者は、<span style="background-color: yellow;"><strong><span style="background-color: #FFFF99">「まず第一に、高精彩な画面で、手のひらでネットサーフィンを楽しみたい」</span></strong></span>と考えているということがわかりますね。<br />
<br />
<br />
<h3>
<span style="font-size: large;"><b>スマートフォンといったらアプリではないのか？</b></span></h3>

&nbsp;スマートフォンといったらアプリだって思っている人は多いと思われます。<br />
Amazonや楽天、ZOZOTOWNなどのECサイトは、スマートフォン対応サイトと同時にアプリも仕掛けている場合が多い。R25やじゃらん、ITmediaなどの情報系サイトもしかりです。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-hAqkit3GMy4/Tu3UGfFdARI/AAAAAAAAGLw/qXY_hUt06Fc/s1600/IMG_0499.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-hAqkit3GMy4/Tu3UGfFdARI/AAAAAAAAGLw/qXY_hUt06Fc/s320/IMG_0499.PNG" width="213" /></a></div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-xHnwtak6AUU/Tu3UGwXtjXI/AAAAAAAAGL0/3fOcdZXejic/s1600/IMG_0500.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="http://2.bp.blogspot.com/-xHnwtak6AUU/Tu3UGwXtjXI/AAAAAAAAGL0/3fOcdZXejic/s320/IMG_0500.PNG" width="213" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">スマートフォン対応サイトとアプリを同時展開する例は多数ある<br />
（じゃらんでの比較）</td></tr>
</tbody></table>
<br />
<br />
<br />
もちろん、最初に見せたD2Cの調査結果でもアプリの需要は約40％と高いのですが、筆者は個人的には、<span style="background-color: yellow;"><strong><span style="background-color: #FFFF99">将来的にほぼ全てのサービスがブラウザ上で展開</span></strong></span>されていくと見ています。<br />
<br />
パソコンでの進化を振り返るとわかりやすいのですが、かつてはメール、ドキュメント、カレンダー、写真加工、地図に辞典などなど、それぞれで別々のソフトウェアを使っていたと思います。それが今では、メールやドキュメント編集、カレンダーもweb上で管理できるし、写真加工だって簡単なものならweb上で可能です。地図や辞典をわざわざソフトウェアとして買っている人は今や皆無といえます。<br />
<br />
同じ流れがスマートフォンでも必ず来ます。今はまだまだスマートフォンの性能が低いので、それぞれの専用アプリというものがないとどうしても挙動が遅くなってしまいますが、それも3年もすれば今のパソコン並みの性能のスマートフォンが出ておかしくありません。実際、iPhone4SのCPUは既にデュアルコアですし、<a href="http://gpad.tv/topic/motorola-samsung-lg-2012-quadcore-smartphone/" target="_blank">来年にはクアッドコアのスマートフォンが出るという噂</a>もあります。<br />
<br />
ただ、現状ではアプリの存在は無視できないし、むしろアプリの方がいろいろとメリットの面も確かにあります。それはまた、別の機会に比較ができればと思います。<br />
<br />
==========================================<br />
<br />
<br />
今日は、スマートフォンで（PC向けのリッチな）webを観閲するという需要についてお伝えしました。]]>
    </content>
</entry>

<entry>
    <title>Googleがスマートフォン向けGooglebot-Mobileの導入を発表、今後の動向は？</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/googlegooglebot-mobile.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.13</id>

    <published>2011-12-20T05:42:29Z</published>
    <updated>2012-01-02T13:22:41Z</updated>

    <summary>Googleがついに、スマートフォン向けGooglebot-Mobileの導入を発表しました。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    <category term="google" label="Google" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="seo" label="SEO" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[<p><b>Googleがついに、スマートフォン向けGooglebot-Mobileの導入を発表しました。</b><br /><br /></p><p></p>]]>
        <![CDATA[<p><b>Googleがついに、スマートフォン向けGooglebot-Mobileの導入を発表しました。</b><br /><br /></p><div>
<span style="font-size: large;">日本語公式発表</span></div><br />
<a href="http://googlewebmastercentral-ja.blogspot.com/2011/12/googlebot-mobile.html" target="_blank">スマートフォン版 Googlebot-Mobile の導入について</a><br /><a href="http://googlewebmastercentral-ja.blogspot.com/2011/12/googlebot-mobile.html">http://googlewebmastercentral-ja.blogspot.com/2011/12/googlebot-mobile.html</a><br /><span style="font-size: large; ">英語公式発表</span><br /><br />
<a href="http://googlewebmastercentral.blogspot.com/2011/12/introducing-smartphone-googlebot-mobile.html">Introducing smartphone Googlebot-Mobile</a><br />
<a href="http://googlewebmastercentral.blogspot.com/2011/12/introducing-smartphone-googlebot-mobile.html">http://googlewebmastercentral.blogspot.com/2011/12/introducing-smartphone-googlebot-mobile.html</a><br /><br />
<div><br /></div><div>
<span style="font-size: large;">言及してあるブログ</span></div><br />
<ul><br />
<li><a href="http://www.suzukikenichi.com/blog/google-introduces-smartphone-googlebot-mobile/">【公式アナウンス】Google、スマートフォン版Googlebot-Mobileを導入　</a><a href="http://www.suzukikenichi.com/blog/google-introduces-smartphone-googlebot-mobile/">http://www.suzukikenichi.com/blog/google-introduces-smartphone-googlebot-mobile/</a></li>
<li><a href="http://www.sem-r.com/news-2011/20111216003906.html" target="_blank">米Google、スマートフォンサイト専用のクローラを発表　Googlebot-Mobile</a>　<a href="http://www.sem-r.com/news-2011/20111216003906.html">http://www.sem-r.com/news-2011/20111216003906.html</a></li>
<li><a href="http://blog.h2o-space.com/post/14341300442">スマホ向け Googlebotが発表。スマホのSEOが変化の時へ</a>　<a href="http://blog.h2o-space.com/post/14341300442">http://blog.h2o-space.com/post/14341300442</a>　</li>
<li><a href="http://ameblo.jp/mobken/entry-11108570213.html">スマートフォン向けのクローラー</a>　 <a href="http://ameblo.jp/mobken/entry-11108570213.html">http://ameblo.jp/mobken/entry-11108570213.html</a></li></ul><div>
などなど。<br /><br />
スマートフォンが急速に普及し、スマートフォン対応サイトも増えている中で、</div><div>検索結果がPCと同じということにGoogleが限界を感じてきたのでしょう。<br /><br />
<div><div><div>いかにスマートフォンがPCサイトを表示できるとはいえ、</div><div><ol><br />
<li>画面の大きさ（小ささ）</li>
<li>Flashの使用制限</li>
<li>回線速度の違い</li></ol><div>
などから考えて、<span style="background-color: #FFFF99;"><strong>PCサイトを表示させるのは無理がある</strong></span><span style="background-color: white;">といえますから</span>ね。<br /><br /><br />
ガラケーのサイト流入がQRコードなどに依っていた反面、スマートフォンのサイト流入はPCと同様<span style="background-color: yellow;"><strong><span style="background-color: #FFFF99">検索に大いに依っています</span></strong></span>。<br />
<br />
ガラケーよりもPCに近い表現力をスマートフォンは持つので、<br /><br />
今後、ガラケー時代のようにスマートフォンに特化したSEO対策が出現する確率は低いとは思われますが、</div><div><span style="background-color: yellow;">
		<strong><span style="background-color: #FFFF99">スマートフォンサイトのSEO需要</span></strong></span>はますます高まっていくでしょう。</div><br />
</div><br />
</div><br />
</div><br />
</div><p></p>]]>
    </content>
</entry>

<entry>
    <title>スマートフォンってどれくらい普及しているのかを統計資料でまとめてみた</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/post_3.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.12</id>

    <published>2011-12-19T05:30:35Z</published>
    <updated>2012-01-02T11:18:55Z</updated>

    <summary>「詰まるところ、スマートフォンが実際にはどれくらい普及しているのか」
というところが分かるソースをまとめてみました。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    <category term="マーケティング" label="マーケティング" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="統計資料" label="統計資料" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[<p><a href="http://www.zaikei.co.jp/article/20111205/88645.html" target="_blank">2011年のヒット商品番付で西の横綱に選ばれるほどのスマートフォン</a>ですが、</p><p>
<i>実際にはどれくらい普及しているの？</i></p><p>というところが分かるソースをまとめてみました。</p><div><br /></div>]]>
        <![CDATA[<p><a href="http://www.zaikei.co.jp/article/20111205/88645.html" target="_blank">2011年のヒット商品番付で西の横綱に選ばれるほどのスマートフォン</a>ですが、</p><p>
<i>実際にはどれくらい普及しているの？</i></p><p>というところが分かるソースをまとめてみました。</p><div><br />
<div><br /></div><div>
<span style="background-color: white; font-weight: bold;"><span style="font-size: large;">スマートフォン出荷台数・比率</span></span></div><div><span style="background-color: white; font-weight: bold;"><span style="font-size: large;">の推移・予測</span></span></div><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img border="0" src="http://www.m2ri.jp/data/news/image/20110707/1310025295-1s.jpg" style="margin-left: auto; margin-right: auto;" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="background-color: #999999;">ガラケー</span>：<span style="background-color: yellow;">スマートフォン</span><span style="background-color: #eeeeee; color: #444455; font-family: 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Lucida Grande', sans-serif; line-height: 16px; text-align: left;">（出典はMM総研　</span><a href="http://www.m2ri.jp/newsreleases/main.php?id=010120110707500">http://www.m2ri.jp/newsreleases/main.php?id=010120110707500</a><span style="background-color: #eeeeee; color: #444455; font-family: 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Lucida Grande', sans-serif; line-height: 16px; text-align: left;">）</span></td></tr>
</tbody></table><br /><br /><div>
新規契約台数の推移です。「新しく携帯買っている人はどっちを選んでる？」ということ。</div><div><br />
<span style="background-color: #FFFF99;"><strong>スマートフォンの出荷台数の急激な伸びが一目瞭然</strong></span>ですね。</div><br />
<div>2011年度で全体の45％がスマートフォンになっています。</div><div><br />
しかもこれはあくまで日本全国での統計です。</div><div><br /></div><div>都心部に限っていえば出荷台数は過半を優に超えているでしょう。</div><div><br /></div><div><br />
<span style="font-size: large;"><b>スマートフォン契約数・比率の推移・予測</b></span></div><br /></div><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img border="0" src="http://www.m2ri.jp/data/news/image/20110707/1310025295-2s.jpg" style="margin-left: auto; margin-right: auto;" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="background-color: #999999;">ガラケー</span>：<span style="background-color: magenta;">スマートフォン</span><br /><br />
<span style="background-color: #eeeeee; color: #444455; font-family: 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Lucida Grande', sans-serif; line-height: 16px; text-align: left;">（出典はMM総研　</span><a href="http://www.m2ri.jp/newsreleases/main.php?id=010120110707500">http://www.m2ri.jp/newsreleases/main.php?id=010120110707500</a><span style="background-color: #eeeeee; color: #444455; font-family: 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Lucida Grande', sans-serif; line-height: 16px; text-align: left;">）</span></td></tr>
</tbody></table><div><br />
こちらは契約数の比率。つまり「結局、今どれくらいの人が使っている？」ということ。</div><div><br />
スマートフォンって色々話題にはのぼっていますが、</div><div><br /></div><div>使われている比率は<span style="background-color: yellow;"><strong><span style="background-color: #FFFF99">まだガラケーの方が圧倒的に多い</span></strong></span>んですね。</div><div><br />
<b style="font-size: x-large;">【番外編】ボーナス商戦におけるITデジタル家電の需要変動</b></div><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center; height: 19px;"><br /></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><img alt="asa_mm_01.jpg" src="http://www.berryinc.jp/smartphone_blog/asa_mm_01.jpg" width="590" height="265" class="mt-image-left" style="margin-left: auto; margin-right: auto;" /><br />スマートフォンは<span style="background-color: #b6d7a8;">黄緑</span><br /><br />
<span style="background-color: #eeeeee; color: #444455; font-family: 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Lucida Grande', sans-serif; line-height: 16px; text-align: left;">（出典はMM総研　</span><a href="http://www.m2ri.jp/newsreleases/main.php?id=010120111214500">http://www.m2ri.jp/newsreleases/main.php?id=010120111214500</a><span style="background-color: #eeeeee; color: #444455; font-family: 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Lucida Grande', sans-serif; line-height: 16px; text-align: left;">）</span></td></tr>
</tbody></table><div><br />
これは、11年冬のボーナスで何が欲しいかを聞いた結果。</div><div>10年夏には1.8％しか欲しいと回答していなかったのが、今では10.6％と<span style="background-color: yellow;"><span style="background-color: #FFFFFF">約10倍に伸びています</span></span>。</div><div>スマートフォン人気が順調に伸びている結果であり、</div><div>身近で毎日使うものだけに<strong><span style="background-color: #FFFF99">欲しいと思っている人は多い</span></strong>でしょうね。</div><br />
<div><br /></div><div>
<span style="font-size: large;"><b><font style="font-size: 1.25em; ">産業分野別　スマートフォン導入率</font></b></span></div><br />
<div style="text-align: center"><img alt="news084.jpg" src="http://www.berryinc.jp/smartphone_blog/news084.jpg" width="400" height="448" style="margin-left: auto; margin-right: auto;" /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>

<tr><td class="tr-caption" style="text-align: center;">（出典はIDC Japan　<a href="http://www.idcjapan.co.jp/top.html">http://www.idcjapan.co.jp/top.html</a>）</td></tr></tbody></table>
<div><br />
<span style="background-color: #FFFF99;"><strong>企業の14.6％がスマートフォンを導入しており、31.2％が導入に前向き</strong></span>であるという調査結果に。</div><br />
<div><br /></div><div>
スマートフォンで資料を作ったり長文のメールを打つのはつらいですが、</div><div><ul><li>受信メールをチェックして振り分けたり</li><li>プレゼンの内容を確認したり</li><li>営業先への行き方を調べたり</li><li>カレンダーで予定を確認したり</li></ul><div>
することは十分可能です。</div><br />
</div><div><span style="font-size: large;"><font style="font-size: 1.25em; "><b>【ちなみに世界では】Global smartphone penetration at 27%</b></font></span></div><br />
<div><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img src="http://www.wired.com/images_blogs/gadgetlab/2011/11/global-smartphone-adoption.jpg" style="margin-left: auto; margin-right: auto;" width="500" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">スマートフォンは<span style="background-color: #ea9999;">赤</span><br /><br />
（出典は Vision Mobile　<a href="http://www.visionmobile.com/">http://www.visionmobile.com/</a>）</td></tr>
</tbody></table><br />
<div>世界的な普及率でいうと、<span style="background-color: #FFFF99;"><strong>27％がスマートフォンを使っている</strong></span>という調査結果もあります。</div><div>アメリカでは63％、欧州では51％と、過半を超えています。</div><div>世界では日本に先駆けてスマートフォンが普及しているようです。</div><div>==================================================</div><div>結論として、</div><br />
<div><i>スマートフォンがまだまだ少数派であることは事実だが、急速にシェアを伸ばしつつある</i></div><div><br />
<i>一部のギークのみ使う代物だったのが、今や一般層に浸透している</i></div><div>ということがいえると思います。</div><br />
<div><br /></div><div>
スマートフォン対策の一つの参考にしてみてください。</div><div><br /></div><div><br />&nbsp;参照<ol>
<li><a href="http://plusd.itmedia.co.jp/lifestyle/articles/1112/14/news137.html">http://plusd.itmedia.co.jp/lifestyle/articles/1112/14/news137.html</a></li>
<li><a href="http://www.itmedia.co.jp/news/articles/1112/13/news084.html">http://www.itmedia.co.jp/news/articles/1112/13/news084.html</a></li>
<li><a href="http://techcrunch.com/2011/11/28/its-still-a-feature-phone-world-global-smartphone-penetration-at-27/">http://techcrunch.com/2011/11/28/its-still-a-feature-phone-world-global-smartphone-penetration-at-27/</a><br />
</li><br />
</ol></div><div><br /></div><p></p><div><br /></div>]]>
    </content>
</entry>

<entry>
    <title>jQuery Mobileを書くうえで理解必須！「data-roleとは」</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/jquery_mobiledata-role.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.11</id>

    <published>2011-12-19T05:29:02Z</published>
    <updated>2012-01-11T07:35:05Z</updated>

    <summary>jQuery Mobileに必須の概念「data-role」は、単に市町村のようなものです。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    <category term="javascript" label="JavaScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jquerymobile" label="jQuery Mobile" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[<p><a href="http://www.berryinc.jp/smartphone_blog/jqueryjquery_mobile.html" target="_blank">前の記事</a>で、</p><div class="style1">
	<strong>そもそもjQuery Mobileとは何で、どういう概念のモノなのだ</strong></div><div class="style1">という点についてお話をしたかと思いますが、</div><div>
今回は「どうやって使うのだ」ということについて書き進めていきます。<br />
今日はjQuery Mobileを指定する上で欠かせない概念、<u><span style="font-size: medium; background-color: #FFFF99"><strong>data-role</strong></span></u>についてです。<br /></div><p></p>]]>
        <![CDATA[<p><b style="font-size: 1.25em; ">どこにどのようにjQueryを指示するかを書き込む</b></p><div>
	基本的には、&lt;div&gt;タグや&lt;a&gt;タグなどに<b><span class="Apple-style-span" style="background-color: rgb(255, 255, 153); font-size: large; ">data-role</span></b>をいう要素を指定します。<br />
data-roleというのは何かというと、読んで字の如く<span class="Apple-style-span" style="background-color: yellow;"><strong><span style="background-color: #FFFF99">「データの役割」</span></strong></span>ですね。</div>
<div><br />
HTML4からHTML5に移行する段階でも<br />
いろいろとソースが直感的で分かりやすいものになっていますが、data-roleも</div><div>
<b style="background-color: #FFFF99;">「こいつを見れば、全体に占めるそこのデータの役割がだいたい分かる」</b></div><div>
ようになっています。</div>
（上の例でいっても、「ここはheaderだな」とか「ここはcontentだな」というのが分かりますよね）<br /><br />
<h3><font style="font-size: 1.25em; "><b>data-roleを市町村に例えて表現すると</b></font></h3>
&nbsp;data-roleというのを市町村に考えると分かりやすいです。<br />
<div><br />
いわば、pageは県です<br />
下層に</div><div>
<ul><br />
<li>「header市」</li>
<li>「content市」</li>
<li>「footer市」</li></ul></div><div>
があります。</div><div><br />
page県の中に、header市、content市、footer市が存在します。<br /><br />
	<span class="Apple-style-span" style="background-color: #cccccc;">&lt;body&gt;&nbsp;</span></div><div>
<span class="Apple-style-span" style="background-color: #cccccc;">　&lt;div data-role="page"&gt;&nbsp;</span></div><div>
<span class="Apple-style-span" style="background-color: #cccccc;">　　&lt;div data-role="header"&gt; ここがheader市です &lt;/div&gt;&nbsp;</span></div><div>
<span class="Apple-style-span" style="background-color: #cccccc;">　　&lt;div data-role="content"&gt; ここがconten市です &lt;/div&gt;&nbsp;</span></div><div>
<span class="Apple-style-span" style="background-color: #cccccc;">　　&lt;div data-role="footer"&gt; ここがfooter市です &lt;/div&gt;&nbsp;</span></div><div><span class="Apple-style-span" style="background-color: #cccccc;">　&lt;/div&gt; <br />&lt;/body&gt;</span><br /><br /></div><div>&nbsp;それで、jQuery Mobileって便利な部分があって、</div><div><span class="Apple-style-span" style="font-size: large; background-color: rgb(255, 255, 153); "><strong>jQuery Mobileは一つのhtmlの中にたくさんのpageが書ける</strong></span><span style="font-size: large; background-color: rgb(255, 255, 153); "><strong>んです。</strong></span></div><div>&lt;body&gt;という国の中にたくさんの県（page）がおけちゃう、というわけです。</div><div><ul><li>niigataという県（page）も</li><li>yamagataという県（page）も</li><li>akitaという県（page）も</li></ul></div><div>
一つのhtmlの中に一緒におけちゃうんです。<br /></div><div><br /></div><div>
<span class="Apple-style-span" style="background-color: #cccccc;">　&lt;div data-role="page" id="niigata"&gt;niigata県です&lt;/div&gt;<br />　&lt;div data-role="page" id="yamagata"&gt;yamagata県です &lt;/div&gt;<br />　&lt;div data-role="page" id="akita"&gt;akita県です&lt;/div&gt;<br />&lt;/body&gt;</span><br /></div><div>
このように、同じdata-roleを一つのhtmlにて指定する場合でも、</div><div>
<span class="Apple-style-span" style="background-color: #FFFF99;"><strong>idを使って区別してあげればたくさんpageを設定できます。</strong></span><br /><br />
</div><br />
<h3><font style="font-size: 1.25em; "><b>どうして一つのhtml内で複数のページを作るの？</b></font></h3><div>
それはサイト内で「いかにも<span class="Apple-style-span" style="background-color: #FFFF99;"><strong>スマートフォンっぽい挙動</strong></span>」を実現するために好都合だからです。<br />
例えばページ遷移一つとっても、普通なら一回ページが真っ白になって、それから次のページが少しずつ読み込まれる......という形かと思います。</div><div>そうではなく、</div><div><ul>
<li><b>リンクをタップしたら右からページが出てくる</b></li>
<li><b>下からページが切り替わる</b></li></ul></div><div>
などというのはスマートフォンのアプリを操作しているような感覚ですよね。</div><div>
それをサイト上で実現するのがjQuery Mobileで、</div><div><span class="Apple-style-span" style="background-color: yellow;">
	<span style="font-weight: bold; background-color: rgb(255, 255, 153); ">ページを遷移する時にもたつかないように、予め複数のページを読み込んでおく</span></span></div><div>
と都合がいいので、一つのhtmlで複数のページを作れるようにしてあるんですね。</div><div><br />
==============================================</div><div><br />
今日は</div><div><ol>
<li>jQueryはどうやって指定をするのだ？</li>
<li>data-roleとはどういうものなのだ？</li>
<li>一つのhtml内にたくさんpageを書けるとはどういうことだ？</li>
<li>どうして複数のpageを書く必要があるのだ？</li></ol>
ということを説明しました。<br />
</div><br />

<br />
参照<br /><br /><ol>
		<li><a href="http://ascii.jp/elem/000/000/607/607366/">http://ascii.jp/elem/000/000/607/607366/</a></li>
<li><a href="http://billboardtop100.net/BLOG/2011/02/jquery-mobile-mobile-page-structure-header-content.html">http://billboardtop100.net/BLOG/2011/02/jquery-mobile-mobile-page-structure-header-content.html</a><br />
</li><br />
</ol><p></p>]]>
    </content>
</entry>

<entry>
    <title>jQueryとは？jQuery Mobileとは？何も分からない人がまず読むべきブログ</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/jqueryjquery_mobile.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.10</id>

    <published>2011-12-15T05:27:47Z</published>
    <updated>2011-12-22T14:15:46Z</updated>

    <summary>jQueryという言葉を初めて聞いた人がまず読むべき記事と自負しています。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    <category term="javascript" label="JavaScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jquerymobile" label="jQuery Mobile" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[<p>今、jQuery Mobileというものを使ってスマートフォンサイトを作成しているのですが、</p><p>「jQueryとは」　や　「jQuery　使い方」などと検索しても、</p><p>なかなか分かりやすいサイトが出てこなかったり、肝心なところがすっぽり抜け落ちていたりしたので、ここにまとめて書こうかと思います。</p><div>
自分の勉強も兼ねて。</div><p></p>]]>
        <![CDATA[<p>今、jQuery Mobileというものを使ってスマートフォンサイトを作成しているのですが、</p><p>「jQueryとは」　や　「jQuery　使い方」などと検索しても、</p><p>なかなか分かりやすいサイトが出てこなかったり、肝心なところがすっぽり抜け落ちていたりしたので、ここにまとめて書こうかと思います。</p><div>
自分の勉強も兼ねて。<br /></div><div><h3><font size="2"><br /></font>
<b><span class="Apple-style-span" style="font-size: large; ">jQueryって何だ？</span></b></h3></div><div>「jQueryとは」などで検索すると、だいたいの説明が</div><div><p class="style1"><span style="background-color: #FFFF99"><strong>「jQueryとは、JavaScriptのライブラリである」</strong></span></p></div><div>て書いてあるんですね。</div>
<div><br />
しかし、そもそもプログラミングとかサイト制作とかしたことのない人間からしたら、</div><div><i>ライブラリって何だよ(怒)</i>と感じられると思います。図書館じゃあないだろうし。</div><div><br />
<span class="Apple-style-span" style="background-color: #FFFF99;"><strong>ライブラリというのは、先人の残してくれたコードの記録</strong></span>です。こいつを参照すれば、あなたは同じコードを時間かけて書かなくていいということです。</div><br />
<blockquote class="tr_bq" style="background-color: #EEEEEE"><br />
	<strong>よっしゃ、これでサイト上で〇〇できるようになったぞ！<br />
ふー、このコーディング大変だったなー。<br />
うーん、自分のサイトだけに留めておくのはもったいないなー。<br />
じゃあ、皆にも使ってもらえるように、このコードを一般に公開しよう！</strong></blockquote>
<div><br />
	というのがライブラリです。</div><div><br />
小説や詩歌だったら、一部でもパクったら厳しく罰せられますが、</div><div>ライブラリは使ってもらうことが目的なので、どしどしパクッて自分のサイトで使ってしまいましょう。</div><div><br /></div><div>
結論、jQueryというのは、</div><div><br /></div><div>
<i><span class="Apple-style-span" style="color: #cc0000; font-size: large;">JavaScriptでいろいろと便利なコードをたくさん書いておいたから、</span></i></div><div><i><span class="Apple-style-span" style="color: #cc0000; font-size: large;">皆でこのコード使ってサイトを見やすいものにしてね！</span></i></div><div><br /></div><div>
というものです。</div><br />
<div>JavaScriptのライブラリは他にもたくさんあるのですが、<span class="Apple-style-span" style="background-color: rgb(255, 255, 153); "><strong>最も人気があり一般的なライブラリがjQuery</strong></span>です。</div><div><br /><b><span class="Apple-style-span" style="font-size: large; ">jQuery Mobileって何だ？</span></b></div><div><br /></div><div>jQuery Mobileというのは、jQueryのスマートフォンサイト向けライブラリとなります。</div><div><br />
長らく開発が続いていましたが、2011/11/18に正式版がリリースされています。この辺の詳しい情報は他のサイトにもいろいろ載っているので、そちらを参照してください。<br /></div><div><h3><span class="Apple-style-span" style="font-size: large; "><br /></span></h3><h3><span class="Apple-style-span" style="font-size: large; "><b>どうやったら使えるんだ？</b></span></h3></div><div>一番の疑問はここですよね。どうやって自分のサイトにコーディングしたら使えるんだ、と。</div><div>jQueryを使うには二つの方法があります。</div><div><br /></div><div><ol><li>jQueryのファイを公式サイトからダウンロードしてきて、自分のサーバーにそいつをアップして、読み込ませる。</li><li>Queryのファイルを公式サイトから直接読み込ませる。（CDN）</li></ol><div>つまり、<span class="Apple-style-span" style="background-color: #FFFF99;"><strong>外部からファイル（これがライブラリ。先人の知恵）を読みこませる</strong></span>ことで、サイト上で実装できるわけですね。</div></div><div><br /></div><div>後者の方法をCDNともいいます。CDN（Contents Delivery Network）とは名前の通り、</div><div>コンテンツをいろんな人に直接デリバリー（送り届ける）という意味で、</div><div>いわば普通のwebもCDNといえます。あまり難しく考える必要はありません。</div><div><br /></div><div>前者でも良いのですが</div><div><ol>
<li>jQueryのために自分たちのサーバーを使うのももったいない</li><li>に最新版のjQueryを使いたい</li></ol>&nbsp;ので、後者を使って直接読み込ませます。</div><div><br />
読み込ませる方法は、他のJavaScriptやCSSと同様、<span class="Apple-style-span" style="background-color: #FFFF99;"><strong>&lt;head&gt;～&lt;/head&gt;内に「読み込め！」という指示を書いておきます</strong></span>。下記のHTMLで、<b><i>太字</i></b>の部分が「読み込め！」という指示です。</div><br />
<div>&lt;!DOCTYPE html&gt;</div><div>&lt;html&gt;</div><div>&lt;head&gt;</div><div>
<strong><em><span style="background-color: #EEEEEE">&lt;link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" /&gt;</span></em></strong></div><div>
	<strong><em><span style="background-color: #EEEEEE">&lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;</span></em></strong></div><div>
	<strong><em><span style="background-color: #EEEEEE">&lt;script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"&gt;&lt;/script&gt;</span></em></strong></div><div>&lt;title&gt;タイトル&lt;/title&gt;</div><div>&lt;/head&gt;</div><div>&lt;body&gt;</div><div>&lt;/body&gt;</div><div>&lt;/html&gt;</div>
<div><br />
<span class="Apple-style-span" style="font-size: x-small; ">（参照　→　</span><a href="http://jquerymobile.com/download/" style="font-size: small;">http://jquerymobile.com/download/</a><span class="Apple-style-span" style="font-size: x-small;">　の　</span><span class="Apple-style-span" style="font-size: x-small;">Latest and daily builds　に書いてあります。</span><span class="Apple-style-span" style="font-size: x-small;">）</span></div><div><br />
これで、とりあえずjQueryを使う下準備は整いました。</div><div>次は、どこにどのように使うかを指定するだけです。</div><div><br /></div><div>明日は指定して実装するところまで書きますね。</div><div>このブログは技術を紹介するものではないのでそこまで詳しくはやりませんが、</div><div>jQueryというものが少しでも身近に感じてもらえたら幸いです。</div><p></p>]]>
    </content>
</entry>

<entry>
    <title>利用シーンからLPの画面構成を考える【銀行】</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/lp.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.8</id>

    <published>2011-12-14T05:22:35Z</published>
    <updated>2011-12-22T14:13:07Z</updated>

    <summary>銀行のポータルサイトがスマートフォンで見られる状況というのはどのようなものか。それに対してスマートフォンサイトはどのように設計されているのか。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    <category term="サイト事例" label="サイト事例" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[<p>今回検証するスマホサイトは、三井住友銀行のコーポレートサイトです。<br /><br />
<b><a href="http://www.smbc.co.jp/smartphone/" target="_blank">三井住友銀行スマートフォンサイト</a>　<a href="http://www.smbc.co.jp/smartphone/">http://www.smbc.co.jp/smartphone/</a></b><br /><br />
<br /><br />
<span class="Apple-style-span" style="font-size: large;"><strong>■利用シーンを意識する</strong></span></p>
<p></p>]]>
        <![CDATA[<p>今回検証するスマホサイトは、三井住友銀行のコーポレートサイトです。<br /><br />
<b><a href="http://www.smbc.co.jp/smartphone/" target="_blank">三井住友銀行スマートフォンサイト</a>　<a href="http://www.smbc.co.jp/smartphone/">http://www.smbc.co.jp/smartphone/</a></b><br /><br />
<br /><br />
<span class="Apple-style-span" style="font-size: large;"><strong>■利用シーンを意識する</strong></span><br /><br />
スマートフォン（もしくはモバイル）を使用する場面として、<br /><br />
<b>「緊急」</b>であることが挙げられます。<br /><br />
<br /><br />
出先などのパソコンが使えない状況で<br />「三井住友銀行のサイトを見たい」</p><p>と欲した動機としては、</p><br />
<ol><br />
	<li><strong><span style="background-color: #FFAA99">今どれくらい預金が残っているか知りたい。</span></strong></li><br />
	<li><strong><span style="background-color: #FFAA99">手元に現金がない！ATMで現金を引き出したい。</span></strong></li><br />
</ol><br />
<div><br />
などが考えられるでしょう。</div><br />
<div><br />
なので三井住友銀行のスマートフォンサイトは、<br /><br />
まさにそうした<span style="background-color: #FFFF99">動機を真っ先に解消してくれる画面設計</span>（広くいうとUI）となっています。<br /></div><br />
<div><br />
「三井住友銀行」と検索し、トップページにアクセスすると、PCサイトとともに</div><br />
<blockquote class="tr_bq" style="background-color: #F0F0F0"><br />
<b><span class="Apple-style-span" style="color: #38761d;">スマートフォン専用サイトはこちら</span></b></blockquote><br />
というナビゲーションが上部に表示されます。<br /><br />
<br /><br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/--oN9WV2m88g/TtdO8yW2xFI/AAAAAAAAGIY/6HWXR2smLhc/s1600/IMG_0471.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="http://2.bp.blogspot.com/--oN9WV2m88g/TtdO8yW2xFI/AAAAAAAAGIY/6HWXR2smLhc/s320/IMG_0471.PNG" width="213" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">PCサイトと共に、<br /><br />
上部にスマートフォン専用サイトへのナビゲーションが<br /><br />
表れる</td></tr>
</tbody></table><br />
<div class="separator" style="clear: both; text-align: left;"><br />
<a href="http://www.smbc.co.jp/smartphone/index.html" target="_blank">スマートフォン専用サイト</a>にアクセスしてみると、</div><br />
<br /><br />
<div class="separator" style="clear: both; text-align: center;"><br />
<a href="http://3.bp.blogspot.com/-QchEVNpetGE/TtdO9lihDzI/AAAAAAAAGIg/lE-f31HPwm8/s1600/IMG_0472.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-QchEVNpetGE/TtdO9lihDzI/AAAAAAAAGIg/lE-f31HPwm8/s320/IMG_0472.PNG" width="213" /></a></div><br />
<div class="separator" style="clear: both; text-align: left;"><br />
これを見て分かるのは、</div><br />
<ul><br />
	<li><span style="font-weight: bold; background-color: #FFAA99">キャッシュカードで</span><b><span style="background-color: #FFAA99">残高照会</span></b></li><br />
	<li><b><span style="background-color: #FFAA99">店舗・ATM検索</span></b></li><br />
</ul><br />
<div><br />
といった、<br /><br />
<span style="color: black">まさに</span><span class="Apple-style-span" style="color: black;"><b><span style="background-color: #FFFF99">今やりたいことに対して目立つボタンでしっかりナビゲーション</span></b></span><span style="color: black">されていること。</span><br /></div><br />
<div><br />
<br /><br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/--zbfgePkitg/TtdSilkQtLI/AAAAAAAAGJI/v7cPqPPh6PU/s1600/a.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="http://2.bp.blogspot.com/--zbfgePkitg/TtdSilkQtLI/AAAAAAAAGJI/v7cPqPPh6PU/s320/a.jpg" width="213" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">赤枠で示した部分はランディングするとすぐに目に入る<br /><br />
利用者のニーズに適したコンテンツを届けているといえる。</td></tr>
</tbody></table><br />
<br /><br />
<span class="Apple-style-span" style="font-size: large;">■</span><span class="Apple-style-span" style="font-size: large;">スマートフォンサイトならではのナビゲーション</span><br /><br />
1.<a href="https://direct.smbc.co.jp/aib/aibgsjsw1k12.jsp" target="_blank"><span style="background-color: #FFFF99">キャッシュカードで残高照会</span></a><span style="background-color: #FFFF99">では、</span><a href="http://d.hatena.ne.jp/saladdays/20100906/1283770498" style="font-family: monospace; white-space: pre-wrap;" target="_blank"><span style="background-color: #FFFF99">HTML5のinput type="tel"</span></a><span style="background-color: #FFFF99">を使っている</span>ため、<br /><br />
店番号を入力しようとするとテンキーが表示されるようになっています。<br /><br />
<br /><br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-GZZO4JDgKI4/TtdVtB69ISI/AAAAAAAAGJY/MJpquu4Jb0U/s1600/IMG_0478.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="http://4.bp.blogspot.com/-GZZO4JDgKI4/TtdVtB69ISI/AAAAAAAAGJY/MJpquu4Jb0U/s320/IMG_0478.PNG" width="213" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">数字をテンキーで入力できる</td></tr>
</tbody></table><br />
<div class="separator" style="clear: both; text-align: left;"><br />
2.スマートフォンサイトから離れ、<br /></div><br />
<div class="separator" style="clear: both; text-align: left;"><br />
PCサイトへとジャンプするリンクには、<br /></div><br />
<div class="separator" style="clear: both; text-align: left;"><br />
「PC」のアイコンをつけています。<br /></div><br />
<br /><br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-QXzl7Gqrfp0/TtnhIFcQGLI/AAAAAAAAGKQ/gAs4RgQ3ATo/s1600/b.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="http://2.bp.blogspot.com/-QXzl7Gqrfp0/TtnhIFcQGLI/AAAAAAAAGKQ/gAs4RgQ3ATo/s320/b.jpg" width="221" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">赤枠の部分がPC表示のアイコンだ</td></tr>
</tbody></table><br />
<div class="separator" style="clear: both;"><br />
こうした<span style="background-color: #FFFF99">スマートフォンユーザのためのナビゲーション</span>が、<br /></div><br />
<div class="separator" style="clear: both;"><br />
サイトをぐっと使いやすいものにしているんですね。<br /></div><br />
<div class="separator" style="clear: both; text-align: left;"><br />
スマートフォンならではの利用シーンを意識して、画面設計を組み立ててみてください。</div><br />
</div><br />
<p></p>]]>
    </content>
</entry>

<entry>
    <title>【事例】スマートフォンでもJavaScriptだけで画像を切り替える</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/javascript.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.7</id>

    <published>2011-12-13T05:21:12Z</published>
    <updated>2011-12-22T14:12:10Z</updated>

    <summary>企業サイトのトップページで、画面が入れ替わる演出はPCではよく見られます。
スマートフォンのサイトでもJavaScriptを用いれば簡単に表現できます。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    <category term="javascript" label="JavaScript" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[<div class="separator" style="clear: both; text-align: left;">
今日検証したのは、<a href="http://panasonic.jp/spn/index.html">パナソニック</a><span class="Apple-style-span" style="text-align: -webkit-auto;">のスマートフォンサイトです。</span></div>]]>
        <![CDATA[<div class="separator" style="clear: both; text-align: left;">
今日検証したのは、<a href="http://panasonic.jp/spn/index.html">パナソニック</a><span class="Apple-style-span" style="text-align: -webkit-auto;">のスマートフォンサイトです。</span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-ZFUkQ6QqPeY/TtSHvc5XGEI/AAAAAAAAGHU/DsUyW1bXf2A/s1600/%25E5%2586%2599%25E7%259C%259F+11-11-29+14+54+29.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="http://3.bp.blogspot.com/-ZFUkQ6QqPeY/TtSHvc5XGEI/AAAAAAAAGHU/DsUyW1bXf2A/s320/%25E5%2586%2599%25E7%259C%259F+11-11-29+14+54+29.png" width="213" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">トップページ</td></tr>
</tbody></table>
実は、中心部の画像部分は、一定時間（5～6秒程度）で入れ替わります。<br />
<br />
<span style="background-color: yellow;"><strong>
<span style="background-color: #FFFF99">徐々に表れ、次第に消えていく</span></strong></span>という演出を取っています。<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
	<a href="http://4.bp.blogspot.com/-KP4WWb8VY0Q/TtSaihKBKnI/AAAAAAAAGIM/BkbTZGdD168/s1600/図形描写3.jpg">
	<img border="0" height="294" src="http://4.bp.blogspot.com/-KP4WWb8VY0Q/TtSaihKBKnI/AAAAAAAAGIM/BkbTZGdD168/s320/図形描写3.jpg" width="320" /></a></div>
<br />
<br />
しかし、iPhoneでサイトを表示させるには、Flashを使用することはできません。<br />
では、このアニメーションはどのように実現しているのでしょうか。<br />
<br />
<br />
該当箇所のソースコードを見てみましょう。<br />
<br />
<blockquote class="tr_bq" style="background-color: #F0F0F0">
&lt;div id="sectionTopImg"&gt;<br />
&lt;h1&gt;&lt;a href="javascript:void(0);"&gt;&lt;img src="./common/img/index.jpg" width="240" height="87"&gt;&lt;/a&gt;&lt;/h1&gt;<br />
&lt;!--/sectionTopImg --&gt;&lt;/div&gt;</blockquote>
ここには特に、それらしき記述は見当たりません。<br />
そこで、<i style="text-decoration: underline;">sectionTopImg </i>について記述されている<br />
<blockquote class="tr_bq" style="background-color: #F0F0F0; font-size: medium;">
<a href="http://panasonic.jp/spn/common/js/topImg.js" target="_blank">&lt;script type="text/javascript" src="./common/js/topImg.js"&gt;&lt;/script&gt;</a></blockquote>
<br />
に飛んでみます。ここに全ての答えが書いてありました。<br />
<span class="Apple-style-span" style="font-size: x-small;">（JavaScriptの詳しい説明はここでは省きます。）</span><br />
<br />
<span class="Apple-style-span" style="font-size: large;"><b>スマートフォンサイトでも、<span style="background-color: #FFFF99"><br />JavaScriptを使えば簡単なアニメーション（画像の入れ替わり）は可能<br />
</span>です。<br /></b></span><br />
<ol>
	<li><em><span style="background-color: #FFAA99"><strong>多くの商品・サービスを認知させたい</strong></span></em></li>
	<li><em><span style="background-color: #FFAA99"><strong>ランディングページに動きを持たせたい</strong></span></em></li>
</ol>
<p>&nbsp;</p>
<div>
などにおいて、有効なのではないでしょうか。<br />
<br /></div>
<div>
PCサイトでは一般的な手法だけに、スマートフォンサイトにも是非取り入れてみたいですね。</div>
<div>
<br /></div>
<div>
<br /></div>]]>
    </content>
</entry>

<entry>
    <title>スマホにパソコン用サイトの表示はNG？！その理由とは</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/ng.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.9</id>

    <published>2011-12-12T05:25:27Z</published>
    <updated>2011-12-22T14:11:09Z</updated>

    <summary>「スマートフォンで訪れた方にもお望み通りパソコンと同じサイトを表示してあげたらいい」
と思われるかもしれませんが、そうは問屋が卸さない。なぜでしょうか。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    <category term="マーケティング" label="マーケティング" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[<p>パソコンを使われている方も、</p><div>その用途のほとんどはブラウザを使ってインターネットを見ることだと思われますが、<br />それはスマートフォンでも一緒。</div>
<div>
<br /></div>
<div>
それでは、<p class="style1"><span style="background-color: #FFFF99">スマートフォンで訪れた方にもお望み通りパソコンと同じサイトを表示してあげたらいい</span></p>
</div>
<div>
と思われるかもしれませんが、そうは問屋が卸さない。</div><div>
</div>]]>
        <![CDATA[<p>パソコンを使われている方も、</p><div>その用途のほとんどはブラウザを使ってインターネットを見ることだと思われますが、<br />それはスマートフォンでも一緒。</div>
<div>
<br /></div>
<div>
それでは、<p class="style1"><span style="background-color: #FFFF99">スマートフォンで訪れた方にもお望み通りパソコンと同じサイトを表示してあげたらいい</span></p>
</div>
<div>
と思われるかもしれませんが、そうは問屋が卸さない。</div>
<div>
<br /></div>
<div>
理由として、</div>
<div>
<ol>
<li><b>画面が小さいので、パソコン用のサイトでは思うようにタップ（パソコンでいうクリック）ができない。</b></li>
<li><b>いちいちページの拡大と縮小が必要。</b></li>
<li><b>iPhoneの場合、AdobeのFlashも対応していない。</b></li>
<li><b>3G回線はパソコンの光回線などに比べて表示が遅い。</b></li>
</ol>
<div>
などがあります。</div>
</div>
<div>
<br /></div>
<div>
しかしそれに気づかず、パソコン用サイトをスマートフォンでも同様に表示させているというサイトがほとんどです。</div>
<div>
<ul>
<li><b>それでは、どのようにしてスマートフォンサイトを作成したらいいのか？</b></li>
<li><b>注意すべきポイントは何か？どのようなサイトが好まれるのか？</b></li>
</ul>
<div>
という点について、株式会社Berryの阿部道浩が<b style="color: red;">実験を交えて</b>お伝えしていきます。</div>
</div>]]>
    </content>
</entry>

<entry>
    <title>スマートフォンサイト専門のブログを立ち上げました</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/post_2.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.6</id>

    <published>2011-12-09T04:52:07Z</published>
    <updated>2011-12-22T14:09:49Z</updated>

    <summary>Berryで得られた知見を公にすることを目的として、このブログを立ち上げました。</summary>
    <author>
        <name>Berry</name>
        
    </author>
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        <![CDATA[
<p>スマートフォンサイトのブログを立ち上げました。</p><p><br /></p>
]]>
        <![CDATA[<p style="border-style: initial; border-color: initial; font-size: 13px; ">スマートフォンサイトのブログを立ち上げました。&nbsp;<br class="Apple-interchange-newline" /><br />&nbsp;株式会社Berryは、携帯サイトの運営を収益の柱として事業を進め、これまで数多くの携帯サイトを収益化・黒字化へと導いてきました。<br /><br />その過程で、スマートフォンサイトの運営にもいち早くから取り組み、「アフィリエイト」「通販」「SNS」などのスマートフォンサイトを運営していく中で、多くのノウハウが蓄積されてきました。<br /><br />こうして得られた知見を皆様に公開していく目的で、このブログを立ち上げました。<br /><br />&nbsp;</p><p style="border-style: initial; border-color: initial; font-size: 13px; ">一般ユーザーが<br /><br /></p><blockquote style="margin-bottom: 0px; margin-left: 40px; border-style: initial; border-color: initial; font-size: 13px; border-width: initial; border-color: initial; "><p style="border-style: initial; border-color: initial; "><font style="font-size: 1.25em; "><span class="style1"><strong class="style1"><span style="background-color: rgb(255, 255, 153); ">「パソコンは難しい。スマホならネットを気軽に見れる！」</span></strong></span></font></p></blockquote><p style="border-style: initial; border-color: initial; font-size: 13px; "><br />と思っている反面、まだまだ多くのサイトは<br /><br /></p><blockquote style="margin-bottom: 0px; margin-left: 40px; border-style: initial; border-color: initial; font-size: 13px; border-width: initial; border-color: initial; "><p style="border-style: initial; border-color: initial; "><font style="font-size: 1.25em; "><span class="style1"><strong><span style="background-color: rgb(255, 255, 153); ">「パソコンが主流だ。スマホはまだ先だ。」</span></strong></span></font></p></blockquote><p style="border-style: initial; border-color: initial; font-size: 13px; "><br />と考えていられる現状があります。<br /><br /><br /><br />そういった溝を、このブログを通じて少しでも埋められれば、と思っております。</p>
]]>
    </content>
</entry>

<entry>
    <title>h3バリエーション</title>
    <link rel="alternate" type="text/html" href="http://www.berryinc.jp/smartphone_blog/h3.html" />
    <id>tag:www.berryinc.jp,2011:/smartphone_blog//4.21</id>

    <published>2011-11-01T06:04:42Z</published>
    <updated>2012-01-11T07:06:33Z</updated>

    <summary></summary>
    <author>
        <name>株式会社berry</name>
        
    </author>
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.berryinc.jp/smartphone_blog/">
        
        <![CDATA[<h3 class="h3-01">h3タグのバリエーションその１</h3>

<h3 class="h3-02">h3タグのバリエーションその２</h3>

<h3 class="h3-03">h3タグのバリエーションその３</h3>

<br /><br /><br />

芥川龍之介は辰年辰月辰日の辰の刻の生まれにちなんで龍之介と命名されたそうです。彼の代表作『羅生門』はこんな風に始まります。
<blockquote>
　或日の暮方の事である。一人の下人が、羅生門の下で雨やみを待つてゐた。廣い門の下には、この男の外に誰もゐない。唯、所々丹塗の剥げた、大きな圓柱に、蟋蟀が一匹とまつてゐる。羅生門が、朱雀大路にある以上は、この男の外にも、雨やみをする市女笠や揉烏帽子が、もう二三人はありさうなものである。それが、この男の外には誰もゐない。 
</blockquote>
『羅生門』という題名は、後に黒澤明監督の11番目の作品にも使用されていますが、黒澤明の『羅生門』は、芥川龍之介の『羅生門』と『薮の中』を合わせて、黒澤流にアレンジしたような作品です。]]>
    </content>
</entry>

</feed>

