今回も趣味シリーズ。
airdroidというアプリのミラーリングという機能を試してみたくそれには端末のRoot化が必要であったため、
Nexus7（2013）をRoot化してみました。
<h2>airdroid</h2>
<a href="/uploads-archive/2015/02/AirMirror.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6788" src="/uploads-archive/2015/02/AirMirror-194x300.jpg" alt="AirMirror" width="194" height="300" srcset="/uploads-archive/2015/02/AirMirror-194x300.jpg 194w, /uploads-archive/2015/02/AirMirror-228x351.jpg 228w, /uploads-archive/2015/02/AirMirror.jpg 472w" sizes="(max-width: 194px) 100vw, 194px" /></a>
まず、結論のほうから先に紹介しますが、これ分かりますか？
PCのディスプレイ内でAndroidがミラーリングされているんです。 
タブレット端末をPCの外部ディスプレイ化するというサービスはあるんですが、それの逆パターンです。 
タブレットをPC画面から操作が出来ることになります。
このAirMirrorという機能を有効化するために、端末のroot化が必要になります。
要は、通常では変更出来ないシステム内部まで変更出来る権限を持ったユーザーになることです。
こうすることで何か不具合が生じても、保証範囲外になるのですが、メーカー保証も切れていることですし、サブのタブレット機なので試しにやってみました。
他にもAirdroidというアプリはいろんなことが出来るので面白いです。
<a href="https://www.airdroid.com/ja/" target="_blank">https://www.airdroid.com/ja/</a>
<h2>Root化までの手順</h2>
<h3>ブートローダーのアンロック</h3>
所要時間30分
この工程が一番大変でした。
AndroidをPCから操作出来るようにAndroidSDKを導入するという工程が初心者からすると難しく、実工程の所要時間だけを記載しましたが、
実際は、理解をするためにいろいろな調査をして数時間要しました。
<a href="http://androidlover.net/tablet/nexus7-2/nexus7-2013-bootloader-unlock.html" target="_blank">http://androidlover.net/tablet/nexus7-2/nexus7-2013-bootloader-unlock.html</a>
<h3>カスタムリカバリ TWRPの導入</h3>
所要時間5分
前工程が出来ているようであれば、同じ要領でカスタムリカバリ TWRPをインストールするだけですので、非常に簡単に思えました。
<a href="/uploads-archive/2015/02/IMG_20150202_202521.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6792" src="/uploads-archive/2015/02/IMG_20150202_202521-171x300.jpg" alt="IMG_20150202_202521" width="171" height="300" srcset="/uploads-archive/2015/02/IMG_20150202_202521-171x300.jpg 171w, /uploads-archive/2015/02/IMG_20150202_202521-583x1024.jpg 583w, /uploads-archive/2015/02/IMG_20150202_202521-228x400.jpg 228w, /uploads-archive/2015/02/IMG_20150202_202521.jpg 1824w" sizes="(max-width: 171px) 100vw, 171px" /></a>いかにもAndroidをいじりますという画像ですね。
<a href="/uploads-archive/2015/02/IMG_20150202_203523.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6793" src="/uploads-archive/2015/02/IMG_20150202_203523-171x300.jpg" alt="IMG_20150202_203523" width="171" height="300" srcset="/uploads-archive/2015/02/IMG_20150202_203523-171x300.jpg 171w, /uploads-archive/2015/02/IMG_20150202_203523-583x1024.jpg 583w, /uploads-archive/2015/02/IMG_20150202_203523-228x400.jpg 228w, /uploads-archive/2015/02/IMG_20150202_203523.jpg 1824w" sizes="(max-width: 171px) 100vw, 171px" /></a>
&nbsp;
インストールが終わるとこのような画面になります。
<a href="http://androidlover.net/tablet/nexus7-2/nexus7-2013-twrp-custom-recovery.html" target="_blank"> http://androidlover.net/tablet/nexus7-2/nexus7-2013-twrp-custom-recovery.html</a>
<h3>SuperSUの導入</h3>
所要時間3分
同じように、以下のサイトを参考にさせて頂いて導入します。
こちらは、アプリアイコンが出現すれば完了です。
<a href="http://androidlover.net/tablet/nexus7-2/nexus7-2013-lollipop-lrx21p-root.html" target="_blank">http://androidlover.net/tablet/nexus7-2/nexus7-2013-lollipop-lrx21p-root.html</a>
<h3>Airdroidを遊ぶ</h3>
最後に冒頭に掲載した画像になります。
root化が出来ていてればairmirrorという機能が使えるようになります。
<h2>まとめ</h2>
やりたいことが出来ました。
&nbsp;
ANDROIDLOVER.NET様のブログを全面的に参考にさせて頂きました。
ありがとうございます。
<a href="http://androidlover.net/" target="_blank">http://androidlover.net/</a>

Nexus7（2013）をRoot化してAirdroidを使う

レスポンシブのコーディングは通常のサイトコーディングと違った書き方をした方がいい時があります。
たまにレスポンシブ化されているサイトのソースを見て、「こんな風にやってるんだ〜」と思いながら、 
実際に似たようなレイアウトがある場合、参考にさせていただいたりしていますが、そのレスポンシブのパターン集なるサイトがありました。
<h2>Responsive Web Design Patterns</h2>
<img decoding="async" loading="lazy" class="alignnone wp-image-6790" src="/uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-1024x684.jpg" alt="Responsive Web Design Patterns This Is Responsive" width="640" height="428" srcset="/uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-1024x684.jpg 1024w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-300x200.jpg 300w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-228x152.jpg 228w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive.jpg 1235w" sizes="(max-width: 640px) 100vw, 640px" />
こちらのサイトは、
<ul>
<li>レイアウト</li>
<li>ナビゲーション</li>
<li>イメージ(画像)</li>
<li>メディア/データ</li>
<li>フォーム</li>
<li>テキスト</li>
<li>モジュール(カルーセルやタブ等)</li>
</ul>
といったレイアウトのパターンがあり、 
DEMOを見ることができます。
あとはDEMOのページをFirebugかなにかでソースを見ればその手法がわかります。
初心者はもちろん、経験者にもなにかしら得れるものがあるかと思います。
<a href="http://bradfrost.github.io/this-is-responsive/patterns.html" class="link" target="_blank">Responsive Web Design Patterns | This Is Responsive</a>

レスポンシブのコーディング時に参考にしたいレイアウトサンプル集

楽天・Yahoo・ポンパレで使える 商品ページを切り取ってカテゴリページなどに表示させる方法

Symfony2　テーブル作成、エンティティの生成

