ページリンク付きのアンカーリンクに対応したjQueryのスムーススクロール

<p>WEBデザインとして定番として使われているものの中には、</p>
<p>実はユーザーにとって、ストレスの元になっているものがいくつかあることを最近知りましたので、</p>
<p>そういったユーザーをいらだたせている定番のWEBデザインについてご紹介させていただきます。</p>
<p><span style="display:block;margin-bottom:-15px">&nbsp;</span></p>
<p>今回紹介するものはスマホの時に特に問題となるものが多いです。</p>
<p>PCでご覧の方でDEMOページをご覧になる方は、スマホからご覧になることをお勧めいたします。</p>
<p>↓このページのQRコード<br />
<img decoding="async" class="alignnone wp-image-8006 size-full" src="/uploads-archive/2015/08/qr1.png" alt="" width="120" srcset="/uploads-archive/2015/08/qr1.png 175w, /uploads-archive/2015/08/qr1-150x150.png 150w" sizes="(max-width: 175px) 100vw, 175px" /></p>
<p>&nbsp;</p>
<h2>予告のないポップアップ・別タブ表示(特にスマホ)</h2>
<p>通常リンクと区別のない唐突な別タブでのリンクや、</p>
<p>ページ訪問時のポップアップでの情報掲載などは、</p>
<p>ユーザーが意図していない動作であることが多く、ユーザーをいらだたせる原因となります。</p>
<p>スマホではタブ操作がやや面倒な場合が多いため、別タブでのリンクの表示もストレスのもととなります。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo01-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>リンク先を別タブで表示するときは、リンクに別タブで開くことをアイコンなどで明示する。</li>
<li>ページ訪問時の情報の載せ方は、突然表示するのではなく、<br />
明示的なボタンを置くなど、ユーザーのタイミングで表示できるように工夫する。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo01-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>スクロール操作による特殊な動作(パララックスなど; 主にPC)</h2>
<p>パララックスのような、スクロールしたときの動作をブラウザ本来の動きとは違う動きにするデザインは、</p>
<p>ユーザーが本来行いたい操作を妨害するため、ユーザーをいらだたせる原因となります。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo06-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>スクロール操作は基本的にデバイス本来の動きに合わせていないとストレスになるため、パララックスなどの操作は避ける事が望ましい。</li>
<li>どうしても演出としてパララックスなどの効果が必要とされる場合は、スクロール感がデバイス本来の動きに近づくように厳密な調整をおこなう。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo06-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>ページ内のスクロール可能な箇所(主にスマホ)</h2>
<p>ページの中に高さを固定してスクロールできるようにした場所があると、</p>
<p>ページ全体のスクロールを妨害することになるため、ユーザーをいらだたせてしまします。</p>
<p>特にスマホでは画面が小さいため、深刻になってくることが多いです。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo02-01.html">DEMO</a></p>
<p><a class="demo" href="/demo/ninomiya/82/demo03-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>スマホでの表示のときは、SNSのタイムラインの表示は諦める(SNSページヘのリンクバナーなどに置き換える)。</li>
<li>マップは画面の横幅いっぱいに表示せず、横幅は画面の1/2〜2/3程度に抑え、代わりにマップへのリンクを置く。</li>
<li>記事の表示領域を狭めておきたい場合は、折りたたみなどの方法を使う。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo02-02.html">DEMO</a></p>
<p><a class="demo" href="/demo/ninomiya/82/demo03-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>スライダー等の自動スライド</h2>
<p>自動で動くスライダーは、製作者が見せたいと思うものを目立たせたり、</p>
<p>限られたスペースで見せたいコンテンツへ誘導する手段としてよく使われていますが、</p>
<p>これはユーザー自身が操作する場合には、操作を妨害したり、誤操作を招く原因となってしまうため、</p>
<p>実はユーザーにストレスを感じさせてしまいます。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo04-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>スライダーの操作はユーザーに託し、操作可能であることがわかりやすいデザインにすることで、ユーザーによる操作を促す。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo04-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>スマホ表示でのHTMLのviewport設定による拡大縮小の制限(スマホの場合)</h2>
<p>HTMLの&lt;head&gt;内で、以下のようにviewportの設定をすると、スマホでのユーザーによる拡大縮小の操作を制限することができます。</p>

		<div id="crayon-649540158ad9c774140592" 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;meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'&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-649540158ad9c774140592-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-649540158ad9c774140592-1"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">'viewport'</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><a class="demo" href="/demo/ninomiya/82/demo05-01.html">DEMO(スマホご覧ください)</a></p>
<p>この設定は製作者が予期しない動作を制限する目的で行われることが多いのですが、</p>
<p>ユーザーが画像や小さな文字を拡大して確認するという操作を妨げますので、</p>
<p>場合によってはユーザーに不便な思いをさせてしまうことになります。</p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>viewportによる拡大縮小の制限をしない</li>
</ul>
<p></p>

		<div id="crayon-649540158ada1502367698" 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;meta name="viewport" content="width=device-width, initial-scale=1.0"&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-649540158ada1502367698-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-649540158ada1502367698-1"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"viewport"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"width=device-width, initial-scale=1.0"</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><a class="demo" href="/demo/ninomiya/82/demo05-02.html">DEMO(スマホご覧ください)</a></p>
<p>&nbsp;</p>
<h2>まとめ (ユーザーをいらだたせるWEBデザインの共通点と新たなWEBデザインを考える場合のポイント)</h2>
<p>ユーザーをいらだたせてしまうWEBデザインの共通点は、</p>
<p>ユーザーが意図していない動作をさせたり、ユーザーの操作を妨害してしまうという点です。</p>
<p>&nbsp;</p>
<p>製作者がどうしてもユーザーに見せたいという思いが強すぎると、</p>
<p>ついついユーザーの使い勝手を忘れて、</p>
<p>ユーザーにとっては不便なデザインとなってしまう場合があります。</p>
<p>せっかく見せたいと思って工夫をこらしても、</p>
<p>それがユーザーのストレスになってしまう場合は、</p>
<p>それらはユーザーにとって「邪魔なもの」として捉えられてしまうことになってしまいます。</p>
<p>&nbsp;</p>
<p>「見せたい」の前に「使いやすい」を前提にすることが、</p>
<p>新たなWEBデザインを考えだす上で必要なことだと感じました。</p>
<p>&nbsp;</p>
<h2>参考図書</h2>
<p><a class="link" href="http://www.amazon.co.jp/dp/4862462650/" target="_blank" rel="noopener">「デザイニングWebアクセシビリティ &#8211; アクセシブルな設計やコンテンツ制作のアプローチ」 2015.7.27 太田良典(著), 伊原力也(著)</a></p>
<p><a class="link" href="http://www.amazon.co.jp/dp/4861009383/" target="_blank" rel="noopener">「融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論」 2015.1.21 渡邊恵太(著)</a></p>

ユーザーをいらだたせる定番のWEBデザイン５個とその改善策(スマホ向け多め)

