<p>私は最近知ったことなのですが、</p>
<p>Phtoshopのレイヤーの合成効果と同じものを、</p>
<p>CSS3でも設定することができます。</p>
<p>&nbsp;</p>
<p>その設定には、「mix-blend-mode」というプロパティを使って次のように書きます。</p>

		<div id="crayon-649540158b6e0315993634" 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;">
element {
    mix-blend-mode: multiply;
}</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-649540158b6e0315993634-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b6e0315993634-2">2</div><div class="crayon-num" data-line="crayon-649540158b6e0315993634-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-649540158b6e0315993634-1"><span class="crayon-e">element</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158b6e0315993634-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">mix</span>-<span class="crayon-i">blend</span>-<span class="crayon-i">mode</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">multiply</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158b6e0315993634-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p><a class="demo" href="/demo/ninomiya/84/">各設定の<br />DEMO</a></p>
<p>&nbsp;</p>
<p>設定できる値は基本的にPhotoshopと同じです。</p>
<p>実際の効果は、ブラウザによってはPhotoshopと若干異なるものもあります。</p>
<p>ちなみにIEの全てのバージョンとEdgeはこのプロパティに対応していませんが、</p>
<p>その他のモダンブラウザでは対応しています。</p>
<p>PCでの表示の場合、目立つ場所でまだ実用で使うのは難しいですが、</p>
<p>スマホでの表示や、装飾程度であれば利用できる場合もありそうです。</p>
<p>&nbsp;</p>
<h3>参考サイト</h3>
<p><a class="link" href="https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode" target="_blank">mix-blend-mode &#8211; CSS | MDN</a></p>
<p><a class="link" href="http://weblog.weska.jp/2009/01/post.html" target="_blank">Photoshop｜レイヤーパレットメニューの和訳・英訳 &#8211; Dynamite Design Blog｜海外Webデザインネタ日本語訳＆作成チュートリアル</a></p>

CSS3で合成効果