PCとスマホで違うHTML,テンプレートを使用したい場合、Wordpressで作成する場合は便利なプラグインがあるようです。
最近はレスポンシブも増えていますが、別々のソースを使用する場合もまだまだ多いです。 
今後そのような状況になりそうなので、プラグインを使ってインストールしてみました。
紹介出来そうなのが3つありましたので、早速紹介したいと思います。
<h2>Multi Device Switcher</h2>
オプションという観点から見ると、こちらが一番豊富だと思います。 
日本人の方が作成しているのでもちろん日本語です。
インストール後、 
外観に「マルチデザイン」という項目が表示されるので、そこに行くと・・・ 
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-6756" src="/uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022.png" alt="スクリーンショット 2015-01-27 13.25.00" width="636" height="632" srcset="/uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022.png 636w, /uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022-150x150.png 150w, /uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022-300x298.png 300w, /uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022-228x226.png 228w" sizes="(max-width: 636px) 100vw, 636px" /> 
上の写真のようにスマートフォンやタブレット、ガラケー用にテーマを選択できます。
&nbsp;
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-6757" src="/uploads-archive/2015/01/6b7ba6b5ae155ddc315f9163d52f02f3.png" alt="スクリーンショット 2015-01-27 13.25.28" width="635" height="773" srcset="/uploads-archive/2015/01/6b7ba6b5ae155ddc315f9163d52f02f3.png 635w, /uploads-archive/2015/01/6b7ba6b5ae155ddc315f9163d52f02f3-246x300.png 246w, /uploads-archive/2015/01/6b7ba6b5ae155ddc315f9163d52f02f3-228x277.png 228w" sizes="(max-width: 635px) 100vw, 635px" /> 
ユーザーエージェントも自由に記載できます。
&nbsp;
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-6758" src="/uploads-archive/2015/01/fd55dcab43344213382d993a5b900c85.png" alt="スクリーンショット 2015-01-27 13.25.54" width="626" height="350" srcset="/uploads-archive/2015/01/fd55dcab43344213382d993a5b900c85.png 626w, /uploads-archive/2015/01/fd55dcab43344213382d993a5b900c85-300x167.png 300w, /uploads-archive/2015/01/fd55dcab43344213382d993a5b900c85-228x127.png 228w" sizes="(max-width: 626px) 100vw, 626px" />
スマートフォン等で見た際に、PC版を表示といったボタンの設定の可能です。
かなりいい感じだと思いますが、下のサイトでは評価があまりされてないようですね・・・
&nbsp;
<a class="link" href="https://wordpress.org/plugins/multi-device-switcher/" target="_blank">Multi Device Switcher</a>
&nbsp;
<h2>Any Mobile Theme Switcher</h2>
&nbsp;
こちらはインストール後、 
設定に「Any Mobile Theme」という項目が表示されます。 
このプラグインはスマホを細かくわけることができます。 
iPhone,Android,Window Mobileなんかもありますね。
&nbsp;
<img decoding="async" loading="lazy" class="alignnone wp-image-6759" src="/uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45.png" alt="スクリーンショット 2015-01-27 13.24.16" width="630" height="626" srcset="/uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45.png 737w, /uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45-150x150.png 150w, /uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45-300x297.png 300w, /uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45-228x226.png 228w" sizes="(max-width: 630px) 100vw, 630px" />
&nbsp;
スマホでも更に細かくテーマを切り替えたい場合はこちらがいいかもしれませんね。
&nbsp;
<img decoding="async" loading="lazy" class="alignnone wp-image-6760" src="/uploads-archive/2015/01/a46b88b50609c8e40a9c933330ba9b63.png" alt="スクリーンショット 2015-01-27 13.55.48" width="630" height="414" srcset="/uploads-archive/2015/01/a46b88b50609c8e40a9c933330ba9b63.png 729w, /uploads-archive/2015/01/a46b88b50609c8e40a9c933330ba9b63-300x197.png 300w, /uploads-archive/2015/01/a46b88b50609c8e40a9c933330ba9b63-228x149.png 228w" sizes="(max-width: 630px) 100vw, 630px" />
&nbsp;
オプションとしては、先ほどのにもあった「PC版」「スマホ版」へ切り替えリンクがフッターに表示されます。 
また、「PC版」「スマホ版」の表示の記憶を設定できます。
評価としては、こちらのほうが先ほど紹介したものよりは高くなっております。
<a class="link" href="https://wordpress.org/plugins/any-mobile-theme-switcher/" target="_blank">Any Mobile Theme Switcher</a>
&nbsp;
<h2>Device Theme Switcher</h2>
&nbsp;
インストール後、 
外観に「Device Themes」という項目が表示されます。
そこへ行くと以下の画像のようなページになりますが・・・上２つと比べるとちょっと、、、って感じですね。
&nbsp;
<img decoding="async" loading="lazy" class="alignnone wp-image-6761" src="/uploads-archive/2015/01/f807abd3976c74e7052d670856dd8e23.png" alt="スクリーンショット 2015-01-27 13.24.47" width="630" height="211" srcset="/uploads-archive/2015/01/f807abd3976c74e7052d670856dd8e23.png 867w, /uploads-archive/2015/01/f807abd3976c74e7052d670856dd8e23-300x100.png 300w, /uploads-archive/2015/01/f807abd3976c74e7052d670856dd8e23-228x76.png 228w" sizes="(max-width: 630px) 100vw, 630px" />
<a class="link" href="https://wordpress.org/plugins/device-theme-switcher/" target="_blank">Device Theme Switcher</a>
&nbsp;
&nbsp;
一つのWordpressで作れば、記事やカテゴリが共有できるので便利ですね！！

WordPressにてデバイス毎にテーマを切り替えさせるプラグイン

アニメーション付きSVGで実装する滑らかで自然なアニメーション