<p>web業界等の勉強会やセミナーのイベントを探すサービスを提供している「<a href="http://eventdots.jp/" target="_blank">dots</a>」が2015年8月1日にイベントスペースをオープンしていました。</p>
<p>コワーキングスペースがありつつ、大人数の勉強会・イベントにも対応できるキャパがあるという今までのコワーキングスペースを拡張したような場所です。</p>
<p>8月は無料だったので言ってみたのですが、かなりオシャレでひろびろとした空間でした。<br />
柱がないのですごい開放的に感じました。</p>
<p><a href="https://eventdots.jp/space" target="_blank" class="link">イベント＆コミュニティスペース &#8211; dots.[ドッツ] in 渋谷</a></p>
<p>一部のエリアです。<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-7995" src="/uploads-archive/2015/08/11705351_917950434939110_4427048311893945615_n.jpg" alt="11705351_917950434939110_4427048311893945615_n" width="640" height="360" srcset="/uploads-archive/2015/08/11705351_917950434939110_4427048311893945615_n.jpg 960w, /uploads-archive/2015/08/11705351_917950434939110_4427048311893945615_n-300x169.jpg 300w, /uploads-archive/2015/08/11705351_917950434939110_4427048311893945615_n-228x128.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>今後この場所で勉強会やセミナーが結構開催されそうな予感がしそうですね・・・</p>
<p>利用には<a href="http://eventdots.jp/" target="_blank">dots</a>の会員登録が必要なようです！<br />
9月以降は費用がかかりますが、そこまで高くないので渋谷で空き時間ができた際利用したいですね〜</p>


IT系の勉強会・イベント情報サイトの「dots」が渋谷にイベントスペースを作っていた

<p>今でも業務で使うソフトといったら専らMicrosoftOfficeのWord,Exell,Powerpointだと思いますが、さらに業務別に特化したツールがどんどん出てきていることだと思います。</p>
<p>MicrosoftOfficemの汎用性と出来の良さと最早デファクトスタンダードとしての立ち位置で、ビジネスを進める上でなくてはならない存在は揺るぎないのですが、その中でも、例えば今までパワーポイントやエクセル（一部Adobe製品）の図形描画を駆使して作っていたワイヤーフレームやプロトタイプと呼ばれるデザイン前の骨組みを作成するためのツールは、オンラインでの共有がリアルタイムでの共同編集が出来るようなツールが進化して登場してきています。</p>
<p>そして、私が最近感じていたことが、汎用性と生産性がトレードオフとなって、Officeを超えて生産性を上げるツールが増えていることです。</p>
<p>こういった新しいツールを試してみることは非常に好きですし、生産性は常に改善を目指している中で、今までOfiiceでやっていたことを代替するものの一つが今回紹介する会議、議事録に特化したサービスです。</p>
<h2>Minutes.io</h2>
<p><a href="/uploads-archive/2015/08/c9546107301adfc146a95932712ec5af.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7988" src="/uploads-archive/2015/08/c9546107301adfc146a95932712ec5af-300x165.jpg" alt="戦略会議" width="300" height="165" srcset="/uploads-archive/2015/08/c9546107301adfc146a95932712ec5af-300x165.jpg 300w, /uploads-archive/2015/08/c9546107301adfc146a95932712ec5af-1024x564.jpg 1024w, /uploads-archive/2015/08/c9546107301adfc146a95932712ec5af-228x126.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="https://minutes.io/welcome" target="_blank">https://minutes.io/welcome</a></p>
<p>こちらのツールは無料で、すぐに始めることが出来ます。</p>
<p>海外のサービスなので基本英語ですが、Web上でちゃんと日本語も入力できます。</p>
<ul>
<li>プロジェクト名</li>
<li>タイトル</li>
<li>日時</li>
<li>場所</li>
<li>議事</li>
<li>参加者</li>
<li>各Todoに対して、ジャンル、対応者、期限</li>
</ul>
<p>さらに画像の下部を見て頂くと、メールで送れたり、印刷したりといったところが出来ます。</p>
<p>以上のように会議に必要な要素は網羅されています。</p>
<h2>LESS MEETING</h2>
<p><a href="/uploads-archive/2015/08/Less_Meeting___A_Quick_LessMeeting__Meeting_Page__Tutorial.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7989" src="/uploads-archive/2015/08/Less_Meeting___A_Quick_LessMeeting__Meeting_Page__Tutorial-300x203.jpg" alt="Less_Meeting___A_Quick_LessMeeting__Meeting_Page__Tutorial" width="300" height="203" srcset="/uploads-archive/2015/08/Less_Meeting___A_Quick_LessMeeting__Meeting_Page__Tutorial-300x203.jpg 300w, /uploads-archive/2015/08/Less_Meeting___A_Quick_LessMeeting__Meeting_Page__Tutorial-228x154.jpg 228w, /uploads-archive/2015/08/Less_Meeting___A_Quick_LessMeeting__Meeting_Page__Tutorial.jpg 1017w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://lessmeeting.com/" target="_blank">http://lessmeeting.com/</a></p>
<p>こちら有料で人数によって月額の課金額が変わるビジネスモデルになっています。</p>
<p>会議時間の削減を目的としたサービスで議事録の機能や、各種カレンダーアプリと連携してTodoのスケジュール管理といったところまでが出来るようになっています。</p>
<p><a href="/uploads-archive/2015/08/Less_Meeting___Dashboard.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7990" src="/uploads-archive/2015/08/Less_Meeting___Dashboard-300x264.jpg" alt="Less_Meeting___Dashboard" width="300" height="264" srcset="/uploads-archive/2015/08/Less_Meeting___Dashboard-300x264.jpg 300w, /uploads-archive/2015/08/Less_Meeting___Dashboard-228x201.jpg 228w, /uploads-archive/2015/08/Less_Meeting___Dashboard.jpg 1011w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<h2>まとめ</h2>
<p>お客様とのやり取りの場合、やはり、誰でも使っているソフトというのが求められてしまうこともありますが、まずは社内での試験導入という形から進めていこうかなと思います。</p>
<p>&nbsp;</p>


議事録用のWebサービス「Minutes.io」と「LESS MEETING」

