<p>おそろしいプラグインに出会ってしまいました。</p>
<p>その名も「Page Builder by SiteOrigin」。</p>
<p>こちらはどういうプラグインかというと、<br />
Page Builderという名の通り、投稿や固定ページで直感的にレイアウトが出来るという代物です。</p>
<p>今まで納品したワードプレスではお客さんが自由に記事が投稿出来るようになっていますが、<br />
ブログ的な感覚で記事を書けるものの、カラム分けや特別な機能を入れたりすることは難しいものでした。</p>
<p>しかし、このプラグインがあれば、それが可能になります！<br />
2カラム、3カラムはもちろん、カレンダー、スライダーや記事一覧も入れられるみたいですが、<br />
また別のプラグインをインストールをしないといけなさそうですね。。。</p>
<h2>Page Builder by SiteOrigin使用イメージ</h2>
<p>通常のプラグインと同じように、プラグインの新規追加で「Page Builder by SiteOrigin」を検索し、<br />
インストールします。</p>
<p>無事インストールが出来ましたら、設定の項目、「Page Builder」という項目が増えます。<br />
ここは初期としては特にすることはありません。</p>
<p>あとは、投稿や固定ページの新規追加ページに遷移すると、、</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8056" src="/uploads-archive/2015/09/546249d1731762882741b0ae237a9a2e.png" alt="スクリーンショット 2015-09-01 16.32.03" width="600" height="428" srcset="/uploads-archive/2015/09/546249d1731762882741b0ae237a9a2e.png 800w, /uploads-archive/2015/09/546249d1731762882741b0ae237a9a2e-300x214.png 300w, /uploads-archive/2015/09/546249d1731762882741b0ae237a9a2e-228x163.png 228w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>本文書く欄の、ビジュアル、テキストの横に「Page Builder」があり、ここを押すと、このプラグインを使っての編集に切り替わります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8057" src="/uploads-archive/2015/09/d3d9468fc857fda487957196965f497b.png" alt="スクリーンショット 2015-09-01 17.41.31" width="600" height="191" srcset="/uploads-archive/2015/09/d3d9468fc857fda487957196965f497b.png 865w, /uploads-archive/2015/09/d3d9468fc857fda487957196965f497b-300x96.png 300w, /uploads-archive/2015/09/d3d9468fc857fda487957196965f497b-228x73.png 228w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>ひとつ問題があるとすれば、「ビジュアル・テキスト」と「Page Builder」には互換性があまりないというところです。</p>
<p>左上の「Add Widget」のボタンを押すと、</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8058" src="/uploads-archive/2015/09/665d63acc7f89d817bfc080f22e38123-1024x642.png" alt="スクリーンショット 2015-09-01 16.33.46" width="600" height="376" srcset="/uploads-archive/2015/09/665d63acc7f89d817bfc080f22e38123-1024x642.png 1024w, /uploads-archive/2015/09/665d63acc7f89d817bfc080f22e38123-300x188.png 300w, /uploads-archive/2015/09/665d63acc7f89d817bfc080f22e38123-228x143.png 228w, /uploads-archive/2015/09/665d63acc7f89d817bfc080f22e38123.png 1242w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>ここで好きなwidgetを追加できます。</p>
<p>その横の「Add row」を押すと、</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8059" src="/uploads-archive/2015/09/812d45278cf5dbbea9eb9396b477f816-1024x641.png" alt="スクリーンショット 2015-09-01 16.34.35" width="600" height="376" srcset="/uploads-archive/2015/09/812d45278cf5dbbea9eb9396b477f816-1024x641.png 1024w, /uploads-archive/2015/09/812d45278cf5dbbea9eb9396b477f816-300x188.png 300w, /uploads-archive/2015/09/812d45278cf5dbbea9eb9396b477f816-228x143.png 228w, /uploads-archive/2015/09/812d45278cf5dbbea9eb9396b477f816.png 1241w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>ここでカラムの生成をすることが出来ます。1-8カラムまで作成可能で、幅も直感的に変更できます。</p>
<p>この2つを駆使すればかなり自由なコンテンツ、レイアウトを実現することが出来るかと思います。</p>
<p>さすがに最初は使い方を覚える必要はありますが、HTML等の知識は必要ないので、<br />
詳しくない方でも使えると思います。</p>
<p>WordPressがどんどん便利になっていきますね！</p>


WordPressプラグイン「Page Builder by SiteOrigin」でレイアウトが自由自在に！