<p>以前は英会話に通っていましたが、時間が合わなかったり、レッスン代が高すぎたりと結局やめてしまいました。</p>
<p>最近、スカイプでwordpressのカスタマイズなど習っているのですが、なかなか良いので英会話もスカイプで十分だなとオンライン英会話を少々調べてみました。</p>
<p>すると驚くほどレッスン料が安かったので、その理由も含めてまとめてみます。</p>
<p>&nbsp;</p>
<h2>低価格のオンライン英会話</h2>
<p>英会話に通う場合、結局のところ値段が手ごろでないど続けられないと思います、「英語は続ける事が大事」ともよく言われているので、経済的に負担になるようでは上達しません。</p>
<p>価格が安いオンライン英会話をいくつか紹介させて頂きます。</p>
<p>&nbsp;</p>
<p><a href="http://online.ecc.co.jp/">ECCオンライン英会話</a></p>
<p><a href="http://online.ecc.co.jp/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8107" src="/uploads-archive/2015/09/1.jpg" alt="1" width="640" height="453" srcset="/uploads-archive/2015/09/1.jpg 640w, /uploads-archive/2015/09/1-300x212.jpg 300w, /uploads-archive/2015/09/1-228x161.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="https://www.rarejob.com/">レアジョブ英会話</a></p>
<p><a href="https://www.rarejob.com/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8108" src="/uploads-archive/2015/09/2.jpg" alt="2" width="640" height="444" srcset="/uploads-archive/2015/09/2.jpg 640w, /uploads-archive/2015/09/2-300x208.jpg 300w, /uploads-archive/2015/09/2-228x158.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="http://learning.sankei.co.jp/">産経オンライン英会話</a></p>
<p><a href="http://learning.sankei.co.jp/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8109" src="/uploads-archive/2015/09/3.jpg" alt="3" width="640" height="468" srcset="/uploads-archive/2015/09/3.jpg 640w, /uploads-archive/2015/09/3-300x219.jpg 300w, /uploads-archive/2015/09/3-228x167.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>&nbsp;</p>
<p>肝心のレッスン料ですが、一ヶ月で1回25分が700円～6400円程度とかなりお手頃です。上で紹介した3社は毎日レッスンを行っても1ヶ月6400円程度で、それ以上はかからないとの事です。</p>
<p>教室へ通う英会話の場合は、個人レッスンなら月に4回でも2万円くらいします。月に31回でも6400円なら相当安いですね。</p>
<p>レッスンの長さについては、もちろん1回50分と長めのレッスンもありますが、その場合は1万円くらいするようです。短くても25分間を毎日続けるほうが果がありそうな気がします。（個人差があるとおもいますが）</p>
<p>&nbsp;</p>
<h2>低価格の理由</h2>
<p>上で紹介したような低価格のオンライン英会話に共通するのは講師が全て海外にいるということです。もっとも多いのはフィリピン人講師のようです。</p>
<p>現地の物価で講師に給与を払う事で低価格を実現しているようです。</p>
<p>正直、安かろう悪かろうと思ったのですが、フィリピンの方の英語は比較的キレイと言われているようで、実際に体験用の動画などを見ると、アクセントにインドやシンガポールの様な独特な感じはありませんでした。（ネイティブが聞けばもちろんフィリピンなまりがあると思いますが。）日本の物価から考えると安いですが、現地の講師にはそれなりの給与が支払われている事になるので、質の良い講師がいるようです。</p>
<p>こちらは過去に放送されたBS-TBSの経済番組でオンライン英会話について取り上げています、安い理由などが良くわかります。</p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/oUAm98dsDO4"></iframe></p>
<p>テキストが無くてもPCの画面に色んなフレーズや挿絵を出して授業をするみたいです。</p>
<p><a href="/uploads-archive/2015/09/4.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8110" src="/uploads-archive/2015/09/4.jpg" alt="4" width="640" height="360" srcset="/uploads-archive/2015/09/4.jpg 640w, /uploads-archive/2015/09/4-300x169.jpg 300w, /uploads-archive/2015/09/4-228x128.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/emWzpEpVG2Q"></iframe></p>
<p>英語圏でも国ごとに表現の仕方や言い回しが結構違いますが、日常会話を身につける程度であればぴったりだと思います。</p>


オンライン英会話のすすめ

<p>自分はOracle初心者なのだが、今回11gからの新機能ではまったのでメモ。</p>
<p>&nbsp;</p>
<p>ORA-28001 the password has expired</p>
<p>というエラーが出て突然ログインできなくなった。</p>
<p>アプリ側からも当然ログインできなくなり、ステージング環境だからよかったものの<br />
サービスも止まってしまった。</p>
<p>エラーメッセージで調べると11gからの新機能であり、<br />
解決策も多々あるのだが、今回の環境はsqlplusが使えない環境のため、初心者の自分ははまってしまった。</p>

		<div id="crayon-649540158b4fa433521730" 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">Oracle PL/SQL</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;">
SQL&gt; conn sys as sysdba
パスワードを入力してください:
接続されました。

SQL&gt; alter user ユーザー account unlock;

ユーザーが変更されました。