<p>ECにおいてレビューの重要性は言わずもがなですが、消費者は何かを購入する前にできるだけ情報を得ようとします、そして商品の値段が高額なほどその傾向は顕著になると思います。<br />
通常商品ページなどにあるレビューは１つあたり数行程度の投稿がほとんどで、もちろん参考にはなりますが情報量が少ない気もします。</p>
<p>しかし、最近はお小遣い目当てのユーチューバーや小売店がレビュー動画を作成していて、<br />
色んな商品のレビュー動画が存在しています。</p>
<p>コメントだけのレビューに比べて動画では商品の質感やサイズが目で見てわかり、<br />
製作者が顔出しで解説していることが多いので信用性も高く感じます。</p>
<p>人気のあるレビュー動画をいくつかピックアップしてみました。</p>
<h3>バイクのレビュー動画　「MOTOBASIC」</h3>
<p><a href="https://www.youtube.com/user/MotoBasic/videos"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7977" src="/uploads-archive/2015/08/3.jpg" alt="3" width="640" height="466" srcset="/uploads-archive/2015/08/3.jpg 640w, /uploads-archive/2015/08/3-300x218.jpg 300w, /uploads-archive/2015/08/3-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="https://www.youtube.com/watch?v=43qFLq89yig"><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/43qFLq89yig"></iframe></a></p>
<p>こちらはバイクに試乗したレビューをいくつも投稿しています。</p>
<p>バイクは高額ですから、購入を考えている人にとってはとても参考になると思います。</p>
<p>内容はスペックの説明はもちろん、実際にバイクに乗った目線やエンジン音など、かなり説明も詳しくしています。</p>
<p>客観的な立場での解説なので高い信用性を感じます、そのためかチャンネル登録者数は55,739人、全体の<span class="about-stat">視聴回数は <b>25,791,764</b> 回</span> （2015年8月25日現在）とかなり影響力もあるようです。</p>
<p>&nbsp;</p>
<h3>本のレビュー動画　「もっと、本のある生活に。」</h3>
<p><a href="https://www.youtube.com/channel/UCwUx4QvAZeqaKMWds7HWs9w/videos"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7975" src="/uploads-archive/2015/08/1.jpg" alt="1" width="640" height="455" srcset="/uploads-archive/2015/08/1.jpg 640w, /uploads-archive/2015/08/1-300x213.jpg 300w, /uploads-archive/2015/08/1-228x162.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>書籍という物の性質上、レビューはネタバレになる恐れがあるので全ては語られませんが、面白そうな内容をピックアップして紹介しています。映画の告知を観ているような感じで「読んでみようかな」という気にさせてくれます。どうやら本の編集担当者などが出演して解説しているようです。</p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/1xYpyiMkoh0"></iframe></p>
<p>専門書の場合には下の動画のように著者自身が登場して本の内容や楽しみ方を紹介する場合もあります。</p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/SNkTmE2ZXgE"></iframe></p>
<p>&nbsp;</p>
<h3>おもちゃのレビュー動画　「かんなあきらCHANNEL」</h3>
<p><a href="https://www.youtube.com/user/potemi926/videos"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7976" src="/uploads-archive/2015/08/2.jpg" alt="2" width="640" height="468" srcset="/uploads-archive/2015/08/2.jpg 640w, /uploads-archive/2015/08/2-300x219.jpg 300w, /uploads-archive/2015/08/2-228x167.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>女の子の姉妹がおもちゃで実際に遊んでいる姿をアップしています。</p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/mX4TSLCr29w"></iframe></p>
<p>遊んでいる様子を見せているいて、いかにもユーチューバーという感じのＶＴＲです。チャンネル登録者数は8万人を超えていて相当な人が見ているようです。</p>
<p>動画に対する書き込みは海外からのコメントも多く、「どこで購入できるのか？」という質問もあったりします。</p>
<p>おもちゃの購入を考えている親としては、安全な物、発育に良い影響がある物、すぐに子供が飽きない物など色々確認したいという事かもしれません。</p>
<h3>商品を比較する事を想定して動画を作成する</h3>
<p>ECサイトにおける動画の役割を考えた時に、それは複数の商品を比較するための材料をできるだけ提供する事です。</p>
<p>消費者は既にある程度購入の意思をもってサイトに入ってきているので、消費者の希望に最もマッチした商品に導いてあげる事で購入に繋がるはずです。</p>
<p>つまりECサイトにおいての動画は商品を比較する事を想定したつくりにする必要があると思います。</p>
<p>上で紹介した動画に共通するのは、動画の構成がある程度統一されているという事です。</p>
<p>当たり前のようにも感じますが、商品の説明をする際のフォーマットを統一する事はユーザーが商品を比較しやすくなるのでとても重要だと思います。加えて動画を作成する側としてはフォーマットが決まっていた方が効率よく作成できます。</p>
<h3>レビュー動画で返品率を下げる</h3>
<p><a href="http://review.kakaku.com/review/moviereview/PageNo=4/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7987" src="/uploads-archive/2015/08/4.jpg" alt="4" width="640" height="627" srcset="/uploads-archive/2015/08/4.jpg 640w, /uploads-archive/2015/08/4-300x294.jpg 300w, /uploads-archive/2015/08/4-228x223.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>&nbsp;</p>
<p>上は価格.comの動画レビューのページですが、最近は楽天などモールにおけるレビューでも動画を投稿できるようになってきています。</p>
<p>狙いとしては充実した商品ページでコンバージョン率を上げる事に加えて、返品率を下げることにあるようです。動画で商品を見せることで購入してから「イメージと違った」というケースを減らせます。</p>
<p>モールは購入した商品の価格から〇%という形で手数料を取ることで利益を上げているので、返品による手数料の取り損ねを軽減できます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


ECでの動画活用「レビュー動画サイトからヒントを探る」

Ansibleを実際に導入してみた (1)

<p>スマホなどで自分で撮影した動画と映画やドラマの映像を比べると、「質感というか雰囲気が違うんだよな」と感じたことはないでしょうか？</p>
<p>そもそもカメラなど撮影機材の差という事もあるのですが、実はほとんど映画やドラマの映像は色味を変える加工が施されています。これをカラーグレーディングといいのですが、この作業をすることでかなり印象が変わってきます。</p>
<p>いくつか例を見て頂くとわかりやすいと思います。下の動画はカラーグレーディングを施していないオリジナルです。</p>
<p><video src="/demo/makabe/10/video/nomal.mp4" controls="controls" width="600" height="300"></video></p>
<h2>悲しい雰囲気</h2>
<p>これに青色を強調したカラーグレーディングを施すとこんな感じになります。<br />
<video src="/demo/makabe/10/video/sad.mp4" controls="controls" width="600" height="300"></video><br />
悲しい印象やこれから悪いことが起こりそうな雰囲気が出ると思います。</p>
<h2>カラーグレーディングで時代・時間をかえる</h2>
<p>カラーグレーディングではを時代かえるしまう事もできちゃいます。</p>
<p><video src="/demo/makabe/10/video/past.mp4" controls="controls" width="600" height="300"></video><br />
ホワイトバランスを変化させる事で過去に起きた出来事や、回想シーンをイメージさせる事ができます。</p>
<p>&nbsp;</p>
<p>次は夕・夜に時間をかえます。</p>
<p>夕方<br />
<video src="/demo/makabe/10/video/early_evening.mp4" controls="controls" width="600" height="300"></video><br />
夜<br />
<video src="/demo/makabe/10/video/night.mp4" controls="controls" width="600" height="300"></video><br />
夜のシーンを実際には明るいうちに撮影して、カラーグレーディングで夜にみせているという事をドラマなどではよくやっているようです。</p>
<h2>インスタグラム風の加工</h2>
<p>青系の色を足して、コントラストを強くします。さらにビネットしているようにまわりを黒くぼかします。<br />
<video src="/demo/makabe/10/video/Instagram.mp4" controls="controls" width="600" height="300"></video><br />
こうした加工でなんてことない動画や画像がちょっとカッコよく見えます。</p>
<p>カラーグレーディングには専用ソフトもありますが、動画編集ソフトでもある程度できます。</p>