<p>ミャンマーのITシェアオフィスであるKanaung Hubというオフィスを紹介いたします。</p>
<p>最近、よく耳にするKanaung Hub(カナウン ハッブ)、そのシェアオフィスはヤンゴンのIT企業が<br />
集まっているMICT Parkの14-5号室にあります。<br />
<img decoding="async" src="/uploads-archive/2015/09/kanaung1.jpg" alt="kanaung hub"></p>
<p>オフィスを持っていないフリーターの方々やグループで開発をしている方々のために、<br />
安い料金でオフィススペースを利用できるように、ミャンマーコンピュータ技術者グループが<br />
用意してくれました。<br />
オフィス内は4MBのインターネットが接続されています。<br />
現在利用者は比較的に少なく、毎日の利用者はオフィス全体の３割ぐらいしかないようで、<br />
利用者が増加のために、サービスのよりよくなるように調査しているそうです。</p>
<p>Kanaung Hubの利用料金は一人当たり、<br />
一日: 3000チャット<br />
一ヶ月: 20000チャット<br />
一ヶ月(自分のスペースを固定出来るプラン): 50000チャット<br />
です。</p>
<p>オフィスを利用したい方は<br />
<a href="http://kanaunghub.com/" target="_blank">http://kanaunghub.com/</a>と<a href="https://www.facebook.com/KanaungHub" target="_blank">https://www.facebook.com/KanaungHub</a><br />
から申請できます。</p>


Kanaung Hub share office

<p>after effects を使って街中にある看板を勝手に差し替えた映像をつくりたいときに便利なエフェクトがあるのでご紹介します。</p>
<p>まず出来上がりがどんなものか、下のデモ動画を見てください。</p>
<div style="width: 528px;" class="wp-video">
<video class="wp-video-shortcode" id="video-8030-1" width="528" height="296" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2015/09/demo3dcam.mp4?_=1" /><a href="/uploads-archive/2015/09/demo3dcam.mp4">/uploads-archive/2015/09/demo3dcam.mp4</a></video></div>
<h2>エフェクト　3dカメラトラッカー</h2>
<p>まずはコンポジションに下画になるフッテージを配置します。</p>
<p>エフェクトの遠近から「3Dカメラトラッカー」を選択します。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8034" src="/uploads-archive/2015/09/3dvideo4.jpg" alt="3dvideo4" width="640" height="336" srcset="/uploads-archive/2015/09/3dvideo4.jpg 640w, /uploads-archive/2015/09/3dvideo4-300x158.jpg 300w, /uploads-archive/2015/09/3dvideo4-228x120.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>エフェクトを適用すると分析を開始します。エフェクトをかける対象の素材は撮影した物（実写撮影）のようなものに限られるようです。平面には適用されません。</p>
<p><a href="/uploads-archive/2015/09/3dvideo1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8031" src="/uploads-archive/2015/09/3dvideo1.jpg" alt="3dvideo1" width="640" height="362" srcset="/uploads-archive/2015/09/3dvideo1.jpg 640w, /uploads-archive/2015/09/3dvideo1-300x170.jpg 300w, /uploads-archive/2015/09/3dvideo1-228x129.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>&nbsp;</p>
<p>分析が完了するまでに多少時間がかかります、分析完了までの残り時間がエフェクトコントロール内に表示されます。</p>
<p>ちなみに分析はバックグラウンドで行われるので、分析中に他の編集作業を並行して行うことが可能です。</p>
<p><a href="/uploads-archive/2015/09/3dvideo3.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8033" src="/uploads-archive/2015/09/3dvideo3.jpg" alt="3dvideo3" width="492" height="308" srcset="/uploads-archive/2015/09/3dvideo3.jpg 492w, /uploads-archive/2015/09/3dvideo3-300x188.jpg 300w, /uploads-archive/2015/09/3dvideo3-228x143.jpg 228w" sizes="(max-width: 492px) 100vw, 492px" /></a></p>
<p>&nbsp;</p>
<p>分析が完了すると対象フッテージ上にトラックポイント（カラフルなバツ印）が表示されます。</p>
<p>このバツ印が合成をする上でのアンカーになります。</p>
<p><a href="/uploads-archive/2015/09/3dvideo2.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8032" src="/uploads-archive/2015/09/3dvideo2.jpg" alt="3dvideo2" width="641" height="349" srcset="/uploads-archive/2015/09/3dvideo2.jpg 641w, /uploads-archive/2015/09/3dvideo2-300x163.jpg 300w, /uploads-archive/2015/09/3dvideo2-228x124.jpg 228w" sizes="(max-width: 641px) 100vw, 641px" /></a></p>
<p>&nbsp;</p>
<p>差し替えたい看板にあるトラックポイントをShiftを押しながらクリックし複数選択します。トラックポイントを選択すると</p>
<p>赤いターゲットが表示されます。ターゲットの大きさはエフェクトコントロールで変更できます。</p>
<p><a href="/uploads-archive/2015/09/3dvideo5_2.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8036" src="/uploads-archive/2015/09/3dvideo5_2.jpg" alt="3dvideo5_2" width="640" height="418" srcset="/uploads-archive/2015/09/3dvideo5_2.jpg 640w, /uploads-archive/2015/09/3dvideo5_2-300x196.jpg 300w, /uploads-archive/2015/09/3dvideo5_2-228x149.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>&nbsp;</p>
<p>要注意なのが、フッテージの内容によってショットのタイプを選択するのを忘れないにして下さい。ショットのタイプを間違えると合成した時に違和感が出やすくなってしまいます。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2015/09/3dvideo6.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8037" src="/uploads-archive/2015/09/3dvideo6.jpg" alt="3dvideo6" width="492" height="356" srcset="/uploads-archive/2015/09/3dvideo6.jpg 492w, /uploads-archive/2015/09/3dvideo6-300x217.jpg 300w, /uploads-archive/2015/09/3dvideo6-228x165.jpg 228w" sizes="(max-width: 492px) 100vw, 492px" /></a></p>
<p>&nbsp;</p>
<p>ショットのタイプを選択したら、赤いターゲット上で右クリックして、「ヌルとカメラを作成」をクリックします。コンポジションの中にヌルと3Dトラッカーカメラができます。</p>
<p>ここまで完了したら後は合成したい看板の素材をコンポジションに追加して、3dレイヤーに変更、あとはサイズと向きを整えたら完成です。</p>
<p>分析に多少時間がかかりますが、作業的にはかなり簡単に看板を差し替えられます。看板の質感や光の当たり具合などをキチンと調整すればそれなりの物がつくれますので挑戦してみてください。</p>

