<p>macbookのトラックパッドのジェスチャーを拡張してタブブラウザの<strong>生産性を劇的にアップさせる</strong>すごいアプリ「nex TAB」を最近知ったので、ご紹介します。</p>
<p>以前に紹介した<a href="/officer/mac%E7%89%88chrome%E3%81%A7%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%B8%E3%82%A7%E3%82%B9%E3%83%81%E3%83%A3%E3%83%BC%E3%81%8C%E5%8B%95%E4%BD%9C%E3%81%99%E3%82%8B%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD.html" target="_blank">mac版chromeでマウスジェスチャーが動作する拡張機能「Smooth Gesture」</a>のように、私はブラウザの戻るボタンや、閉じるボタンを押すためにカーソルを合わせにいく作業が非常にストレスが溜まる性格です。ショートカットキーを暗記するところから始まりマウスジェスチャーを探し求め、私がMacを使う理由の一つでもある秀逸なトラックパッドのジェスチャーという段階まで来て、さらに、ジェスチャーを拡張するアプリということで一人胸踊りました。</p>
<p>既にVer.4が出ており、MacAppStoreで販売される350円の有料アプリで即ポチして試しました。</p>
<p>nex Tab</p>
<p><a title="Next Tab" href="http://itunes.apple.com/jp/app/nextab/id468063641?mt=12" target="_blank">http://itunes.apple.com/jp/app/nextab/id468063641?mt=12</a></p>
<h2>操作方法</h3>
<h3>右隣のタブに移動したい時</h4>
<p><a href="/uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1702" alt="スクリーンショット_2013_03_13_11_19" src="/uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220-300x222.png" width="300" height="222" srcset="/uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220-300x222.png 300w, /uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220-228x169.png 228w, /uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220.png 483w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>2本の指を用います。左側の指を置きながら、右側の指をタップします。</p>
<p>逆に左隣のタブに移動したいときは、右側の指を固定し、左側の指をタップします。</p>
<h3>タブを2個以上移動したい時</h4>
<p><a href="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1703" alt="スクリーンショット_2013_03_13_11_20" src="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb-300x221.png" width="300" height="221" srcset="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb-300x221.png 300w, /uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb-228x168.png 228w, /uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb.png 481w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>トラックパッドの上部の境目を移動したい方向になぞります。</p>
<h3>タブを閉じたい時</h4>
<p><a href="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb1.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1704" alt="スクリーンショット_2013_03_13_11_20" src="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb1-300x218.png" width="300" height="218" /></a><br />
3本指を用います。右側2本の指を置きながら、左側の指をタップします。</p>
<h3>新規タブを追加したい時</h4>
<p><a href="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1705" alt="スクリーンショット_2013_03_13_11_20" src="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2-300x220.png" width="300" height="220" srcset="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2-300x220.png 300w, /uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2-228x168.png 228w, /uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2.png 479w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>3本指を用います。左側2本の指を置きながら、右側の指をタップします。</p>
<h3>タブを更新したい時</h4>
<p><a href="/uploads-archive/2013/03/7a245d192479ff5db38067407bcbd7511.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1707" alt="スクリーンショット_2013_03_13_11_21" src="/uploads-archive/2013/03/7a245d192479ff5db38067407bcbd7511-300x220.png" width="300" height="220" /></a></p>
<p>3本指を用います。真ん中の指をタップします。</p>
<h3>ログイン画面に戻る</h4>
<p>1本指でトラックパッドの右端から左端へ素早く移動させます。</p>
<p>※Ver4で追加された新機能です。</p>
<h3>トップとボトムに移動する</h4>
<p>2本指を用いてスクロールする要領で上端から下端に移動させます。</p>
<p><span style="color: #ff0000;">※Ver4.0現在スクロールの方向をナチュラルに設定している場合、スクロールと逆の動きになります。</span></p>
<h2><span style="font-size: 1em;">まとめ</span></h3>
<p>マウスジェスチャーにトラックパッドで最強です。ただ、ジェスチャーが体が記憶するのに時間が掛かりそうです。</p>
<p>&nbsp;</p>


macbookトラックパッドを拡張するアプリ「nex Tab」で劇的生産性アップ

<p>お客様へどんなサイトがいいのか伝える時に言葉だけじゃちょっと・・・</p>
<p>といった時に参考にさせていただいているサイトのご紹介です。</p>
<h2>WEBデザインの見本帳</h3>
<p><a href="http://www.web-mihon.com/"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1686" alt="スクリーンショット（2013-03-06 18.22.23）" src="/uploads-archive/2013/03/d2f17bf502936aa92733467728810f73-300x155.png" width="300" height="155" srcset="/uploads-archive/2013/03/d2f17bf502936aa92733467728810f73-300x155.png 300w, /uploads-archive/2013/03/d2f17bf502936aa92733467728810f73-768x397.png 768w, /uploads-archive/2013/03/d2f17bf502936aa92733467728810f73-228x118.png 228w, /uploads-archive/2013/03/d2f17bf502936aa92733467728810f73.png 960w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>http://www.web-mihon.com/</p>
<ul>
<li>サイトのカテゴリ分けが明確</li>
<li>種類が豊富</li>
<li>サムネイルが直接表示</li>
</ul>
<p>色や印象、業種からも探すことが可能なのでかなりおすすめです。</p>
<p>掲載基準もデザインにこだわわっていて、見ているだけでもかなり楽しいです。</p>
<p>疲れた時に優しいデザインのサイトでいやされるのもありかも。</p>