カラーグレーディングで動画の印象を変える　インスタグラム風の加工

sessionStorageとlocalStorageについて

<p>ミャンマー国家計画・経済開発省のアウン・ナイン・ウー投資企業管理局長によりますと、2015年４~８月に承認した同国への海外直接投資（ＦＤＩ）が１８億ドル超となり、前年度（２０１３年３月まで）１年間の１４億ドルを上回ったそうです。</p>
<p>承認されたFDIのほとんどはアジア地域からのものだそうです。</p>
<p>ヤンゴン市内では以前より就職チャンスも増えつづあります。<br />
外資系の会社に負けないようにサービス業もすこしつづ、いい方向に向いて発展されていると感じられている。</p>
<p>今年はミャンマーの為にいい変化ができると、みんなが希望していますが、11月に行われる選挙が少し危うい形になっています。</p>
<p>外資系の会社も予定している計画の実地の時期を延長して、<br />
１１月の選挙の状況を待ち望んでいる様子です。</p>
<p>ミャンマーの首都、ネピドーでは１２日夜、与党のＵＳＤＰ＝「連邦団結発展党」の本部が、警察（約200人）によって一時封鎖され、<br />
与党の党首が突然、解任されたことになりました。<br />
ＵＳＤＰの関係者によりますと、党本部では当時、党首のシュエ・マン下院議長が不在のまま、ほかの幹部らによる会合が開かれていて、その場でシュエ・マン下院議長を党首から解任することが決まったということです。<br />
これは元軍事政権のトップにいた、テンシュエさんの命令だそうです。</p>
<p>解任されたシュエ・マン下院議長はアウンサンスチーさんに賛成していて、<br />
「もし、自分は大統領に選ばれたら、アウンサンスチーさんと力をあわせていく」というような話をしていたそうで、<br />
元軍事政権の強い人たちに、注目されています。</p>
<p>突然の出来たことで、通話会社であるMPT、telenor、Oredooなどの電波も落とされていて、<br />
シュエ・マン下院議長と関係がある一つのラジオ局も閉鎖されました。</p>
<p>出来ていることは軍事政権のやり方に一致している。<br />
11月の選挙は正しく平等で行うことができるか、みんな心配している様子です。</p>
<p>11月の選挙結果によて、外資系の企業が動き出したり、一気にFDIの状況が変化していくと思います。</p>


対ミャンマーFDIと政治事情

<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/4414304229/sackoh71-22/" target="_blank"><img decoding="async" style="border: none;" src="http://ecx.images-amazon.com/images/I/51cb7nbpZnL._SL160_.jpg" alt="" /></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/4414304229/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" target="_blank" rel="nofollow">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom: 5px;">ロバート・B・チャルディーニ 誠信書房 2014-07-10</div>
<div class="booklink-link" style="margin-top: 5px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4414304229/sackoh71-22/" target="_blank" rel="nofollow" name="booklink">Amazon.co.jp で詳細を見る</a></div>
</div>
</div>
<p>影響力の武器という日本語訳ですが、原題「influence: The Psychology of Persuasion」<br />
のほうが当然ですがしっくりきます。</p>
<p>行動経済学、行動心理学と呼ばれる分野ですね。<br />
返報性や一貫性など既に様々な書籍でも書かれているものから広い範囲で網羅的にまとまっています。<br />
非常に面白いのが、それぞれの防衛法が書かれていることです。<br />
確かに、本書は影響力の武器という攻撃的な題名ですが、同時に武器を知ることで防衛も出来るということを書かれています。</p>
<h3 id="-">目次</h2>
<ul>
<li>第１章　影響力の武器
<ul>
<li>カチッ・サー</li>
<li>思考の近道に賭ける</li>
<li>誰が得をしているのか？</li>
<li>柔道</li>
<li>まとめ</li>
</ul>
</li>
<li>第２章　返報性―昔からある「ギブ・アンド・テイク」だが
<ul>
<li>返報性のルールはどのように働くか</li>
<li>譲り合い</li>
<li>拒否させた後に譲歩する</li>
<li>防衛法</li>
<li>まとめ</li>
</ul>
</li>
<li>第３章　コミットメントと一貫性―心に住む小鬼
<ul>
<li>一貫性のテープが回る</li>
<li>コミットメントが鍵</li>
<li>防衛法</li>
<li>まとめ</li>
</ul>
</li>
<li>第４章　社会的証明―真実は私たちに
<ul>
<li>社会的証明の原理</li>
<li>死因は……不明（確なこと）</li>
<li>私のまねをしなさい……サルのように</li>
<li>防衛法</li>
<li>まとめ</li>
</ul>
</li>
<li>第５章　好意―優しそうな顔をした泥棒
<ul>
<li>友達になるのは、影響を及ぼすため</li>
<li>あなたを好きになるのはなぜ？　その理由を考えてみよう</li>
<li>条件づけと連合</li>
<li>防衛法</li>
<li>まとめ</li>
</ul>
</li>
<li>第６章　権威―導かれる服従
<ul>
<li>権威のもつ影響力の強さ</li>
<li>盲目的な服従のもつ魅力と危険性</li>
<li>重要なのは中身ではなく外見</li>
<li>防衛法</li>
<li>まとめ</li>
</ul>
</li>
<li>第７章　希少性―わずかなものについての法則
<ul>
<li>少ないものがベスト　失うことはワースト</li>
<li>心理的リアクタンス</li>
<li>最適の条件</li>
<li>防衛法</li>
<li>まとめ</li>
</ul>
</li>
<li>第８章　手っとり早い影響力―自動化された時代の原始的な承諾
<ul>
<li>原始的な自動性</li>
<li>現代の自動性</li>
<li>近道は神聖なもの</li>
</ul>
</li>
</ul>
<h3 id="6-">6つのポイントに自分なりの解釈を添えて</h2>
<h4 id="-reciprocation-">返報性（reciprocation）</h3>
<p>人は、相手から何かをもらうと、何かお返しをしなくてはと考える傾向があります。。<br />
いわゆるギブアンドテイクの精神です。<br />
路上で無料サンプルを配るというマーケティングの手法も、実際に商品を試してもらうということ以上にこの返報性という特性を生かしていると思われます。</p>
<h4 id="-consistency-and-commitment-">コミットメントと一貫性（consistency and commitment）</h3>
<p>人は、自分で決定したものに対して、自分の考えを曲げずに一貫して取り組もうとする傾向があります。<br />
この性質もビジネスで応用ができ、お客様とのコミュニケーションの中で「?してください。」ではなく「?していただけますか？」と質問をして、お客様が「はい。」と応えるとその結果は3倍にもなると書かれています。</p>
<h4 id="-social-proof-">社会的証明（social proof）</h3>
<p>人は、社会的に認められたとされるものを好む傾向があります。<br />
行列が出来ている→多くの人に認められている→美味しいに違いない。という心理の流れであったり、<br />
多くの取引先を持っていることをアピールするということやみんながやっているというだけの同調も社会的証明の一つです。</p>
<h4 id="-liking-">好意（liking）</h3>
<p>人は、自分が好きなものから選ぶ傾向があります。<br />
当たり前のようですが、マーケティング手法としては、人気のあるタレントを起用するというところから、<br />
営業であれば、接触回数、共通点、共感、褒めるといったところを実践すれば好意をえられる可能性が高まります。</p>
<h4 id="-authority-">権威（authority）</h3>
<p>人は、権威を持った人の言うことには影響を受ける傾向があります。<br />
いわゆる肩書が有効なことはもちろんのこと、◯◯賞受賞というような外部から評価を受けていますという見せ方も権威の力を利用しています。</p>
<h4 id="-scarcity-">希少性（scarcity）</h3>
<p>人は、数が少ないものに価値を感じる傾向があります。<br />
数が少ない→需要がある→今買わなきゃなくなってしまうという流れですが、限定品などのマーケティング手法として他に依存せずに出来てしまうため、乱用していては相手にも見抜かれてしまうので注意が必要です。</p>
<h3 id="-">まとめ</h2>
<p>人と同じものは嫌だとか、空気を気にしない人、返報性を全く感じない人（笑）などいずれも例外はあると思いますが、大きな集合で見た時に6つのポイントは当てはまるようです。<br />
体系的にこのような心理を知ることで、自分から有効に利用をすることも出来ますし、相手側になった時に、冷静に論理的に判断することも出来ます。</p>