after effects 「街中の看板を差し替える方法」

<p>※Windowsサーバーといっても、今回はIISを使用している場合の例です</p>
<p>※xamppなどを使うとうまくいくとのことです</p>
<p>&nbsp;</p>
<p>今回は訳あってWindowsサーバー、IIS、Mysqlという環境でWordpressを使用しなければならず</p>
<p>色々と困ったことがあったのでメモ</p>
<p>&nbsp;</p>
<h2>1. インストールが面倒</h2>
<p>Apacheでは普通に使える機能が使えない場合が多々あるため</p>
<p>モジュールをインストールする必要がある</p>
<p>例えば、mod_rewriteの替わりにURL Rewrite Moduleというのをインストールしなければならない</p>
<p>&nbsp;</p>
<h2>2. パーミッション</h2>
<p>uploadsディレクトリを777にしたりなど、ファイルやフォルダのパーミッションをlinux環境であればftpから調整する場合も多い。</p>
<p>だが、Windowsサーバーの場合はそれができない。</p>
<p>今回の場合はリモートでつなぐことができなかったため、サーバー会社に連絡して変更してもらった</p>
<p>&nbsp;</p>
<h2>3. プラグインが動かない</h2>
<p>全部ではないのだろうが、プラグインが動かない場合がある。</p>
<p>1同様モジュールが不足しているなどの問題のようだ</p>
<p>&nbsp;</p>
<h2>4. パーマリンク設定に制限が</h2>
<p>例えばパーマリンク設定で「%postname%」が使えない。</p>
<p>今回の場合は「%post_id%」とすることで回避した。</p>
<p>SEOにこだわる場合は弊害が多々ありそうだ。</p>
<p>web.configをいじれば解決できそうだが、今回は権限がなかった</p>
<p>&nbsp;</p>
<h2>5. 文字化け</h2>
<p>これはWordpressだけではないと思うが、いろいろところで文字化けが発生。</p>
<p>今回はAdmin権限がなかったのと、サーバーによるところもあると思うが</p>
<p>やっぱりWordpressはlinuxで動かすのが一番と思った</p>


WindowsサーバーでWordPressを利用したくない理由5つ

ページリンク付きのアンカーリンクに対応した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>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2015/09/02

2015/09/02

2015/09/02

2015/09/01

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