<p>デザインでイラストを入れたり、絵を描いたりするとき、<br />
質感を出来るだけ短時間で出すことが求められる機会は多いと思います。</p>
<p>この質感を出す上で、一つのポイントとなることがあるのが、<br />
目が見ている色と、脳が見ている色にはズレが出てくることがあることを意識することです。</p>
<p>今回はその中でも影と色の関係についての、基本的な部分についてご紹介いたします。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2016/03/shadow-color_2.jpg" rel="attachment wp-att-9782"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9782" src="/uploads-archive/2016/03/shadow-color_2.jpg" alt="shadow-color_2" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color_2.jpg 656w, /uploads-archive/2016/03/shadow-color_2-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color_2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>↑こちらのいらすとの、下にある白黒のチェックですが、<br />
円柱の影になっている箇所は、実際には↓のように、影になっていない黒の部分よりも暗い色なのですが、<br />
白として認識できると思います。</p>
<p><a href="/uploads-archive/2016/03/shadow-color.jpg" rel="attachment wp-att-9783"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9783" src="/uploads-archive/2016/03/shadow-color.jpg" alt="shadow-color" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color.jpg 656w, /uploads-archive/2016/03/shadow-color-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>実際は暗い色なのですが、<br />
影と色の関係から、脳が再処理を行ってくれるため、<br />
影になった部分も白としてみることができます。</p>
<p>&nbsp;</p>
<p>もうひとつですが、</p>
<p><a href="/uploads-archive/2016/03/shadow-color02.jpg" rel="attachment wp-att-9785"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9785" src="/uploads-archive/2016/03/shadow-color02.jpg" alt="shadow-color02" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color02.jpg 656w, /uploads-archive/2016/03/shadow-color02-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color02-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>こちらのような立方体があった場合、<br />
一つ一つの面が一色で構成されていると見ることができます。</p>
<p>しかし、実際には下のイラストのように床からの反射光で、側面はグラデーションになっています。</p>
<p><a href="/uploads-archive/2016/03/shadow-color02_2-1.jpg" rel="attachment wp-att-9802"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9802" src="/uploads-archive/2016/03/shadow-color02_2-1.jpg" alt="shadow-color02_2" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color02_2-1.jpg 656w, /uploads-archive/2016/03/shadow-color02_2-1-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color02_2-1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>しかし、脳はこの反射光を省いた状態を計算して、<br />
一面が一色になっていると認識します。</p>
<p>日常で生活する場合、<br />
この脳の働きが、色や影の実際の状態を知る手助けになりますが、</p>
<p>デザインをしたり絵を描いたりする場合は、<br />
脳が省いた情報を再現することが、質感を高める場合が多くなります。</p>
<p>こちらのことを意識することで、<br />
作品の作り込みやアイディアを増やすヒントにしていきたいです。</p>
<p>&nbsp;</p>
<h2>参考文献</h2>
<p><a class="link" href="http://www.amazon.co.jp/dp/4862461530" target="_blank">カラー&amp;ライト ~リアリズムのための色彩と光の描き方 2012/1/30 ジェームス・ガーニー(James Gurney) (著)</a></p>


目が見る色と頭が見る色

<h2>目指せ！ weiboマスター</h2>
<p>weiboというSNSをご存知でしょうか。</p>
<p>中国国内最大のSNSですが、知ってはいるけど登録はしていない、という人が大半ではないでしょうか。</p>
<p>いやいや、私はばっちり登録していて毎日ばりばり投稿しているよ、という人は少数ではないかと思います。</p>
<p>私自身、2013年に登録していたものの使い方が分からずずっと放置していました。使い方自体はツイッターとほとんど同じなので、中国語が分からなくても直感的に理解できるのですが、いかんせん飛び交う言葉が理解できないので実際に楽しめるところまでは至りませんでした。</p>
<p>中国でものを売るのにはweiboはマストですよ～と言いながらも、自分自身はそんな体たらくぶりだったので、これではイカンと思い、アカウントを再開することにしました。</p>
<h2>中国人のリアルな声を聞きました</h2>
<p>どのような投稿をしたらいいかわからなかったのですが、「習うより慣れろ」と思い、なるべく思考停止して東京在住の中国人の投稿に対して</p>
<p>Enjoy Japan!!</p>
<p>とコメントをしまくりました。</p>
<p>そうすると早速女の子から一件のコメントが…！！</p>
<p>アイコンめっちゃかわいい！　すごいぜweibo!!</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/image1-169x300.png" alt="image1" width="169" height="300" class="aligncenter size-medium wp-image-9796" srcset="/uploads-archive/2016/03/image1-169x300.png 169w, /uploads-archive/2016/03/image1-576x1024.png 576w, /uploads-archive/2016/03/image1-228x406.png 228w, /uploads-archive/2016/03/image1.png 750w" sizes="(max-width: 169px) 100vw, 169px" /></p>
<p>哟西～ ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄</p>
<p>とありますが、意味がわかりません。<br />
google翻訳でも出てきません。中国のスラングでしょうか。チョベリグ的な。</p>
<p>哟西　日本語でググるとこんな意味が。</p>
<blockquote><p>これは中国政府が日本軍の悪行三昧を喧伝するために作ったドラマの中に出てくる<br />
日本語です。実際に聞くと一体何を言ってるのか我々にはわからないのですが、<br />
彼らにはかなり馬鹿にした意味があるようです。</p>
<p>「哟西」は元々の日本語で「良し！」恐らく軍隊の用語で上官が部下に対して使う<br />
言葉だと思います。</p></blockquote>
<p>ふーん。。どっちかと言えばチョベリバな意味でした。</p>
<p>これに懲りることなく、アルファウェイバー目指して頑張りたいと思います!!</p>


Weiboで知った中国人の女の子のリアルな声