影響力の武器

<p>久しぶりに良い方向性のサービスを見つけた。</p>
<p><a href="http://www.ecport-my.com/" target="_blank"> http://www.ecport-my.com/</a></p>
<p>&nbsp;</p>
<p>内容としては、東南アジアのECモールへの出店と運用をしてくれるサービスのよう。</p>
<p>今はまだ日本製品への購買意欲が強いので、うまく現地でアピールできればうまくいく場合が少なくない。</p>
<p>そのため出店手続きと運用さえサポートしてくれれば、国内の企業はリスクが少なく越境ECを始めることができる。</p>
<p>ビジネスモデルとしてのバランスが良く、自分も近いうちにやりたいと思っていた分野だけに羨ましく思った。</p>
<p>&nbsp;</p>
<p>同様のサービスで以前転送コムを紹介したが、以前はそこまでの知名度ではなかったが、</p>
<p>今では成長して越境EC界の市民権を得ている。</p>
<p><a href="/officer/4938.html" target="_blank"> /officer/4938.html</a></p>
<p>&nbsp;</p>
<p>一部の熱狂的な日本製品の需要家は直接日本語サイトにアクセスして購入しに来ている。</p>
<p>それがこのような出店サポートが充実すれば、熱狂的とまではいかない需要家も合わせて対象にできるようになる。</p>
<p>商材にもよるが、今は越境ECに対応している日本企業が少ないため、需要過多の状態なので</p>
<p>あと2〜3年程度はこのようなサービスはおもしろいと個人的には思っているので注目していきたい</p>


良さそうなサービス

<p>すごくはまったので備忘録。</p>
<p>jsonを使う機会は多いのだが、今回はじめてjsonでやってはいけないフォーマットを発見した。</p>
<p>OK</p>

		<div id="crayon-649540158a634402212854" 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;">
{
	"name": "山田　太郎"
}</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-649540158a634402212854-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a634402212854-2">2</div><div class="crayon-num" data-line="crayon-649540158a634402212854-3">3</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-649540158a634402212854-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a634402212854-2"><span class="crayon-h">	</span><span class="crayon-s">"name"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"山田　太郎"</span></div><div class="crayon-line" id="crayon-649540158a634402212854-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>NG(フォーマットエラー)</p>

		<div id="crayon-649540158a638144736612" 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;">
{
	"name": "山田　太郎 "
}</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-649540158a638144736612-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a638144736612-2">2</div><div class="crayon-num" data-line="crayon-649540158a638144736612-3">3</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-649540158a638144736612-1"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a638144736612-2"><span class="crayon-h">	</span><span class="crayon-s">"name"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"山田　太郎 "</span></div><div class="crayon-line" id="crayon-649540158a638144736612-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>値の末尾にタブ文字が入っているパターン。</p>
<p>これはNGらしい。</p>
<p>具体的には、これを文字列として取得→json_encodeするとnullが返ってくる=エラーとなってしまう。</p>
<p>更に、文中や文頭なら良いのか、と思い調べてみた結果</p>
<p>&#8220;山田 太郎&#8221; (文中) → エラー</p>
<p>&#8221; 山田太郎&#8221; (文頭) → エラー</p>
<p>となり、結局はタブ文字自体の使用が不可なようだ。</p>
<p>&nbsp;</p>
<p>よく、0を先頭につけてはだめとか、ダブルクォーテーションしか使っちゃだめとかはあるが、これは知らずにはまってしまった</p>
<p>今回は理由があってjsonエンコードされていないjsonを使わなければならなかったのだが</p>
<p>要はちゃんとjsonエンコードされてないとだめということらしい</p>
<p>&nbsp;</p>
<p>ちなみにjsonの形式チェックは以下を使用した</p>
<p><a href="http://jsonlint.com/" target="_blank">http://jsonlint.com/</a></p>
<p>便利だったので一応共有まで</p>

【知らなかった】jsonの正しいフォーマット

