【jQuery】IE9でページ遷移せずにファイルをPOSTしてJSONを受け取る

html5で増えたinput関係で実際使ってみたいもの

File Apiを使ってアップロードした画像を表示させる

jQueryでマテリアルデザイン風の一覧からの詳細表示

<p>twitterやfacebookはいろんなタイプのウィジェットを生成することが出来ますが、<br />
instagramでは投稿を埋め込むことくらいしか出来ません。</p>
<p>自分のアカウントの写真を表示して埋め込みたい、みたいな時があると思います。<br />
そんな時に、この「SnapWidget」を使うと、便利なウィジェットを生成してくれます！</p>
<p><a class="link" href="http://snapwidget.com/#getstarted" target="_blank">SnapWidget</a></p>
<h2>使い方</h2>
<p>使い方といっても、下記の画面にて、必要項目を記入し、「Get Widget」を押すと、<br />
iframeのソースが生成されますので、それをサイトに貼り付ければOKです！</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8263" src="/uploads-archive/2015/10/SnapWidgetInstagramWidget2-1024x587.jpg" alt="SnapWidgetInstagramWidget2" width="630" height="361" srcset="/uploads-archive/2015/10/SnapWidgetInstagramWidget2-1024x587.jpg 1024w, /uploads-archive/2015/10/SnapWidgetInstagramWidget2-300x172.jpg 300w, /uploads-archive/2015/10/SnapWidgetInstagramWidget2-228x131.jpg 228w, /uploads-archive/2015/10/SnapWidgetInstagramWidget2.jpg 1126w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>ただ、もっと自由に扱いたいという場合は、<br />
APIを利用する必要がありそうですね。</p>
<p>下記のブログがすごい良くまとめられているので、自分も必要になったら参考にしたいと思います。</p>
<p><a href="https://syncer.jp/instagram-api-matome">Instagram APIでwebサービスを作りたい全ての人に向けて書きました</a></p>


instagramのウィジェットを生成してくれるサービス「SnapWidget」

別のページをjQueryのajaxを使って読み込み表示させる

JavaScriptで拡張子のない画像のファイルの種類を判別する方法(IE9以上)

<p>すべてというのは僕が勝手に思ってる内容です・・・</p>
<p>僕がよく使用しているアイコン、「fontawesome」「Glyphicons」「Entypo」が含まれています。</p>
<p>他にも、今後も利用できそうな「Material」「Flat Color」があります。</p>
<p>使い方は非常に簡単です。</p>
<p>DEMOはこちらです。<br />
<a href="/demo/abe/60/" target="_blank" class="demo">DEMO</a></p>
<h2>We Love SVGの使い方</h2>
<p>まずはこちらからzipをダウンロードします。<br />
<a href="https://icons8.github.io/webicon/" target="_blank">Webicon by Icons8</a></p>
<p>head内に下記コードを設置します。 </p>
<p></p>

		<div id="crayon-649540158bc95781787149" 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;">
&lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery-webicon.min.js"&gt;&lt;/script&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-649540158bc95781787149-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158bc95781787149-2">2</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-649540158bc95781787149-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158bc95781787149-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-webicon.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>あとは、htmlで、</p>
<p></p>

		<div id="crayon-649540158bc9a270899462" 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;webicon icon="search"&gt;&lt;/webicon&gt;
&lt;span webicon="news"&gt;&lt;/span&gt;
&lt;div data-webicon="print"&gt;&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-649540158bc9a270899462-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158bc9a270899462-2">2</div><div class="crayon-num" data-line="crayon-649540158bc9a270899462-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-649540158bc9a270899462-1"><span class="crayon-r ">&lt;webicon </span><span class="crayon-e ">icon</span>=<span class="crayon-s ">"search"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/webicon&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158bc9a270899462-2"><span class="crayon-r ">&lt;span </span><span class="crayon-e ">webicon</span>=<span class="crayon-s ">"news"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/span&gt;</span></div><div class="crayon-line" id="crayon-649540158bc9a270899462-3"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">data-webicon</span>=<span class="crayon-s ">"print"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>と書くだけです！</p>
<p>サイズを変えたい場合は、cssでwidthを指定すれば変更できます。</p>
<p>簡単！といいたいところですが、<br />
flat-colorのものしか使えず。。。<br />
勉強不足ですね。。。</p>
<p>また出直します。</p>
<p><a href="https://icons8.com/welovesvg" class="link" target="_blank">We Love SVG &#8211; Google Fonts for icons | Icons8</a></p>

すべて(※)のアイコンが集約された「We Love SVG」

<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>来る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>おそろしいプラグインに出会ってしまいました。</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」でレイアウトが自由自在に！

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

<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>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での動画活用「レビュー動画サイトからヒントを探る」

sessionStorageとlocalStorageについて

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


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #デザイナー

2015/10/28

2015/10/28

2015/10/20

2015/10/14

2015/10/14

2015/10/07

2015/09/30

2015/09/30

2015/09/09

2015/09/09

2015/09/09

2015/09/02

2015/09/01

2015/08/26

2015/08/25

2015/08/19

2015/08/05

2015/08/04