現在、正式リリースされているのはWindows８.1といわれるバージョンですが、次期のWindowsOSとして９を飛ばして（8.1が９扱い？）１０が開発されています。
自作好きとしては、注目です。 
最近ではすっかり、自作のコストメリットも薄くなり、意欲も薄れてMacbook一本にしてしまったのですが、今でも自宅は自作PCですし、意味もなくLINUXを入れて楽しんでいたりします。
今回は、Windows10のプレビュー版が日本語対応したというニュースが出ましたので、MacbookにBootcampを入れることができるか試してみました。
<h3 id="toc_1">Windows10プレビュー版の入手</h2>
Windows10のプレビュー版は、バグや改善点をフィードバックする事を前提に 
「Windows Insider Program」から登録すれば、無料で入手することができます。 
バグのフィードバックはシステムに組み込まれていますので、特に意識をすることなく普通に試すことができます。 
そして、フィードバックに基づく改善・開発を続けプレビュー版は、発売前後でライセンスが切れ使用ができなくなります。
残念ながら、プレビュー版から製品版へのアップグレードはできませんので、人柱として試す方に利用は限られます。
<a href="http://answers.microsoft.com/ja-jp/windows/forum/windows8-windowsinstall/windows8releasepreview%E3%81%8B%E3%82%89%E8%A3%BD/ea6b100a-57f0-44c8-9f8b-27ef8c4b5547" target="_blank">Windows8ReleasePreviewから製品版へのアップグレードについて</a>
「Windows Insider Program」は<a href="https://insider.windows.com/" target="_blank">こちら</a>から
<h3 id="toc_2">BootCampでWindows10をインストール</h2>
BootCampの使い方などの説明は割愛します。 
以下のブログなどで丁寧に説明してくださっています。
<a title="Permanent Link to Boot Camp - Mac に Windows8 をインストール" href="http://pc-karuma.net/mac-bootcamp-windows8-install/" target="_blank" rel="bookmark">Boot Camp &#8211; Mac に Windows8 をインストール</a>
「Windows Insider Program」からダウンロードしたisoファイルをBootCamp
アシスタントを用いて、外部メディアに焼付けるといった作業は通常通りで何も滞り無く進みました。
別のUSBメモリーにWindows用のドライバーを格納し、Windows用のスペースを決めて、再起動でインストールがスタートします。
<h3 id="toc_3">インストール開始時に問題発生</h2>
通常であれば、そのままWindowsのインストール画面が立ち上がりスタートをするはずが、黒画面に起動するためのメディアがないという警告が出て、その後進まなくなってしまいました。 
解決方法はoptionキーを押して、起動するディスクというのを指定する必要がありました。
<a href="http://support.apple.com/ja-jp/HT1310" target="_blank">Appleのサポートページ</a>がわかりやすいです。
その後は、順調でインストールまで駆け上がっていきました。
初期設定も非常に短く、今までですとコンピュータ名などの入力があったのですが、ユーザーネームを決めるくらいだったと思います。 
確かに、このコンピュータ名をいきなり決めろというのは、十回以上もインストールをしてきましたがとにかく煩わしかったです。 
特に、慣れていないユーザーにとっては、ナンノコッチャで一気にハードルに感じると思います。
<h3 id="toc_4">Windows サポートソフトウェアをインストール</h2>
<a href="/uploads-archive/2015/01/ScreenClip.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6751" src="/uploads-archive/2015/01/ScreenClip-300x187.png" alt="ScreenClip" width="300" height="187" srcset="/uploads-archive/2015/01/ScreenClip-300x187.png 300w, /uploads-archive/2015/01/ScreenClip-1024x640.png 1024w, /uploads-archive/2015/01/ScreenClip-228x142.png 228w, /uploads-archive/2015/01/ScreenClip.png 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a>
このように初期画面が立ちがりますが、このままではインターネットも繋がらない状態でほぼ何も出来ません。 
先ほど、USBメモリに焼いたWindows サポートソフトウェアをインストールします。 
ここが肝でトラックパッドや無線LAN、Bluetoothといった各種ドライバーがインストールされ、フル活用が出来るようになります。 
しかしながら、ここでも一つ問題が発生。 
外部ディスプレイが認識されません。 
これもディスプレイドライバーがまだ未対応なためであるでしょう。 
こればかりは解決策もないので、ドライバーが作成されるまで待つしかありません。
<a href="/uploads-archive/2015/01/37e3808047553cedb34daa9b1d7ab2a3.jpeg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6750" src="/uploads-archive/2015/01/37e3808047553cedb34daa9b1d7ab2a3-300x225.jpeg" alt="写真" width="300" height="225" srcset="/uploads-archive/2015/01/37e3808047553cedb34daa9b1d7ab2a3-300x225.jpeg 300w, /uploads-archive/2015/01/37e3808047553cedb34daa9b1d7ab2a3-1024x768.jpeg 1024w, /uploads-archive/2015/01/37e3808047553cedb34daa9b1d7ab2a3-228x171.jpeg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
Windows8ではメトロUIという全画面のアプリ選択画面がデフォルトになっていましたが、Windows10では、デスクトップがデフォルトです。 
正直、PCのあるべき姿はこっちですよね。タブレットやスマートフォンと垂直に統合をしたかったと思われるのですが、PCはやっぱりデスクトップがデフォルトであるべきです。 
メトロUIはスタートメニューに残っていました。このくらいがベストだと思います。
<h3 id="toc_5">まとめ</h2>
以下、Macbookpro（2013）を基準にしていますので、環境やインストール時のバージョンやドライバーの違いで再現しないこともあると思いますので、ご了承下さい。
<ul>
<li>トラックパッドや無線LANなど基本的な動作は問題なし。</li>
<li>インストール時のBootはoptionキーを押して明示的に指定をする必要があった。</li>
<li>外部ディスプレイに出力はまだ出来なかった。</li>
</ul>
以上、人柱報告です。

Windows10をBootcampにインストール

