出所：<a href="http://www.dac.co.jp/Contents/pdf/press/20121105_research.pdf" target="_blank">http://www.dac.co.jp/Contents/pdf/press/20121105_research.pdf</a>
今年10月実施のスマートフォンの利用実態調査がdacさんから出ていたのでメモ。
&nbsp;
<h2>スマートフォン年代別利用率</h3>
<table>
<tbody>
<tr>
<td></td>
<td>年代</td>
<td>2011年9月</td>
<td>2012年10月</td>
</tr>
<tr>
<td rowspan="5">男性</td>
<td>16～19歳</td>
<td>19.0%</td>
<td>33.8%</td>
</tr>
<tr>
<td>男性20代</td>
<td>23.9%</td>
<td>45.8%</td>
</tr>
<tr>
<td>男性30代</td>
<td>21.4%</td>
<td>36.2%</td>
</tr>
<tr>
<td>男性40代</td>
<td>14.7%</td>
<td>28.9%</td>
</tr>
<tr>
<td>男性50代</td>
<td>9.5%</td>
<td>18.4%</td>
</tr>
<tr>
<td rowspan="5">女性</td>
<td>16～19歳</td>
<td>7.5%</td>
<td>36.6%</td>
</tr>
<tr>
<td>女性20代</td>
<td>20.5%</td>
<td>39.1%</td>
</tr>
<tr>
<td>女性30代</td>
<td>11.6%</td>
<td>26.1%</td>
</tr>
<tr>
<td>女性40代</td>
<td>7.2%</td>
<td>18.6%</td>
</tr>
<tr>
<td>女性50代</td>
<td>5.4%</td>
<td>14.0%</td>
</tr>
</tbody>
</table>
全体的に伸びているが女性の伸び率が目立つ。
<h2>情報の入手方法</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
<td>3位</td>
<td>4位</td>
<td>5位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>テレビ</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>カタログ・パンフレット</td>
</tr>
<tr>
<td>84.0%</td>
<td>75.6%</td>
<td>65.5%</td>
<td>38.6%</td>
<td>32.6%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>テレビ</td>
<td>友達・知人</td>
<td>雑誌</td>
</tr>
<tr>
<td>87.0%</td>
<td>77.0%</td>
<td>66.5%</td>
<td>37.5%</td>
<td>30.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>テレビ</td>
<td>PC</td>
<td>友達・知人</td>
<td>雑誌</td>
</tr>
<tr>
<td>85.5%</td>
<td>82.5%</td>
<td>70.5%</td>
<td>58.5%</td>
<td>43.5%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>テレビ</td>
<td>友達・知人</td>
<td>新聞</td>
</tr>
<tr>
<td>86.0%</td>
<td>75.5%</td>
<td>71.0%</td>
<td>34.0%</td>
<td>28.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>テレビ</td>
<td>PC</td>
<td>友達・知人</td>
<td>店頭</td>
</tr>
<tr>
<td>81.5%</td>
<td>80.0%</td>
<td>73.5%</td>
<td>53.0%</td>
<td>44.0%</td>
</tr>
</tbody>
</table>
女性に関してはスマートフォンが最も多い情報入手の手段となっている。
<h2>情報の検索手段</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>スマートフォン</td>
</tr>
<tr>
<td>91.7%</td>
<td>67.0%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
</tr>
<tr>
<td>91.0%</td>
<td>82.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>PC</td>
</tr>
<tr>
<td>88.0%</td>
<td>81.5%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
</tr>
<tr>
<td>92.0%</td>
<td>72.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>PC</td>
</tr>
<tr>
<td>85.5%</td>
<td>81.0%</td>
</tr>
</tbody>
</table>
こちらも女性はスマートフォンが最も多くなっている。
<h2>情報の比較・検討手段</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
<td>3位</td>
<td>4位</td>
<td>5位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>カタログ・パンフレット</td>
<td>友人・知人</td>
</tr>
<tr>
<td>88.8%</td>
<td>42.7%</td>
<td>24.7%</td>
<td>19.6%</td>
<td>11.9%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>カタログ・パンフレット</td>
<td>テレビ</td>
</tr>
<tr>
<td>85.5%</td>
<td>54.5%</td>
<td>22.5%</td>
<td>14.5%</td>
<td>13.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>友人・知人</td>
<td>カタログ・パンフレット</td>
</tr>
<tr>
<td>73.5%</td>
<td>58.0%</td>
<td>26.5%</td>
<td>23.0%</td>
<td>20.0%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>カタログ・パンフレット</td>
<td>友人・知人</td>
</tr>
<tr>
<td>91.5%</td>
<td>53.0%</td>
<td>18.0%</td>
<td>14.0%</td>
<td>11.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>友人・知人</td>
<td>カタログ・パンフレット</td>
</tr>
<tr>
<td>76.5%</td>
<td>56.5%</td>
<td>29.0%</td>
<td>20.0%</td>
<td>17.0%</td>
</tr>
</tbody>
</table>
比較・検討は大きい画面(PC)でじっくり品定めをするらしい。
<h2>購入を決断した媒体</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
<td>3位</td>
<td>4位</td>
<td>5位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>店頭</td>
<td>スマートフォン</td>
<td>カタログ・パンフレット</td>
<td>店舗スタッフ</td>
</tr>
<tr>
<td>65.0%</td>
<td>49.9%</td>
<td>27.3%</td>
<td>16.4%</td>
<td>16.6%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>店頭</td>
<td>スマートフォン</td>
<td>カタログ・パンフレット</td>
<td>友人・知人</td>
</tr>
<tr>
<td>68.0%</td>
<td>40.5%</td>
<td>33.0%</td>
<td>11.0%</td>
<td>10.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>店頭</td>
<td>PC</td>
<td>スマートフォン</td>
<td>友人・知人</td>
<td>店舗スタッフ</td>
</tr>
<tr>
<td>55.0%</td>
<td>48.0%</td>
<td>38.0%</td>
<td>17.0%</td>
<td>13.5%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td colspan="2">スマートフォン・店頭</td>
<td>友人・知人</td>
<td>カタログ・パンフレット</td>
</tr>
<tr>
<td>72.0%</td>
<td colspan="2">39.0%</td>
<td>16.0%</td>
<td>14.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td colspan="2">店頭・PC</td>
<td>スマートフォン</td>
<td>友人・知人</td>
<td>店舗スタッフ</td>
</tr>
<tr>
<td colspan="2">53.5%</td>
<td>36.0%</td>
<td>22.5%</td>
<td>19.5%</td>
</tr>
</tbody>
</table>
スマホや店頭で関心をもち、最終的なジャッジはPCでじっくり考えて買うということのよう。
<h2>情報の共有手段</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
<td>3位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>スマートフォン</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>66.1%</td>
<td>38.6%</td>
<td>33.9%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>72.5%</td>
<td>58.0%</td>
<td>32.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>PC</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>76.0%</td>
<td>52.5%</td>
<td>31.5%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>71.0%</td>
<td>51.0%</td>
<td>30.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>PC</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>59.5%</td>
<td>55.0%</td>
<td>40.0%</td>
</tr>
</tbody>
</table>

