<h3>前置き</h3>
<div style="padding-left: 15px;">
便利なPhotoshopですが<br />
隠れに隠れた機能が多いアプリケーション</p>
<p>そんなの知ってるよ！</p>
<p>と思うのも多々あるかと思いますが備忘録的な感じで紹介します</p></div>
<h3>特徴</h3>
<div style="padding-left: 15px;">
<p>WindowsではControlキーがMacのCommandキーに相当します。</p>
<ul>
<li>Shift : 選択範囲など「プラス」のイメージ</li>
<li>Control : コマンド実行、他Shift, Alt等との組み合わせ識別</li>
<li>Alt : 選択範囲など「マイナス」のイメージ</li>
</ul>
</div>
<h3>良く使うキー組み合わせ</h3>
<div style="padding-left: 15px;">
<table>
<tbody>
<tr>
<th>キー・マウス動作</th>
<th>動作内容</th>
</tr>
<tr>
<td>Control + T</td>
<td>選択されたレイヤーの自由変形</td>
</tr>
<tr>
<td>Control 押しながらドラッグ</td>
<td>選択レイヤーの移動</td>
</tr>
<tr>
<td>Control + Shift + クリック</td>
<td>複数レイヤー選択</td>
</tr>
<tr>
<td>Control + E</td>
<td>上位レイヤーと結合</td>
</tr>
<tr>
<td>Control + Shift + E</td>
<td>表示されているレイヤー統合</td>
</tr>
<tr>
<td>d</td>
<td>描画色・背景色を黒白に初期化</td>
</tr>
<tr>
<td>x</td>
<td>描画色・背景色の入れ替え</td>
</tr>
<tr>
<td>q</td>
<td>クイックマスクモード切り替え</td>
</tr>
<tr>
<td>Control + R</td>
<td>定規の表示・非表示切り替え</td>
</tr>
<tr>
<td>Tab</td>
<td>メインウィンドウ以外の表示・非表示切り替え</td>
</tr>
</tbody>
</table>
<p>※ 上記は設定で「ツールの変更にShiftキーを使用」を敢えて外しています</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/DL3J_nBjDG0?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/W8fgF99Q3YA?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
</div>


ps.jpg

Webデザインで使えそうなPhotoshop小技変

<p>最近、webフォントがどんどんいろんなサイトで使用されており、日本語のフォントも見かけることも多くなってきました。<br />
webフォントを提供しているサービスは数多くあるのですが、少々お値段がかかってしまうので、<br />
今回、フリーで使用できる日本語のwebフォントを2つ紹介したいと思います。</p>
<p>いきなり話はそれますが、先日さくらさんがwebフォントに関する新たなサービスを発表していました。</p>
<p><a href="https://www.sakura.ad.jp/press/2016/0629_morisawa/" target="_blank">モリサワとさくらインターネットが協業し、無料でのWebフォント導入を実現</a></p>
<p>これは制作物の幅が広がりそうですね！！</p>
<h2>フリーの日本語webフォントを使う</h2>
<p>さて、本題に入りますが、私が把握している日本語のwebフォントでフリーで使えるのは2つになります。<br />
・<a href="https://mplus-fonts.osdn.jp/about.html#multilingual" target="_blank">M+ FONTS</a><br />
・<a href="https://www.google.com/get/noto/" target="_blank">Noto Sans JP</a></p>
<h3>M+ FONTS</h3>
<p>まずはM＋ FONTSというフォントです。<br />
webフォントの使用は下記のサイトにもありますが、<br />
<a href="http://mplus-webfonts.osdn.jp/" target="_blank">M+ Web Fonts</a><br />
使用したいフォントをダウンロードして以下のようにして使用します。</p>
<p></p>

		<div id="crayon-6495402641709672325736" 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">CSS</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;">
@font-face{ 
  font-family: 'mplus-1p-light';
  src: url('../font/mplus-1p-light.eot');
  src: url('../font/mplus-1p-light.eot?#iefix') format('embedded-opentype'),
       url('../font/mplus-1p-light.woff') format('woff'),
       url('../font/mplus-1p-light.ttf') format('truetype');
}</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-6495402641709672325736-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402641709672325736-2">2</div><div class="crayon-num" data-line="crayon-6495402641709672325736-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402641709672325736-4">4</div><div class="crayon-num" data-line="crayon-6495402641709672325736-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402641709672325736-6">6</div><div class="crayon-num" data-line="crayon-6495402641709672325736-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402641709672325736-1"><span class="crayon-n">@font-face</span><span class="crayon-sy">{</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402641709672325736-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'mplus-1p-light'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495402641709672325736-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">src</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'../font/mplus-1p-light.eot'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402641709672325736-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">src</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'../font/mplus-1p-light.eot?#iefix'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'embedded-opentype'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line" id="crayon-6495402641709672325736-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'../font/mplus-1p-light.woff'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'woff'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402641709672325736-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'../font/mplus-1p-light.ttf'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'truetype'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495402641709672325736-7"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>そして、使用したいタグに、</p>
<p></p>

		<div id="crayon-649540264170e326570062" 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;">