ちょっと古いが、ネット通販に関するおもしろいアンケートがあったのでメモ。
<a href="https://www.fast-ask.com/report/report-netshopping-20141205.html" target="_blank"> https://www.fast-ask.com/report/report-netshopping-20141205.html</a>
&nbsp;
<h2>ネット通販利用する主な端末</h2>
全体
PC：87.1%
SP：8.7%
タブレット：3.8%
&nbsp;
詳細
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td>PC</td>
<td>SP</td>
</tr>
<tr>
<td rowspan="4">男性</td>
<td>20代</td>
<td>87.20%</td>
<td>6.40%</td>
</tr>
<tr>
<td>30代</td>
<td>89.60%</td>
<td>6.40%</td>
</tr>
<tr>
<td>40代</td>
<td>91.20%</td>
<td>6.40%</td>
</tr>
<tr>
<td>50代</td>
<td>95.20%</td>
<td>1.60%</td>
</tr>
<tr>
<td rowspan="4">女性</td>
<td>20代</td>
<td>72.80%</td>
<td>22.40%</td>
</tr>
<tr>
<td>30代</td>
<td>75.20%</td>
<td>18.40%</td>
</tr>
<tr>
<td>40代</td>
<td>92.80%</td>
<td>6.40%</td>
</tr>
<tr>
<td>50代</td>
<td>92.80%</td>
<td>1.60%</td>
</tr>
</tbody>
</table>
そんなにか?と思うほどPCでの利用が多い。
SPについては20代、30代の女性が圧倒的に多いことがわかる。
今回10代は対象外だったが、おそらくもっと多いのだろうと予想できる。
&nbsp;
<h2>ネット通販の利用シーン</h2>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td>普段使い</td>
<td>ご褒美</td>
<td>ギフト</td>
<td>その他</td>
</tr>
<tr>
<td rowspan="4">男性</td>
<td>20代</td>
<td>75.20%</td>
<td>50.40%</td>
<td>27.20%</td>
<td>14.40%</td>
</tr>
<tr>
<td>30代</td>
<td>82.40%</td>
<td>53.60%</td>
<td>36.00%</td>
<td>25.60%</td>
</tr>
<tr>
<td>40代</td>
<td>88.00%</td>
<td>48.80%</td>
<td>35.20%</td>
<td>17.60%</td>
</tr>
<tr>
<td>50代</td>
<td>88.80%</td>
<td>36.00%</td>
<td>28.00%</td>
<td>16.80%</td>
</tr>
<tr>
<td rowspan="4">女性</td>
<td>20代</td>
<td>79.20%</td>
<td>61.60%</td>
<td>45.60%</td>
<td>7.20%</td>
</tr>
<tr>
<td>30代</td>
<td>86.40%</td>
<td>48.80%</td>
<td>40.00%</td>
<td>16.00%</td>
</tr>
<tr>
<td>40代</td>
<td>86.40%</td>
<td>38.40%</td>
<td>41.60%</td>
<td>14.40%</td>
</tr>
<tr>
<td>50代</td>
<td>90.40%</td>
<td>37.60%</td>
<td>36.80%</td>
<td>16.00%</td>
</tr>
</tbody>
</table>
自分のための日用品の購入が多いことがわかる。
本アンケートのおもしろいところは、普段使いの商品購入について掘り下げているところ。
&nbsp;
<h2>普段使いの商品選びに与える影響</h2>
<table>
<tbody>
<tr>
<td></td>
<td>非常に影響を与える</td>
<td>影響を与える</td>
<td>どちらともいえない</td>
<td>あまり影響を与えない</td>
</tr>
<tr>
<td>サイト内での商品の探しやすさ</td>
<td>31.80%</td>
<td>51.70%</td>
<td>12.90%</td>
<td>2.80%</td>
</tr>
<tr>
<td>サイト自体のデザイン性</td>
<td>11.30%</td>
<td>38.70%</td>
<td>33.50%</td>
<td>12.80%</td>
</tr>
<tr>
<td>商品のレコメンド機能の有無</td>
<td>14.90%</td>
<td>35.70%</td>
<td>34.00%</td>
<td>9.90%</td>
</tr>
<tr>
<td>商品写真の豊富さ</td>
<td>29.90%</td>
<td>49.40%</td>
<td>14.40%</td>
<td>4.80%</td>
</tr>
<tr>
<td>商品紹介記事のおもしろさ</td>
<td>9.10%</td>
<td>28.40%</td>
<td>38.90%</td>
<td>17.50%</td>
</tr>
</tbody>
</table>
商品の探しやすさが重要で、デザイン、写真、内容についてはあまり重要視されていない。
要は目的が決まっていることが多いようだ。
&nbsp;
<h2>普段使いの商品購入の意思決定に与える影響</h2>
<table>
<tbody>
<tr>
<td></td>
<td>非常に影響を与える</td>
<td>影響を与える</td>
<td>どちらともいえない</td>
<td>あまり影響を与えない</td>
</tr>
<tr>
<td>商品の品質</td>
<td>41.80%</td>
<td>46.00%</td>
<td>10.40%</td>
<td>1.40%</td>
</tr>
<tr>
<td>商品の知名度</td>
<td>10.50%</td>
<td>36.80%</td>
<td>37.20%</td>
<td>11.90%</td>
</tr>
<tr>
<td>商品の話題性</td>
<td>8.40%</td>
<td>29.00%</td>
<td>37.90%</td>
<td>19.10%</td>
</tr>
<tr>
<td>商品の納期</td>
<td>21.20%</td>
<td>47.60%</td>
<td>23.30%</td>
<td>7.10%</td>
</tr>
<tr>
<td>商品の価格</td>
<td>64.10%</td>
<td>29.60%</td>
<td>5.40%</td>
<td>0.60%</td>
</tr>
</tbody>
</table>
購入する商品が決まっていればやはり価格重視になるよう。
意外と納期はそこまで影響が無いようにも思える。
&nbsp;
<h2>普段使いの商品購入の後押しを与える影響</h2>
<table>
<tbody>
<tr>
<td></td>
<td>非常に影響を与える</td>
<td>影響を与える</td>
<td>どちらともいえない</td>
<td>あまり影響を与えない</td>
</tr>
<tr>
<td>送料の有無</td>
<td>56.60%</td>
<td>33.80%</td>
<td>8.30%</td>
<td>0.70%</td>
</tr>
<tr>
<td>レビューなどの評価</td>
<td>24.50%</td>
<td>45.70%</td>
<td>20.90%</td>
<td>6.10%</td>
</tr>
<tr>
<td>先着○名でのプレゼントの有無</td>
<td>5.90%</td>
<td>19.70%</td>
<td>35.90%</td>
<td>23.90%</td>
</tr>
<tr>
<td>抽選○名でのプレゼントの有無</td>
<td>3.80%</td>
<td>13.40%</td>
<td>36.10%</td>
<td>26.50%</td>
</tr>
<tr>
<td>数量限定かどうか</td>
<td>5.70%</td>
<td>15.50%</td>
<td>39.60%</td>
<td>24.00%</td>
</tr>
<tr>
<td>購入時に付与されるポイントの有無</td>
<td>21.00%</td>
<td>46.50%</td>
<td>22.70%</td>
<td>6.60%</td>
</tr>
<tr>
<td>購入時のキャッシュバックの有無</td>
<td>12.90%</td>
<td>37.10%</td>
<td>34.30%</td>
<td>10.20%</td>
</tr>
<tr>
<td>購入時に無料で付いてくるセットアイテムの有無</td>
<td>7.70%</td>
<td>28.70%</td>
<td>35.00%</td>
<td>18.30%</td>
</tr>
<tr>
<td>期間限定の割引の有無</td>
<td>19.90%</td>
<td>48.80%</td>
<td>21.60%</td>
<td>7.20%</td>
</tr>
<tr>
<td>納期短縮サービスの有無</td>
<td>8.00%</td>
<td>22.30%</td>
<td>40.10%</td>
<td>18.60%</td>
</tr>
<tr>
<td>ショップオリジナルアイテムかどうか</td>
<td>3.40%</td>
<td>13.10%</td>
<td>37.80%</td>
<td>27.90%</td>
</tr>
</tbody>
</table>
個人差はあると思うが、すごく参考になるデータ。
送料の有無がここまで影響があるとは思わなかった。
あと、意外とレビューは見ているようだ。
&nbsp;
無料配布のアンケート結果だが、一応個人情報の入力が必要なため一部抜粋とさせていただいた。
おもしろいアンケートと思うので、ぜひ見てみてください

ネット通販アンケート