デザインやイメージの参考サイト

セキュアなパスワードを自動生成する便利ツール

<p>4つ以上の色相を使ったカラフルなデザインは、元気で楽しげな印象を与えてくれます。</p>
<p>にぎやかさや楽しげな印象を出したいときに、よく使われるデザインで、子ども・ファミリー向けで見かけることの多いです。</p>
<p>ただ、色数が多いので、バランスを整えたり、印象を狙い通りにしていくことが、難しいです。</p>
<p>&nbsp;</p>
<p>そこで今回は、全色相系でデザインされた５つのサイトについて、調べてみました。</p>
<p>&nbsp;</p>
<p><a href="http://bikke-bikke.jp/" target="_blank"><img decoding="async" loading="lazy" alt="bikke" src="/uploads-archive/2013/03/site01.jpg" width="328" height="236" /></a></p>
<p>&nbsp;</p>
<p><a href="http://bikke-bikke.jp/" target="_blank">http://bikke-bikke.jp/</a></p>
<p>メインのイメージにアイコン的なイラストと、文字をカラフルに並べ、</p>
<p>楽しそうなイメージがたくさんつまった印象を感じます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://givery.co.jp/special/" target="_blank"><img decoding="async" loading="lazy" alt="givery" src="/uploads-archive/2013/03/site02.jpg" width="328" height="236" /></a></p>
<p><a href="http://givery.co.jp/special/" target="_blank">http://givery.co.jp/special/</a></p>
<p>ごくわずかな場所に限定してカラフルな場所を使い、</p>
<p>カラフルながらに、落ち着いた印象を受けます。</p>
<p>&nbsp;</p>
<p><a href="http://map.itp.ne.jp/" target="_blank"><img decoding="async" loading="lazy" alt="マップMAP" src="/uploads-archive/2013/03/site03.jpg" width="328" height="236" /></a></p>
<p><a href="http://map.itp.ne.jp/" target="_blank">http://map.itp.ne.jp/</a></p>
<p>全体に広がるように全色相が並べられていて、地図の色と合わせて、</p>
<p>楽しげな印象が感じられます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://agrinext.jp/kidsmuseum/" target="_blank"><img decoding="async" loading="lazy" alt="http://agrinext.jp/kidsmuseum/" src="/uploads-archive/2013/03/site04.jpg" width="328" height="236" /></a></p>
<p><a href="http://agrinext.jp/kidsmuseum/" target="_blank">http://agrinext.jp/kidsmuseum/</a></p>
<p>全色相系ですが、緑が多く使われていて、</p>
<p>かわいらしさと、まとまった印象を感じることができます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://motoiderico.com/" target="_blank"><img decoding="async" loading="lazy" alt="motoideRico" src="/uploads-archive/2013/03/site05.jpg" width="328" height="236" /></a></p>
<p><a href="http://motoiderico.com/" target="_blank">http://motoiderico.com/</a></p>
<p>他の4つと異なり、白いスペースが一切ありません。</p>
<p>ピンク系にやや色を偏らせているようです。</p>
<p>にぎやかさを超えた、サイケデリックな印象を受けます。</p>
<p>&nbsp;</p>
<h2>まとめ</h3>
<ul>
<li>基本は白をそれぞれの色に使い別ける。</li>
<li>カラフルな部分が限定されるほど、落ち着いた印象になる。</li>
<li>全色相系でも、中心となる色相に近い色を多めに配置することで、ある色のイメージを出すこともできる。</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


全色相系のサイトデザインを調べる

<p>見栄えを良くすると共にSEO上も有効なので、以下のルールを守って投稿して下さい。</p>
<p>&nbsp;</p>
<h2>見出しレベル</h2>
<p>上記のように、文章を構成する上で、文章ブロックごとに見出しをつけて下さい。</p>
<p>例えば、一番大きい見出しでは、○○の説明→○○の手順→○○の手順→確認→まとめといった内容です。</p>
<p>見出し2からスタートし、3段階用意しています。</p>
<h2>これは見出し2です。&lt;H2&gt;</h2>
<h3>これは見出し3です。&lt;H3&gt;</h3>
<h4>これは見出し４です。&lt;H4&gt;</h4>
<h2>引用</h2>
<p>何かの記事を引用する場合など引用文であることを明らかにするために、エディターの「“」のマークで囲って下さい。</p>
<blockquote><p>ここを引用しています。&lt;blockquote&gt;</p></blockquote>
<h2>強調</h2>
<p>文章のキーワード、言いたいことは、エディターの「B」のマークで文字を<strong>強調</strong>して下さい。本来は、boldの略でしょうが、html上は&lt;strong&gt;で表示されます。これも<strong>SEO上有効</strong>と言われています。一つの記事の中に2〜3は入れるようにして下さい。多すぎでもNGです。</p>
<h2>シンタックスハイライター</h2>
<p>コードなどを書くときにはエディターの一番右上の「&lt;&gt;」のアイコンを使って下さい。詳しく使い方は、他のブログなどを参照して下さい。</p>
<p><a href="http://thikasa.net/20120724/wordpress-plugin-crayon-syntax-highlighter/">http://thikasa.net/20120724/wordpress-plugin-crayon-syntax-highlighter/</a></p>

		<div id="crayon-64953fd585f3c816289982" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;html&gt;Crayon Syntax Highlighterですよと。</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd585f3c816289982-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd585f3c816289982-1"><span class="crayon-h">&lt;</span><span class="crayon-i">html</span><span class="crayon-h">&gt;</span><span class="crayon-e">Crayon </span><span class="crayon-e">Syntax </span><span class="crayon-i">Highlighter</span>ですよと。</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>アイキャッチ画像</h2>