p {
  font-family: 'mplus-1p-light';
}</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-649540264170e326570062-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264170e326570062-2">2</div><div class="crayon-num" data-line="crayon-649540264170e326570062-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-649540264170e326570062-1">p<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264170e326570062-2"><span class="crayon-h">&nbsp;&nbsp;</span>font-family<span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s ">'mplus-1p-light'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264170e326570062-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>と指定してやるとフォントを使えます。</p>
<h3>Noto Sans JP</h3>
<p>次は、Noto Sans JPになります。</p>
<p>このフォントはgoogleが提供しているフォントでいろんな言語が用意されています。</p>
<p>日本語を使いたい場合はこちら、<br />
<a href="https://www.google.com/fonts/earlyaccess#Noto+Sans+JP" target="_blank">Google Fonts : Early Access</a></p>
<p>サイトにも記載がありますが、</p>
<p></p>

		<div id="crayon-649540264170f356862491" 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">CSS</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;">
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);</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-649540264170f356862491-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-649540264170f356862491-1"><span class="crayon-n">@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>このCSSを読み込みあとは、先ほど同じように、</p>
<p></p>

		<div id="crayon-6495402641710702011569" 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;">
p {
  font-family: 'Noto Sans JP';
}</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-6495402641710702011569-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402641710702011569-2">2</div><div class="crayon-num" data-line="crayon-6495402641710702011569-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-6495402641710702011569-1">p<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402641710702011569-2"><span class="crayon-h">&nbsp;&nbsp;</span>font-family<span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s ">'Noto Sans JP'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495402641710702011569-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>と指定すると使用できます。</p>
<p>ちなみにこのフォント、Noto Sans Japaneseというものも存在しています。</p>
<p>ほぼ同じものなんですが、ウェイトの種類や、対応文字数がほんの少し違うだけです。</p>
<p>詳しくは以下のサイトで詳しく説明されております。</p>
<p><a href="http://oxynotes.com/?p=10293" target="_blank">Google Fontsの日本語フォント「Noto Fonts」の使い方 | OXY NOTES</a></p>
<p>webフォントによって表現がより豊かにできるのでぜひぜひ使用していきたいですね！</p>
<p>今後の問題としては、やはりwebフォントは重いので、表示スピードが遅くなってしまうことだと思います。<br />
キャッシュを使ったりいくつか方法がありますが、<br />
必要な文字だけダウンロードしてくる、みたいになれば無駄がなくて便利ですよね。。。</p>

フリーで使える日本語のwebフォントを使おう！！

<p>今回紹介するのは、<br />
デザインの細部を、有名なアプリ/サービスから参考にできるサイトになります。</p>
<p>昨今、デザイン的にはシンプル、フラットになり簡素化しているように見えますが、<br />
マテリアルデザインを基に、動きのあるサイトが多くなってきていると感じます。</p>
<p>ホバー、クリック、スワイプ&#8230;等ユーザーがアクションを起こした時、<br />
それに見合ったインタラクションをサイトの方でも実装することにより、<br />
しっかりそのアクションを認知させることでユーザーにとって使いやすいサービスにするためです。</p>
<p>webサイトの企画やデザインを作る時、どのような動きをつけようかと考えるため、<br />
いろんなサイト、アプリを見たりしますが、今回紹介するサイトは、その中でも有名なものをひとまとめにしてくれています。</p>
<p>動きの部分もしっかり動画で紹介してくれているので、このサイトを見るだけでどんな動きをしているのかが確認出来てしまいます。</p>
<p><a href="http://www.brianlovin.com/design-details" target="_blank">Design Details by Brian Lovin</a></p>
<p>スマホのサイトに参考にいいですね！</p>


有名なアプリ/サービスからデザインの細部の参考にできる「Design Details」

MarkDown記法でプレビュってみよう！

Three.jsでBoneをあつかう

XAMPPでルート相対パスを使うためにバーチャルホストを設定する

【WebGL】Three.jsでガラスのような表現