今回は動画でweb系のスキルを学べるサービスをご紹介します。
以前、web上で学べるサイトを紹介した時にあった、ドットインストールやschooも動画で学べるサイトですね！ 
その二つはかなり普及されているように感じます。
今回ご紹介するのは3つのサイトになります。
<h2>Progate</h2>
<a href="http://prog-8.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6683" src="/uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-1024x571.jpg" alt="Progate Learn to Code, Learn to be Creative." width="620" height="346" srcset="/uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-1024x571.jpg 1024w, /uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-300x167.jpg 300w, /uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-228x127.jpg 228w, /uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative..jpg 1183w" sizes="(max-width: 620px) 100vw, 620px" /></a>
<a href="http://prog-8.com/" target="_blank" class="link">Progate | Learn to Code, Learn to be Creative.</a>
<h2>Udemy</h2>
<a href="https://www.udemy.com/courses/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-6681" src="/uploads-archive/2015/01/Best-Online-Courses-Udemy-1024x571.jpg" alt="Best Online Courses Udemy" width="620" height="346" srcset="/uploads-archive/2015/01/Best-Online-Courses-Udemy-1024x571.jpg 1024w, /uploads-archive/2015/01/Best-Online-Courses-Udemy-300x167.jpg 300w, /uploads-archive/2015/01/Best-Online-Courses-Udemy-228x127.jpg 228w, /uploads-archive/2015/01/Best-Online-Courses-Udemy.jpg 1183w" sizes="(max-width: 620px) 100vw, 620px" /></a>
<a href="https://www.udemy.com/courses/" target="_blank" class="link">Best Online Courses | Udemy</a>
<h2>Learn Git</h2>
<a href="http://www.git-tower.com/learn/videos" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6682" src="/uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-1024x571.jpg" alt="Learn Git - Learn Version Control with Git" width="620" height="346" srcset="/uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-1024x571.jpg 1024w, /uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-300x167.jpg 300w, /uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-228x127.jpg 228w, /uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git.jpg 1183w" sizes="(max-width: 620px) 100vw, 620px" /></a>
<a href="http://www.git-tower.com/learn/videos" target="_blank" class="link">Learn Git &#8211; Learn Version Control with Git</a>

動画で学べるwebサービス3つのご紹介

PHP 日付、曜日を操作する関数

<h2>クレショフ効果</h2>
組合せ①
<a href="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6699" src="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg" alt="f31bb40bb3430abf631e2272745089b6_s" width="235" height="355" srcset="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg 424w, /uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s-198x300.jpg 198w, /uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s-228x344.jpg 228w" sizes="(max-width: 235px) 100vw, 235px" /><img decoding="async" loading="lazy" class="alignnone wp-image-6700" src="/uploads-archive/2015/01/f067ea0290cc244b066bd6f37a64e212_s.jpg" alt="f067ea0290cc244b066bd6f37a64e212_s" width="234" height="355" /></a>
組合せ②
<a href="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6699" src="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg" alt="f31bb40bb3430abf631e2272745089b6_s" width="235" height="355" srcset="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg 424w, /uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s-198x300.jpg 198w, /uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s-228x344.jpg 228w" sizes="(max-width: 235px) 100vw, 235px" /></a><a href="/uploads-archive/2015/01/c8752b03ac9ac93f7b3d1d64881c788d_s.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6720" src="/uploads-archive/2015/01/c8752b03ac9ac93f7b3d1d64881c788d_s.jpg" alt="c8752b03ac9ac93f7b3d1d64881c788d_s" width="236" height="356" srcset="/uploads-archive/2015/01/c8752b03ac9ac93f7b3d1d64881c788d_s.jpg 424w, /uploads-archive/2015/01/c8752b03ac9ac93f7b3d1d64881c788d_s-198x300.jpg 198w, /uploads-archive/2015/01/c8752b03ac9ac93f7b3d1d64881c788d_s-228x344.jpg 228w" sizes="(max-width: 236px) 100vw, 236px" /></a>
組合せ③
<a href="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6699" src="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg" alt="f31bb40bb3430abf631e2272745089b6_s" width="235" height="355" srcset="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg 424w, /uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s-198x300.jpg 198w, /uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s-228x344.jpg 228w" sizes="(max-width: 235px) 100vw, 235px" /></a><a href="/uploads-archive/2015/01/77cfb2e14a2226ab3f307983ede4d21c_s.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6703" src="/uploads-archive/2015/01/77cfb2e14a2226ab3f307983ede4d21c_s.jpg" alt="77cfb2e14a2226ab3f307983ede4d21c_s" width="350" height="232" srcset="/uploads-archive/2015/01/77cfb2e14a2226ab3f307983ede4d21c_s.jpg 640w, /uploads-archive/2015/01/77cfb2e14a2226ab3f307983ede4d21c_s-300x198.jpg 300w, /uploads-archive/2015/01/77cfb2e14a2226ab3f307983ede4d21c_s-228x151.jpg 228w" sizes="(max-width: 350px) 100vw, 350px" /></a>
組合せ①～③で女性はどんな心境でしょうか？
きっと左側の女性の表情がそれぞれ違って見えてくるはずです。
女性がどんな心境にいるのか読み取ろうとすると、右側の写真の影響で無意識にバイアスがかかってイメージができてしまうんですね。
これを「クレショフ効果」というそうです。
&nbsp;
実際どんな場合に応用できるかというと、商品の説明ページにおいてシチュエーションを具体的に想像させることで購買意欲をかき立てるとのこと。
例えば「恋人と美味しいワインを一緒に飲みたい」と思わせたり、「パーティーに良いお酒を持っていたったらウケるかな」と想像するように促すというものです。
<a href="/uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6707" src="/uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s.jpg" alt="7a89c5ccdc01da94c6fc2b9faf827dd2_s" width="234" height="353" srcset="/uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s.jpg 424w, /uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s-198x300.jpg 198w, /uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s-228x344.jpg 228w" sizes="(max-width: 234px) 100vw, 234px" /></a><a href="/uploads-archive/2015/01/86652d58125e3dd0ff1294f809a379d8_s.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6708" src="/uploads-archive/2015/01/86652d58125e3dd0ff1294f809a379d8_s.jpg" alt="86652d58125e3dd0ff1294f809a379d8_s" width="233" height="350" srcset="/uploads-archive/2015/01/86652d58125e3dd0ff1294f809a379d8_s.jpg 427w, /uploads-archive/2015/01/86652d58125e3dd0ff1294f809a379d8_s-200x300.jpg 200w, /uploads-archive/2015/01/86652d58125e3dd0ff1294f809a379d8_s-228x341.jpg 228w" sizes="(max-width: 233px) 100vw, 233px" /></a>
<a href="/uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6707" src="/uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s.jpg" alt="7a89c5ccdc01da94c6fc2b9faf827dd2_s" width="234" height="353" srcset="/uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s.jpg 424w, /uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s-198x300.jpg 198w, /uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s-228x344.jpg 228w" sizes="(max-width: 234px) 100vw, 234px" /></a><a href="/uploads-archive/2015/01/8d30a20398ac40f75c7d2d457adb4a42_s.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6710" src="/uploads-archive/2015/01/8d30a20398ac40f75c7d2d457adb4a42_s.jpg" alt="8d30a20398ac40f75c7d2d457adb4a42_s" width="414" height="276" srcset="/uploads-archive/2015/01/8d30a20398ac40f75c7d2d457adb4a42_s.jpg 640w, /uploads-archive/2015/01/8d30a20398ac40f75c7d2d457adb4a42_s-300x200.jpg 300w, /uploads-archive/2015/01/8d30a20398ac40f75c7d2d457adb4a42_s-228x152.jpg 228w" sizes="(max-width: 414px) 100vw, 414px" /></a>
イメージ付したい画像を近くに置くことで、お客さんは無意識にワインに対してロマンティックなイメージや、楽しいイメージを想像する可能性が高くなります。
商品単体の画像にこだわるもの大切ですが、商品画像のまわりに配置する画像も大切という事ですね。
&nbsp;
商品自体が無機質なものほど、商品単体の画像より同時に掲載する画像が大切になってきます。
<a href="/uploads-archive/2015/01/8cbd08a2054cd53bb901e366da701c27_s.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6711" src="/uploads-archive/2015/01/8cbd08a2054cd53bb901e366da701c27_s.jpg" alt="8cbd08a2054cd53bb901e366da701c27_s" width="374" height="249" srcset="/uploads-archive/2015/01/8cbd08a2054cd53bb901e366da701c27_s.jpg 640w, /uploads-archive/2015/01/8cbd08a2054cd53bb901e366da701c27_s-300x200.jpg 300w, /uploads-archive/2015/01/8cbd08a2054cd53bb901e366da701c27_s-228x152.jpg 228w" sizes="(max-width: 374px) 100vw, 374px" /></a>
食器を扱っている場合であれば下のようなシンプルな画像に加えて、実際に使っているシーンの画像や大きさが伝わる画像を加える事でより具体的に商品をイメージできます。
<a href="/uploads-archive/2015/01/21bc994c0698e4e07948bfb02f0e56e1_s.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6712" src="/uploads-archive/2015/01/21bc994c0698e4e07948bfb02f0e56e1_s.jpg" alt="21bc994c0698e4e07948bfb02f0e56e1_s" width="332" height="221" srcset="/uploads-archive/2015/01/21bc994c0698e4e07948bfb02f0e56e1_s.jpg 640w, /uploads-archive/2015/01/21bc994c0698e4e07948bfb02f0e56e1_s-300x200.jpg 300w, /uploads-archive/2015/01/21bc994c0698e4e07948bfb02f0e56e1_s-228x152.jpg 228w" sizes="(max-width: 332px) 100vw, 332px" /></a><a href="/uploads-archive/2015/01/540bb370edfd70c57b1b8bae053c0b32_s.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6714" src="/uploads-archive/2015/01/540bb370edfd70c57b1b8bae053c0b32_s.jpg" alt="540bb370edfd70c57b1b8bae053c0b32_s" width="329" height="219" srcset="/uploads-archive/2015/01/540bb370edfd70c57b1b8bae053c0b32_s.jpg 640w, /uploads-archive/2015/01/540bb370edfd70c57b1b8bae053c0b32_s-300x200.jpg 300w, /uploads-archive/2015/01/540bb370edfd70c57b1b8bae053c0b32_s-228x152.jpg 228w" sizes="(max-width: 329px) 100vw, 329px" /></a>