<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/4396614837/sackoh71-22/" target="_blank"><img decoding="async" style="border: none;" src="http://ecx.images-amazon.com/images/I/41drOCnO3lL._SL160_.jpg" alt="" /></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/4396614837/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" target="_blank" rel="nofollow">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom: 5px;">出口 治明 祥伝社 2014-02-22</div>
<div class="booklink-link" style="margin-top: 5px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4396614837/sackoh71-22/" target="_blank" rel="nofollow" name="booklink">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left;"></div>
</div>
<p>著者があのライフネット生命の会長の出口さんです。</p>
<p>私自身は、中学校以降、社会科目を全くといっていいほど勉強をして来なかったのですが、今更ながら「歴史」の重要性を痛感しています。</p>
<p>先人の知恵に学ぶという、まさに本のタイトル通り<strong>仕事に効く教養としての「世界史」</strong>が必要です。</p>
<p>私の思考が原理を追求する癖があるためだと思いますが、これはどちらかという理系の道を進んだからこそ得られた論理的な思考なのだとも思うので、中々妙なものですね。本当はいち早く気付いて論理的な思考と教養、両方体得出来ていればベストですが。。。</p>
<h2>抜粋</h2>
<ul>
<li>第１章　世界史から日本史だけを切り出せるだろうかーペリーが日本に来た本当の目的は何だろうか？</li>
<li>第２章　歴史は、なぜ中国で発達したのかー始皇帝が完成させた文書行政、孟子の革命思想</li>
<li>第３章　神は、なぜ生まれたのか。なぜ宗教はできたのかーキリスト教と仏教はいかにして誕生したのか</li>
<li>第４章　中国を理解する四つの鍵ー難解で大きな隣国を誤解なく知るために</li>
<li>第５章　キリスト教とローマ教会、ローマ教皇についてー成り立ちと特徴を考えるとヨーロッパが見えてくる</li>
<li>第６章　ドイツ、フランス、イングランドー三国は一緒に考えるとよくわかる</li>
<li>第７章　交易の重要性ー地中海、ロンドン、ハンザ同盟、天才クビライ</li>
<li>第８章　中央ユーラシアを駆け抜けたトゥルクマンーヨーロッパが生まれる前の大活劇</li>
<li>第９章　アメリカとフランスの特異性ー人工国家と保守と革新</li>
<li>第１０章　アヘン戦争ー東洋の没落と西洋の勃興の分水嶺</li>
<li>終章　世界史の視点から日本を眺めてみよう</li>
</ul>
<blockquote><p>僕は大学などで歴史を学んだこともなく、歴史が好きなアマチュアの一市民にすぎません。</p>
<p>ここに書いたことは、この半世紀の間に、人の話を聴き本を読み旅をして、自分で咀嚼して腹落ちしたことがすべてです。間違いや誤解が多々あると思います。読者の皆さんのご叱正をいただければ、これに過ぐる喜びはありません。</p></blockquote>
<p>体系的に歴史をならったことがないとのことですが、どこまで博識なのでしょうか。</p>
<h2>まとめ</h2>
<p>どうも歴史の授業は好きではなかったのですが、それが何故か少し分かった気がします。</p>
<p>なんとなく無機質に年号と起こった出来事だけを淡々と暗記するだけに感じておりましたが、本書では、その時、日本ではこうだったとか、横の繋がりや、著者自身で推測とは言いながらもこういう歴史の事実から、実はこうなったのではないか？というような考察が重ねられていところから、一気に有機的に当時の世界が動き出して、面白みを感じることが出来ました。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


仕事に効く教養としての「世界史」

<p>弊社では今後のwebデザインの底上げを図るために、フォントの拡充を検討したりしています。</p>
<p>そこで、ついでに日本語のwebフォントが使えるサービスを探したので、簡単に紹介します。</p>
<p>&nbsp;</p>
<h2>FONTPLUS｜フォントプラス</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7870" src="/uploads-archive/2015/08/3778d320b60973e189dc8327cb5f7923-1024x657.jpg" alt="FONTPLUS｜フォントプラス" width="630" height="404" srcset="/uploads-archive/2015/08/3778d320b60973e189dc8327cb5f7923-1024x657.jpg 1024w, /uploads-archive/2015/08/3778d320b60973e189dc8327cb5f7923-300x192.jpg 300w, /uploads-archive/2015/08/3778d320b60973e189dc8327cb5f7923-228x146.jpg 228w, /uploads-archive/2015/08/3778d320b60973e189dc8327cb5f7923.jpg 1239w" sizes="(max-width: 630px) 100vw, 630px" /><br />
入会金：10,800円<br />
例)<br />
120万ページビュー（有効期限1年）※月間10万ページビュー目安<br />
12,960円から<br />
という感じで、PV制限があり、目安のPVを超えてしまうと、つかえなくなってしまうようです。<br />
フォントの書類は、780程あります。</p>
<p>&nbsp;</p>
<p><a href="http://webfont.fontplus.jp/" target="_blank" class="link">FONTPLUS｜フォントプラス</a></p>
<p>&nbsp;</p>
<h2>TypeSquare [タイプスクウェア]</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7871" src="/uploads-archive/2015/08/db1d3eb0a6d410622914e23d5e662d3d-1024x657.jpg" alt="TypeSquare [タイプスクウェア]" width="630" height="404" srcset="/uploads-archive/2015/08/db1d3eb0a6d410622914e23d5e662d3d-1024x657.jpg 1024w, /uploads-archive/2015/08/db1d3eb0a6d410622914e23d5e662d3d-300x192.jpg 300w, /uploads-archive/2015/08/db1d3eb0a6d410622914e23d5e662d3d-228x146.jpg 228w, /uploads-archive/2015/08/db1d3eb0a6d410622914e23d5e662d3d.jpg 1239w" sizes="(max-width: 630px) 100vw, 630px" /><br />
あのモリサワのwebフォントのサービスで、こちらもPV制限があり、そして、利用可能書体数やドメインが決められています。<br />
月額2160円からでフォントの種類は600~700程あります。<br />
&nbsp;</p>
<p><a href="http://typesquare.com/" target="_blank" class="link">TypeSquare [タイプスクウェア]</a><br />
&nbsp;</p>
<h2>WEBフォント｜アマナイメージズ</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7872" src="/uploads-archive/2015/08/a83b2b118f823bec695d5b158a0a0f45-1024x657.jpg" alt="WEBフォント｜アマナイメージズ" width="630" height="404" srcset="/uploads-archive/2015/08/a83b2b118f823bec695d5b158a0a0f45-1024x657.jpg 1024w, /uploads-archive/2015/08/a83b2b118f823bec695d5b158a0a0f45-300x192.jpg 300w, /uploads-archive/2015/08/a83b2b118f823bec695d5b158a0a0f45-228x146.jpg 228w, /uploads-archive/2015/08/a83b2b118f823bec695d5b158a0a0f45.jpg 1239w" sizes="(max-width: 630px) 100vw, 630px" /><br />
言わずと知れたアマナですが、webフォントのサービスもしているそうです。<br />
540円からと謳っておりますが、その場合、1フォント×1ヶ月のようです。<br />
フォントの種類は336程あります。<br />
webフォント以外にも、ダウンロード、パッケージも扱っています。</p>
<p>&nbsp;<br />
<a href="http://amanaimages.com/font/web/index.aspx" target="_blank" class="link">WEBフォント｜アマナイメージズ</a></p>
<p>&nbsp;</p>
<h2>日本語Webフォントサービス</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7869" src="/uploads-archive/2015/08/a9834e492b8464a0139cf330fffe8702-1024x657.jpg" alt="日本語Webフォントサービス  316のデザインフォントが手軽に使えます" width="630" height="404" srcset="/uploads-archive/2015/08/a9834e492b8464a0139cf330fffe8702-1024x657.jpg 1024w, /uploads-archive/2015/08/a9834e492b8464a0139cf330fffe8702-300x192.jpg 300w, /uploads-archive/2015/08/a9834e492b8464a0139cf330fffe8702-228x146.jpg 228w, /uploads-archive/2015/08/a9834e492b8464a0139cf330fffe8702.jpg 1239w" sizes="(max-width: 630px) 100vw, 630px" /><br />
コースが３つあり、<br />
月額480円(7書体)<br />
月額2980円(316書体)<br />
月額9800円(316書体)※複数人で使用可能</p>
<p>フォントの種類は316程あります。<br />
&nbsp;<br />
<a href="http://www.digitalstage.jp/webfont/" target="_blank" class="link">日本語Webフォントサービス | 316のデザインフォントが手軽に使えます</a></p>
<p>&nbsp;</p>
<h2>Google Noto Fonts</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7868" src="/uploads-archive/2015/08/Google-Noto-Fonts-1024x657.jpg" alt="Google Noto Fonts" width="630" height="404" srcset="/uploads-archive/2015/08/Google-Noto-Fonts-1024x657.jpg 1024w, /uploads-archive/2015/08/Google-Noto-Fonts-300x192.jpg 300w, /uploads-archive/2015/08/Google-Noto-Fonts-228x146.jpg 228w, /uploads-archive/2015/08/Google-Noto-Fonts.jpg 1239w" sizes="(max-width: 630px) 100vw, 630px" /><br />
Googleのwebフォントは広く認知されていると思うのですが、日本語のフォントも対応しているようです！<br />
無料ですが、今は1種類しかないようです。<br />
&nbsp;<br />
<a href="http://www.google.com/get/noto/#sans-jpan" target="_blank" class="link">Google Noto Fonts</a></p>
<p>&nbsp;</p>
<h2>おまけ</h2>
<p>実際にwebフォントが使われているサイトを紹介してくれています。<br />
<a href="http://www.4696.co.jp/blog/9/" target="_blank">日本語Webフォントを使用している60のWebサイト | 株式会社シロクロ</a></p>
<p>実際に使われているのイメージできる上に、見てるだけでもいいですね！</p>