<p>プロトタイプやワイヤーフレームを作るのに便利なフリー素材を紹介します。</p>
<h2>Bootflat UI Kit</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-11205" src="/uploads-archive/2016/06/8bcc6f98dd2534ce9bba932db03f5e55-1024x481.png" alt="スクリーンショット 2016-06-21 11.03.27" width="1024" height="481" srcset="/uploads-archive/2016/06/8bcc6f98dd2534ce9bba932db03f5e55-1024x481.png 1024w, /uploads-archive/2016/06/8bcc6f98dd2534ce9bba932db03f5e55-300x141.png 300w, /uploads-archive/2016/06/8bcc6f98dd2534ce9bba932db03f5e55-768x361.png 768w, /uploads-archive/2016/06/8bcc6f98dd2534ce9bba932db03f5e55-228x107.png 228w, /uploads-archive/2016/06/8bcc6f98dd2534ce9bba932db03f5e55.png 1188w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
bootflatというbootstrapを使ったcssフレームワークでそのパーツがPSDとしてダウンロード出来ます。</p>
<p><a href="http://bootflat.github.io/free-psd.html" target="_blank">Bootflat UI Kit Free PSD Download &#8211; Bootflat</a></p>
<h2>UX Flowchart Cards</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-11206" src="/uploads-archive/2016/06/62277836681fdfa6525801eadabb7fb6.png" alt="スクリーンショット 2016-06-21 11.03.45" width="753" height="562" srcset="/uploads-archive/2016/06/62277836681fdfa6525801eadabb7fb6.png 753w, /uploads-archive/2016/06/62277836681fdfa6525801eadabb7fb6-300x224.png 300w, /uploads-archive/2016/06/62277836681fdfa6525801eadabb7fb6-228x170.png 228w" sizes="(max-width: 753px) 100vw, 753px" /><br />
なんと128枚ものタイプの画面とその他アイコンやフローを表現するための矢印もそろっています。<br />
メールアドレスを登録するとダウンロード出来ます。<br />
これをパワポなんかに貼っていくだけでwebサイトのフローチャートが簡単に作れてしまいますね！</p>
<p><a href="https://uiuxassets.com/assets/ux-flowchart-cards/" target="_blank">UX Flowchart Cards &#8211; UI/UX Assets</a></p>
<h2>Material Mockups</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-11207" src="/uploads-archive/2016/06/1732e5e88c3ac42606879d6bb4a07562.png" alt="スクリーンショット 2016-06-21 11.04.06" width="974" height="731" srcset="/uploads-archive/2016/06/1732e5e88c3ac42606879d6bb4a07562.png 974w, /uploads-archive/2016/06/1732e5e88c3ac42606879d6bb4a07562-300x225.png 300w, /uploads-archive/2016/06/1732e5e88c3ac42606879d6bb4a07562-768x576.png 768w, /uploads-archive/2016/06/1732e5e88c3ac42606879d6bb4a07562-228x171.png 228w" sizes="(max-width: 974px) 100vw, 974px" /><br />
スマホ用のECアプリのためのワイヤーフレームです。<br />
15のUI画面が揃っているので、たいていのECアプリのワイヤーフレームはこれだけで事足りそうな気がします。</p>
<p><a href="http://materialmockups.com/" target="_blank">Material Mockups</a></p>
<p>最近はこのようなフリー素材が多くモックアップを手早く見た目よく作成できるので、<br />
導線やコンテンツを考えるの力を注ぐ事ができそうです。</p>


プロトタイプ、ワイヤフレーム作成に便利なフリー素材

nino-eye-2.jpg

Three.jsによるWebGLで360度パノラマ表示

【WebGL】Three.jsを使ったWebGLに再挑戦

<p>私はこれまで、HTML＋CSSでテキストを組む場合で、<br />
左揃えを行う場合、</p>

		<div id="crayon-649540263e536258630715" 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">CSS</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;">
text-align: left;</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-649540263e536258630715-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-649540263e536258630715-1"><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">left</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>しか、方法がないと思っていました。<br />
この方法を使った場合、テキストの右側は文章によって<br />
がたがたになってしまったり、<br />
中途半端なところで折り返してしまったりして、<br />
あまり美しくない場合が多いのが悩みでした。</p>
<p>しかし、とあるサイトのCSSを調べていると、<br />
たまたま、以下の様な記述を見つけました。</p>

		<div id="crayon-649540263e53a607946156" 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">CSS</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;">
text-align: justify;
text-justify: inter-ideograph;</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-649540263e53a607946156-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263e53a607946156-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-649540263e53a607946156-1"><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">justify</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263e53a607946156-2"><span class="crayon-e ">text-justify</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">inter-ideograph</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>調べてみると、テキストを両端揃えをするための記述でした。<br />
しかも、すべての主要な最新ブラウザとIE8以上で利用できました。</p>
<p>↓こちらがDEMO</p>
<p><a class="demo" href="/demo/ninomiya/106/">DEMO</a></p>
<p>もっと早く知っていれば…と、恥ずかしながら今更ながらに気づきました。</p>
<p>今後は、どんどん利用していこうと思います。</p>