スマートフォン利用実態調査

弊社が入居している、早稲田大学インキュベーション推進室の講演を聞いて来ました。
<blockquote>インキュベーションセンター特別講演会
日時：2012年11月5日（月）17：00～19：00
講師：早稲田大学 商学学術院ビジネススクール　内田和成教授
内田教授 講演
「経営者の右脳の使い方 ～ロジカルシンキングだけでは経営できない～」
早稲田大学ビジネススクール　内田和成研究室 Webページ
<a href="http://www.waseda.jp/sem-uchida/">http://www.waseda.jp/sem-uchida/</a></blockquote>
今回、講演頂いた内田教授は、世界的なコンサルティングファームであるボストン コンサルティング グループの日本法人代表を務められ、また、2006年度には世界の有力コンサルタント、トップ25人に選出されるという輝かしい経歴のお方。普段、なかなか聞くことも出来ない貴重な機会でした。
その中で、講演内容の抜粋をシェアします。
基本的に、レジュメなどは用意せずに、喋るだけのスタイルだそうで、私も発せられた言葉をその場で書き留めているだけですので、ご了承下さい。
<h2>経営は勘</h3>
まず、はじめに右脳の使い方ということで結論を仰っていました。
経営は勘
であると。
冒頭にそのように仰られていたので、初めはポカンとしてしまいましたが、様々な大企業の経営者を見てきたなかで、行き着いた結論を一言で表すと「勘」につきると。
<h3>ギャンブラーと勝負師</h4>
勘とはいえ、ギャンブラーと勝負師は異なる。ギャンブラーは文字通り運まかせ。勝負師は、運を手繰りよせるべく、常に手を打って勝負をする。経営者は勝負師にならなければならない。
<h3>経営者の一番大事な仕事</h4>
<ol>
<li>問題に気づく</li>
<li>意思決定</li>
<li>実行</li>
</ol>
要は、問題設定と実行の能力
<h4>仕事が出来る人間になる。</h6>
定義は何？
<h4>どういう上司の元で働きたいのか？</h6>
作業が早い人間と仕事が出来るは違う。
作業が早い
↓
問題に気づく
人間になること。
&nbsp;
問題設定と優先順位をつけて課題解決
出来る人が一番大事な仕事。優秀な経営者
<h4>救急医療センター（er）</h6>
トリアージュ（仕分け）
瀕死の人を一人助けるよりは、
確実に助かる人を五人助ける。
倫理観を除くと医者としては優秀
<h3> 事象と過程</h4>
・泥棒が入りました。（事象）
泥棒が入った事自体は事象に過ぎない。
解決すべきはその事象に至る過程
→防犯体制
→報告体制
<h4>少子高齢化</h6>
どれを解くべきかは分からない。
視点が必要
グローバルに見ると、いいこと？悪いこと？
生産年齢人口が減る→社会保障費がまかなえなくなる。
歳入と歳出が合わなくなる。
<h4>政治家には悪いやつがならないといけない。</h6>
変革＝ルールを変えること、破ること。
<h3>問題設定</h4>
<ol>
<li>候補を拾いだす</li>
<li>絞り込む</li>
<li>実行</li>
<li>確認</li>
</ol>
&nbsp;
<h3>筋がいい課題を洗い出す。</h4>
<ol>
<li>答えが出そうな問題</li>
<li>インパクトが出せるかどうか</li>
<li>やりきれるかどうか</li>
</ol>
解くべき問題が違う？
&nbsp;
<h3>勝負師になるためには</h4>
<ul>
<li>経験値をあげる。</li>
<li>課題意識をもつ。</li>
<li>自分のテリトリーを広げる。</li>
<li>視点、視座を変える。</li>
<li>引き出しを増やす。</li>
</ul>

経営者の右脳の使い方 ～ロジカルシンキングだけでは経営できない～