ECサイトのデザインに役立つ心理学2

お仕事もご一緒させて頂いている知人が携わっている会社でインバウンドECのサービスを開始致しました。
<a href="http://bizmakoto.jp/makoto/articles/1501/14/news129.html" target="_blank">日本郵便と中国最大の旅行サービスが提携、訪日客のホテルに商品配達</a>
弊社では越境ECを掲げていますが、グローバルに展開、外貨を稼ぐという手段のもう一つにインバウンドECがあります。
越境ECとインバウンドECの違いは以下のようになります。
<a href="/uploads-archive/2015/01/bfb477adedcc62811dfe122a22e07935.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6692" src="/uploads-archive/2015/01/bfb477adedcc62811dfe122a22e07935-300x126.png" alt="越境ECインバウンドEC" width="300" height="126" srcset="/uploads-archive/2015/01/bfb477adedcc62811dfe122a22e07935-300x126.png 300w, /uploads-archive/2015/01/bfb477adedcc62811dfe122a22e07935-228x95.png 228w, /uploads-archive/2015/01/bfb477adedcc62811dfe122a22e07935.png 999w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
両方共、外貨を獲得するということに変わりはないのですが、お客様のいる場所が異なります。
越境ECは文字通り日本から越境してお客様のいる国にモノを運びます。
インバウンドECは日本に来たお客様向けにECを提供します。商品の受取は訪日中に滞在するホテルや空港、店頭での受取ということになるでしょう。
<h2>越境ECインバウンドECのメリットデメリット</h2>
ここで、両者のメリットデメリットというところを考えてみたいと思います。
<ul>
<li>越境ECの最大の障壁はローカライズが必要ということ。中国では、基本チャットベースで交渉をしながら決済までいきます。</li>
<li>物流においては、インバウンドECが圧倒的な優位性があります。どこから運んでも1日2日で納品することが可能でしょう。</li>
<li>2014年過去最高を記録してもインバウンドECのマーケットは1400万人。越境ECであれば、世界中の人がターゲットになります。</li>
</ul>
<h2>まとめ</h2>
以上は考えられる程度ではありますが、先ほどのリリース文を見ると、訪日中国人200万人のマーケットに対して、30億円の売上目標ということでインバウンドECでも十分なマーケット規模はあることが伺い知れます。
まだ、サイト自体は公開されていないようなので、引き続き、期待をしてウォッチしていきたいと思います。

訪日観光客向けのインバウンドEC

テキストで括弧の横の余分なスペースを軽減するjQueryコード