<p>必ず設定して下さい。記事が見やすいかどうか？その名の通りアイキャッチなので直帰率に寄与してきます。</p>
<p><a href="http://toshiiy.blog22.fc2.com/blog-entry-114.html">http://toshiiy.blog22.fc2.com/blog-entry-114.html</a></p>
<p>フリー素材もたくさんあります。</p>
<h2> フォント</h2>
<p>これも、SEOどうこうというよりも記事として見やすいかどうかです。</p>
<p><span style="font-size: x-large;">文字サイズ</span>を<span style="font-size: xx-small;">変えてみたり</span>、<span style="color: #ff0000;"><span style="text-decoration: underline;">色</span>を変えてみて下さい。<span style="color: #000000;"><span style="background-color: #ffff00;">文字の背景色を変える</span>こともできます<del>ねえええ</del>。</span></span></p>
<p>箇条書きにする場合は、</p>
<ol>
<li><span style="line-height: 13px;">このように</span></li>
<li>リストをつかってください。
<ul>
<li>右横のアイコンで</li>
<li>このようにインデントもできます。</li>
</ul>
</li>
</ol>
<h2>特殊なクラス</h2>
<p>以下のようにクラスを設定すると、それぞれの装飾されます。</p>

		<div id="crayon-64953fd585f41845137446" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;a href="/demo/hoshino/31/” class="demo"&gt;demo&lt;/a&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd585f41845137446-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd585f41845137446-1"><span class="crayon-h">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-s">"/demo/hoshino/31/” class="</span><span class="crayon-i">demo</span>"<span class="crayon-h">&gt;</span><span class="crayon-i">demo</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><a class="demo" href="/demo/hoshino/31/">demo</a></p>

		<div id="crayon-64953fd585f42940468513" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;a href="/demo/hoshino/31/” class="link"&gt;demo&lt;/a&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd585f42940468513-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd585f42940468513-1"><span class="crayon-h">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-s">"/demo/hoshino/31/” class="</span><span class="crayon-i">link</span>"<span class="crayon-h">&gt;</span><span class="crayon-i">demo</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><a class="link" href="/demo/hoshino/31/">demo</a></p>
<p>こんな感じです。</p>
<p>リニューアルして以来、PVは右肩上がりです。このまま継続して伸び率を増やして行きましょう。</p>

ブログの書き方ルール

【推測】basic認証の仕組みをPHPで実現してみた

今までで一番高機能かもしれないjQueryプラグインのスライドショー「camera」

<p>通信販売自体は電話やカタログからはがきでの申し込み等前々からあった</p>
<p>販売形態ですが、ECに関してはここ10年ほどでインターネットの普及により</p>
<p>利用者数・売上ともに爆発的に増加しています。</p>
<p>取扱商品は物品・サービス・デジタルコンテンツと様々ですが、</p>
<p>スマートフォンの普及からまた新たな変化がでています。</p>
<p>&nbsp;</p>
<p><span style="font-size: large;">入り口はスマートフォン</span></p>
<p>日本通信販売協会（JADMA）が1月23日に発表した</p>
<p>「インターネット利用実態調査結果」の中で</p>
<p>「スマートフォン購入後にインターネット通販の利用について」調査を行ったところ</p>
<p><strong>・15%が「PCでのインターネット通販利用が増えた」</strong></p>
<p><strong>・14%が「携帯電話（フマートフォン含む）での通販利用が増えた」</strong></p>
<p>と回答しています。</p>
<p>逆にテレビやカタログの通販については減少傾向です。</p>
<p><strong>■5回インターネット利用実態調査結果について</strong></p>
<p><a href="http://www.jadma.org/pdf/press/press_20130123net_survey.pdf">http://www.jadma.org/pdf/press/press_20130123net_survey.pdf</a></p>
<p>スマートフォンの利用率が携帯電話全体の4割を占めいている中で、</p>
<p>スマートフォンが購入のきっかけになるケースが増えている結果ですが、</p>
<p>現在スマートフォンに対応したサイト作成はどうなのでしょうか。。。</p>
<p>&nbsp;</p>
<p>ECサイト運営でスマートフォンサイトの整備が必要は不可欠になりそうです。</p>


ECの購入方法の移行