nino-eye-1.png

知らなかった…CSSでテキストの両端揃えが普通にできた

<p>お買い物好きな女性ならネットサーフィンしていて「あ！コレいいな！」そう思ったらいつの間にかポチっとしちゃいますよね。</p>
<p>私も<del datetime="2016-04-11T09:40:01+00:00">無駄に</del>買い物が好きで、スマホでネットをウロウロしてるとつい買ってしまう事が多々あります。</p>
<p>そんな買い物好きな女が特に買ってしまいそうになるLPサイトをご紹介します。</p>
<h2>可愛かったり、綺麗だったり、につい目が引かれる</h2>
<blockquote><p><a href="http://www.wacoal.jp/ribbonbra/" target="_balak"><br />
 ※ ワコール | リボンブラ</a></p></blockquote>
<p>PC<br />
<a href="/uploads-archive/2016/04/lp07-e1460444024990.jpg" rel="attachment wp-att-10350"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10350" src="/uploads-archive/2016/04/lp07-e1460444024990.jpg" alt="lp07" width="498" height="368" /></a></p>
<p>スクロールすると歩く赤ずきんちゃん<br />
<a href="/uploads-archive/2016/04/lp08-e1460444035384.jpg" rel="attachment wp-att-10351"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10351" src="/uploads-archive/2016/04/lp08-e1460444035384.jpg" alt="lp08" width="498" height="368" /></a></p>
<p>SP<br />
<a href="/uploads-archive/2016/04/lp09.jpg" rel="attachment wp-att-10352"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10352" src="/uploads-archive/2016/04/lp09.jpg" alt="lp09" width="414" height="740" srcset="/uploads-archive/2016/04/lp09.jpg 414w, /uploads-archive/2016/04/lp09-168x300.jpg 168w, /uploads-archive/2016/04/lp09-228x408.jpg 228w" sizes="(max-width: 414px) 100vw, 414px" /></a></p>
<p>スマホでもスワイプで赤ずきんちゃんが歩きます。<br />
下着なので完璧に女性をターゲットにしているデザインですね、可愛くてつい見入ってしまいます。このギミック自体も面白くて見ちゃいますね。</p>
<blockquote><p>
<a href="http://www.surusuru.jp/cha/lp/sc01/"><br />
　※ スルスル茶 | 新発売キャンペーン</a></p></blockquote>
<p>PC<br />
<a href="/uploads-archive/2016/04/lp01-e1460368916209.jpg" rel="attachment wp-att-10305"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10305" src="/uploads-archive/2016/04/lp01-e1460368916209.jpg" alt="lp01" width="498" height="364" srcset="/uploads-archive/2016/04/lp01-e1460368916209.jpg 498w, /uploads-archive/2016/04/lp01-e1460368916209-300x219.jpg 300w, /uploads-archive/2016/04/lp01-e1460368916209-228x167.jpg 228w" sizes="(max-width: 498px) 100vw, 498px" /></a></p>
<p>SP<br />
<a href="/uploads-archive/2016/04/lp02-1.jpg" rel="attachment wp-att-10309"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10309" src="/uploads-archive/2016/04/lp02-1.jpg" alt="lp02" width="419" height="741" srcset="/uploads-archive/2016/04/lp02-1.jpg 419w, /uploads-archive/2016/04/lp02-1-170x300.jpg 170w, /uploads-archive/2016/04/lp02-1-228x403.jpg 228w" sizes="(max-width: 419px) 100vw, 419px" /></a></p>
<p>「もしかして･･･30歳になって急に太った？？？」</p>
<p>言われたらかなり傷付くワード＝自分が気になっていること。こういった特定のターゲットを絞ったキャッチコピーについ「そうそう」と続きを見てしまいます。さらに畳みかけるように”管理栄養士が作った”なんて書かれていたらそれなりの効果を期待しちゃったり、この商品は安心だと思いますよね。</p>
<p>イラストも女性が好きそうなかわいいキャラクターがメインに来ていて、全体的に説明もザックリしていてシンプルにまとまっているので、怪しいサイト特有のごちゃごちゃ感が無く買いやすいです。</p>
<blockquote><p>
　<a href="http://blacklabel.suzuin.co.jp/"><br />
※ プレミアム印章専門店SUZUIN | 鈴印ブラックレーベル</a></p></blockquote>
<p>PC<br />
<a href="/uploads-archive/2016/04/lp10.gif" rel="attachment wp-att-10360"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10360" src="/uploads-archive/2016/04/lp10.gif" alt="lp10" width="498" height="367" /></a></p>
<p>SP<br />
<a href="/uploads-archive/2016/04/lp11.jpg" rel="attachment wp-att-10362"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10362" src="/uploads-archive/2016/04/lp11.jpg" alt="lp11" width="414" height="741" srcset="/uploads-archive/2016/04/lp11.jpg 414w, /uploads-archive/2016/04/lp11-168x300.jpg 168w, /uploads-archive/2016/04/lp11-228x408.jpg 228w" sizes="(max-width: 414px) 100vw, 414px" /></a></p>
<p>でっかい写真をバーン！テキストがずっらーーー！<br />
場所によってはテキストが見辛い部分がありますが、全体のイメージと写真にこだわっているみたいですね。<br />
説明文はあまり見えなくても雰囲気でつい持ちたくなってしまいます。</p>
<p>ちなみにお値段は大体２万円～</p>
<blockquote><p><a href="http://u-tokinoirodori.com//lp/campaign/"><br />
　※ オールインワンセラム | 季乃彩</a></p></blockquote>
<p>PC<br />
<a href="/uploads-archive/2016/04/lp03-e1460369799532.jpg" rel="attachment wp-att-10310"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10310" src="/uploads-archive/2016/04/lp03-e1460369799532.jpg" alt="lp03" width="498" height="370" /></a></p>
<p>SP<br />
<a href="/uploads-archive/2016/04/lp04.jpg" rel="attachment wp-att-10311"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10311" src="/uploads-archive/2016/04/lp04.jpg" alt="lp04" width="412" height="740" srcset="/uploads-archive/2016/04/lp04.jpg 412w, /uploads-archive/2016/04/lp04-167x300.jpg 167w, /uploads-archive/2016/04/lp04-228x410.jpg 228w" sizes="(max-width: 412px) 100vw, 412px" /></a></p>
<p>パッと見はごちゃついてますが、「数量限定」「初回限定価格」「本品お試しキャンペーン」など･･･すごくそそられるキーワードが沢山書かれていますね。なくなり次第終了とも書かれていますので、ついそれだけで買っちゃいそうになっちゃいます。<del datetime="2016-04-11T09:40:01+00:00">まあ、なくなることなんてないんだろうけど。</del></p>
<p>購入画面（一部）<br />
<a href="/uploads-archive/2016/04/lp05.jpg" rel="attachment wp-att-10315"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10315" src="/uploads-archive/2016/04/lp05.jpg" alt="lp05" width="419" height="740" srcset="/uploads-archive/2016/04/lp05.jpg 419w, /uploads-archive/2016/04/lp05-170x300.jpg 170w, /uploads-archive/2016/04/lp05-228x403.jpg 228w" sizes="(max-width: 419px) 100vw, 419px" /></a></p>
<p>今すぐ購入からはごちゃついているTOPと打って変わってシンプルな詳細ページ。実際に使用したお客様のレビューが見られるのはとってもいいですね。</p>
<h2>おまけ</h2>
<blockquote><p><a href="http://www.hatalike.jp/ct/edit/takashi/index.html" target="_blank"><br />
　※ はたらく臓器inたかし｜求人・転職情報サイト【はたらいく】</a></p></blockquote>
<p>ECサイトではないけれど、なにこれおもしろい</p>
<blockquote><p><a href="https://mediplus-orders.jp/static/lp/an01/1064680/lp52/f/" target="_blank"><br />
　※ 30日間返金キャンペーン実施中！肌環境底上げコスメ『メディプラスゲル』</a>（</p></blockquote>
<p>肌の賞味期限･･･？</p>
<blockquote><p><a href="http://www.collage-shop.jp/shop/pages/bk_lp_b.aspx" target="_blank"><br />
　※ 敏感肌だってエイジングケア | B.K.AGE | 持田ヘルスケア株式会社 持田製薬グループ</a></p></blockquote>
<p>どこにでもあるECサイトですが、手書きフォントを使われていると親近感というか誰かの感想なのかな･･･とちょっと気になると思いました。</p>
<h2>まとめ</h2>
<p>LPって見てるだけでも面白いですよね。今回まとめてみて私はデザインで買ってしまう傾向があるんだなと思いました。<br />
するする茶、買おうかな･･･</p>