なんてタイトルですが、 
設定していないわけではないんですよね。
基本的には大抵横幅960pxと設定してサイトのデザインをするのですが、 
そうではなく、ウィンドウ幅に合わせてサイトをデザインしているサイトのご紹介になります。
ちなみに、すべてレスポンシブです。(このデザインでは当たり前ですね・・・)
<h2>CKD 空気圧機器 制御機器 自動機械装置 総合メーカー</h2>
<a href="http://www.ckd.co.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-6651" src="/uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748-1024x704.jpg" alt="CKD 空気圧機器 制御機器 自動機械装置 総合メーカー" width="600" height="413" srcset="/uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748-1024x704.jpg 1024w, /uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748-300x206.jpg 300w, /uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748-228x156.jpg 228w, /uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<a class="link" href="http://www.ckd.co.jp/" target="_blank">CKD 空気圧機器 制御機器 自動機械装置 総合メーカー</a>
<h2>二本松物流株式会社</h2>
<a href="http://www.nihonmatsu.co.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6653" src="/uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b-1024x704.jpg" alt="チルド配送 小口配送 食品流通｜二本松物流株式会社" width="600" height="413" srcset="/uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b-1024x704.jpg 1024w, /uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b-300x206.jpg 300w, /uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b-228x156.jpg 228w, /uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<a href="http://www.nihonmatsu.co.jp/" target="_blank" class="link">チルド配送 小口配送 食品流通｜二本松物流株式会社</a>
<h2>WENT Coffee Co.</h2>
<a href="http://went.tokyo/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6652" src="/uploads-archive/2015/01/WENT-Coffee-Co.-1024x704.jpg" alt="WENT Coffee Co." width="600" height="413" srcset="/uploads-archive/2015/01/WENT-Coffee-Co.-1024x704.jpg 1024w, /uploads-archive/2015/01/WENT-Coffee-Co.-300x206.jpg 300w, /uploads-archive/2015/01/WENT-Coffee-Co.-228x156.jpg 228w, /uploads-archive/2015/01/WENT-Coffee-Co..jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<a href="http://went.tokyo/" target="_blank" class="link">WENT Coffee Co.</a>
<h2>産科婦人科 佐川クリニック</h2>
<a href="http://www.sagawa-clinic.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6655" src="/uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f-1024x704.jpg" alt="産科婦人科 佐川クリニック" width="600" height="413" srcset="/uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f-1024x704.jpg 1024w, /uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f-300x206.jpg 300w, /uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f-228x156.jpg 228w, /uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<a href="http://www.sagawa-clinic.com/" target="_blank" class="link">産科婦人科 佐川クリニック</a>
<h2>47株式会社</h2>
<a href="http://47co.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6650" src="/uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a-1024x704.jpg" alt="47株式会社 もっと暮らしやすくなるための日本づくり" width="600" height="413" srcset="/uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a-1024x704.jpg 1024w, /uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a-300x206.jpg 300w, /uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a-228x156.jpg 228w, /uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<a href="http://47co.jp/" target="_blank" class="link">47株式会社 | もっと暮らしやすくなるための日本づくり</a>
<h2>KITOTE</h2>
<a href="http://kitote.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6656" src="/uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca-1024x704.jpg" alt="天然木と手仕事の建具『KITOTE』" width="600" height="413" srcset="/uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca-1024x704.jpg 1024w, /uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca-300x206.jpg 300w, /uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca-228x156.jpg 228w, /uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<a href="http://kitote.jp/" target="_blank" class="link">天然木と手仕事の建具『KITOTE』</a>
<h2>株式会社アトラエ</h2>
<a href="http://atrae.co.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6654" src="/uploads-archive/2015/01/dd73a0b7be8e988f2053dfff0048e2aa-1024x695.jpg" alt="株式会社アトラエ Atrae, Inc." width="600" height="413" /></a>
<a href="http://atrae.co.jp/" target="_blank" class="link">株式会社アトラエ | Atrae, Inc.</a>

横幅なんて設定しない！ウィンドウ幅ピッタリのサイト7つ

ミャンマー大統領、総選挙へスー・チー氏らと会談
<a href="http://www.nikkei.com/article/DGXLASGM12H7D_S5A110C1FF8000/" target="_blank">http://www.nikkei.com/article/DGXLASGM12H7D_S5A110C1FF8000/</a>
&nbsp;
ミャンマー、2014年の観光客は300万人11億3,500万ドル
<a href="http://www.myanmar-news.asia/news_acx6yrmJfq.html" target="_blank">http://www.myanmar-news.asia/news_acx6yrmJfq.html</a>
&nbsp;
インフレ率10%
<a href="http://jinjibu.jp/news/detl/8670/" target="_blank">http://jinjibu.jp/news/detl/8670/</a>
<a href="http://jinjibu.jp/news/detl/8670/" target="_blank"> </a>
ミャンマーが「ASEAN観光フォーラム2015」のホスト国に
<a href="http://www.myanmar-news.asia/news_abUlMaL7OC.html" target="_blank">http://www.myanmar-news.asia/news_abUlMaL7OC.html</a>
<a href="http://www.myanmar-news.asia/news_abUlMaL7OC.html" target="_blank"> </a>
住商がミャンマーで中型火力 16年稼働、工業団地に供給
<a href="http://www.nikkei.com/article/DGXLASDZ25I0N_V21C14A2TJ2000/" target="_blank">http://www.nikkei.com/article/DGXLASDZ25I0N_V21C14A2TJ2000/</a>
<a href="http://www.nikkei.com/article/DGXLASDZ25I0N_V21C14A2TJ2000/" target="_blank"> </a>
ミャンマー鉄道、ヤンゴン市環状線を電化へ
<a href="http://myanmarjapon.com/newsdigest/2015/01/09-000617.php" target="_blank">http://myanmarjapon.com/newsdigest/2015/01/09-000617.php</a>
<a href="http://myanmarjapon.com/newsdigest/2015/01/09-000617.php" target="_blank"> </a>
対ミャンマー投資、1.7倍 8400億円
<a href="http://www.nikkei.com/article/DGXLASGM03H2R_W5A100C1FF1000/" target="_blank">http://www.nikkei.com/article/DGXLASGM03H2R_W5A100C1FF1000/</a>
<a href="http://www.nikkei.com/article/DGXLASGM03H2R_W5A100C1FF1000/" target="_blank"> </a>
総選挙、10月下旬から11月初旬までに実施
<a href="http://www.nikkei.com/article/DGXLASGM02H2F_S5A100C1FF8000/" target="_blank">http://www.nikkei.com/article/DGXLASGM02H2F_S5A100C1FF8000/</a>
<a href="http://www.nikkei.com/article/DGXLASGM02H2F_S5A100C1FF8000/" target="_blank"> </a>
日本通運がミャンマー進出
<a href="http://www.myanmar-news.asia/news_aartZQzjGu.html" target="_blank">http://www.myanmar-news.asia/news_aartZQzjGu.html</a>
<a href="http://www.myanmar-news.asia/news_aartZQzjGu.html" target="_blank"> </a>
日本取引所と大和総研、ミャンマー証取と23日に合弁契約
<a href="http://www.nikkei.com/article/DGXLASGC19H15_Z11C14A2EE8000/" target="_blank">http://www.nikkei.com/article/DGXLASGC19H15_Z11C14A2EE8000/</a>
<a href="http://www.nikkei.com/article/DGXLASGC19H15_Z11C14A2EE8000/" target="_blank"> </a>
ミャンマーの携帯電話事情
<a href="http://wirelesswire.jp/Global_Trendline/201501051830.html" target="_blank">http://wirelesswire.jp/Global_Trendline/201501051830.html</a>

最近のミャンマー関連ニュースまとめ

SVGとCSS3でできる筆記体のアニメーションをやってみる