<p>最近ファッション関連ECサイトの動きが激しい。<br />
大きいところだと、ドコモ、楽天がそれぞれ<br />
マガシークとスタイライフにTOBを仕掛けている。</p>
<p>楽天はファッション関連の流通額を3567億円と初めて発表し、<br />
今後は更にファッション関連の販売に力を入れていくと強調している。</p>
<p>また、スタートトゥデイは新たにZOZObyUというセレクトショップをオープンする。<br />
従来のブランド単位でのラインナップと異なり、<br />
ブランドをまたがっての商品の提案により新たな購買層の獲得を狙う。</p>
<p>なぜ今ファッションECで大きな動きが起こっているのか?<br />
それは大きく分けると<br />
1. 購入者のネットリテラシー向上<br />
2. 競争の激化<br />
3. 技術革新<br />
が挙げられると感じる。</p>
<p>1. 購入者のネットリテラシー向上<br />
サイズやクオリティで、店舗での購入を選択していた購入者が<br />
ネットでの購入に慣れてきたということと、<br />
SNSなど個人の発言がweb上で一定の信頼感が得られるようになり<br />
加えてコミュニケーションツールの普及により購入までの障壁が下がったと考えられる。</p>
<p>2. 競争の激化<br />
即日配達、送料無料、ポイントなどの需要が高まるなか、<br />
利益率の減退に加え、流通、人的コストが増している。<br />
資本力と規模が優位性を保つ唯一の方法となる。</p>
<p>3. 技術革新<br />
付加価値や安心感を向上させるため、<br />
動画を使った表現などはよく目にするようになった。<br />
今後は例えばスマホアプリで自分を撮影して試着できるシステムや<br />
商品を3D表現するECサイトなども出てくるだろう。<br />
そうなると、値引きや流通コストの増加に加え、<br />
システムに対する設備投資もかさみ、これも資本力がものを言う。</p>
<p>要するに、そのECサイトで買うメリットが無ければ生き残れない = 大手の下で展開する<br />
しかないという選択を余儀なくされる時代になったということと思う。</p>
<p>企業にとっては苦しいが、ECサイトのクオリティ向上が図れるだけでなく、<br />
消費者にとっては選択の幅が広がることと、競争によるサービスの向上はEC業界にとってはとても良いことだと思う。</p>


ファッション業界のEC

<p>世の中便利になったもので、<br />
非常にありがたいものが無料で見ることができます。</p>
<p>日々いろんな情報を取得していく中で、<br />
最近(けっこう前でもある)タメになったものをご紹介します！</p>
<h2>デザイン</h3>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/11608357" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/shirokuro331/web-11608357" title="Webデザインのセオリーを学ぼう" target="_blank">Webデザインのセオリーを学ぼう</a> </strong> from <strong><a href="http://www.slideshare.net/shirokuro331" target="_blank">Toshiaki Sasaki</a></strong> </div>
<p>非常に丁寧でわかりやすく書かれています。<br />
デザインは論理的ですね！</p>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/14902681" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/saucerjp/ss-14902681" title="ノンデザイナーのための配色理論" target="_blank">ノンデザイナーのための配色理論</a> </strong> from <strong><a href="http://www.slideshare.net/saucerjp" target="_blank">tsukasa obara</a></strong> </div>
<p>なるほどなるほど・・・それでも配色は難しい・・・</p>
<h2>ディレクション</h3>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15442293" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/cafekenta/20121117-01-dirmtg01" title="20121117 01 dir-mtgスライド01" target="_blank">20121117 01 dir-mtgスライド01</a> </strong> from <strong><a href="http://www.slideshare.net/cafekenta" target="_blank">Kenta Nakamura</a></strong> </div>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15442318" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/cafekenta/20121125-02-dirmtg02" title="20121125 02 dir-mtgスライド02" target="_blank">20121125 02 dir-mtgスライド02</a> </strong> from <strong><a href="http://www.slideshare.net/cafekenta" target="_blank">Kenta Nakamura</a></strong> </div>
<p>まさしくディレクションとはこのことだと思います。<br />
もっとこれを多く実践してくれる人が増えたらいいのにと思います。</p>
<h2>その他</h3>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/7665168" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/hayatomizuno/jquery-7665168" title="ノンプログラマーのためのjQuery入門" target="_blank">ノンプログラマーのためのjQuery入門</a> </strong> from <strong><a href="http://www.slideshare.net/hayatomizuno" target="_blank">Hayato Mizuno</a></strong> </div>
<p>初心者向けですね。枚数は多いですが、サクサク読み進められるので、時間はあまりかからないと思います。</p>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15002576" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/nukaga/webwordpress-15002576" title="文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう" target="_blank">文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう</a> </strong> from <strong><a href="http://www.slideshare.net/nukaga" target="_blank">Junko Nukaga</a></strong> </div>
<p>これも初心者向けですね。概念から方法までわかりやすく見やすいものになってます。</p>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/16459192" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/copywritter/ss-16459192" title="カヤックコピー部のコピー講座" target="_blank">カヤックコピー部のコピー講座</a> </strong> from <strong><a href="http://www.slideshare.net/copywritter" target="_blank">長谷川 哲士</a></strong> </div>
<p>これは、もうなるほどと思ってしまう内容で、とても参考になります。</p>
<p>こういうスライドは本当にありがたく勉強になります。<br />
僕も何か書いてみようかな。。。</p>


web制作においてタメになる(なった)スライドのご紹介

HTML5のCanvasアニメーションに挑戦