ポータルサイト風タブパネル

ナビゲーションを上部に隠すjQueryを実装してみました

jQueryでアコーディオンを横向きに開閉する。
HTMLを用意する
&lt;div&gt; 
　&lt;dl&gt; 
　　&lt;dt id=&#8221;step1&#8243;&gt;&lt;span&gt;Step.1&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　　&lt;dt id=&#8221;step2&#8243;&gt;&lt;span&gt;Step.2&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　　&lt;dt id=&#8221;step3&#8243;&gt;&lt;span&gt;Step.3&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　&lt;/dl&gt; 
 &lt;/div&gt;
&nbsp;
CSSを用意する
body{ 
 background:#252422; 
 } 
 div{ 
 width:800px; 
 height:300px; 
 margin:50px auto; 
 overflow:hidden; 
 } 
 dl{ 
 width:900px; 
 height:300px; 
 } 
 dt{ 
 width:35px; 
 height:300px; 
 float:left; 
 } 
 dt span{ 
 display:block; 
 width:100%; 
 height:100%; 
 text-indent:-9999px; 
 } 
 dt span.over{ 
 cursor:pointer; 
 } 
 dt span.selected{ 
 cursor:default; 
 } 
 dt#step1 span{ 
 background:url(&#8220;images/background-1.jpg&#8221;); 
 } 
 dt#step1 span.over{ 
 background:url(&#8220;images/background-1-over.jpg&#8221;); 
 } 
 dt#step1 span.selected{ 
 background:url(&#8220;images/background-1-selected.jpg&#8221;); 
 } 
 dt#step2 span{ 
 background:url(&#8220;images/background-2.jpg&#8221;); 
 } 
 dt#step2 span.over{ 
 background:url(&#8220;images/background-2-over.jpg&#8221;); 
 } 
 dt#step2 span.selected{ 
 background:url(&#8220;images/background-2-selected.jpg&#8221;); 
 } 
 dt#step3 span{ 
 background:url(&#8220;images/background-3.jpg&#8221;); 
 } 
 dt#step3 span.over{ 
 background:url(&#8220;images/background-3-over.jpg&#8221;); 
 } 
 dt#step3 span.selected{ 
 background:url(&#8220;images/background-3-selected.jpg&#8221;); 
 } 
 dd{ 
 margin:0; 
 width:695px; 
 height:300px; 
 float:left; 
 background:#D4D0C8; 
 overflow:hidden; 
 } 
 dd p{ 
 width:655px; 
 text-indent:1em; 
 padding:20px; 
 }