女の私がつい買ってしまいそうになるECサイトのLPデザインはコレ

スマホに合ったステップリストをインラインSVGで

<p>「あらゆる Web ページを友達とともに即座にブラウジングできます。」</p>
<p>というキャッチコピーで、webページの共有が出来るサービスがいつの間にかFirefoxに追加されていました。</p>
<p>その名も「<a href="https://www.mozilla.org/ja/firefox/hello/" target="_blank">Firefox Hello</a>」。</p>
<p>skypeの画面共有みたいな感じでしょうか？</p>
<p>ブラウザにもしれっとアイコンが追加されていました。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10212" src="/uploads-archive/2016/04/726b7e2b9a87490fbc1e61b5bd9d4714.png" alt="スクリーンショット 2016-04-05 15.43.23" width="196" height="112" /></p>
<p>ニコちゃんマークみたいなやつです。</p>
<p>ログイン等は必要なく、Firefoxをインストールしていれば使えるようです。<br />
(相手がFirefoxを使っていなくてもできるとのこと！)<br />
※カメラやマイクがないと無理そうかも・・・</p>
<p>開始する方法は、<br />
<strong>・URLを相手に送る</strong><br />
<strong>・Facebookメッセージで送る</strong><br />
の2つで、アイコンをクリックすると、<br />
「このページを共有しますか？」的なメッセージが表示されるので、<br />
そちらをクリックすると以下の様な画面になります。</p>
<p>開始するときの画面はこちら↓<br />
<a href="/uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-1024x704.png" class="modal"><img decoding="async" class="alignnone size-large wp-image-10213" src="/uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-1024x704.png" alt="スクリーンショット 2016-04-05 15.49.38" width="640" srcset="/uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-1024x704.png 1024w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-300x206.png 300w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-768x528.png 768w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-228x157.png 228w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438.png 1221w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>webカメラでお互いを映しながら同じページを閲覧するようです。<br />
Skypeとはまた少し違う感じですね。</p>
<p>僕らの業界では結構webサイトを見ながらなんて事が多いかと思うので、<br />
もしかしたらskypeよりいいかもしれませんね。<br />
ただ、開始するのがskypeよりひと手間かかります。</p>
<p>これを使えば、遠隔で、<br />
webサイトの使い方を教えたり、<br />
一緒の旅行サイトを見たり、<br />
ECサイトみたり、<br />
ぐるなびとか食べログみたり、<br />
いろいろ同じものを見ながら決められそうですね！<br />
(skypeでも出来るか・・・)</p>
<p>今はまだBeta版みたいなので、今後どのように機能が追加されていくか楽しみですね！</p>
<p><a class="link" href="https://www.mozilla.org/ja/firefox/hello/" target="_blank">Firefox Hello — 友達と一緒に Web ブラウジング — Mozilla</a></p>