<p>前回に引き続きCINEMA4Dの機能紹介です。</p>
<p>実写映像とCGを合成する際にAfter effectsなどを使ってもトラッキングができますが、CINEMA４D内で行うとカメラ位置など同時も読み込んでくれるので作業工程がかなり簡単です。</p>
<h2>動画を読み込む</h2>
<p>まずはトラッキングする動画を読み込みます。</p>
<p><a href="/uploads-archive/2016/03/1.jpg" rel="attachment wp-att-9770"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9770" src="/uploads-archive/2016/03/1.jpg" alt="1" width="640" height="486" srcset="/uploads-archive/2016/03/1.jpg 640w, /uploads-archive/2016/03/1-300x228.jpg 300w, /uploads-archive/2016/03/1-228x173.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>モーショントラッカーから「フル３D解析」を選択して、トラッキングする動画を開きます。</p>
<p><a href="/uploads-archive/2016/03/2.jpg" rel="attachment wp-att-9771"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9771" src="/uploads-archive/2016/03/2.jpg" alt="2" width="640" height="290" srcset="/uploads-archive/2016/03/2.jpg 640w, /uploads-archive/2016/03/2-300x136.jpg 300w, /uploads-archive/2016/03/2-228x103.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>読込み中は画面のいちばん左下にゲージが表示されます。読み込む動画の尺などにもよりますが結構時間がかかるかもしれません。</p>
<p>ちなみにAVCHDは読込んでくれませんでした。</p>
<p><a href="/uploads-archive/2016/03/3.jpg" rel="attachment wp-att-9773"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9773" src="/uploads-archive/2016/03/3.jpg" alt="3" width="640" height="426" srcset="/uploads-archive/2016/03/3.jpg 640w, /uploads-archive/2016/03/3-300x200.jpg 300w, /uploads-archive/2016/03/3-228x152.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="/uploads-archive/2016/03/5.jpg" rel="attachment wp-att-9775"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9775" src="/uploads-archive/2016/03/5.jpg" alt="5" width="640" height="497" srcset="/uploads-archive/2016/03/5.jpg 640w, /uploads-archive/2016/03/5-300x233.jpg 300w, /uploads-archive/2016/03/5-228x177.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>読込みが完了するとトラッカーと解析済みのカメラが出来上がります。</p>
<p><a href="/uploads-archive/2016/03/4.jpg" rel="attachment wp-att-9774"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9774" src="/uploads-archive/2016/03/4.jpg" alt="4" width="640" height="199" srcset="/uploads-archive/2016/03/4.jpg 640w, /uploads-archive/2016/03/4-300x93.jpg 300w, /uploads-archive/2016/03/4-228x71.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>この時に背景オブジェクトを作成をクリックすると読込んだ動画の背景を同時に作成してくれるので便利です。</p>
<h2>軸を調整する</h2>
<p>マーカーの位置を見てみるとXYZ軸と多少ずれてしまっていますので、これを調整していきます。</p>
<p>まずは中心点（X=０,Y=０,Z=０)がカメラ位置になってしまっているので、中心点を調整します。</p>
<p><a href="/uploads-archive/2016/03/6.jpg" rel="attachment wp-att-9778"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9778" src="/uploads-archive/2016/03/6.jpg" alt="6" width="510" height="555" srcset="/uploads-archive/2016/03/6.jpg 510w, /uploads-archive/2016/03/6-276x300.jpg 276w, /uploads-archive/2016/03/6-228x248.jpg 228w" sizes="(max-width: 510px) 100vw, 510px" /></a></p>
<p>モーショントラッカーからコンストレイントを選び「位置コンストレイントを作成」をクリックします。</p>
<p>次に動画を見ながら安定していそうなマーカーを探してクリックします。するとそのマーカーが座標の中心点に切り替わってくれます。</p>
<p><a href="/uploads-archive/2016/03/7.jpg" rel="attachment wp-att-9781"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9781" src="/uploads-archive/2016/03/7.jpg" alt="7" width="640" height="446" srcset="/uploads-archive/2016/03/7.jpg 640w, /uploads-archive/2016/03/7-300x209.jpg 300w, /uploads-archive/2016/03/7-228x159.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>続いてY軸０の位置がずれているので調整します。</p>
<p><a href="/uploads-archive/2016/03/8.jpg" rel="attachment wp-att-9787"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9787" src="/uploads-archive/2016/03/8.jpg" alt="8" width="537" height="525" srcset="/uploads-archive/2016/03/8.jpg 537w, /uploads-archive/2016/03/8-300x293.jpg 300w, /uploads-archive/2016/03/8-228x223.jpg 228w" sizes="(max-width: 537px) 100vw, 537px" /></a></p>
<p>「平面コンストレイントを作成」をクリックし、Y軸が０になるマーカーを３つ選択します。</p>
<p><a href="/uploads-archive/2016/03/9.jpg" rel="attachment wp-att-9788"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9788" src="/uploads-archive/2016/03/9.jpg" alt="9" width="640" height="350" srcset="/uploads-archive/2016/03/9.jpg 640w, /uploads-archive/2016/03/9-300x164.jpg 300w, /uploads-archive/2016/03/9-228x125.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>平面コンストレイントを選択した状態で軸をYに変更すれば、先ほど選択した3点からなる面をY=０と認識してくれます。</p>
<p><a href="/uploads-archive/2016/03/10.jpg" rel="attachment wp-att-9789"><img decoding="async" loading="lazy" class="alignnone wp-image-9789" src="/uploads-archive/2016/03/10.jpg" alt="10" width="373" height="249" srcset="/uploads-archive/2016/03/10.jpg 640w, /uploads-archive/2016/03/10-300x200.jpg 300w, /uploads-archive/2016/03/10-228x152.jpg 228w" sizes="(max-width: 373px) 100vw, 373px" /></a></p>
<p>同様に垂直方向の軸を調整します。「ベクトルコンストレイントを作成」をクリックして、垂直になるマーカー2点を選択します。</p>
<p><a href="/uploads-archive/2016/03/11.jpg" rel="attachment wp-att-9790"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9790" src="/uploads-archive/2016/03/11.jpg" alt="11" width="411" height="525" srcset="/uploads-archive/2016/03/11.jpg 411w, /uploads-archive/2016/03/11-235x300.jpg 235w, /uploads-archive/2016/03/11-228x291.jpg 228w" sizes="(max-width: 411px) 100vw, 411px" /></a></p>
<p>今回も軸をYに変更します。</p>
<p><a href="/uploads-archive/2016/03/13.jpg" rel="attachment wp-att-9794"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9794" src="/uploads-archive/2016/03/13.jpg" alt="13" width="339" height="204" srcset="/uploads-archive/2016/03/13.jpg 339w, /uploads-archive/2016/03/13-300x181.jpg 300w, /uploads-archive/2016/03/13-228x137.jpg 228w" sizes="(max-width: 339px) 100vw, 339px" /></a></p>
<p>以上で位置の調整は完了です。</p>
<h2>オブジェクトを配置する</h2>
<p><a href="/uploads-archive/2016/03/14.jpg" rel="attachment wp-att-9795"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9795" src="/uploads-archive/2016/03/14.jpg" alt="14" width="640" height="438" srcset="/uploads-archive/2016/03/14.jpg 640w, /uploads-archive/2016/03/14-300x205.jpg 300w, /uploads-archive/2016/03/14-228x156.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>実写と合成したオブジェクトをそれぞれ配置して、後はレンダリングするだけです。</p>
<p>出来上がった動画がこちらです。</p>
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-9769-3" width="720" height="414" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/03/test_2_up.mp4?_=3" /><a href="/uploads-archive/2016/03/test_2_up.mp4">/uploads-archive/2016/03/test_2_up.mp4</a></video></div>
<p>今回はレンダリング時間軽減のためにライティングなどを全く行わず、かなり簡素な感じですが読込んだ動画を背景にしてGIを使用すれば実際に存在しているような質感を出す事ができます。</p>
<p>&nbsp;</p>


CINEMA4D モーショントラッカーを使用した実写合成

<p>横幅によってフォントサイズの調整と、文字長を自動で省略シてくれるjQueryプラグイン&#8221;Jquery-quickfit&#8221; が良さそうだったので使ってみた。</p>
<p><a href="http://chunksnbits.github.io/jquery-quickfit/" target="_blank">http://chunksnbits.github.io/jquery-quickfit/</a></p>
<p>&nbsp;</p>
<p>デモはこちら</p>
<p><a href="/demo/hoshino/63/index.html" target="_blank" class="demo">Demo</a></p>
<p>&nbsp;</p>
<h2>設置方法</h2>
<p>JS</p>

		<div id="crayon-6495401591e2a233328404" 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;">