&nbsp;
jQueryを用意する
$(function(){ 
        $(&#8220;dd:not(:first)&#8221;).css(&#8220;width&#8221;,&#8221;0px&#8221;); 
        $(&#8220;dt:first span&#8221;).addClass(&#8220;selected&#8221;); 
        $(&#8220;dl dt&#8221;).click(function(){ 
                 if($(&#8220;+dd&#8221;,this).css(&#8220;width&#8221;)==&#8221;0px&#8221;){ 
                 $(&#8220;dt:has(.selected) +dd&#8221;).animate({&#8220;width&#8221;:&#8221;0px&#8221;}); 
                 $(&#8220;+dd&#8221;,this).animate({&#8220;width&#8221;:&#8221;695px&#8221;}); 
                 $(&#8220;dt span&#8221;).removeClass(&#8220;selected&#8221;); 
                 $(&#8220;span&#8221;,this).addClass(&#8220;selected&#8221;); 
                 } 
         }).mouseover(function(){ 
          $(&#8220;span&#8221;,this).addClass(&#8220;over&#8221;); 
         }).mouseout(function(){ 
          $(&#8220;span&#8221;,this).removeClass(&#8220;over&#8221;); 
         }); 
 }); 
<a href="http://poe.ud-ac.com/JavaScript_SelfStudy/other/sample2/samp6.html" target="_blank">DEMOはコチラ</a>
「説明」
①　 $(&#8220;dd:not(:first)&#8221;).css(&#8220;width&#8221;,&#8221;0px&#8221;);
初期状表示態の設定では、１番目の以外のパネル(dd要素)のwidthを０pxに変更します。
②　$(&#8220;dt:first span&#8221;).addClass(&#8220;selected&#8221;);
１番目のdt要素に対してclass属性「selected」を追加し、展開中のラベルスタイルに
設定します。
③　if($(&#8220;+dd&#8221;,this).css(&#8220;width&#8221;)==&#8221;0px&#8221;){
if分で、クリックされたラベルに対応するパネル(dd要素）の横幅が0の場合の処理を
記述します。
④　 $(&#8220;dt:has(.selected) +dd&#8221;).animate({&#8220;width&#8221;:&#8221;0px&#8221;});
ラベルがクリックされたら、class属性が「selected」の要素を含むdt要素の次に登場する
dd要素の幅(width)を0に変更します。幅の変更には、任意のCSSプロパティの値を 
アニメーション付きで変化させるanimate()を使います。これで展開中のパネルが閉じます。
⑤　 $(&#8220;+dd&#8221;,this).animate({&#8220;width&#8221;:&#8221;695px&#8221;});
同様に、クリックされた要素の次に登場するdd要素の幅(width)をanimate()で695pxに変更します。
これで、クリックされたラベルに対応するパネルが開きます。
⑥　  $(&#8220;dt span&#8221;).removeClass(&#8220;selected&#8221;); 
$(&#8220;span&#8221;,this).addClass(&#8220;selected&#8221;);
クリックされたラベルを選択状態にするため、すべてのspan要素からclass属性「selected」
を取り除き、クリックされたdt要素内のspan要素にclass属性「selected」を再設定します。
⑦　}).mouseover(function(){ 
$(&#8220;span&#8221;,this).addClass(&#8220;over&#8221;); 
}).mouseout(function(){ 
$(&#8220;span&#8221;,this).removeClass(&#8220;over&#8221;); 
});
最後にmouseover/mouseoutイベントでロールオーバーの処理を設定したら完成です。

アコーディオンを横向きに開閉する

HTML5のSVG + jQueryで画像の拡大縮小

案件でfacebookアプリ（iframe）を作成しましたから、その流れを軽くまとめてみたいと思います。
&nbsp;
１、アプリの作成
自分が持つfacebookアカウントで<a href="https://developers.facebook.com" target="_blank">開発者サイト</a>でアプリを作成できます。 
※１アプリ作成するのに、モバイル設定もしくは支払方法を設定する必要あります。
※２モバイル設定には、確認コードをもちいて携帯メールの認証を行います。
確認コードを受信できるため、迷惑メール解除する必要があります。
迷惑メール解除のドメインは、facebook.comではなく、facebookmail.comです。
アプリ作成完了したら、App IDとApp Secretがもらえます。
&nbsp;
２、アプリの設定
「Facebook上のアプリ」と「ページタブ」両項目のみ設定します（その前に、開発サーバを整備し、アプリのリンクを確定する必要です）。
ページタグはfacebookからアクセス用の設定項目です。
「アカウント権限」項目に、管理者の追加ができます。
&nbsp;
３、facebookページの作成＆設定
facebookの一番下（今は無限スクロールのせいで、なかなかたどり着けない）に「ページを作成」のリンクがあるから、それをクリックして、facebookページの作成ができます。
facebookページを作成できたら、ページの上方（管理者の場合）には「Facebookページを編集」のプルダウンメニューがあるから、そこから「権限の編集」でfacebookページを公開することができ、「管理人」で管理者の指定ができます。
&nbsp;
４、アプリfacebookページの関連付け（facebookページにタブ追加）
アプリの管理ページの左メニューの「App Details」には、「アプリのページ」のところに、先作成したfacebookページのプルダウンがでてくるはずですが、もし出てこなかった場合は、手動アクセスで下記URLをアクセスして、タブを追加します。
https://www.facebook.com/add.php?api_key=[App ID]&amp;pages=1
&nbsp;
以上でfacebook側の準備がすべて整いました。
&nbsp;
５、php-sdkをダウンロード
https://github.com/facebook/facebook-php-sdk　からダウンロードできます。
&nbsp;
アプリ開発編は次を期待してください。
IEとSafariでは、サードパーティ クッキーのSetが問題になっているから、次回で解説いたします。
&nbsp;
※app設定をするのに、Privacy Policy URLとTerms of Service URLがないと、後facebookが怒るから、忘れずにつけましょう。App Detailの下で設定できます。
&nbsp;

facebookアプリ（iframe）を作成してみた

出所：<a href="http://www.worksap.co.jp/topics/news/2012/1026.html" target="_blank">http://www.worksap.co.jp/topics/news/2012/1026.html</a>
&nbsp;
大変参考になる記事を見つけたのでメモ。
&nbsp;
<h4>主に大手企業ECサイト、通販運営者71人の回答</h6>
<table>
<tbody>
<tr>
<td>SNSプロモーション</td>
<td>39</td>
<td>55%</td>
</tr>
<tr>
<td>スマホ対応</td>
<td>32</td>
<td>45%</td>
</tr>
<tr>
<td>顧客データの分析</td>
<td>28</td>
<td>39%</td>
</tr>
<tr>
<td>リピート率向上</td>
<td>26</td>
<td>37%</td>
</tr>
<tr>
<td>SEO</td>
<td>19</td>
<td>27%</td>
</tr>
<tr>
<td>他社との差別化</td>
<td>18</td>
<td>25%</td>
</tr>
<tr>
<td>O2O連携</td>
<td>18</td>
<td>25%</td>
</tr>
<tr>
<td>リスティング</td>
<td>14</td>
<td>20%</td>
</tr>
<tr>
<td>システムコストの増大</td>
<td>13</td>
<td>18%</td>
</tr>
<tr>
<td>システム陳腐化</td>
<td>12</td>
<td>17%</td>
</tr>
<tr>
<td>セキュリティ脆弱性</td>
<td>11</td>
<td>15%</td>
</tr>
<tr>
<td>ブラックボックス化</td>
<td>9</td>
<td>13%</td>
</tr>
<tr>
<td>アフィリエイト</td>
<td>7</td>
<td>10%</td>
</tr>
<tr>
<td>バナー広告</td>
<td>6</td>
<td>8%</td>
</tr>
<tr>
<td>システム規模変更</td>
<td>3</td>
<td>4%</td>
</tr>
</tbody>
</table>
&nbsp;
<h4>EC・通販関連システムの利用年数</h6>
<a href="/uploads-archive/2012/10/1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-524" title="1" src="/uploads-archive/2012/10/1.jpg" alt="" width="362" height="217" srcset="/uploads-archive/2012/10/1.jpg 362w, /uploads-archive/2012/10/1-300x179.jpg 300w, /uploads-archive/2012/10/1-228x136.jpg 228w" sizes="(max-width: 362px) 100vw, 362px" /></a>
&nbsp;
なるほどと思える結果。
5年以上前のECシステムでスマホ、ソーシャルコマースが十分考慮されているものは無いはず。
システム的な小回りが効かないことに加え
1日のサイト停止がうん千万円という機械損失になる大規模サイト特有の悩みともとれる。
&nbsp;
<h4>サイト運営業務に関する外部委託業務範囲</h6>
<a href="/uploads-archive/2012/10/2.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-528" title="2" src="/uploads-archive/2012/10/2.jpg" alt="" width="362" height="217" srcset="/uploads-archive/2012/10/2.jpg 362w, /uploads-archive/2012/10/2-300x179.jpg 300w, /uploads-archive/2012/10/2-228x136.jpg 228w" sizes="(max-width: 362px) 100vw, 362px" /></a>
広告関連と思いきや、以外にもデザインが一番多い。
クリエイティブにこだわりがあるということはもちろんのこと、
古めのシステムはカート、決済、ポイントなどECとしての機能が重視されており、
CMSなど見た目の制御があまり考えられていないことも起因していると思う。

大手ECサイト、8割がリニューアルを検討

制作会社を経営していて、日々、どのように生産性を高められるか？ひいては、会社、社員が成長をして幸せを感じることは出来るか？
ということを考え、様々な文化、制度を取り込み、やってみて意味を感じる、定着をする都度採用をしてきていますが、たまたま、RSSを流し読みしていたところ、初めてみる施策だったので考察してみました。
<a href="http://gunosy.com/redirect?a=736244&amp;c=coHJOVbuGIU3.&amp;t=1&amp;url=http%3A%2F%2Fblog.8bit.co.jp%2F%3Fp%3D7111" target="_blank">少人数の制作会社こそ終礼は重要 </a>
読んで字のごとく、業務の始まりにあるのが、朝礼。終わりにあるのが、終礼です。
弊社でも朝礼を取り組み初めてからは、タスクの確認や納期が迫っているものなどは朝に確認が出来たりと機能しています。
もっと深く意味を考えると、
<ul>
<li>毎朝通勤時には自分のやることを認識していて、すぐに業務モードに入ることが出来る。</li>
<li>全員が集まるので遅刻出来ない空気感を作れる。</li>
<li>それぞれが自分で言葉を発するので、発言の場となる。</li>
</ul>
などを目論んでいます。
さらに、朝礼で片付けてしまうとぼやけてしまうので、この朝の10分で勢いづける意味を込めて「Ten Minuets Charge」略してTMCという固有名詞をつけて定着に至りました。
&nbsp;
<h2>抜粋</h3>
<ul>
<li>タスクのやり忘れをなくす。</li>
<li>定時で帰ることのきっかけになれば。</li>
<li>間に合わせる作業スピードを付けられるように。</li>
</ul>
ちょうど、弊社が取り組んでいる週末の全社会議に似ているのかと思います。
&nbsp;
その他、今まで作ってきた制度を考えると以下の４つは機能しています。
<ul>
<li>TMC（朝礼）
<ul>
<li>一人一人が当日のタスクを発表
<ul>
<li>通勤時には業務モードに入っているなどの意味を込めてます。</li>
</ul>
</li>
</ul>
</li>
<li>セルフNO残業デー（定時帰社日）
<ul>
<li>自分の好きな曜日にNO残業デーを設け、みんなに周知を行い、お互いに迷惑が及ばない前提で定時帰社曜日を設ける。
<ul>
<li>ブログ記事にも書いてあるように、なんとなく帰りにくい雰囲気などが発生しないようにという思惑があります。</li>
</ul>
</li>
</ul>
</li>
<li>ナレッジシェア（ブログ記事発表）
<ul>
<li>毎週水曜日の夕方、ブログ形式にてためになるで情報を発表します。
<ul>
<li>アウトプットする能力、常に情報収集、技術習得を目指すアンテナ感度の向上、なによりSEO効果（※実際に、デザイナーが書いた技術ブログがきっかけで受注したことも！）を狙っています。</li>
</ul>
</li>
</ul>
</li>
<li>案件進捗会議（これだけ名前がない！）
<ul>
<li>毎週金曜日の夕方、一週間の締めとしての会議を行っています。</li>
</ul>
</li>
</ul>
<h2> まとめ</h3>
どのようになったらよりよくなるかということを考えるのが非常に好きです。うまく機能せずに自然消滅したものや、取り組んでみたものの何かしっくりこずにやめたものまで数知れずありますが、これからも積極的によりよいものは取り込んでいくので、社員のみんも提案してくれたらうれしいなと思います。

終礼という制度についての提案

弊社では、MTを利用して、お客さまのwebサイトを作成することがよくあります。
そしてその運用もすることが多いのですが、
いつも通り、新しい記事を作り、カテゴリをチェックし、公開したら・・・
カテゴリのチェックがすべて外れて保存がされておりました。
何回やってもダメなので、調べてみると、Firefoxのver16のバグとのこと。
MTのverは、MT4.12とMT5.02でした。
&nbsp;
解決方法がシックス・アパートのよくある質問に載っておりました。
<a href="http://www.movabletype.jp/faq/firefox-16-patches.html" target="_blank">Firefox 16 でカテゴリおよびフォルダの選択が保存できない。</a>
&nbsp;
verが４つしかなく、自分のverにあったものがないっっ！！
&nbsp;
と思いましたが、強行で、ver4.38のpatchをダウンロードし、アップしてみたところ、
無事修正されました！！
&nbsp;
&nbsp;
方法は簡単ですが、自分でサーバー情報いじれない場合は、
別のブラウザを使うしかないようですね。
&nbsp;
firefox早くバージョンアップしないかな〜 
最後に面白い記事を紹介。
デザインする自分にとって、ものすごく同意する記事です。
<a href="http://gori.me/it/22110">デザインをする人もデザインを依頼する人も見てもらいたい！「デザインができるまで」が話題に！ | gori.me</a> 
<a href="http://gori.me/it/22125">クライアントよ、お前の依頼の大変さを思い知れ！これが「デザイン修正」だ！ | gori.me</a>
&nbsp;

MTのカテゴリが指定しても反映されない・・・[Firefox]

本日、参加してきました。
多いに刺激を受けると同時に、経産省主導で話題喚起を行なって欲しいと心底思いました。
経産省の<a href="http://www.cbec.go.jp/index_ja_jpy.html">越境EC応援ポータル</a>もいいのですが、もっともっと活性化させてほしいです。
<h2> 経済産業大臣の枝野幸男さんから挨拶</h3>
まずは、経済産業大臣の枝野幸男さんから挨拶があり、
次代のソニー、ホンダのような新事業創出を目指している。
成熟した経済で31年ぶりに貿易赤字といったことを話して下さいました。
<h2>南場さんの講演</h3>
黒字まで4年間かかった。
<h3> ■起業をしやすいかどうか？</h4>
<ol>
<li>まったく尊敬されない</li>
<li>起業家の個人保証・・・リスクマネーが乏しい
<ul>
<li>大株主に器量 金融系のスタンスは変わらず</li>
</ul>
</li>
<li>短期黒字化重視。小スケール化
<ul>
<li>最初から言うと虚言癖あるかいされる。</li>
</ul>
</li>
<li>世界の発送や人的ネットワークから隔離されている。</li>
<li>大企業とビジネスをやりにくい
<ul>
<li>実績主義だから。ベンチャーにそんなものあるわけない</li>
</ul>
</li>
<li>セカンドチャンスは厳しい</li>
<li>成功するとやっかまれる?</li>
</ol>
<h3>■3つ の思い</h4>
・目標達成の喜びを分かち合う高揚感を真ん中に捉えた経営
・人材の質に妥協しない
・work evidenceに言い訳しない
<h3>■阿呆か物好きしか起業しない国で良いのか？</h4>
・グローバルNo.1の成功事例
・グローバルビジネスリーダー育成（日の丸を掲げたい愛国心が強い）
<h2>まとめ</h3>
日米起業協議会のレポートを踏まえてという前提があったため、日米の環境差などが語られる場面がほとんどであった。我々のように越境ECを通じアジアを見据えた事業展開を目論む企業への言及が欲しかった。質問をしたかったが時間がないためか、その時間がなかった。
また、参加していた方々について次代を担うベンチャー企業側が少なく、VC側か完了の方々のほうが多かったのが残念であった。

「次代を担うベンチャー企業の創出を目指して」シンポジウムを参加して

IE対策 &#8211; IEと仲良く付き合う方法 &#8211;

写真を自動的に加工してくれるjQuery「vintage.js」

見出しはコンテンツの中でも重要な場所ですが、 
デザインを考えるときに、迷うことが多い場所です。
&nbsp;
特にシンプルなデザインが求められている場合、 
シンプルにしすぎて、軽すぎたり、寂しい印象になってしまったり、 
それを避けようとして、シンプルから離れてしまったりするなど、 
難しいと感じることが多いです。
&nbsp;
そこで今回は、シンプルな見出しのデザインで、 
一味違うと思うサイトを探してみることにしました。
&nbsp;
<hr />
<a href="http://www.menard.co.jp/" target="_blank">MENARD</a> 
<a href="http://www.menard.co.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img1.jpg" alt="" /></a>
&nbsp;
見出し画像 
<img decoding="async" style="width: 100%;" src="/uploads-archive/2012/10/header_img1_1.jpg" alt="" />
<img decoding="async" loading="lazy" style="width: 100%;" src="/uploads-archive/2012/10/header_img1_2.jpg" alt="" width="779" height="60" />
&nbsp;
大きな見出し、小さな見出しともに、左端に緩やかなグラデーションのかかったマークがあります。 
これだけだと、よく見られる一般的なものですが、 
大きな見出しのほうは、マークの４つの角が、半透明程度に削られています。 
小さな見出しのほうも、上側だけが、2px程度の角丸になっていました。
&nbsp;
下に入れられたボーダーは、両者とも、グラデーションが入っています。 
大きなほうは、一直線なグラデーションではなく、ランダムなグラデーションがかかっていました。 
これによって、ただの線という感じから脱しています。
&nbsp;
ボーダーの下には少し幅のある淡いドロップシャドウがつけられていて、ほんのりと立体感が出ています。 
大きな見出しのほうは、ドロップシャドウが真ん中ほど幅広くなっていて、より質感が出されていました。
&nbsp;
大きな見出しは、タイトルと説明の文字色のトーンを微妙に変えてメリハリをつけ、 
右端に添えられた英語のタイトルは、グラデーションがかけられていました。
&nbsp;
<a href="http://madamefigaro.jp/" target="_blank">FIGARO.jp</a>
<a href="http://madamefigaro.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img2.jpg" alt="" /></a>
&nbsp;
見出し画像
<img decoding="async" src="/uploads-archive/2012/10/header_img2.jpg" alt="" />
&nbsp;
とてもシンプルなのですが、フォントの使い方や、文字の配置の仕方が面白く、印象的です。
&nbsp;
<a href="http://coetoiro.jp/" target="_blank">コエトイロ</a>
<a href="http://coetoiro.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img3.jpg" alt="" /></a>
&nbsp;
見出し画像 
<img decoding="async" src="/uploads-archive/2012/10/header_img3.jpg" alt="" />
&nbsp;
見出しはシンプルなアイコンと３本線と筆文字風のフォントで構成されたシンプルなものですが、 
和の感じが十分伝わってきます。
 

和柄を感じさせる線の使い方と、ひっそり右端でフェイドアウトしているところが、 
より和の感じを出しているように思います。
&nbsp;
&nbsp;
<hr />
<h2></h2>
<h2>まとめ</h2>
今回シンプルな見出しを探してみたところ、 
文字だけだったり、 
点線や実践一本、１色ののマークやアイコンが左端にひとつあるなどのものが、 
大半を占めていました。
 

ケース・バイ・ケースではありますが、 
シンプルなデザインをする場合、装飾に頼らず、レイアウトによって 
見出しを引き立てる技術が、より重要になってくるのだということを、 
感じました。

シンプル系の見出しデザインの一味違うサイトを探す

こういうのも利用するといいですね。
とある企業さんの成長分野等人材育成支援事業を利用したHTML5研修セミナーを聞いてきました。
Webの分野で厚労省が助成金、奨励金を出すということが今までにないことらしく、
もちろん奨励金の適用を検討することもさることながら、厚労省がこの分野で予算を割いてくれること自体に感動を覚えました。
このブログをご覧の方も必要であれば、情報共有しますので、コンタクトして下さい。
セミナー自体は、HTML5の流れ、取り巻く環境から実際の研修・セミナーの内容、助成金の内容の説明という具合でした。
<h2>HTML5を取り巻く背景</h3>
・7割〜8割ハイブリッドアプリ
・技術者不足による採用難と育成の重要性
・欧米比で最新技術導入の遅れ
・時限措置による教育機会（2013年3月までの奨励金）
・オフショア・エンジニアの成長
<h2>HTML5とは</h3>
・狭義
マークアップ言語
セマンティックWeb
・広義
HTML5API
CSS3
WebGL
SVG(ScalableVector Graphics)
<h2>HTML5なら出来る分業体制</h3>
・ネイティブアプリ
デザイン デザイナー
Objective-C/Java ネイティブエンジニア
PHP
・HTML5
デザイン デザイナー
HTML5/CSS3 マークアップエンジニア
JavaScript マークアップエンジニア/Webプログラマ
PHP Webプログラマ
<h2>企業研修の内容</h3>
2012年3月までの時限措置
一人20万円までの助成金
6ヶ月間の研修が必要
雇用保険を支払っている正社員であること
詳細
http://www.mhlw.go.jp/general/seido/josei/kyufukin/dl/f-top-c.pdf

成長分野等人材育成支援事業を利用したHTML5研修

今回は、SEO対策の方法について、復習することにしました。
&nbsp;
ちょうど今月(2012月10月)、Googleの<a href="http://support.google.com/webmasters/bin/answer.py?hl=ja&amp;answer=35769" target="_blank">ウェブマスター向けガイドライン</a>が更新されたようですので、
そちらから、HTMLコーディングに関する主なものをまとめてみました。
あからさまなスパム行為は省略しました。
&nbsp;
&nbsp;
<h2>基本</h3>
1.　サイトの構造はわかりやすく。
2.　主要ページへのリンクを記載したサイトマップを用意する。
　　サイトマップ内のリンクが非常に多い場合は複数ページに分ける。
3.　ユーザーが検索するときに入力する可能性と高いキーワードをサイトに含める。
4.　重要な名前、コンテンツ、リンクは、画像の代わりにテキストを使用。
　　画像を使用する必要がある場合は、alt属性を使用して、説明テキストを組み込む。
5.　無効なリンクを防ぐ。HTMLが正しいか確認する。
&nbsp;
&nbsp;
<h2>避けるべきことと、対策</h3>
1.　JavaScriptを使って、外部ページにリダイレクト(サイトにアクセスしたユーザーを、リクエストされたURLとは別のURLに移動させること)すること。
対策→　新サイトへの移動などの場合は、301リダイレクトを使用する。
&nbsp;
2.　隠しテキストと隠しリンクの利用
・白の背景で白のテキストを使用する
・テキストを画像の背後に置く
・CSSを使用して、テキストを画面外に配置する
・フォントサイズを0に設定する。
・小さな１文字のみをリンクにして、リンクを隠す
 

画像やJavaScript、動画の使用で、テキストをおく必要がある場合の対策方法と注意点
 

画像
　・alt属性を使用して、わかりやすい説明テキストを記述する。 
　　　（例：&lt;img src=&#8221;puppy.jpg&#8221; alt=&#8221;持ってこいをするダルメシアンの子犬&#8221;&gt;）
　・画像近くに、わかりやすいキャプションや説明テキストを配置する(可能な限り画像の近くに置くと効果的)
　・ファイル名を、画像の題材がわかるようなものにする
　・alt属性にキーワードを多用しない
　　　（スパムとみなされる場合がある。例：&lt;img src=&#8221;puppy.jpg&#8221; alt=&#8221;子犬 犬の赤ちゃん 小さな子犬 レトリーバー ラブラドール ウルフハウンド セッター ポインター ジャックラッセル テリヤ ドッグ フード ドッグフード 安い 子犬の餌&#8221;/&gt;）
　・重要なテキストは画像に埋め込まない
 

JavaScript
　・JavaScript内と同じコンテンツを&lt;noscript&gt;タグ内に記述する
　　　(&lt;noscript&gt;タグ内の内容は、JavaScript内のコンテンツと完全に同様にする)
 
動画
　・動画の説明テキストをHTML内に記述する
&nbsp;
3.　誘導ページの利用
(誘導ページ：特定のフレーズに対して、検索結果の上位に表示して、ユーザーを特定のサイトやページに誘導する目的で設置された、特定のキーワードやフレーズ用に作成された、テンプレートを使用した品質の低いページの集まり)
対策→　ユーザーの利便性を考慮した、質の高いページを設置する
&nbsp;
&nbsp;
画像の配置やJavaScriptなどで、デザインの都合上、対策が難しい場合もありますが、
改めて、これらのことを頭に入れてデザインをすることで、
利便性の高い、SEOも考慮されたサイト作りに役立てたいです。

SEOを考慮したHTMLコーディングの復習

流行りのスクロール効果を自作してみました。

iOSでFlashを搭載しない変わりに代替する技術として、HTML5とJavaScriptによるアニメーション表現が発達してまいりましたが、マルチデバイス対応及びフィーチャーフォン（ガラケー）向けの資産を再利用したいという理由でflashを変換するツールも同時に複数立ち上がっています。
それぞれ案件でこなしながら、flash変換ツールに関して代表的なツール4つのメリット・デメリットをまとめてみました。
非エンジニアの筆者がまとめております点、ご容赦下さい。技術情報については末尾に参考記事を掲載しております。
<h2>swiffy（提供：GOOGLE）</h3>
flaファイル変換系
<a href="https://www.google.com/doubleclick/studio/swiffy/" target="_blank">https://www.google.com/doubleclick/studio/swiffy/</a>
<h3>メリット</h4>
再現率が高い
<h3>デメリット</h4>
出力したソースが複雑（minifyされている）であるため改修は困難。
画像がSVG形式であるため、Androidは2.x系に対応していない。
<h2>CreateJS（提供：<a href="http://gskinner.com/" target="_blank">gskinner</a>）</h3>
flaファイル変換系
<a href="http://www.createjs.com/#!/CreateJS" target="_blank">http://www.createjs.com/#!/CreateJS</a>
<h3>メリット</h4>
出力したソースが綺麗。後のカスタマイズも容易
HTML5+Javascript+Imagesという構成なので、スマートフォン全般に対応可能
<h3>デメリット</h4>
仕様・制限が多い。既存のflaファイルからの修正は困難。
CS6もしくはCreative Cloudが必要
<h2>ExGame（提供：DeNA）</h3>
swf変換系
<a href="http://developer.dena.jp/mbga/support/exgame.html" target="_blank">http://developer.dena.jp/mbga/support/exgame.html</a>
<h3>メリット</h4>
ユーザーアクセス時にswfを解釈する仕組のため、ヘッダーに記述するだけ。
再現率が高い
<h3>デメリット</h4>
モバゲープラットフォーム以外では使えない
<h2>reel（提供：GREE）</h3>
<a href="https://docs.developer.gree.net/ja/technicalspecs/reel/" target="_blank">https://docs.developer.gree.net/ja/technicalspecs/reel/</a>（要ログイン）
swf変換系
<h3>メリット</h4>
ユーザーアクセス時にswfを解釈する仕組のため、ヘッダーに記述するだけ。
再現率が高い
<h3>デメリット</h4>
GREEプラットフォーム以外では使えない
<h2>まとめ</h3>
新規で構築するのであれば、CreateJS一択でいいと思います。CreateJSを前提に制作をすれば、フィーチャーフォン→flashlite、スマートフォン→CreateJSで出力したHTML5で運用も軽微になります。
ただ、まだ新しい技術ということも情報があまりにも少なく、独自に未成熟な部分も発見しております。
ツールの進化、情報の蓄積を期待しています。
フィーチャーフォン向けのswfが既にあるならば、それぞれのプラットフォームが提供している、swf変換系のツールを素直に使いましょう。
アプリ化やその他プラットフォームに対応既存コンテンツを対応させる場合は、Swiffy＋FLASH（Andorid2.x系）の組み合わせになり、現時点では、一番工数が掛かります。
こちらも、後1年するとAndroid2.x系ユーザーが少なくなり、Swiffyのみ選択するということでよくなるかもしれません。
<h4>技術参考記事</h6>
<a href="http://ameblo.jp/principia-ca/entry-11033734709.html" target="_blank">http://ameblo.jp/principia-ca/entry-11033734709.html</a>
<a href="http://d.hatena.ne.jp/ndruger/20111113/1321205098" target="_blank">http://d.hatena.ne.jp/ndruger/20111113/1321205098</a>
<a href="http://www.slideshare.net/ytksn/0322engineercafe-12124546" target="_blank">http://www.slideshare.net/ytksn/0322engineercafe-12124546</a>
&nbsp;

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - 2012年

2012/11/08

2012/11/08

2012/11/08

2012/11/08

2012/11/07

2012/11/01

2012/11/01

2012/11/01

2012/11/01

2012/11/01

2012/10/24

2012/10/19

2012/10/18

2012/10/18

2012/10/16

2012/10/11

2012/10/11

2012/10/10