コンビニやスーパーマーケットでの商品配置はお客さんの行動心理を読み取った配置になっているとよく聞きます。繁盛している雰囲気を出すために、コンビニの雑誌売り場を外から見える場所に配置して立ち読み客を賑やかしになってもらうというのは有名です。
小売店において行動心理を応用した配置はとても一般的になっているので、リアル店舗同様、ＥＣサイトのデザインにも行動心理を考慮するのは必須だと思います。運営サイトの売上を伸ばすためにせっかくなので利用しようと思ったものをまとめてみます。
<h2>画像の配置</h2>
<a href="/uploads-archive/2015/01/center_effect.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6632" src="/uploads-archive/2015/01/center_effect.jpg" alt="center_effect" width="703" height="133" /></a>
上に並んでいるのは「おせち」の写真ですが、あなたはどのおせちを選びますか？
&nbsp;
このように水平に画像を並べた場合、中央に配置された画像を選ぶ傾向が強くなるそうです、これは「センターステージエフェクト」と呼ばれます。
上の画像は横並びですが、これを縦に配置した場合でも同様に中央が選ばれる傾向が強くなるとの事です。
売りたい商品の画像は中央に置く方が良さそうです。
&nbsp;
<h2>価格差がある場合</h2>
通常のＥＣサイトではそれぞれ商品ごとに価格が異なるので、まずは価格がどの商品を選ぶかの主な理由になります。
&nbsp;
例えば、WEB上で画像素材を提供するサービスがあったとします。
下の二つのプランがあった場合、ユーザーは基本的に無料のプランを選ぶ傾向にあります。
ユーザーの内、有料プランを選ぶユーザーはひとにぎりなので、収益を上げにくく、価格を上げざるを得ない状態になり悪循環に陥る可能性もあります。
<a href="/uploads-archive/2015/01/center_effect4.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-6658" src="/uploads-archive/2015/01/center_effect4.gif" alt="center_effect4" width="630" height="231" /></a>
しかし 下のようにさらに高額なプランを作った場合はどうでしょうか。
２つしかプランがなかった時に比べて格段に有料プランを選ぶユーザーの数が増える傾向にあると言われています。
<img decoding="async" loading="lazy" class="alignnone wp-image-6644" src="/uploads-archive/2015/01/center_effect2.gif" alt="center_effect2" width="621" height="233" />
昔から日本人は松竹梅の竹を選ぶと言われますが、日本人に限らず海外でも同じ傾向があるようです。

ECサイトのデザインに役立つ行動心理

In terms of creating a website (corporate or personal) it do not have to be coded from scratch anymore. Thanks to many kind and generous designers / developers, high quality web templates are distributed freely over the Internet.
There are tonnes of templates sites out there, that makes searching for a free yet high quality templates hard and tedious, so I attempted to collect and showcase you some of really good ones. Here, I present 8 High Quality Free Web Templates and Layouts.
I&#8217;m sure you&#8217;ll a find a gem or two that will absolutely ease your workflow!
&nbsp;
<a href="https://dribbble.com/shots/1819180-Free-Dashboard-Ecommerce-Admin">ECommerce Dashboard Template</a>  (PSD).
<a href="/uploads-archive/2015/01/monthly_freebie_dc_23.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6614 " src="/uploads-archive/2015/01/monthly_freebie_dc_23.jpg" alt="monthly_freebie_dc_23" width="660" height="260" /></a>
&nbsp;
<a href="https://www.behance.net/gallery/21521941/Creative-Agency-Web-Template">Creative Agency Web Template</a>  (PSD).
<a href="/uploads-archive/2015/01/Screen-Shot-2015-01-13-at-16.00.36.png"><img decoding="async" loading="lazy" class="alignnone wp-image-6626 " src="/uploads-archive/2015/01/Screen-Shot-2015-01-13-at-16.00.36-1024x582.png" alt="Screen Shot 2015-01-13 at 16.00.36" width="663" height="372" /></a>
<a href="http://graphicsbay.com/item/bj-rn-multipurpose-landingpage/380">BJÖRN Multipurpose Landing Page</a>  (PSD).
<img decoding="async" loading="lazy" class="alignnone wp-image-6613 " src="/uploads-archive/2015/01/monthly_freebie_dc_20.jpg" alt="monthly_freebie_dc_20" width="660" height="266" srcset="/uploads-archive/2015/01/monthly_freebie_dc_20-300x120.jpg 300w, /uploads-archive/2015/01/monthly_freebie_dc_20-228x91.jpg 228w" sizes="(max-width: 660px) 100vw, 660px" />
<a href="https://dribbble.com/shots/1802406-Freebie-Moderno-Creative-Simple-Portfolio-Page">Moderno Creative Simple Portfolio Page</a>  (PSD).
<a href="/uploads-archive/2015/01/monthly_freebie_dc_24.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6615 " src="/uploads-archive/2015/01/monthly_freebie_dc_24.jpg" alt="monthly_freebie_dc_24" width="658" height="278" /></a>
<a href="http://www.mightydeals.com/deal/free-resume-template-by-fernando-bez.html">Resume Template</a>  (PSD).
<a href="/uploads-archive/2015/01/monthly_freebie_dc_21.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6616 " src="/uploads-archive/2015/01/monthly_freebie_dc_21.jpg" alt="monthly_freebie_dc_21" width="655" height="340" /></a>
<a href="http://www.robertbrodziak.com/en/free-wordpress-themes/daily-theme/">Daily</a>  (WordPress Theme).
<a href="/uploads-archive/2015/01/monthly_freebie_dc_25.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6617 " src="/uploads-archive/2015/01/monthly_freebie_dc_25.jpg" alt="monthly_freebie_dc_25" width="655" height="263" srcset="/uploads-archive/2015/01/monthly_freebie_dc_25.jpg 750w, /uploads-archive/2015/01/monthly_freebie_dc_25-300x120.jpg 300w, /uploads-archive/2015/01/monthly_freebie_dc_25-228x91.jpg 228w" sizes="(max-width: 655px) 100vw, 655px" /></a>
<a href="http://www.daniel-klose.com/online-services/life-is-good-wordpress-theme/">Life Is Good</a>  (WordPress Theme).
<a href="/uploads-archive/2015/01/monthly_freebie_dc_26.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6618 " src="/uploads-archive/2015/01/monthly_freebie_dc_26.jpg" alt="monthly_freebie_dc_26" width="655" height="242" /></a>
<a href="http://themehybrid.com/themes/yarn">Yarn</a>  (WordPress Theme).
<a href="/uploads-archive/2015/01/monthly_freebie_dc_27.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6619 " src="/uploads-archive/2015/01/monthly_freebie_dc_27.jpg" alt="monthly_freebie_dc_27" width="653" height="279" /></a>
<a href="https://themeisle.com/themes/zerif-lite/">Zerif Lite</a>  (WordPress Theme).
<a href="/uploads-archive/2015/01/monthly_freebie_dc_28.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6620 " src="/uploads-archive/2015/01/monthly_freebie_dc_28.jpg" alt="monthly_freebie_dc_28" width="649" height="273" /></a>
&nbsp;

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - 2015年

2015/02/05

2015/02/05

2015/01/28

2015/01/28

2015/01/27

2015/01/27

2015/01/27

2015/01/27

2015/01/22

2015/01/22

2015/01/22

2015/01/21

2015/01/21

2015/01/14

2015/01/14

2015/01/14

2015/01/14

2015/01/14