SQL&gt; alter user ユーザー identified by パスワード;</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-649540158b4fa433521730-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b4fa433521730-2">2</div><div class="crayon-num" data-line="crayon-649540158b4fa433521730-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b4fa433521730-4">4</div><div class="crayon-num" data-line="crayon-649540158b4fa433521730-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b4fa433521730-6">6</div><div class="crayon-num" data-line="crayon-649540158b4fa433521730-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158b4fa433521730-8">8</div><div class="crayon-num" data-line="crayon-649540158b4fa433521730-9">9</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-649540158b4fa433521730-1"><span class="crayon-r">SQL</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span>conn<span class="crayon-h"> </span>sys<span class="crayon-h"> </span><span class="crayon-r">as</span><span class="crayon-h"> </span><span class="crayon-r">sysdba</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158b4fa433521730-2">パスワードを入力してください:</div><div class="crayon-line" id="crayon-649540158b4fa433521730-3">接続されました。</div><div class="crayon-line crayon-striped-line" id="crayon-649540158b4fa433521730-4">&nbsp;</div><div class="crayon-line" id="crayon-649540158b4fa433521730-5"><span class="crayon-r">SQL</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-r">alter</span><span class="crayon-h"> </span><span class="crayon-r">user</span><span class="crayon-h"> </span>ユーザー<span class="crayon-h"> </span><span class="crayon-r">account</span><span class="crayon-h"> </span><span class="crayon-r">unlock</span>;</div><div class="crayon-line crayon-striped-line" id="crayon-649540158b4fa433521730-6">&nbsp;</div><div class="crayon-line" id="crayon-649540158b4fa433521730-7">ユーザーが変更されました。</div><div class="crayon-line crayon-striped-line" id="crayon-649540158b4fa433521730-8">&nbsp;</div><div class="crayon-line" id="crayon-649540158b4fa433521730-9"><span class="crayon-r">SQL</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-r">alter</span><span class="crayon-h"> </span><span class="crayon-r">user</span><span class="crayon-h"> </span>ユーザー<span class="crayon-h"> </span><span class="crayon-r">identified</span><span class="crayon-h"> </span><span class="crayon-r">by</span><span class="crayon-h"> </span>パスワード;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>これだけでログインできるようになった。</p>
<p>11gからは180日でパスワードの期限がきれてしまうらしい。</p>
<p>それを回避するには以下を実行</p>

		<div id="crayon-649540158b4fe441608722" 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">Oracle PL/SQL</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;">
SQL&gt; alter profile default limit password_life_time unlimited;</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-649540158b4fe441608722-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-649540158b4fe441608722-1"><span class="crayon-r">SQL</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-r">alter</span><span class="crayon-h"> </span><span class="crayon-r">profile</span><span class="crayon-h"> </span><span class="crayon-r">default</span><span class="crayon-h"> </span><span class="crayon-r">limit</span><span class="crayon-h"> </span><span class="crayon-r">password_life_time</span><span class="crayon-h"> </span><span class="crayon-r">unlimited</span>;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>これでもう突然止まる心配はなくなった</p>

ORA-28001 the password has expiredの対応方法

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

<p>来る9月14日(月)に行われる「Poole Expo!」に弊社も参加いたします！<br />
こういった採用イベントに参加するのは初となるので、少しワクワクしております。</p>
<h2>Poole Expo!とは</h2>
<p>web業界では有名な「LIG」さんが開催する、</p>
<blockquote><p>Webパーソン（デザイナー / エンジニア / ディレクター / ライター・編集者だけではなく、セールス / マーケティング / コーポレートスタッフ）の方々のための、Web業界で知名度のある大手企業から今注目を集めているベンチャー企業まで、Pooleのインタビュー記事や求人に出ている採用担当者や社員と直接話せるイベントです。</p></blockquote>
<p>今回は第2回目なんですが、<br />
「転職は、無礼講だ」をテーマに「縁日」のような雰囲気のイベントになるようで、<br />
とてもLIGさんらしいものになっています。</p>
<p>縁日っぽく、プレゼントがもらえる射的・ヨーヨー釣りといった少し遊べる要素もあります。</p>
<p>弊社も「会社見学」や「一次選考免除」のプレゼントを用意しております！</p>
<p>イベントにいらっしゃった際には、ぜひ弊社のブースへもお越しください！！</p>
<h2>Poole Expo!イベント詳細</h2>
<p>【日程】2015年9月14日（月）19時～22時</p>
<p>【参加費用】無料</p>
<p>【場所】〒150-0043 東京都渋谷区道玄坂1-12-1</p>
<p>渋谷マークシティウエスト13F　セミナールーム</p>
<p>【参加条件】Pooleのユーザーであること<br />
※まだユーザーでない方は下記から登録を！<br />
<a href="https://poole-job.jp/" target="_blank">Poole(プール) &#8211; IT/Webパーソンの繋がり続ける転職/求人サイト</a></p>
<p>イベント自体の応募は下記からよろしくお願いします！</p>
<p><a class="link" href="http://peatix.com/event/110485" target="_blank">夏の終わりの転職無礼講祭り！IT/Web業界注目企業の採用担当者とホンネで触れあう &#8220;縁日&#8221; | Peatix</a></p>