日本語のwebフォントを提供しているサービス5つ

Google Map APIでMapの表示とマーカーのコントロール

<p>Adobe CCを利用しているのですが、普段はPremiereやAfter effects 、Photoshop、Illustrator くらいしかつかっていません。せっかく利用できるのに勿体ないので他のアプリケーションはどんなものかと触ってみたらEdge Animateがかなり使えそうな感じがしました。</p>
<p><a class="demo" href="/demo/makabe/09/web01/09demo1.html">demo1</a><br />
<a class="demo" href="/demo/makabe/09/web04/09demo02.html">demo2</a></p>
<p>Edge AnimateはWEBアニメーションを作るためのアプリケーションで、動画編集をしているような感覚で作成できるのでPremiereに慣れている人ならすぐ使いこなせると思います。</p>
<p><a href="/uploads-archive/2015/08/01.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7843" src="/uploads-archive/2015/08/01.jpg" alt="01" width="650" height="423" srcset="/uploads-archive/2015/08/01.jpg 650w, /uploads-archive/2015/08/01-300x195.jpg 300w, /uploads-archive/2015/08/01-228x148.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>jpgやpngの素材をインポートとしてキーフレームなどを使ってアニメーションを付けていくので動画編集と非常に操作が似ています。</p>
<p><a href="/uploads-archive/2015/08/03.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7845" src="/uploads-archive/2015/08/03.jpg" alt="03" width="650" height="430" srcset="/uploads-archive/2015/08/03.jpg 650w, /uploads-archive/2015/08/03-300x198.jpg 300w, /uploads-archive/2015/08/03-228x151.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>アニメーションを組んだら、編集のパブリッシュで書き出します。</p>
<p><a href="/uploads-archive/2015/08/02.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7844" src="/uploads-archive/2015/08/02.jpg" alt="02" width="650" height="424" srcset="/uploads-archive/2015/08/02.jpg 650w, /uploads-archive/2015/08/02-300x196.jpg 300w, /uploads-archive/2015/08/02-228x149.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>作成したアニメーションは１つのdivとjavascriptのファイルとして書き出す事ができます。</p>

		<div id="crayon-649540158a0fd826739763" 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;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
	&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"/&gt;
	&lt;title&gt;無題&lt;/title&gt;
&lt;!--Adobe Edge Runtime--&gt;
    &lt;script type="text/javascript" charset="utf-8" src="http://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        .edgeLoad-EDGE-379121079 { visibility:hidden; }
    &lt;/style&gt;
&lt;script&gt;
   AdobeEdge.loadComposition('09demo1', 'EDGE-379121079', {
    scaleToFit: "none",
    centerStage: "none",
    minW: "0px",
    maxW: "undefined",
    width: "550px",
    height: "400px"
}, {"dom":{}}, {"dom":{}});
&lt;/script&gt;
&lt;!--Adobe Edge Runtime End--&gt;