<p>最近のプロジェクトでは、スペースがあまりないですが、格好いいかつ分かりやすいツールバーみたいのものを導入したいと思います。<br />
そのとき、この<a href="http://paulkinzett.github.com/toolbar/" target="_blank">toolbar.js</a>というjQueryプラグインを思い出しました。</p>
<p>公式サイト（一応）の格好良さに釣られて、結構簡単に実装できるかなと思いましたが、そうではありません。。<br />
<a href="/uploads-archive/2013/02/toolbar-js-screenshot.png"><img decoding="async" loading="lazy" src="/uploads-archive/2013/02/toolbar-js-screenshot.png" alt="toolbar-js-screenshot" width="110" height="159" class="aligncenter size-full wp-image-1593" /></a></p>
<h2>ソースの書き方が明言されていない</h3>
<p>ます、公式サイトで載せてる書き方（下記）を見て、</p>
<p></p>

		<div id="crayon-64953fd585537970903681" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$('#format-toolbar').toolbar({
	content: '#format-toolbar-options', 
	position: 'top',
	hideOnClick: true
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd585537970903681-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd585537970903681-2">2</div><div class="crayon-num" data-line="crayon-64953fd585537970903681-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd585537970903681-4">4</div><div class="crayon-num" data-line="crayon-64953fd585537970903681-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd585537970903681-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#format-toolbar'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">toolbar</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd585537970903681-2"><span class="crayon-h">	</span><span class="crayon-i">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'#format-toolbar-options'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-64953fd585537970903681-3"><span class="crayon-h">	</span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'top'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd585537970903681-4"><span class="crayon-h">	</span><span class="crayon-i">hideOnClick</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line" id="crayon-64953fd585537970903681-5"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p></p>

		<div id="crayon-64953fd58553b137802333" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div id="format-toolbar-options"&gt;
	&lt;a href="#"&gt;&lt;i class="icon-align-left"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href="#"&gt;&lt;i class="icon-align-center"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href="#"&gt;&lt;i class="icon-align-right"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;	</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58553b137802333-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553b137802333-2">2</div><div class="crayon-num" data-line="crayon-64953fd58553b137802333-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553b137802333-4">4</div><div class="crayon-num" data-line="crayon-64953fd58553b137802333-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58553b137802333-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"format-toolbar-options"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553b137802333-2"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-align-left"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553b137802333-3"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-align-center"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553b137802333-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-align-right"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553b137802333-5"><span class="crayon-r ">&lt;/div&gt;</span><span class="crayon-h">	</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>id=format-toolbar-optionsのdivは書いてありますが、id=format-toolbarのは書いてありません。<br />
公式サイトのhtmlソースを見て拾いましたが、実装してみて下記の書き方しかうまくいきませんでした。</p>

		<div id="crayon-64953fd58553c627864996" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div style="width:5px;float:left;"&gt;
  &lt;div id="format-toolbar" class="settings-button"&gt;&lt;i class="icon-wrench"&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;div id="format-toolbar-options"&gt;
	&lt;a href="#"&gt;&lt;i class="icon-arrow-up"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href="#"&gt;&lt;i class="icon-arrow-down"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;	
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58553c627864996-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553c627864996-2">2</div><div class="crayon-num" data-line="crayon-64953fd58553c627864996-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553c627864996-4">4</div><div class="crayon-num" data-line="crayon-64953fd58553c627864996-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553c627864996-6">6</div><div class="crayon-num" data-line="crayon-64953fd58553c627864996-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58553c627864996-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58553c627864996-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"width:5px;float:left;"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553c627864996-2"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"format-toolbar"</span><span class="crayon-h"> </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"settings-button"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-wrench"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553c627864996-3"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"format-toolbar-options"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553c627864996-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-arrow-up"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553c627864996-5"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-arrow-down"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553c627864996-6"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon-trash"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span></div><div class="crayon-line" id="crayon-64953fd58553c627864996-7"><span class="crayon-i ">&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span><span class="crayon-i ">	</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58553c627864996-8"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>id=format-toolbar-optionsのとid=format-toolbarのを同じdivに入れなければうまく表示出来できませんでしたが、<br />
公式サイトのhtmlソースにはid=format-toolbar-optionsのとid=format-toolbarをばらばら書いてでも表示出来ています。。<br />
何かが条件になっているのかよくわかりません。。</p>
<h2>jQueryのバージョンに注意を</h3>
<p>ソースをダウンロードしてから分かるですが、このプラグインはjquery1.7以上でしか動きません。<br />
公式サイトにはjqueryのバージョンや、対応ブラウザなど一切書いてませんから、ちょっと不安です。<br />
IE8は対応していることを確認できましたが。</p>
<h2>結論</h3>
<p>jQueryのプラグインの選び方をもっと慎重にしたいと思います。</p>

【jQuery】スペースが足りない時に使えるtoolbarjs

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
<div class="booklink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4798122971/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/61JW%2BUp%2B6jL._SL160_.jpg" style="border: none;" /></a></div>
<div class="booklink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">
<div class="booklink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/asin/4798122971/sackoh71-22/" target="_blank" >ビジネスモデル・ジェネレーション ビジネスモデル設計書</a></p>
<div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom:5px;">アレックス・オスターワルダー,イヴ・ピニュール 翔泳社 2012-02-10    </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798122971/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
<p>本の紹介。</p>
<p>マーケティングのフレームワークで3c4p分析など様々ありますが、本作は、ビジネスモデルの共通言語としてのフレームワークを提唱する本です。</p>
<p>私自身は、このようなフレームワークを積極的に取り入れて行きたいと思うので、すごく参考になりました。そして、何より、本のデザインが素晴らしいです。</p>
<p>是非、アマゾンの中身検索や翔泳社の↓ページなどご覧頂きたいところです。流行りのワンカラムのWebデザイン、はたまたランディングページを見ているような、絵が多様されていて、視覚的に入ってくる本でした。</p>
<p><a href="http://www.seshop.com/1satsu/businessmodelgeneration/" target="_blank">http://www.seshop.com/1satsu/businessmodelgeneration/</a></p>
<h2>ビジネスモデル・ジェネレーションとは</h3>
<blockquote><p>〔定義〕ビジネスモデル<br />
ビジネスモデルとは、どのように価値を創造し、顧客に届けるかを論理的に記述したもの</p></blockquote>
<p>45カ国470人の共著者が28459枚ものポストイットを使って累計4000時間、足掛け9年間にわたり、様々なプロトタイプを分析し、ビジネスモデルイノベーションの手法を体系化したものでより深いレベルで顧客、販売チャネル、パートナー、収入の流れ、原価構造などを理解する手法です。</p>
<p>具体的には、ビジネスモデルを9つの要素に分解し、視覚的に客観的に分析を行えるようにビジネスモデルキャンバスというツールを用いて設計します。</p>
<h2><span style="font-size: 1em;">ビジネスモデル・キャンバス</span></h3>
<h3>ビジネスモデル・キャンバス9つの構成要素</h4>
<ol>
<li><strong>顧客セグメント（CS）</strong>企業が関わろうとする顧客グループについて定義
<ul>
<li>誰のために価値を創造するのか？</li>
<li>最も重要な顧客は誰なのか？</li>
</ul>
</li>
<li><strong>価値提案（VP）</strong>特定の顧客セグメントに向けて、価値を生み出す製品とサービスについて記述
<ul>
<ul>
<li>顧客にどんな価値を提供するのか？</li>
<li>どういった問題の解決の手助けをするのか？</li>
<li>顧客のどういったニーズを満たすのか？</li>
<li>顧客セグメントに対してどんな製品とサービスを提供するのか？</li>
</ul>
</ul>
</li>
<li><strong>チャネル（CH）</strong>顧客セグメントとどのようにコミュニケーションし、価値を届けるのかを記述
<ul>
<li>どのチャネルを通じて、顧客セグメントにリーチしたいか？</li>
<li>今はどのようにリーチしているのか？</li>
<li>チャネルをどのように統合できるのか？</li>
<li>どのチャネルがうまくいっており、どのチャネルが最も費用対効果が高いか？</li>
<li>チャネルを顧客の日常と、どのように統合すればよいのか？</li>
</ul>
</li>
<li><strong>顧客との関係（CR）</strong>企業が特定の顧客セグメントに対してどのような種類の関係を結ぶのかを記述
<ul>
<li>顧客セグメントがどんな関係を構築、維持してほしいと期待しているのか？</li>
<li>どんな関係をすでに構築したのか？どのくらいコストがかかるのか？</li>
<li>ビジネスモデルの他の要素とどう統合されるのか？</li>
</ul>
</li>
<li><strong>収益の流れ（RS）</strong>企業が顧客セグメントから生み出す現金の流れを表現
<ul>
<li>顧客はどんな価値にお金を払おうとするのか？</li>
<li>現在は何にお金を払っているのか？どのようにお金を払っているのか？</li>
<li>どのように支払いたいと思っているのか？全体の収益に対してそれぞれの収益がどれくらい貢献しているのか？</li>
</ul>
</li>
<li><strong>リソース（KR）</strong>ビジネスモデルの実行に必要な資産を記述
<ul>
<li>価値を提案するのに必要なリソースは何だろうか？</li>
<li>流通チャネルや顧客との関係、収益の流れに対してはどうだろうか？</li>
</ul>
</li>
<li><strong>主要活動（KA）</strong>企業がビジネスモデルを実行する上で必ず行わなければならない重要な活動を記述
<ul>
<li>価値を提案するのに必要な主要活動は何なのか？</li>
<li>流通チャネルは？顧客との関係は？収益の流れは？</li>
</ul>
</li>
<li><strong>パートナー（KP）</strong>ビジネスモデルを構築するサプライヤーとパートナーのネットワークについて記述
<ul>
<li>パートナーは誰だろうか？主要なサプライヤーは？</li>
<li>どのリソースをパートナーから得ているのか？</li>
<li>どの主要活動をパートナーが行っているのか？</li>
</ul>
</li>
<li><strong>コスト構造（CS）</strong>ビジネスモデルを運営するにあたって発生するすべてのコストを記述
<ul>
<li>ビジネスモデルにおいて特有の最も重要なコストは何だろうか？</li>
<li>どのリソースが最も高価だろうか？</li>
<li>どの主要活動が最も高価だろうか？</li>
</ul>
</li>
</ol>
<h3>ビジネスモデル・キャンバスの活用法</h4>
<ul>
<li>現在と将来のビジネスモデルの見える化</li>
<li>プロジェクトの全体像と役割、相互関係を視覚的に見せる</li>
<li>ビジネスプロセスへと翻訳する</li>
<li>ビジネスを全体的に考え、細部へのこだわりをやめるよう、チームに気付かせてくれる</li>
<li>同僚との共通言語とフレームワークを共有</li>
</ul>
<h2>ビジネスモデルキャンバスのテンプレート</h3>
<p>簡単にGoogleドライブのスプレッドシートを用いて作成しましたので、公開します。</p>
<p>シートの二枚目には、apple itunesのビジネスモデルを参考に掲載しております。是非ご活用下さい。</p>
<p><a class="demo" href="https://docs.google.com/spreadsheet/ccc?key=0Aql-CA6zYTV4dG1nc1dCaHFrVjBzOExTR1JGUVRpb1E&amp;usp=sharing" target="_blank">ダウンロード</a></p>


Business_Model_Canvas__original.png

ビジネスモデル・ジェネレーション ビジネスモデル設計書

<p>ECと一口にいっても様々な機能が最近では備わっています。</p>
<p>いろんな機能がありすぎて使用していない、どんな機能かわからないといった方も実は結構いらっしゃいます。</p>
<p>そんな日々お客様とお話させていただいた中からちょっとご紹介を。</p>
<ul>
<li>定期購入</li>
<li>ポイント</li>
<li>ステップメール等のメール機能</li>
</ul>
<p>ECカートでまずご要望の多い機能は上記の3点です。（業種にもよると思いますが）</p>
<p>今回は定期購入についてご説明したいと思います。</p>
<p>&nbsp;</p>
<p style="font-family: Arial, Helvetica, sans-serif; background-color: #5ee618; border-color: #25d971;"><span style="font-size: medium;"><strong>定期購入</strong></span></p>
<p>読んで字のごとく「定期的」に「同一の商品を購入」というのが定期購入です。</p>
<p>いつでもwebで販売しているのに、なぜ定期便購入にするのかというと</p>
<p>購入されるお客様も販売するお店にもそれぞれのメリットがあります。</p>
<p><strong>お客様側のメリット</strong></p>
<ul>
<li><span class="Apple-style-span" style="line-height: 13px;">商品を通常より安く購入できる（場合によっては送料無料などもあります）</span></li>
<li>日常的に使う商品の買い忘れ防止</li>
<li>注文する手間を省ける</li>
</ul>
<p><strong>お店側のメリット</strong></p>
<ul>
<li>受注商品数の予測が可能</li>
<li>顧客リピート率の向上</li>
<li>売上の安定</li>
</ul>
<p>いいところばかりでデメリットは？と思われるかもしれませんが</p>
<p>実際のところ双方にとってこれほどありがたいと思う購入方法はありません。</p>
<p>かなり昔のことですが、以前通信販売の会社に勤めていた時は</p>
<p>商品のお届け日や届け先が変更できない、支払い方法が代引き固定など</p>
<p>システム上の融通がきかないイメージでしたが、現在ではほとんど対応可能に</p>
<p>なっています。</p>
<p>ちなみに定期システムは当社のLaunch Cartでも実装している機能です。</p>
<p>ぜひご活用ください！</p>
<p>&nbsp;</p>


ECサイトで欲しい機能

<p>3Dプリンタの実用化が本格化しているとの情報が多く入るようになったので<br />
現時点での市場の動向についてまとめてみた。</p>
<p>■市場規模<br />
2013年は23億ドル、2019年には65億ドルと予想されている。</p>
<p>■ツール<br />
様々なモデリングソフトが存在するが、<br />
現在は3D CADが一般化している模様。<br />
世界での利用者は500万人程度。<br />
2D CAD利用者約1400万人のうち年間約100万人が3D CADに移行している。</p>
<p>■メーカー<br />
本場アメリカでは<br />
3D Systems Corporation<br />
Stratasys<br />
の2社が大手。</p>
<p>日本でも<br />
ホットプロシード<br />
キーエンス<br />
ローランド ディー. ジー.<br />
などの企業が有名。</p>
<p>■使用出来る素材<br />
・樹脂<br />
・セラミック<br />
・金属<br />
印刷用素材としては、家庭用ではフィラメントが一般的で<br />
カラーも多く出回っている。</p>
<p>■まとめ<br />
直近では医療や工業製品で使われ始めており、<br />
例えば医療では自分の骨格にぴったりのインプラントを作ったり<br />
最近ではES細胞をプリントして臓器を作る研究も進んでいる。<br />
<a href="http://wired.jp/2013/02/17/bodies-will-print-in-the-laboratory/" target="_blank">http://wired.jp/2013/02/17/bodies-will-print-in-the-laboratory/</a></p>
<p>また、GE社は3Dプリンタによってジェットエンジンの部品を生産しており、<br />
ボーイング社の小型機への供給が決まっている。</p>
<p>プロトタイプの印刷という利用方法としては既に浸透しつつあり、<br />
MS社のsurfaceは開発に300個以上の試作を用意しており<br />
その多くは3Dプリンタによって作られたという。</p>
<p>今後は上記のような利用方法から発展していく傍ら<br />
中小規模での利用も増え、そうなるとモデリングを得意とする会社や<br />
デザイナーを抱える会社がモデリング技術を備えることにより<br />
メーカーとの連携が増え、結果として3D制作関連の企業も増加すると思う。</p>
<p>また、個人レベルでの製造業が可能となり、<br />
例えばiPhoneケースやメガネなどの個人メーカーが増えるかもしれない。</p>


3Dプリンタの現状

jQueryでTouch the Numbersを作ってみた

<p>ミャンマーのIT企業は他の国と比べて、アウトソーシングの仕事を受けられない理由はインターネットシステムに信頼されていない事と見られています。インターネットの欠陥のため、仕事が遅延した場合は海外の会社へ補償金を払わなければならないこと、そのためにアウトソーシング事業の大きな仕事をできずに、小さな仕事だけを行っています。</p>
<p>その件に関して、2012年９月にネイピードで行われた通信情報技術の発展についてのセミナーで通信郵政省の大臣が、インターネットシステムが海外から信頼されるようにする事と、通信郵政省がインターネットについて責任を持っていく事を発言しました。</p>
<p>計画として、ミャンマーで開催する2013年ASEAN競技大会(SEA GAME)に間に合うようにインターネットの通信速度を10GBにまで引き上げる準備をしているようです。<br />
現在、ミャンマー国内で使用しているインターネットの速度は3GBであり、10GBまで引き上げる計画であります。</p>
<p>以前は、その計画の為に日本から支援をいただいているようでしたが、結局、韓国の政府の機関に取られたみたいです。</p>
<p>携帯に関してもいろいろ変化があります。</p>
<p>３年前(2010)、来日したときは携帯番号一個を買うのに200万チャット(約20万円)かかりました。だいたい、３０人に一人だけが持っているようなとても貴重な物でした。月給２0万チャット(約2万円)の家族は携帯を買う事は夢のようでした。約20万円の携帯もただ通話だけで来て、インターネットは使えませんでした。</p>
<p>先月、一時帰国したときはどこ行ってもみんな携帯をいじっている様子を見かけました。２年前一回一時帰国しましたが、来日する前の状況とは変わりませんでした。今回、帰ったときに大きな変わったことを言うとしたら、携帯とインターネットの事でしょう。</p>
<p>去年は200万チャット(約20万円)の携帯と50万チャット(約5万円)まで下げましたが、今年から２0万チャット(2万円)まで下げました。政府は5年計画で国内の電話普及率を57%に引き上げるという計画を立てました。これを実現する為には、3万チャット(約3千円)まで下げていくと発表しました。<br />
携帯にインターネットを設置すると設置料は１万チャット(約千円)、利用料金は１分4チャット(約0.4円)、1時間240チャット(約24円)です。<br />
通話料は１分25チャット(約2.5円)です。</p>


ミャンマーのインターネット回線と携帯

<p>私のタイムライン界隈で先週「SOCIAL MEDIA WEEK」がかなり賑わっていたので、参加してきました。</p>
<blockquote><p><strong>■Social Media Week について</strong></p>
<p>2009年2月、アメリカのニューヨークからスタートしたソーシャルメディアに関するマーケット創造のためのイベントです。毎年2月と9月に5日間開催し、これまで計7回開催しています。2012年9月のSocial Media Weekでは世界13都市で開催、約980イベントを実施し、計約3万人にのぼる参加者を集めました。</p></blockquote>
<p>とあります。</p>
<p>公式サイトは</p>
<p><a href="http://socialmediaweek.org/tokyo/" target="_blank">http://socialmediaweek.org/tokyo/</a></p>
<p>になりますが、Wordpressで作られているようですが、正直みづらいですね。</p>
<p>基本的には言語を変更する形式で各国にローカライズしているわけではないので、致し方ない部分かもしれませんが、私自身が今後、グローバルなサイトを構築する上で、課題を感じました。</p>
<p>公式ガイドブックによると、SOCIAL MEDIA WEEKは４年目のイベントとなりますが、東京での開催はCCIさんが主催で今年が２回目になるとのことです。</p>
<p>そのような中で、SOCIAL MEDIA WEEKが提唱する時代を拓くキーワード15が的を得ていたので、ご紹介します。</p>
<h2>時代を拓くキーワード15</h3>
<ol>
<li><span style="line-height: 13px;">キュレーション</span></li>
<li>ビッグデータ</li>
<li>クラウドファンディング</li>
<li>オープン・イノベーション</li>
<li>ソーシャルグッド</li>
<li>インターネット選挙活動</li>
<li>無料通話アプリ</li>
<li>オンライン・コミュニティマネジメント</li>
<li>インバウンド・マーケティング</li>
<li>O2O</li>
<li>ソーシャルTV</li>
<li>Nptech（NPO分野でのテクノロジー活用）</li>
<li>Edtech（教育分野でのテクノロジー活用）</li>
<li>ソーシャルリクルーティング</li>
<li>ソーシャルメディア・リテラシー教育・研修</li>
</ol>
<h2>まとめ</h3>
<p>実際、会場に行ってみると、複数会場で同時開催されているせいか、USTREAMで中継をされているせいか、思ったよりも混雑はなく私が行った講談社の会場では100名くらいでいたくらいでした。</p>
<p>時代を拓くキーワードに関しては、今までも見てきたワードですね。事業戦略として、このどこかに当てはまるもの、その中でも長く成長が続くと思われるものを見極めていきたいと思います。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2013/03/13

2013/03/07

2013/03/07

2013/03/07

2013/03/07

2013/03/07

2013/03/06

2013/02/28

2013/02/28

2013/02/28

2013/02/28

2013/02/28

2013/02/27

2013/02/21

2013/02/21

2013/02/21

2013/02/20

2013/02/20