Webクリエイター向け採用イベント「Poole Expo!」に参加します！

<p>野球のＵ―18（18歳以下）ワールドカップ（Ｗ杯）の決勝戦をテレビで見ていて、惜しくも世界一とはならずも２−１の緊迫した試合で非常に面白く熱い気持ちになった後で、そのままテレビをつけていて、「ナイナイの超一流アスリートの作り方 えっ!?そんな事してたんですかスペシャル」という番組を見ました。</p>
<p>超一流アスリートの一人として登場した日本ハムファイターズの大谷翔平選手が高校1年生の時に作り上げたという目標達成用紙（マンダラート）がすごすぎたので、雛形をつくりました。</p>
<h2>作り方</h2>
<ul>
<li>まず、9×9のマス目の中心に目標を書き込みます。</li>
</ul>
<p>大谷選手で言えば、ドラフト１位で８球団から指名されプロ野球選手になることです。</p>
<ul>
<li>その周囲に8マスに達成するための大項目を分類</li>
<li>さらに外側に大項目を細分化した具体的なアクションとして72マスに記載</li>
</ul>
<p>たったこれだけです。</p>
<p>これを作ることでアクションが明確化され、あとは、やるかやらないかだけという状態に持っていくことができます。</p>
<p>72個もアクション絞りだせないよ。という場合でも大谷選手も体幹強化など被っているものもあるので、類似するものに関しては被ってでもとにかく定義するということが重要なようです。</p>
<h2>ダウンロードリンク</h2>
<p><a class="link" href="https://docs.google.com/spreadsheets/d/1P5VbaFPsM9LFH0cHbi5-SeAY8HJuHZMaW3Uop-E5NC8/edit?usp=sharing" target="_blank" rel="noopener">目標達成用紙-Googleスプレッドシート</a></p>
<p>※閲覧権限のみのGoogleスプレッドシートで開きます。Excel形式などを選択してダウンロードして編集してください。</p>
<p>サンプルとして大谷選手の目標達成用紙を書き込んでいて、その隣に空のシートがあります。</p>
<h2>まとめ</h2>
<p>高校1年生でこれを作った時に、人間性を高めること、運を味方につけることを既に意識していたことに驚きです。</p>
<p>この目標達成用紙を高校の野球部に導入した花巻東高校時代の佐々木洋監督という素晴らしい指導者がいた影響が大きかったのだと思いました。</p>
<h2>参考リンク</h2>
<p><a href="http://matome.naver.jp/odai/2142905934886611201">大谷翔平選手を作り上げた目標達成用紙（マンダラート）が凄い</a></p>
<p><a href="http://headlines.yahoo.co.jp/hl?a=20150327-00010001-newspicks-ind" target="_blank" rel="noopener">大谷を怪物にした花巻東高校の「目標達成用紙」</a></p>
<p><a href="http://cocoacana.com/archives/1068" target="_blank" rel="noopener">目標達成用紙の作り方(方法) – 大谷が高校時代に実践したものとは（写真/画像付）</a></p>


medium_03e171e8271f2216557d16d2b7e27472.png

small_03e171e8271f2216557d16d2b7e27472.png

thumbnail_03e171e8271f2216557d16d2b7e27472.png

03e171e8271f2216557d16d2b7e27472.png

目標達成用紙（マンダラート）のGoogleスプレッドシートつくりました。

<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>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2015/09/09

2015/09/09

2015/09/09

2015/09/09

2015/09/09

2015/09/07

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