$( window ).on( "resize", function()
{
	$( "#quickfit-a" ).quickfit( { max: 40, min: 16, truncate: false } );
	$( "#quickfit-b" ).quickfit( { max: 40, min: 20, truncate: true } );        
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495401591e2a233328404-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2a233328404-2">2</div><div class="crayon-num" data-line="crayon-6495401591e2a233328404-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2a233328404-4">4</div><div class="crayon-num" data-line="crayon-6495401591e2a233328404-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495401591e2a233328404-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">window</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">on</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">"resize"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2a233328404-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401591e2a233328404-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">"#quickfit-a"</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">quickfit</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">max</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">40</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">min</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">16</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">truncate</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2a233328404-4"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">"#quickfit-b"</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">quickfit</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">max</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">40</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">min</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">20</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">truncate</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-6495401591e2a233328404-5"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>HTML</p>

		<div id="crayon-6495401591e2e985673947" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div id="quickfit-a"&gt;
フォントサイズ最大:40、最小:16。文字省略:無し
&lt;/div&gt;

&lt;div id="quickfit-b"&gt;
フォントサイズ最大:40、最小:20。文字省略:有り
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495401591e2e985673947-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2e985673947-2">2</div><div class="crayon-num" data-line="crayon-6495401591e2e985673947-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2e985673947-4">4</div><div class="crayon-num" data-line="crayon-6495401591e2e985673947-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2e985673947-6">6</div><div class="crayon-num" data-line="crayon-6495401591e2e985673947-7">7</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-6495401591e2e985673947-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"quickfit-a"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2e985673947-2"><span class="crayon-i ">フォントサイズ最大:40、最小:16。文字省略:無し</span></div><div class="crayon-line" id="crayon-6495401591e2e985673947-3"><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2e985673947-4">&nbsp;</div><div class="crayon-line" id="crayon-6495401591e2e985673947-5"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"quickfit-b"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2e985673947-6"><span class="crayon-i ">フォントサイズ最大:40、最小:20。文字省略:有り</span></div><div class="crayon-line" id="crayon-6495401591e2e985673947-7"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>パラメータ</p>
<table>
<tbody>
<tr>
<td>キー名</td>
<td>データ型</td>
<td>内容</td>
</tr>
<tr>
<td>max</td>
<td>数値</td>
<td>親要素の幅によってフォントサイズが大きくなる中で、許容する最大のフォントサイズ</td>
</tr>
<tr>
<td>min</td>
<td>数値</td>
<td>親要素の幅によってフォントサイズが小さくなる中で、許容する最小のフォントサイズ</td>
</tr>
<tr>
<td>truncate</td>
<td>bool</td>
<td>親要素をはみ出してしまう場合、文字を切ることを許容するかどうか</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>レスポンシブでのコーディングの時などで便利そうだ</p>

【jQuery】幅によって自動でテキストを省略してくれるプラグイン

<p>まず、AMPって聞き慣れないですよね。</p>
<p>購読しているRSSの中で、AMPについての言及がよくされていましたが、まだ実施前だしいいか〜なんて思っていたのですが、去る2016年2月24日に日本でも若干前倒しで実装がされたようですので、本サイトも対応してみました。</p>
<h2>AMPについて</h2>
<p>まず、AMPとは、Accelerated Mobile Pagesの略で、スマートフォンから閲覧するページを高速化させましょうプロジェクトで、原則HTML＋CSSで遅くなるJSは禁止というAMPフレームワークを作ったので準拠して下さいというのが超簡単な解釈です。</p>
<p>オフィシャルのページは<a href="https://googleblog.blogspot.jp/2015/10/introducing-accelerated-mobile-pages.html" target="_blank">こちら</a>で詳しく知りたい方は、海外SEO情報ブログさんの<a href="https://www.suzukikenichi.com/blog/accelerated-mobile-pages-amp/" target="_blank">こちら</a>の記事が詳しく解説されています。</p>
<h2>AMPに対応するためのWordpressプラグイン</h2>
<p>この情報も海外SEO情報ブログさんの<a href="https://www.suzukikenichi.com/blog/how-to-make-your-wordpress-blog-amp-ready/" target="_blank">記事</a>を参考にさせて頂きました。</p>
<h3>AMP</h3>
<p>一つ目はその名もAMP。</p>
<p>プラグインの検索画面でAMPと入力すると一番上に出てきます。</p>
<p>こちらを有効化します。</p>
<p><a href="/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html">/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html</a></p>
<p>日本語URLにしたことを後悔しつつも、要は末尾に/ampをつけることでAMP対応のページを表示してくれます。</p>
<p><a href="/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html/amp">/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html/amp</a></p>
<p>私達で用意したスタイルが反映されていないページが登場します。</p>
<p><a href="/officer/%e6%9c%ac%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%89%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92amp%e5%af%be%e5%bf%9c%e3%81%95%e3%81%9b%e3%81%be.html/attachment/developer_tools_-_http___sterfield_co_jp" rel="attachment wp-att-9760"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9760" src="/uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-300x47.png" alt="Developer_Tools_-_http___sterfield_co_jp" width="300" height="47" srcset="/uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-300x47.png 300w, /uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-768x121.png 768w, /uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-1024x161.png 1024w, /uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-228x36.png 228w, /uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp.png 1528w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>要素の検証からもAMPに対応出来ていることが分かります。</p>
<h3>Facebook Instant Articles &amp; Google AMP Pages by PageFrog</h3>
<p>ここからスタイルをあてていくのが、このプラグインになります。</p>
<p><a href="/officer/%e6%9c%ac%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%89%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92amp%e5%af%be%e5%bf%9c%e3%81%95%e3%81%9b%e3%81%be.html/attachment/styling_pagefrog" rel="attachment wp-att-9761"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9761" src="/uploads-archive/2016/03/Styling_PageFrog-300x194.png" alt="Styling_PageFrog" width="300" height="194" srcset="/uploads-archive/2016/03/Styling_PageFrog-300x194.png 300w, /uploads-archive/2016/03/Styling_PageFrog-768x495.png 768w, /uploads-archive/2016/03/Styling_PageFrog-1024x660.png 1024w, /uploads-archive/2016/03/Styling_PageFrog-228x147.png 228w, /uploads-archive/2016/03/Styling_PageFrog.png 1293w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>素の状態ではロゴととにかくページを早く表示することだけのページです。</p>
<p>設定出来る項目も最低限という感じでこれ以上は、プラグインファイルを直接編集しないといけないとのことです。</p>


スターフィールドホームページをAMP対応

<p>UIという文字を頻繁に見かけるようになり、ワイヤーフレームやモックアップを制作するツールが多く生まれてきています。</p>
<p>以前、下記記事にてツールを紹介しましたが（すごい簡単にですが）<br />
<a href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84.html" target="blank">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a><br />
(cometはまだ動きがないようですね・・・)</p>
<p>こういったツールではなく、素材として制作を提供してくれるサイト、ブログがあります。<br />
しかもフリーで！！<br />
その中でいいと思った3つをご紹介します。</p>
<h3>ChatアプリのUIテンプレート</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg" alt="Free Chat UI kit for Photoshop and Sketch  InVision" width="640"  class="alignnone size-large wp-image-9747" srcset="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg 1024w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-300x199.jpg 300w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-768x508.jpg 768w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-228x151.jpg 228w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision.jpg 1109w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Chatアプリの制作に役にたちそうなkitです。そのままでもいい感じなのですが、これを元に制作していくと良さそうです。</p>
<p>photoshopかsketchか選択してダウンロードできます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png" alt="スクリーンショット 2016-03-01 12.33.46" width="640" class="alignnone size-large wp-image-9748" srcset="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png 1024w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-300x209.png 300w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-768x534.png 768w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-228x159.png 228w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82.png 1088w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>デザインに使わなくて、どういったページが必要かを把握するだけでも十分良さそうです！<br />
こんなのがフリーだなんてどうかしてますね、すごいな・・・invision。</p>
<p><a href="http://www.invisionapp.com/chat" target="_blank" class="link">Free Chat UI kit for Photoshop and Sketch | InVision</a></p>
<h3>ワイヤーフレーム、フローチャートを作れるKIT</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg" alt="UI Tiles- Website Flowcharts" width="640" class="alignnone size-large wp-image-9749" srcset="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg 1024w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-300x201.jpg 300w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-768x515.jpg 768w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-228x153.jpg 228w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>これはデザイナーはもちろん、ディレクターにも良いと思います！<br />
こちらも凄まじい種類のページテンプレートが用意してあり、PNG,AI,PSD,SKETCH形式のものがダウンロードできます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png" alt="スクリーンショット 2016-03-01 12.49.02" width="400"  class="alignnone size-full wp-image-9751" srcset="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png 639w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-260x300.png 260w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-228x263.png 228w" sizes="(max-width: 639px) 100vw, 639px" /></p>
<p><a href="https://pixelbuddha.net/ui-tiles/" target="_blank" class="link">UI Tiles: Website Flowcharts</a></p>
<h3>高品質なECサイトのUIテンプレート</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg" alt="Portland UI Kit Free Sample  Craftwork – Thoroughly Handpicked UI Freebies" width="640" class="alignnone size-large wp-image-9750" srcset="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg 1024w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-300x201.jpg 300w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-768x515.jpg 768w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-228x153.jpg 228w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>こちらは無料ではTOPページのみになりますが参考になります。</p>
<p><a href="http://getcraftwork.com/portland-ui-kit/" target="_blank" class="link">Portland UI Kit Free Sample | Craftwork – Thoroughly Handpicked UI Freebies</a></p>
<p>というかここのサイトがすごい。。。</p>
<p><a href="http://getcraftwork.com/ui-kits/" target="_blank" class="link">UI Kits | Craftwork – Thoroughly Handpicked UI Freebies</a></p>
<p>こういうの活かしながらより良いサイト制作に勤しみたいと思います。</p>


UIデザイン制作にすごい役立ちそうなフリー素材３つ

<p>LINE＠を始めてみました！<br />
先日砂川さんがブログで紹介しているのを見て良さそうだと思ったので、試しに自分でもやってみることにしました。</p>
<p><a href="/blog/ec/%E4%BE%BF%E5%88%A9%E3%81%8B%E3%81%AA%EF%BC%9Fline%EF%BC%A0%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E6%A9%9F%E8%83%BD%E3%82%92%E3%81%94%E7%B4%B9%E4%BB%8B.html" target="_blank">便利かな？LINE＠で使える機能をご紹介</a></p>
<p>機能については、↑ 砂川さんのブログがとても詳しいので参考にしてください。</p>
<p>私は実際に登録してみての感想をお伝えします。</p>
<h2>結論からいうと、これはアリ！</h2>
<p>いまコンペナビでツイッターを使っているのですが、けっこう厳しいなぁと思うんです。<br />
ツイッターというものが浸透しきっていて、企業も個人もすでにあの手この手で面白いことをしている場に、新たに参入して注目をあつめるのは至難の業です。<br />
よっっぽど知名度があったり、いい投稿ができればいいんでしょうが、ぶっちゃけ厳しいです。</p>
<p>しかもツイッター自体が醸し出す停滞感もあります。<br />
これは個人的な感覚ですが、黎明期のような自由さがなく、業者感やBOT感や、担当者が仕方なくやってる感がタイムラインから漂ってきます。（コンペナビもその現状に一役買っているような気がしないでもないような…）</p>
<p>考えてみれば、ツイッターだけでなく、メールやフェイスブックもそんな感じじゃないでしょうか。<br />
連絡手段としては全然使えますし、アリですけど、商売として使おうとしたときには今ひとつワクワク感がありません。</p>
<p>メールがオワコンと言われ、フェイスブックは高年齢化し、ツイッターはオタク化・たこつぼ型している現状を考えれば、LINE＠がその次のマーケティングツールにとして、もっとのし上がってくると思います。<br />
まだまだ黎明期で、可能性に気づいているのが（美容業界とか以外で）あんまりまだいないんじゃないでしょうか。</p>
<p>サービスが定着するというのは、同時に”ダサいツール”であることを指し、マーケティング的な効果を出すのは難しくなります。多くの人がやっているから。</p>
<p>LINE＠に登録してみてまだちょっとしか触っていませんが、なんというかこう初めてメールを送った時や、留学生に教えられてまだ英語版しかなかった時代のフェイスブックにはじめてログインしたときや、まだ知る人ぞ知る存在だった時代のツイッターに触った時と同じようなワクワク感がありました。</p>
<p>いずれLINEも陳腐化することは明白です。ですが、それまでの短い期間に活用する価値は十分あると思います。</p>
<p>というわけで、記事タイトルにある「オススメする理由」は、まだあんまり人がやってないから！です。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/IMG_9520-169x300.png" alt="IMG_9520" width="169" height="300" class="aligncenter size-medium wp-image-9725" srcset="/uploads-archive/2016/02/IMG_9520-169x300.png 169w, /uploads-archive/2016/02/IMG_9520-576x1024.png 576w, /uploads-archive/2016/02/IMG_9520-228x406.png 228w, /uploads-archive/2016/02/IMG_9520.png 750w" sizes="(max-width: 169px) 100vw, 169px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/IMG_9519-169x300.png" alt="IMG_9519" width="169" height="300" class="aligncenter size-medium wp-image-9726" srcset="/uploads-archive/2016/02/IMG_9519-169x300.png 169w, /uploads-archive/2016/02/IMG_9519-576x1024.png 576w, /uploads-archive/2016/02/IMG_9519-228x406.png 228w, /uploads-archive/2016/02/IMG_9519.png 750w" sizes="(max-width: 169px) 100vw, 169px" /></p>
<p>ちなみに初投稿として、去年海に行った時の写真をアップしたら、規定に引っかかって送れませんでした。<br />
ま、これは写真というよりテキストがダメだったんでしょうね。</p>


LINE＠で個人アカウントをつくった！おすすめする一つの理由

<p>CINEMA4DにはCモーションという、簡単にキャラクターに動きをつけるためのツールが存在します。</p>
<p>今回はその方法をご説明します。</p>
<p>まずはキャラクタの作り方です。今回は事前にオブジェクトができるところから説明させて頂きます。</p>
<p>キャラクタから「キャラクタ」を選択します。</p>
<p><a href="/uploads-archive/2016/02/1-2.jpg" rel="attachment wp-att-9713"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9713" src="/uploads-archive/2016/02/1-2.jpg" alt="1" width="640" height="465" srcset="/uploads-archive/2016/02/1-2.jpg 640w, /uploads-archive/2016/02/1-2-300x218.jpg 300w, /uploads-archive/2016/02/1-2-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>人間や動物など数種類ある中から、該当する物を選択して、ルートから骨組みを構築していきます。</p>
<p>ここまでは「ビルド」で行う作業になります。</p>
<p><a href="/uploads-archive/2016/02/2-3.jpg" rel="attachment wp-att-9714"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9714" src="/uploads-archive/2016/02/2-3.jpg" alt="2" width="640" height="465" srcset="/uploads-archive/2016/02/2-3.jpg 640w, /uploads-archive/2016/02/2-3-300x218.jpg 300w, /uploads-archive/2016/02/2-3-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>次に「調整」でポイント（関節にあたるもの）の位置を決定します。</p>
<p>３Dでは色んな方向から確認しておかないとずれてしまっている事があるので要注意です。</p>
<p><a href="/uploads-archive/2016/02/3-2.jpg" rel="attachment wp-att-9715"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9715" src="/uploads-archive/2016/02/3-2.jpg" alt="3" width="640" height="465" srcset="/uploads-archive/2016/02/3-2.jpg 640w, /uploads-archive/2016/02/3-2-300x218.jpg 300w, /uploads-archive/2016/02/3-2-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>調整が済んだら次に、メッシュとなるオブジェクトをバインドします。</p>
<p>これは非常に簡単で、バインドしたいオブジェクトをドラッグ＆ドロップするだけで完了です。</p>
<p>このとき、同時にスキンが生成されます。</p>
<p><a href="/uploads-archive/2016/02/4-2.jpg" rel="attachment wp-att-9716"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9716" src="/uploads-archive/2016/02/4-2.jpg" alt="4" width="640" height="465" srcset="/uploads-archive/2016/02/4-2.jpg 640w, /uploads-archive/2016/02/4-2-300x218.jpg 300w, /uploads-archive/2016/02/4-2-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>次にいよいよ動きをつけて行きます。</p>
<p>アニメートから「歩行を追加」をクリックするとCモーションが追加されます。</p>
<p>Cモーションの歩行から「直進」に変更すると足踏みから歩き出してくれます。</p>
<p><a href="/uploads-archive/2016/02/5-2.jpg" rel="attachment wp-att-9717"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9717" src="/uploads-archive/2016/02/5-2.jpg" alt="5" width="640" height="465" srcset="/uploads-archive/2016/02/5-2.jpg 640w, /uploads-archive/2016/02/5-2-300x218.jpg 300w, /uploads-archive/2016/02/5-2-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>出来上がりはこんな感じになります。</p>
<div style="width: 1920px;" class="wp-video"><video class="wp-video-shortcode" id="video-9712-2" width="1920" height="1080" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/02/test_1.mp4?_=2" /><a href="/uploads-archive/2016/02/test_1.mp4">/uploads-archive/2016/02/test_1.mp4</a></video></div>


CINEMA4D Cモーションを使って簡単にキャラクターを動かす

【Canvas】円でぼかしのような視覚効果

<p>自分は観光ビザしか取ったことがないが、2月からビザの申請方法が変更になったようだ。</p>
<p>具体的には</p>
<ol>
<li>申請書が新しくなった</li>
<li>宿泊先のバウチャーが必要になった</li>
</ol>
<p>の2点が変わった模様。</p>
<p>今回久しぶりだったのでたまたま前日に電話で大使館に確認を取ったからよかったものの、自分の雛形を使っていたら行けていなかった。</p>
<p>実際にバウチャーを持ってきておらず申請できずに帰る人が、自分の前に並んでいた人だけで数人いた。</p>
<p>&nbsp;</p>
<h3>1. 申請書が新しくなった</h3>
<p><a href="/uploads-archive/2016/02/fdfeb111e04e7bab111a879b7987e69d.pdf" rel="">旧フォーマット</a></p>
<p><a href="/uploads-archive/2016/02/5a631c6c294ea7a0c08d79ad34cb74e3.pdf" rel="">新フォーマット</a></p>
<p>&nbsp;</p>
<p>記入欄としては、Permanent address (本籍)が追加になった。</p>
<p>あとは注意書きと大使館記入欄が変更になっているようだ。</p>
<p>ちなみに注意書きの変更点は</p>
<p>Union of Myanmar → Republic of the Union of Myanmar</p>
<p>&nbsp;</p>
<p>フォーマットはいつ変更になるかわからないため、以下のURLから随時ダウンロードした方がよさそうだ</p>
<p><a href="http://www.myanmar-embassy-tokyo.net/visaforms/visaformsindex.html" target="_blank">http://www.myanmar-embassy-tokyo.net/visaforms/visaformsindex.html</a></p>
<p>&nbsp;</p>
<h3>2. 宿泊先のバウチャーが必要になった</h3>
<p>全旅程分の宿泊先を提示することが必須となったようだ。</p>
<p>自分はいつも現地のぽーさんにホテルをとってもらっていたのだが、たぶんホテルから書類をもらうのに時間がかかるだろうなと思い、今回はじめてエクスべディアで予約をした。</p>
<p>案の定申請時に現地の人にとってもらったのでバウチャーを出せないとごねている人がいたが、申請は受け入れられなかったようだ。</p>
<p>&nbsp;</p>
<p>これもいつ変わるかわからないので事前に確認した方がよさそう。</p>
<p><a href="http://www.myanmar-embassy-tokyo.net/2016/newvisainfo.pdf" target="_blank">http://www.myanmar-embassy-tokyo.net/2016/newvisainfo.pdf</a></p>
<p>&nbsp;</p>
<p>あとはあまり影響はないが、支払い方法が少し変更になっていた。</p>
<p>以前は全額振込だったが、今は申請時に1,000円を支払い、残りを以前までと同じく振り込んで振込用紙を提出というようになっていた。</p>
<p>&nbsp;</p>
<p>このような手続きはいつ変更になるかわからないし、事前チェックを怠っては行けないと改めて思った</p>
<p>&nbsp;</p>
<p>おまけ</p>
<p>&nbsp;</p>
<p>ミャンマー大使館、建て替えが終わってすごく綺麗になっていました。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9700" src="/uploads-archive/2016/02/IMG_0584.jpg" alt="IMG_0584" width="656" height="656" srcset="/uploads-archive/2016/02/IMG_0584.jpg 656w, /uploads-archive/2016/02/IMG_0584-150x150.jpg 150w, /uploads-archive/2016/02/IMG_0584-300x300.jpg 300w, /uploads-archive/2016/02/IMG_0584-228x228.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9701" src="/uploads-archive/2016/02/IMG_0586.jpg" alt="IMG_0586" width="656" height="656" srcset="/uploads-archive/2016/02/IMG_0586.jpg 656w, /uploads-archive/2016/02/IMG_0586-150x150.jpg 150w, /uploads-archive/2016/02/IMG_0586-300x300.jpg 300w, /uploads-archive/2016/02/IMG_0586-228x228.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></p>
<p>&nbsp;</p>
<p>白を基調としたクールなデザインの建物</p>
<p>館内での噛みタバコは禁止ですね</p>


【ミャンマー】ビザの申請方法が2月から変更に

<p>Chromeの拡張機能の紹介です。</p>
<p>Chromeのデフォルトのダッシュボードを海外のweb,デザイン系のブログ・ギャラリーサイトのフィードを表示しちゃう機能です。</p>
<p><a class="link" href="https://chrome.google.com/webstore/detail/panda-4-news-inspiration/haafibkemckmbknhfkiiniobjpgkebko" target="_blank">Panda</a></p>
<p>通常のダッシュボードは、<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-9688" src="/uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-1024x634.png" alt="スクリーンショット 2016-02-23 16.10.54" width="630" height="390" srcset="/uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-1024x634.png 1024w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-300x186.png 300w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-768x476.png 768w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-228x141.png 228w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b.png 1027w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こんな感じのgoogleのページだと思うのですが、</p>
<p>この拡張機能をインストールして有効化させたら、<br />
以下のようなページがデフォルトとして表示されるようになります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9693" src="/uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-1024x694.png" alt="スクリーンショット 2016-02-23 16.17.37" width="630" height="427" srcset="/uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-1024x694.png 1024w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-300x203.png 300w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-768x520.png 768w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-228x154.png 228w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017.png 1104w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>初期はこんな感じで、左側がニュースのリスト、右側がギャラリーというレイアウトなのですが、<br />
以下のように変更もできます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9694" src="/uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-1024x690.png" alt="スクリーンショット 2016-02-23 16.19.12" width="630" height="425" srcset="/uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-1024x690.png 1024w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-300x202.png 300w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-768x518.png 768w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-228x154.png 228w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d.png 1104w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>有名なサイトばかり揃っており、自分で選択もできるので非常に良いです。</p>
<p>忙しいとサイトを見に行くことを忘れてしまうこともあると思いますが、<br />
これがあれば自然に目に入ってくる可能性が高いのでおすすめです!!</p>
<p>これの日本verが欲しいな・・・</p>


デザイナー必須!?のChromeのエクステンション「Panda」

<p>最近は、<b>どうしたらこのページが人に興味を持たれるようになるんだろう</b>　とか…<br />
<b>どこに何を配置したら正しいのか</b>　やら…<br />
<b>そもそも求められている商品はこれじゃないんじゃ！？</b>　など…</p>
<p>そんな事を考えていた時に、ふと販売接客業に勤めていた時の事を思い出しました。<br />
お客様が入ってきて目当てのコーナーへたどり着いた時、最初に必ず見るゾーンがありまして、そこを私は「ゴールデンゾーン」と言っていました。<br />
ゴールデンゾーンは、手の触れやすい場所で一般的に床上60cm～160cmの範囲とされております。そこにどんな商品を配置するかでお店の売上、利益、イメージが異なってくるのですが…</p>
<p>そんなゴールデンゾーンのようにWEBやレイアウトにもゴールデンゾーンがあるのでは？と思い、調べてみたら出てきました。</p>
<h2>レイアウトで有名な3つの配置</h2>
<p>3つもありました。</p>
<h3>グーテンベルク・ダイヤグラム</h3>
<p>すごい、魔法の呪文みたいな言葉ですね。<br />
グーテンベルク・ダイヤグラムとは、均等に配置された同質の情報を見る際の一般的な視線のパターンを表した図式です。</p>
<p><b>人間の目は左上から右下方向へ、チラチラしながら遷移</b>します。<br />
このような視線の流れのパターンは、エディトリアルデザイン（新聞・雑誌・書籍などの出版物のデザイン）などでは当たり前に使われている技法や考え方だそうです。テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置するように心がける、といったものです。</p>
<p>このレイアウトはドキュメントを読む際の視線の動きなので、媒体によって効果的な導線が異なります。</p>
<h3>Z型パターン</h3>
<p>グーテンベルク・ダイヤグラムと少し似ておりますが、紙媒体でよく使われるパターン。<br />
「左上⇒右上⇒左下⇒右下」とZの形にユーザーの視線が移動するため、この導線上に重要なエレメントを配置しましょう。</p>
<p>紙媒体でとは言いましたが、以下のように意外とWEBでも使われていると思うのですがどうでしょう？</p>
<p><a href="/uploads-archive/2016/02/free_03.jpg" rel="attachment wp-att-9660"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/free_03.jpg" alt="free_03" width="383" height="102" class="alignnone size-full wp-image-9660" srcset="/uploads-archive/2016/02/free_03.jpg 383w, /uploads-archive/2016/02/free_03-300x80.jpg 300w, /uploads-archive/2016/02/free_03-228x61.jpg 228w" sizes="(max-width: 383px) 100vw, 383px" /></a></p>
<p><a href="/uploads-archive/2016/02/free_01.jpg" rel="attachment wp-att-9661"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/free_01.jpg" alt="free_01" width="124" height="347" class="alignnone size-full wp-image-9661" srcset="/uploads-archive/2016/02/free_01.jpg 124w, /uploads-archive/2016/02/free_01-107x300.jpg 107w" sizes="(max-width: 124px) 100vw, 124px" /></a></p>
<p>縦や横だけを読むよりも</p>
<p><a href="/uploads-archive/2016/02/free_02.jpg" rel="attachment wp-att-9662"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/free_02.jpg" alt="free_02" width="160" height="158" class="alignnone size-full wp-image-9662" /></a></p>
<p>左上⇒右上へ、自然と、左下⇒右下　の文字の配置が私は見やすいと思います。<br />
ちょっと解釈が違うかもしれませんが、目線の動きという点では……ダメですかね(-ω-；)</p>
<h3>F型パターン</h3>
<p>こちらはWEBにおける視線移動の研究で発見された比較的新しいパターン<br />
ECサイトやブログなんかで使用する代表的なパターンらしく、テンプレートなどもこの目線を利用した配置が多いと思います。</p>
<p><a href="/uploads-archive/2016/02/mesen-e1456135958802.jpg" rel="attachment wp-att-9663"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/mesen-e1456135958802.jpg" alt="mesen" width="500" height="417" class="alignnone size-full wp-image-9663" /></a></p>
<p>①　⇒　②　⇒　①・③　⇒　④　⇒　①・③・⑤　⇒　⑥</p>
<p>大まかな視線の動きはこういった感じですね。<br />
ここから私が感じた事は、どのパターンでも多くの人は左上～真ん中を見るという事。</p>
<p>弊社のECサイトにもファーストビューで一番人が興味引くものを置いておくべきなんだと思い、スマホの普及でPCから見る人が少なくなりましたが、今回はPCもすぐに配置を変えてみました（もちろんスマホ側もやりましたよ！）</p>
<p>結果としては、2週間ほどで全体で購買率が4.28％UPしました～ (*ﾟ▽ﾟﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁ</p>
<p>ですが、やっぱりスマホからのアクセスや売上の方が多いところを見ると、世間のPC離れが良くわかりますね…。これからIT業界がどのように変化していくのか、流行りを見ながら新しいマーケティングにはしっかり目を通していこうと思います！</p>


効果的なコンテンツの配置と視線誘導に適しているレイアウトとは？

<p>ガジェット・ハードウェア好きにはたまらないイベントが只今バルセロナで開催されています。</p>
<p>日本で発売されない機種もたくさんあり、もふもふと考えています。</p>
<p>ここで最新機種が発表されて、日本で発売されるものはおおよそ夏あたりになります。</p>
<p>ですので、ここでXperiaやGaraxyの最新機種が発表されているものは、Docomo、au、Softbankが夏モデルを発表するあたりで日本には正式にアナウンスされることになります。</p>
<h2>気になったものをご紹介</h2>
<h3>XperiaXシリーズ</h3>
<p>もはや日本のメーカーはソニーくらいしか出展していないのではと思われます。</p>
<p>XperiaZに変わる新しいラインナップとしてXperiaXが発表されました。</p>
<p><a href="/officer/mobile-world-congress-2016%e9%96%8b%e5%82%ac%e4%b8%ad.html/attachment/xperia" rel="attachment wp-att-9670"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-9670" src="/uploads-archive/2016/02/xperia.jpg" alt="xperia" width="192" height="191" srcset="/uploads-archive/2016/02/xperia.jpg 192w, /uploads-archive/2016/02/xperia-150x150.jpg 150w" sizes="(max-width: 192px) 100vw, 192px" /></a></p>
<p>とま〜ココらへんは、日本でも発売予定でメディアで広く扱われているので、日本で発売予定ないけどこんなのあるんだよというのをいくつか紹介したいと思います。</p>
<h3>LG　G5</h3>
<p><a href="/officer/mobile-world-congress-2016%e9%96%8b%e5%82%ac%e4%b8%ad.html/attachment/lg_g5_with_removable_battery" rel="attachment wp-att-9671"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9671" src="/uploads-archive/2016/02/lg_g5_with_removable_battery-300x225.jpg" alt="lg_g5_with_removable_battery" width="300" height="225" srcset="/uploads-archive/2016/02/lg_g5_with_removable_battery-300x225.jpg 300w, /uploads-archive/2016/02/lg_g5_with_removable_battery-768x576.jpg 768w, /uploads-archive/2016/02/lg_g5_with_removable_battery-228x171.jpg 228w, /uploads-archive/2016/02/lg_g5_with_removable_battery.jpg 800w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>日本にも進出している韓国のLGですが、グローバル向けの端末にはこんなものを発表しています。</p>
<p>一見すると普通のスマートフォンですが、一番後ろの端末だけ下部が外れています。</p>
<p>最近ではバッテリー埋込み型のスマートフォンが主流となりましたが、取り外し可能なバッテリーを新たに開発しています。取り外しバッテリーはニーズあると思います。</p>
<h3>HP Elite x3</h3>
<p><a href="/officer/mobile-world-congress-2016%e9%96%8b%e5%82%ac%e4%b8%ad.html/attachment/hp_elite_x3" rel="attachment wp-att-9672"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9672" src="/uploads-archive/2016/02/hp_elite_x3-300x225.jpg" alt="hp_elite_x3" width="300" height="225" srcset="/uploads-archive/2016/02/hp_elite_x3-300x225.jpg 300w, /uploads-archive/2016/02/hp_elite_x3-768x576.jpg 768w, /uploads-archive/2016/02/hp_elite_x3-228x171.jpg 228w, /uploads-archive/2016/02/hp_elite_x3.jpg 800w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>これも単なるWindowsMobilePhoneかと思いきや、Windows10ではこんな感じでドックに接続することでデスクトップのように扱うことが出来るんだそうです。</p>
<p><a href="/officer/mobile-world-congress-2016%e9%96%8b%e5%82%ac%e4%b8%ad.html/attachment/hp_elite_x3_2" rel="attachment wp-att-9673"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9673" src="/uploads-archive/2016/02/hp_elite_x3_2-300x202.jpg" alt="hp_elite_x3_2" width="300" height="202" srcset="/uploads-archive/2016/02/hp_elite_x3_2-300x202.jpg 300w, /uploads-archive/2016/02/hp_elite_x3_2-228x153.jpg 228w, /uploads-archive/2016/02/hp_elite_x3_2.jpg 560w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>こういう一般的な用途としては別々にすればいいし、既に別々に管理しているだろうしというところにあえて、合体させてくるあたりに魅力を感じます。</p>
<p>とよくみたらこれは日本でも法人向けに発売予定のようですね。</p>
<h3>Lenovo Vibe K5</h3>
<p><a href="/officer/mobile-world-congress-2016%e9%96%8b%e5%82%ac%e4%b8%ad.html/attachment/lenovo_k5_plus_official" rel="attachment wp-att-9674"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9674" src="/uploads-archive/2016/02/lenovo_k5_plus_official-300x225.jpg" alt="lenovo_k5_plus_official" width="300" height="225" srcset="/uploads-archive/2016/02/lenovo_k5_plus_official-300x225.jpg 300w, /uploads-archive/2016/02/lenovo_k5_plus_official-768x576.jpg 768w, /uploads-archive/2016/02/lenovo_k5_plus_official-228x171.jpg 228w, /uploads-archive/2016/02/lenovo_k5_plus_official.jpg 800w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>機種自体は普通ですが、日本でLenovoといえば、ThinkpadなどのPCメーカーという印象しかないと思いますが、スマートフォンを作りまくっていて、世界のマーケットシェアを調べると世界5位に出てきます。</p>
<p><a href="http://www.idc.com/prodserv/smartphone-market-share.jsp" target="_blank">http://www.idc.com/prodserv/smartphone-market-share.jsp</a></p>
<h2>まとめ</h2>
<p>こんな感じでMWCの初日を終えており、ハードウェア好きとしてはたまらない発表が続いています。</p>
<p>日本以外のマーケットでどのようなものが生まれているのか？ハードウェアにかぎらず4Gネット回線の次世代の5Gについてや新しいVRの発表などもされているので、情報を先どるという意味では必見です。</p>
<p>おまけとしてITネット領域のイベントをいくつかご紹介します。</p>
<h3>世界の見本市やイベント</h3>
<p>PC、スマートフォン関連で以下を抑えておけば、最新の技術や流れを知ることが出来ると思います。</p>
<p>他にも広告関連Adtech等も有名ですが、領域の線引が難しいため、とりあえずハードウェアとOS、ウェブという領域に区切っておきます。</p>
<p class="r"><a href="https://www.cesweb.org/">Cosumer Electronics Show</a></p>
<p>1月　家電見本市（PC、音楽プレイヤー、液晶ディスプレイなど）</p>
<p class="r"><a href="https://www.mobileworldcongress.com/">Mobile World Congress</a></p>
<p class="r">2月　モバイル見本市</p>
<p class="r"><a href="https://events.google.com/io2015/">Google I/O 2015</a></p>
<p>5月　新しいAndroidOS</p>
<p class="r"><a href="https://developer.apple.com/wwdc/">WWDC</a></p>
<p>6月　新しいiOS、OSX</p>
<p class="r"><a href="https://websummit.net/">Web Summit</a></p>
<p class="r">11月　Web関連</p>
<p>&nbsp;</p>
<p class="r">


Mobile World Congress 2016開催中

<h2>検索ソートの種類</h2>
<p>検索結果のソートには様々なものがありますが、まとめると以下のような一覧になる気がしています。</p>
<ul>
<li>関連度 relevancy, relevance
</li>
<li>人気順（売れ筋順、ランキング順）top selling
</li>
<li>新着順、発売日順 new arrivals
</li>
<li>商品名順 昇順 あ→わ name a-z
</li>
<li>商品名順 降順 わ→あ name z-a
</li>
<li>重量 軽い順 heaviest
</li>
<li>重量 重い順 lightest
</li>
<li>評価順 top rated, avg. cusotmer review
</li>
<li>評価件数の多い順
</li>
<li>価格の低い順 price low to high
</li>
<li>価格の高い順 price high to low
</li>
<li>発売中 On Sale Now
</li>
<li>ポイント率 point rate
</li>
<li>お気に入りの数
</li>
<li>よく見られている順
</li>
</ul>
<h2>所感</h2>
<p>ECサイトにおいて上記のソートをすべて網羅しているサイトは少ないですが、用意されているといざというときに便利な気がしています。<br />
特に、海外配送においては、重量は配送量等に関わってくるので、重量でソートできると便利な気がしています。</p>


検索結果のソートについて考える

<h3>マウスジェスチャー機能とは？</h3>
<div style="padding-left: 15px;">
  マウスのクリックや上下左右の動きによって<br />
  各アプリケーションの機能を割り当てることです。<br />
  (主にブラウザ、ファイラーで使われます)</div>
<h3>ブラウザの動作をマウスジェスチャーで楽に！</h3>
<div style="padding-left: 15px;">
  今回はChromeのストアが提供している<br />
  「CrxMouse」<br />
  をChromeにインストールしてみました。</p>
<p>  <a haref="https://chrome.google.com/webstore/detail/crxmouse/jlgkpaicikihijadgifklkbpdajbkhjo/related?utm_source=chrome-ntp-icon">こちら</a>のページへ遷移して<br />
  右上の「無料＋」を押下してインストールするだけです。<br />
  Chromeの再起動は必要ありません。<br />
  「設定」＞「拡張機能」のCrxMouseの有効チェックをONにします。</p>
<p>  デフォルトの状態だけでも、それなりに色々出来ます。</p>
<p>  「↓→」：タブを閉じる<br />
  「↑←」：左のタブへ移動<br />
  「↑→」：右のタブへ移動<br />
  「↑↓」：再読み込み</p>
<p>  などなど。。</p>
<p>  自分の良く使う機能だけを登録して<br />
  自分だけの軽快なブラウジングを実現してみましょう！！</p></div>
<h3>参考：カスタマイズ例</h3>
<div style="padding-left: 15px;">
  例えば「→↓→」で「右側のタブ全てを閉じる」を設定します。</p>
<p>  拡張機能のアドオン一覧からCrxMouse下にある「オプション」押下。<br />
  「Mouse Gestures」の下部にある「Edit Gestures」が登録済みのジェスチャーです。</p>
<p>  登録済みのジェスチャはActionのプルダウンメニューを変更するだけ。</p>
<p>  今回の「→↓→」のジェスチャは未登録なので<br />
  ページ真ん中あたりにある「Add new」を押下します。</p>
<p>  すると画面がグレーアウトします。<br />
  この状態で右クリックを押したまま「→↓→」となぞります。</p>
<p>  画面上部に「→↓→」と表示されたら<br />
  Actionの中から「Close all tabs on the right」を選択し、Save押下。</p>
<p>  これだけです。</p></div>
<p>参考：<br />
<a href="/blog/other/it%e6%a5%ad%e7%95%8c/%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b8%e3%83%b3%e3%82%b0%e3%81%a7web%e5%b7%a1%e5%9b%9e%e3%82%92%e3%81%93%e3%81%aa%e3%81%99.html">viChrome</a></p>


マウスジェスチャーを活用してみよう

<p>ECにおいて商品画像は売れ行きを左右するとても大事な要素です。</p>
<p>ジュエリーのように小さい商品を撮影する際にはマクロレンズを使用する事が多々あると思います。</p>
<p>マクロレンズで撮影をする際にジュエリー全体をきれいに見せるために絞りを開いてピンとが合う領域を多くすると照明が足りなくなったり、ブレの原因になったりなかなか撮影がスムーズにいきません。</p>
<p>そこでピントが合う領域を少しずつずらした写真を合成する多焦点合成の方法をお伝えしたいと思います。</p>
<h2>同ポジで撮影</h2>
<p>まずは下のように同ポジで商品を撮影します、この時できるだけ細かくピンをずらした方が合成がきれいに仕上がります。3枚しか載せていませんが合計6枚撮りました。</p>
<p>合成する際に明るさや色味についても修正が可能ですが、できるだけそろえて撮影する事をお勧めします。</p>
<p><a href="/uploads-archive/2016/02/2-2.jpg" rel="attachment wp-att-9625"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9625" src="/uploads-archive/2016/02/2-2.jpg" alt="2" width="640" height="425" srcset="/uploads-archive/2016/02/2-2.jpg 640w, /uploads-archive/2016/02/2-2-300x199.jpg 300w, /uploads-archive/2016/02/2-2-228x151.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="/uploads-archive/2016/02/4-1.jpg" rel="attachment wp-att-9627"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9627" src="/uploads-archive/2016/02/4-1.jpg" alt="4" width="640" height="425" srcset="/uploads-archive/2016/02/4-1.jpg 640w, /uploads-archive/2016/02/4-1-300x199.jpg 300w, /uploads-archive/2016/02/4-1-228x151.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="/uploads-archive/2016/02/5-1.jpg" rel="attachment wp-att-9629"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9629" src="/uploads-archive/2016/02/5-1.jpg" alt="5" width="640" height="425" srcset="/uploads-archive/2016/02/5-1.jpg 640w, /uploads-archive/2016/02/5-1-300x199.jpg 300w, /uploads-archive/2016/02/5-1-228x151.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<h2>位置を揃える</h2>
<p><a href="/uploads-archive/2016/02/1-1.png" rel="attachment wp-att-9633"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9633" src="/uploads-archive/2016/02/1-1.png" alt="1" width="640" height="390" srcset="/uploads-archive/2016/02/1-1.png 640w, /uploads-archive/2016/02/1-1-300x183.png 300w, /uploads-archive/2016/02/1-1-228x139.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>つぎに撮影した画像をレイヤーとして取り込みます。このときレイヤーはラスタライズされている必要があります。</p>
<p>全てのレイヤーを複数選択して、「編集」から「レイヤーを自動整列」のダイヤログを開きます。</p>
<p>投影法は自動設定にチェックを入れてOKをクリックします。</p>
<p>これで位置（上下左右）のズレは修正ができました。</p>
<h2>画像を合成する</h2>
<p>続いて全てのレイヤーを選択した状態で「編集」から「レイヤーを自動合成」をクリックします。</p>
<p><a href="/uploads-archive/2016/02/7.jpg" rel="attachment wp-att-9636"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9636" src="/uploads-archive/2016/02/7.jpg" alt="7" width="640" height="499" srcset="/uploads-archive/2016/02/7.jpg 640w, /uploads-archive/2016/02/7-300x234.jpg 300w, /uploads-archive/2016/02/7-228x178.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>画像をスタックにチェックをいれてOKをクリックすれば合成が完了します。</p>
<p>「シームレスなトーンカラー」にもチェックを入れておくと色味の修正も同時に行てくれます。</p>
<h2>完成</h2>
<p>下の画像が6枚を合成した画像です。</p>
<p><a href="/uploads-archive/2016/02/8.jpg" rel="attachment wp-att-9640"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9640" src="/uploads-archive/2016/02/8.jpg" alt="8" width="640" height="429" srcset="/uploads-archive/2016/02/8.jpg 640w, /uploads-archive/2016/02/8-300x201.jpg 300w, /uploads-archive/2016/02/8-228x153.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>今回は白バックですが、抜けがあって、全ての写真で抜けがボケている場合は商品だけにピンが来るように合成されます。</p>


商品撮影で役立つ！photoshopで多焦点合成を行う方法

<p>wordpressで簡単にメールマガジンが送れるプラグインといえば、Subscribe2。</p>
<p>ネット上でももてはやされていて、「使いやすい！」「メルマガはこれで十分！」などの声が溢れているものの、今ひとつ詳しい使い方を解説してくれているサイトが見当たりません。<br />
プラグインのインストール方法とか、日本語変換の方法なんかを詳しく教えてくれるサイトはたくさんあるんですけどね。</p>
<p>まぁいいか！　とりあえず始めよ！と、始めた結果…</p>
<h2>メルマガスパムを送ってしまった</h2>
<p>ある日、お客さんからじゃんじゃん送られてくる「こんなに頻繁に配信されるメルマガは不要です。解約したい」という主旨のメール。</p>
<p>ハテナ、ボクハめるまがオクッテナイゾ…？？</p>
<p>と思いつつも平身低頭謝罪メールを送り、と同時に原因を探ってみてわかったこと。</p>
<h2>思わぬ機能が！</h2>
<p>Subscribe2には、下記の2種類の配信がありました</p>
<p>・登録してくれている人に対して、その都度作成したメールを一斉に送る<br />
・サイトの更新、記事の投稿を通知するメールを登録者に対して一斉で送る</p>
<p>私の認識では、メルマガというのは前者のことを意味していたので、後者のRSS的な配信は寝耳に水でした。</p>
<p>Subscribe2ではデフォルトで後者が配信される設定になっていて、それはつまり、記事を投稿するたびに「新しい記事が投稿されました」的なメールがメルマガ登録者に配信されることを意味します。</p>
<p>私が運営しているサイトはそれこそジャンジャン記事を投稿するサイトだったもので、大量のメールが配信されてしまうことに。</p>
<p>本当に申し訳ありませんでした。。</p>
<h2>解決方法</h2>
<p>最初にきちんと設定をしたらいいのですが、このプラグインはもともと海外のものでして、それを有志の方が日本語バージョンを作ってくれています。<br />
その行いは100％感謝すべきものなのですが、若干日本語がおかしかったりするんです。</p>
<p>たとえば、メールマガジン登録者と、読者と、登録ユーザーなどの定義があいまいでわかりづらかったり。</p>
<p>Subscribe2の全機能を詳しく解説するサイトがないのも、そのあたりが原因ではないかと思います。</p>
<p>Subscribe2を、「（狭義の）メルマガ配信にのみ使いたい、RSS的な配信は止めたい」と考えている人のサイトはいくつか見つけました。<br />
ですが、皆さん方法が微妙に違うので、自分の問題に合ったものを選ぶのが良いかと思います。</p>
<p><a href="http://hack.aipo.com/archives/4889/" target="_blank">更新通知は不要で、メルマガのみで利用したい場合の設定方法</a><br />
<a href="http://developersblog.cxy.jp/2014/03/25/517/" target="_blank">メルマガ配信専用にSubscribe2を使いたい、記事投稿の通知用ではなくて</a><br />
<a href="http://ryus.co.jp/blog/mailmagazineplubin/" target="_blank">メールマガジンプラグイン Subscribe2は簡単で便利に使えそう</a>　→　記事の一番最後でこの問題について触れています</p>
<p>要するになんですが、Subscribe2の設定を上記リンクを参考にいじったあと、記事投稿ページにある「この記事のメール通知を行わない場合はチェックしてください」に自動でチェックが付くようになればOKです。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/67604a9f843f48e197a2d3ab446dde73.png" alt="新規投稿を追加 ‹ コンペ、コンテスト、公募、コンクールのポータルサイト【コンペナビ】 — WordPress" width="887" height="132" class="aligncenter size-full wp-image-9622" srcset="/uploads-archive/2016/02/67604a9f843f48e197a2d3ab446dde73.png 887w, /uploads-archive/2016/02/67604a9f843f48e197a2d3ab446dde73-300x45.png 300w, /uploads-archive/2016/02/67604a9f843f48e197a2d3ab446dde73-768x114.png 768w, /uploads-archive/2016/02/67604a9f843f48e197a2d3ab446dde73-228x34.png 228w" sizes="(max-width: 887px) 100vw, 887px" /></p>


Subscribe2でメルマガスパムを送ってしまった

<p>今週も作っていきます。</p>
<p>重要度／緊急度マトリクス。</p>
<p>非常に初歩的でビジネスマンとしての大事な部分かと思います。</p>
<p>ただ、私自身もしばしば業務が立てこんだりすると、重要ではないことに時間を割いてしまったり、</p>
<p>そもそもマトリクスの整理がし切れずに、やるべきことを見誤ってしまったりということが少なくありません。</p>
<h2>重要度／緊急度マトリクスとは</h2>
<p>重要であるか、緊急であるかをまとめたマトリクス。</p>
<p><a href="/officer/%e9%87%8d%e8%a6%81%e5%ba%a6%ef%bc%8f%e7%b7%8a%e6%80%a5%e5%ba%a6%e3%83%9e%e3%83%88%e3%83%aa%e3%82%af%e3%82%b9%e3%81%aegoogle%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%83%89%e3%82%b7%e3%83%bc%e3%83%88.html/attachment/%e3%83%92%e3%82%99%e3%82%b7%e3%82%99%e3%83%8d%e3%82%b9%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%af%e3%83%bc%e3%82%af%e3%83%86%e3%83%b3%e3%83%95%e3%82%9a%e3%83%ac%e3%83%bc%e3%83%88%e9%9b%86%e2%80%bb-3" rel="attachment wp-att-9615"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9615" src="/uploads-archive/2016/02/a3d0d5b37099537bf3f04f107d74d343-300x178.png" alt="ビジネスフレームワークテンプレート集※ダウンロードしてお使い下さい。_-_Google_スプレッドシート 2" width="300" height="178" srcset="/uploads-archive/2016/02/a3d0d5b37099537bf3f04f107d74d343-300x178.png 300w, /uploads-archive/2016/02/a3d0d5b37099537bf3f04f107d74d343-768x457.png 768w, /uploads-archive/2016/02/a3d0d5b37099537bf3f04f107d74d343-228x136.png 228w, /uploads-archive/2016/02/a3d0d5b37099537bf3f04f107d74d343.png 817w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<ul>
<li>重要で緊急なものを第 I 領域</li>
<li>重要だが緊急でないものを第 II 領域</li>
<li>重要ではないが緊急なものを第 III 領域</li>
<li>重要でも緊急でもないものを第 IV 領域</li>
</ul>
<p>とします。</p>
<p>サンプルを見てもらえばわかりますが、基本的には第 I 領域に日々比重を置いている方が大半だと思いますし、<span data-sheets-value="[null,2,&quot;\u7b2c IV \u9818\u57df&quot;]" data-sheets-userformat="[null,null,639,[null,0],[null,2,14277081],[null,[[null,2,0,null,null,[null,2,0]],[null,0,0,3],[null,1,0,null,1]]],[null,[[null,2,0,null,null,[null,2,0]],[null,0,0,3],[null,1,0,null,1]]],[null,[[null,2,0,null,null,[null,2,0]],[null,0,0,3],[null,1,0,null,1]]],[null,[[null,2,0,null,null,[null,2,0]],[null,0,0,3],[null,1,0,null,1]]],1,null,null,0]">第 IV 領域の重要でも緊急でもないことに時間を消費してしまうこともあります。</span></p>
<p>しかしながら、一番注力すべきは、重要だが緊急でないものに如何に時間を費やせるかになります。</p>
<p>言い換えると第 II 領域 は仕事に対しても自分に対しても先手を打つということになります。</p>
<p>緊急性というのは時間の経過と共に移動をするものですので、緊急でないうちに処理してしまうことが非常に肝要で人という単位で考えると新しい技術、知識への探求だったりということが挙げられます。</p>
<div></div>
<h2>SWOT分析のサンプル</h2>
<div>フランクリン・プランナーさんの時間管理のマトリックスのサンプルです。</div>
<div></div>
<div><a href="/officer/%e9%87%8d%e8%a6%81%e5%ba%a6%ef%bc%8f%e7%b7%8a%e6%80%a5%e5%ba%a6%e3%83%9e%e3%83%88%e3%83%aa%e3%82%af%e3%82%b9%e3%81%aegoogle%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%83%89%e3%82%b7%e3%83%bc%e3%83%88.html/attachment/%e3%83%92%e3%82%99%e3%82%b7%e3%82%99%e3%83%8d%e3%82%b9%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%af%e3%83%bc%e3%82%af%e3%83%86%e3%83%b3%e3%83%95%e3%82%9a%e3%83%ac%e3%83%bc%e3%83%88%e9%9b%86%e2%80%bb-2" rel="attachment wp-att-9614"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9614" src="/uploads-archive/2016/02/6fc2f55cba993faeb4e751f205e69b30-300x186.png" alt="ビジネスフレームワークテンプレート集※ダウンロードしてお使い下さい。_-_Google_スプレッドシート" width="300" height="186" srcset="/uploads-archive/2016/02/6fc2f55cba993faeb4e751f205e69b30-300x186.png 300w, /uploads-archive/2016/02/6fc2f55cba993faeb4e751f205e69b30-768x475.png 768w, /uploads-archive/2016/02/6fc2f55cba993faeb4e751f205e69b30-228x141.png 228w, /uploads-archive/2016/02/6fc2f55cba993faeb4e751f205e69b30.png 821w" sizes="(max-width: 300px) 100vw, 300px" /></a></div>
<div>
<h2>ダウンロードリンク</h2>
<p><a class="link" href="https://docs.google.com/spreadsheets/d/1ZETr4Ut2EoPy4ocAhK-QwHuL9zKoIyC8Q7RnVpoSTTw/edit#gid=1547852289" target="_blank">ビジネスフレームワークテンプレート集-Googleスプレッドシート</a></p>
<p>各種シリーズで作っているシートが溜まってきました。</p>
<p>&nbsp;</p>
</div>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2016/03/02

2016/03/02

2016/03/02

2016/03/02

2016/03/02

2016/03/01

2016/02/24

2016/02/24

2016/02/24

2016/02/24

2016/02/24

2016/02/24

2016/02/23

2016/02/17

2016/02/17

2016/02/17

2016/02/17

2016/02/17