あらゆる Web ページを友達とともに即座にブラウジングできる「Firefox Hello」

<p>こちらの「Bootstrap Editor」はブラウザで使用できるエディタで、<br />
Bootstrapをベースにしたサイトを制作するのに適したツールになります。</p>
<p>このツール自体もBootstrapを元に作成されてますね！！</p>
<p>Bootstrap自体、CSSのフレームワークとして有名で比較的簡単に、カッコイイデザイン、レイアウトを実装することができるツールです。</p>
<p>ただし、Bootstrap自体の記述ルールみたいなものがあり、使いはじめるには少し学習しないといけません。</p>
<p>初心者やエンジニア向けのBootstrapですが(個人の見解です笑)、ちょっと手間がかかってしまいます。</p>
<p>しかし、この「Bootstrap Editor」は、ブラウザ上でコードの編集ができ、結果も右に即時反映されますので直ぐに使用することができます！！</p>
<p>さらに、テンプレートも用意されているのでそのまま作るのはもちろん、ローカルで作っているコードに、「Bootstrap Editor」で呼び出したテンプレートの一部を持ってきたりとかいろんな使い方ができますね。</p>
<h2>Bootstrapの使い方</h2>
<p><img decoding="async" src="/uploads-archive/2016/03/Bootstrap-Editor.jpg" alt="Bootstrap Editor" width="640" class="alignnone size-full wp-image-10125" srcset="/uploads-archive/2016/03/Bootstrap-Editor.jpg 994w, /uploads-archive/2016/03/Bootstrap-Editor-300x221.jpg 300w, /uploads-archive/2016/03/Bootstrap-Editor-768x566.jpg 768w, /uploads-archive/2016/03/Bootstrap-Editor-228x168.jpg 228w" sizes="(max-width: 994px) 100vw, 994px" /></p>
<p><a href="http://www.venezia-works.com/bst/index.html" target="_blank">Bootstrap Editor</a>を開き、「Let&#8217;s Start」ボタンを押します。</p>
<p>それだけでもう使えます！</p>
<p><img decoding="async" src="/uploads-archive/2016/03/Bootstrap-Editor2-1024x689.jpg" alt="Bootstrap Editor2" width="640" class="alignnone size-large wp-image-10126" srcset="/uploads-archive/2016/03/Bootstrap-Editor2-1024x689.jpg 1024w, /uploads-archive/2016/03/Bootstrap-Editor2-300x202.jpg 300w, /uploads-archive/2016/03/Bootstrap-Editor2-768x517.jpg 768w, /uploads-archive/2016/03/Bootstrap-Editor2-228x153.jpg 228w, /uploads-archive/2016/03/Bootstrap-Editor2.jpg 1268w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>あとはこの画面でLet&#8217;s コーディングです！！</p>
<h2>Bootstrapの機能</h2>
<p>主な機能は以下になります。</p>
<p><a href="#menu01">１．CODE</a><br />
エディタの色を選択（Emmet使用可能）</p>
<p><a href="#menu02">２．Template</a><br />
Bootstrapテンプレートを選択</p>
<p><a href="#menu03">3. Nomal(Theme)</a><br />
Bootstrapテンプレートの色(Theme)を選択</p>
<p><a href="#menu04">４．Live View</a><br />
編集中のCODEをプレビュー（PC,Tablet,Phone,CodeOnry）</p>
<p><a href="#menu05">５．Save/Open</a><br />
「Save」は編集中のデータを一時保存します。「Open」は保存データを再表示します。</p>
<p><a href="#menu06">６．Download</a><br />
編集中データをHTMLファイルダウンロード</p>
<h3 id="menu01">CODE</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/Bootstrap-Editor3-1024x714.jpg" alt="Bootstrap Editor3" width="640" class="alignnone size-large wp-image-10117" srcset="/uploads-archive/2016/03/Bootstrap-Editor3-1024x714.jpg 1024w, /uploads-archive/2016/03/Bootstrap-Editor3-300x209.jpg 300w, /uploads-archive/2016/03/Bootstrap-Editor3-768x536.jpg 768w, /uploads-archive/2016/03/Bootstrap-Editor3-228x159.jpg 228w, /uploads-archive/2016/03/Bootstrap-Editor3.jpg 1153w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
コードを書くスタイルを、Chrome,github,tommorrow_night_bright,dreamweaverから選択できます。</p>
<h3 id="menu02">Template</h3>
<p>テンプレートが予め用意されていますので、それを元にコーディングを開始することができます。<br />
テンプレートの一部分のパーツをコピーして使うという方法もいいですね！</p>
<p><img decoding="async" src="/uploads-archive/2016/03/ibLdlBsdRf.gif" alt="ibLdlBsdRf" width="640" class="alignnone size-large wp-image-10118" /></p>
<h3 id="menu03">Nomal(Theme)</h3>
<p>サイトに色（テーマ）を変更することができます。豊富に用意されています。<br />
<img decoding="async" src="/uploads-archive/2016/03/oQN8i8LUAg.gif" alt="oQN8i8LUAg" width="640"class="alignnone size-large wp-image-10119" /></p>
<p>ちなみに、<a href="https://bootswatch.com/">Bootswatch: Free themes for Bootstrap</a>のテーマを使用しているようです。テーマのサイトのプレビューをみるより、このエディタで切り替えた方が断然早くテーマの中身をチェックできますね！</p>
<h3 id="menu04">Live View</h3>
<p>左側でソースを編集し、その編集した結果が即時右側でプレビューとして表示されています。<br />
直感的に幅を変えられるのが素晴らしく、スマホ、PCのチェックもラクにできます！</p>
<p><a href="/uploads-archive/2016/03/9Gjh4CWqxM.gif" rel="attachment wp-att-10121"><img decoding="async" src="/uploads-archive/2016/03/9Gjh4CWqxM.gif" alt="9Gjh4CWqxM" width="640" class="alignnone size-large wp-image-10121" /></a></p>
<h3 id="menu05">Save/Open</h3>
<p>「Save」で今編集しているコードを一時保存します。<br />
「Open」で一時保存したコードを表示します。</p>
<p>ブラウザの「localstorage」に保存しているので、<br />
違うブラウザを使用すると保存されてないので注意！(当たり前か&#8230;)</p>
<h3 id="menu06">Download</h3>
<p>編集したhtmlをダウンロードします。<br />
bootstrap.htmlがダウンロードできます。</p>
<p>こんなに簡単に無料で使用できるツールはなかなかないと思います。（しかも日本製）<br />
おそらく今後もパワーアップしそうな予感がありますので、ますます期待です！！</p>
<p>Bootstrapを扱う方はぜひ使用してみると良いと思います！！</p>


無料かつログイン不要のブラウザエディタ「Bootstrap Editor」

<p>テクニカルクリエイターってご存じですか？？</p>
<p>2015年末から2016年頭にかけてサイバーエージェントさんで定義された新しい職種の名称のようです。</p>
<p><a href="http://ameblo.jp/shibuya/entry-12114099278.html" target="_blank">テクニカルクリエイター｜渋谷ではたらく社長のアメブロ</a></p>
<h2>テクニカルクリエイターとは？</h2>
<p>要は、エンジニアとデザイナーの両方の技術・仕事をする人達を呼ぶそうです。<br />
（プログラミングとデザインの両方の知識・技術を持ち合わせた人）</p>
<p>確かに最近は、その垣根がなくなりつつあり、webデザイナーといっても、<br />
ただデザインするだけでなく、コーディングはもちろん、wordpressの構築をも担当するようになっています。</p>
<p>その中で、なんと名乗ればいいのか困る時もあります。<br />
（僕自身もそんな感じで、いつも幅広くやってますと説明していました笑）</p>
<p>そういう時にこのような名称があるとちょっと説明しやすくなるかもしれません。</p>
<p>ただ、「フルスタックエンジニア」なんて言葉もありましたが浸透もいまいちだったので、<br />
(というかフルスタックエンジニアはフロントエンドとサーバサイドの技術を持った人に近いかも)<br />
この名称が定着するかはわかりません。</p>
<p>今回の「テクニカルクリエイター」はサイバーエージェントさん発信なのでもしかしたらこの名称が定着するようになるかもしれません。</p>
<p>こんなサイトもあります。<br />
（これはサイバーエージェントさんが発表する前からあったようです。偶然？？）</p>
<p><a href="http://technical-creator.com/" target="_blank" class="link">テクニカルクリエイター.com</a></p>
<p>このサイトの運営は、今では有名な「UI Crunch」の管理人の小島芳樹さんなので、こちらもどんどん浸透していく可能性は高いです。</p>
<p>テクニカルクリエイター関係ではこんなスライドも。</p>
<p><a href="http://www.slideshare.net/keisukeimura/ss-57090547" target="_blank">テクニカルクリエイターの憂鬱</a></p>
<p>うーん、今後どうなっていくんでしょうか？</p>
<p>この名称、奥さんに言ったら一言だけこう言われました。</p>
<p>「逆にださい」</p>
<p>なんの逆かはわかりませんが、あまりカッコイイ名称とは思えなかったようです笑</p>


テクニカルクリエイターという名称は定着するのだろうか？？

SVGを使った面白そうなテキストのアニメーションを再現してみました

<p>知り合いにimport.ioというスクレイピングツールといことを教えていただきました。</p>
<p><a href="https://www.import.io/" target="_blank" class="link">Import.io | Web Data Platform &amp; Free Web Scraping Tool</a></p>
<p>スクレイピングという言葉自体を知りませんでした。</p>
<blockquote><p>
ウェブスクレイピング（Web scraping）とは、ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと。ウェブ・クローラー(Web crawler) あるいはウェブ・スパイダー(Web spider)とも呼ばれる。 通常このようなソフトウェアプログラムは低レベルのHTTP（Hypertext Transfer Protocol）を実装することで、もしくはInternet ExplorerまたはMozilla FirefoxなどのWebブラウザを埋め込むことによって、人間によるWWWのブラウジングをシミュレートする。<br />
<a href="https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0">ウェブスクレイピング &#8211; Wikipedia</a>より
</p></blockquote>
<p>要は、サイトのデータを一括で情報を取得できるということでしょうか。<br />
例えばECサイトの商品の一覧ページの情報を取得したりとか&#8230;</p>
<h3>コンペナビで試してみた</h3>
<p>とりあえず、弊社の<a href="http://compe.sterfield.jp/" target="_blank">コンペナビ</a>で試してみました。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-1024x598.jpg" alt="import.io Magic  Web Data Platform &amp; Free Web Scraping Tool2" width="500"  class="alignnone size-large wp-image-9882" srcset="/uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-1024x598.jpg 1024w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-300x175.jpg 300w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-768x448.jpg 768w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-228x133.jpg 228w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2.jpg 1141w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
(一部ぼかしてます)</p>
<p>いい感じで取得出来ている感じです。<br />
CSVで保存したり、APIにしたりすることが出来るようです！</p>
<p>webサイトのリニューアルで「現行サイトのデータを持って来といて」なんて言われることがあるんですが、そういう時使えそうな感じがします。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Web

2016/08/03

2016/07/26

2016/07/14

2016/07/13

2016/07/06

2016/06/30

2016/06/29

2016/06/22

2016/06/22

2016/06/15

2016/06/01

2016/04/13

2016/04/06

2016/04/06

2016/03/30

2016/03/26

2016/03/26

2016/03/09