&lt;/head&gt;
&lt;body style="margin:0;padding:0;"&gt;
	&lt;div id="Stage" class="EDGE-379121079"&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&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-649540158a0fd826739763-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-2">2</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-4">4</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-6">6</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-8">8</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-10">10</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-12">12</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-14">14</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-16">16</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-18">18</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-20">20</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-22">22</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-24">24</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-26">26</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158a0fd826739763-28">28</div><div class="crayon-num" data-line="crayon-649540158a0fd826739763-29">29</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-649540158a0fd826739763-1"><span class="crayon-h">&lt;</span><span class="crayon-sy">!</span><span class="crayon-e">DOCTYPE </span><span class="crayon-i">html</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-2"><span class="crayon-h">&lt;</span><span class="crayon-i">html</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-3"><span class="crayon-h">&lt;</span><span class="crayon-i">head</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-4"><span class="crayon-h">	</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">http</span>-<span class="crayon-i">equiv</span>=<span class="crayon-s">"Content-Type"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"text/html; charset=utf-8"</span>/<span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-5"><span class="crayon-h">	</span><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">http</span>-<span class="crayon-i">equiv</span>=<span class="crayon-s">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"IE=Edge"</span>/<span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-6"><span class="crayon-h">	</span><span class="crayon-h">&lt;</span><span class="crayon-e">title</span><span class="crayon-h">&gt;</span>無題<span class="crayon-h">&lt;</span>/<span class="crayon-e">title</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-7"><span class="crayon-h">&lt;</span><span class="crayon-sy">!</span>--<span class="crayon-e">Adobe</span><span class="crayon-h"> </span><span class="crayon-e">Edge</span><span class="crayon-h"> </span><span class="crayon-e">Runtime</span>--<span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">charset</span>=<span class="crayon-s">"utf-8"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"http://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-ta">&lt;style&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-k ">.edgeLoad-EDGE-379121079 </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-e ">visibility</span><span class="crayon-sy">:</span><span class="crayon-i ">hidden</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-ta">&lt;/style&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-12"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-13"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-i">AdobeEdge</span><span class="crayon-sy">.</span><span class="crayon-e">loadComposition</span><span class="crayon-sy">(</span><span class="crayon-s">'09demo1'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'EDGE-379121079'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">scaleToFit</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"none"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">centerStage</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"none"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">minW</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0px"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">maxW</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"undefined"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"550px"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"400px"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-20"><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-s">"dom"</span><span class="crayon-sy">:</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-s">"dom"</span><span class="crayon-sy">:</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-21"><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-22"><span class="crayon-h">&lt;</span><span class="crayon-sy">!</span>--<span class="crayon-e">Adobe </span><span class="crayon-e">Edge </span><span class="crayon-e">Runtime </span><span class="crayon-st">End</span>--<span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-23">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-24"><span class="crayon-h">&lt;</span>/<span class="crayon-i">head</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-25"><span class="crayon-h">&lt;</span><span class="crayon-e">body </span><span class="crayon-i">style</span>=<span class="crayon-s">"margin:0;padding:0;"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-26"><span class="crayon-h">	</span><span class="crayon-h">&lt;</span><span class="crayon-e">div </span><span class="crayon-i">id</span>=<span class="crayon-s">"Stage"</span><span class="crayon-h"> </span><span class="crayon-t">class</span>=<span class="crayon-s">"EDGE-379121079"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-27"><span class="crayon-h">	</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">div</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158a0fd826739763-28"><span class="crayon-h">&lt;</span>/<span class="crayon-i">body</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158a0fd826739763-29"><span class="crayon-h">&lt;</span>/<span class="crayon-i">html</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>idがStageとなっているdivがアニメーションになります。1つのdivにまとまってくれるので、HTML上で都合のいい場所に配置できるのでかなり便利です。もちろんflashが動かない環境でも大丈夫ですし、videoタグのように容量もそれほど重くありません。</p>
<p>cssやcanvasを使わずにDOMの操作によってアニメーションを作るのでバグがほとんど起きません、つまりデバイスをあまり気にせずアニメーションを埋め込めるので重宝しそうです。</p>

WEBアニメが動画編集の感覚で作れるAdobe Edge Animate

ルート相対パスを使ったHTMLの制作・確認をnode.jsのローカルな簡易サーバで効率的にする方法

<p>クレジットカードが開始されたという良い面のニュースもありましたが、事実を客観的に、定量的に捉えたリスクサイドの良記事も昨日発表されておりまして、自分自身でとどめておくべきか迷ったのですが、事実として周知すべきと思い紹介します。</p>
<p><a href="http://jbpress.ismedia.jp/articles/-/44364" target="_blank">このリスクを知らずにミャンマーに飛び込むべからず </a></p>
<p>なんとも、刺激的なタイトルですが、中身は定量的なデータに基づいた指標です。</p>
<p>そして、2014年より開始しているミャンマーオフショア事業を開始し、日々起こる出来事や訪問した際に実際に経験したことを合わせてコメント致します。</p>
<h3 id="-">記事の抜粋</h2>
<blockquote><p>市場経済に復帰し、高GDP成長率を維持</p></blockquote>
<blockquote><p>高い自然災害リスク　多発するサイクロン、洪水、地震</p></blockquote>
<p>雨季になると数日雨が降り続き、後述するインフラ面でも支障を来たす可能性がまだあるようです。 自然災害リスクという面では、日本と同じだとは思いますが、やはりインフラ面の強固さが違うので、災害に伴う影響範囲が大きいのでしょう。</p>
<blockquote><p>ミャンマーのインフラ整備度ランキングは144カ国中138位（2014/2015年）、道路の舗装率は20％以下</p></blockquote>
<p>これは訪問をした時に強く感じました。歩道はボコボコでサンダルを履いて外出したことに後悔したことを覚えています。 そして、ヤンゴン周辺はまだアスファルトが敷かれているのですが、郊外に出ると土の道を車が通っている光景が見られます。</p>
<p>港湾、鉄道、空港については、関連性が低いので割愛</p>
<blockquote><p>ミャンマーの発電能力はベトナムの10分の1以下となっており、恒常的に電力不足となっている。</p></blockquote>
<p>こちらも業務を行う上で恒常的に起こっています。 業務レベルでは小型発電機を配置しておくことで寸断程度は凌げます。パソコン自体は、基本ノートであれば、バッテリー駆動に切り替わるので、 リスクを軽減することが出来ます。</p>
<blockquote><p>通信インフラについては、固定電話回線数・携帯電話台数が他のASEAN諸国に比べても極端に少ない状況である。また、回線数が非常に少ないことに伴い、電話料金はアジアの中でも最も高額な国の1つとなっている。</p></blockquote>
<p>ネット回線についてもここでいいのでしょうか。とにかく通信費が相対的な物価を考えると以上に高いです。 1MbpsのADSLで100$します。光ケーブルも普及しつつありますが、まだ、設置可能なエリアが少ない状況です。</p>
<p>日中混雑することもありますが、平常時であれば、skypeのビデオ会議も問題なく出来ることが多いです。</p>
<blockquote><p>ミャンマーでは独立（1948年）以来、少数民族によるテロ等の武装闘争が継続している。2012年以降、これら組織と政府との間で和平交渉も進められているが、テロ事件は依然として発生している。</p></blockquote>
<p>こちらも包み隠しても、しょうがないですし、日本のニュースでも流れてきている情報です。 ただ、現地スタッフに聞くと、山間部や国境付近で起こっていることでヤンゴン市内がどうこうというレベルでは今はないようです。</p>
<blockquote><p>軍政下では組合活動は禁止されてきたが、労働者の権利を保護し、良好な労使関係を維持するため、1926年制定の労働組合法を改訂する形で公布された。</p></blockquote>
<blockquote><p>国家の清廉度は175カ国中156位 社会主義体制・軍事政権が長期間にわたっていることから、政府機関の非効率化・汚職体質が蔓延している</p></blockquote>
<p>これらは、ミャンマーの最大の課題だと思います。これらを解決することが出来れば、更なる経済発展、国際社会へと進んでいくことが出来るのではと考えています。</p>
<h3 id="-">まとめ</h2>
<p>定量的で悲観的な数字をきっちりと示してくれていると思いますし、実際にビジネスを行ってみて、訪問をしてみて感じることも共感することが多いです。</p>
<p>さすがに政治的な問題を一法人で拭うようなことは出来ませんが、リスクを恐れずに投資が出来るのも我々のようなベンチャーだからこそだと思っています。</p>
<p>リスクの数だけチャンスがある。 国の成長と共に発展をすべく引き続き、頑張っていきたいと思います。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2015/09/01

2015/08/26

2015/08/26

2015/08/26

2015/08/25

2015/08/19

2015/08/19

2015/08/19

2015/08/18

2015/08/18

2015/08/18

2015/08/05

2015/08/05

2015/08/05

2015/08/04

2015/08/04

2015/07/29

2015/07/29