<p>海外のブログ、<a href="http://marketblog.envato.com/trends/best-worst-web-design-trends-2014/">The Best &amp; Worst Web Design Trends of 2014 &#8211; Market Blog</a><br />
こちらで2014年に流行ったwebデザイントレンドを紹介しています。</p>
<p>簡単に見出しだけ抽出しますと、<br />
以下のことを説明しています。</p>
<p>ベストトレンドとしては、<br />
・ミニマルなフラットデザイン<br />
・改善されたwebフォント<br />
・フルスクリーンの背景<br />
・レスポンシブデザインの改善</p>
<p>ワーストトレンドとしては、<br />
・モーダルウィンドウプロモーション<br />
・多すぎるソーシャルメディア<br />
・永遠につづくローディング画面<br />
・カスタマイズされたスクロールバー</p>
<p>もし、気になるものがあればブログを見てみてください<br />
（説明少なすぎてすみません・・・）</p>
<p>今年はなんといっても、<br />
フラットデザイン、ミニマルなデザインが流行りましたね。<br />
フラットデザイン自体はもう少し前ぐらいから出現してましたが、<br />
日本のwebサイトでグッと増えたのは、今年からだと思います。<br />
一年前と比べると、フラットでミニマルなサイトがかなり増えました！</p>
<p>今はフラットデザインをやるのに適した環境ですね！<br />
この流れがいつまで続くのかが気になるところです。</p>
<p>あと、上記にはなかったのですが、<br />
フラットデザインが流行したついでに、相性のよいシングルページ(縦長ページ)も多く見かけました。<br />
パララックス程のアニメーションはしていないのですが、多少スクロールと連動したアニメーションを取り入れたサイトが多かったように感じます。</p>
<h2>おまけ</h2>
<p>最近見かけた便利そうなサービスを紹介します。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6507" src="/uploads-archive/2014/12/Tridiv-CSS-3D-Editor-1024x563.jpg" alt="Tridiv  CSS 3D Editor" width="640" height="352" srcset="/uploads-archive/2014/12/Tridiv-CSS-3D-Editor-1024x563.jpg 1024w, /uploads-archive/2014/12/Tridiv-CSS-3D-Editor-300x164.jpg 300w, /uploads-archive/2014/12/Tridiv-CSS-3D-Editor-228x125.jpg 228w, /uploads-archive/2014/12/Tridiv-CSS-3D-Editor.jpg 1184w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://tridiv.com/">Tridiv | CSS 3D Editor</a><br />
CSSを使った3Dポリゴンを作成することができるwebサービスです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6508" src="/uploads-archive/2014/12/TypeWonder-Beta-1024x563.jpg" alt="TypeWonder - Beta" width="640" height="352" srcset="/uploads-archive/2014/12/TypeWonder-Beta-1024x563.jpg 1024w, /uploads-archive/2014/12/TypeWonder-Beta-300x164.jpg 300w, /uploads-archive/2014/12/TypeWonder-Beta-228x125.jpg 228w, /uploads-archive/2014/12/TypeWonder-Beta.jpg 1184w" sizes="(max-width: 640px) 100vw, 640px" /><br />
<a href="http://typewonder.com/">TypeWonder &#8211; Beta</a><br />
好きなサイトのフォントを、選んだフォントに変更できてしまうサービスです。<br />
いつか使う場面が来るかもしれません。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6506" src="/uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-1024x555.jpg" alt="Coolors - The super fast color palettes generator!" width="640" height="347" srcset="/uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-1024x555.jpg 1024w, /uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-300x162.jpg 300w, /uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-228x123.jpg 228w, /uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator.jpg 1199w" sizes="(max-width: 640px) 100vw, 640px" /><br />
<a href="http://coolors.co/ad7a99-b2cede-8cdfd6-6dc0d5-5a716a">Coolors &#8211; The super fast color palettes generator!</a><br />
5つの色を自動生成してくれ、スペースを押すとまた新たに5つの色を生成してくれます。</p>


2014年のベスト＆ワーストのwebデザイントレンド

<p><a class="link" href="http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/" target="_blank">jquery.adaptive-backgrounds.js</a></p>
<p><a href="http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/" target="_blank">jquery.adaptive-backgrounds.js</a>はimgの画像のドミナントカラーを調べて、</p>
<p>背景色にしてくれるjQueryのプラグインです。</p>
<p>写真に合わせて背景色を変えるデザインなどで使えそうです。</p>
<p>&nbsp;</p>
<p>ちなみにこちらのjQueryプラグインでは、色の取得にHTML5のCanvasを使っているため、</p>
<p>HTML5に対応したブラウザで動作します。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/ninomiya/57/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>使い方</h2>
<p><a href="https://github.com/briangonzalez/jquery.adaptive-backgrounds.js" target="_blank">こちら</a>からファイルをダウンロードし、htmlのheadでjqueryと一緒にJSファイルを読み込みます。</p>

		<div id="crayon-649540157eea3068449914" 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">HTML</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;head&gt;
・・・
&lt;script type="text/javascript" src="js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.adaptive-backgrounds.js"&gt;&lt;/script&gt;
・・・
&lt;/head&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-649540157eea3068449914-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-2">2</div><div class="crayon-num" data-line="crayon-649540157eea3068449914-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-4">4</div><div class="crayon-num" data-line="crayon-649540157eea3068449914-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-6">6</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-649540157eea3068449914-1"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-2"><span class="crayon-i ">・・・</span></div><div class="crayon-line" id="crayon-649540157eea3068449914-3"><span class="crayon-i "><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-1.11.1.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-4"><span class="crayon-i "><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.adaptive-backgrounds.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-649540157eea3068449914-5"><span class="crayon-i ">・・・</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-6"><span class="crayon-r ">&lt;/head&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>色を取得するターゲットとなるimg要素に「data-adaptive-background=&#8217;1&#8217;」を、</p>
<p>背景色を設定する親要素に「data-ab-css-background=&#8217;1&#8217;」を設定します。</p>

		<div id="crayon-649540157eea7595854631" 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">HTML</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;li class="image" data-ab-css-background='1'&gt;&lt;img src="images/spring1.jpg" alt="image" data-adaptive-background='1'&gt;&lt;/li&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-649540157eea7595854631-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-649540157eea7595854631-1"><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"image"</span><span class="crayon-h"> </span><span class="crayon-e ">data-ab-css-background</span>=<span class="crayon-s ">'1'</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/spring1.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image"</span><span class="crayon-h"> </span><span class="crayon-e ">data-adaptive-background</span>=<span class="crayon-s ">'1'</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>以下のコードでプラグインを実行します。</p>

		<div id="crayon-649540157eea9978137669" 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">JavaScript</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;">
$(function(){
	$.adaptiveBackground.run();
});</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-649540157eea9978137669-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea9978137669-2">2</div><div class="crayon-num" data-line="crayon-649540157eea9978137669-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-649540157eea9978137669-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea9978137669-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-i">adaptiveBackground</span><span class="crayon-sy">.</span><span class="crayon-e">run</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eea9978137669-3"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>取得した色の情報などは、以下のように記述することで取得が可能です。</p>

		<div id="crayon-649540157eeaa951081602" 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;">
$(function(){
	$.adaptiveBackground.run({
		success: function($img, data) {
			console.log("color-code: " + data.color);
		}
	});
});</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-649540157eeaa951081602-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-2">2</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-4">4</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-6">6</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-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-649540157eeaa951081602-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eeaa951081602-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-i">adaptiveBackground</span><span class="crayon-sy">.</span><span class="crayon-e">run</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-3"><span class="crayon-h">		</span><span class="crayon-i">success</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-i">img</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">data</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eeaa951081602-4"><span class="crayon-h">			</span><span class="crayon-i">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">"color-code: "</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-i">data</span><span class="crayon-sy">.</span><span class="crayon-i">color</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-5"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eeaa951081602-6"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-7"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>背景色に反映される色の data.color以外に、data.palette[0]〜data.palette[19]に画像からサンプリングした色が入っていますので、</p>
<p>こちらも合わせて使うと、もっとデザインの幅が広がるかもしれません。</p>
<p>&nbsp;</p>

写真のドミナントカラーを親要素の背景色にするjQueryプラグイン「jquery.adaptive-backgrounds.js」

<p>I would like to make a special mention about<a href="http://www.awwwards.com/44-useful-infographics-for-web-designers.html"> Awwards’ Infographics post for Web designers</a>. The post collects a total of 44 Infographics complete with a vast quantity of information that I am sure both newbie and experienced designers are going to find out something new to learn.</p>
<p>The topics go from Web Design history, anatomy of effective Web Design, SEO, Colour Theory and Psychology, Typography, UE, Design trends, RWD, etc.</p>
<p>One of the Infographics I found more interesting and not as usually commented as others, like Color theory or RWD, is the Infographic about <a href="http://trends.e-strategyblog.com/2014/08/09/eye-tracking-technology-web-design-infographic/20668">eye tracking technology in Web Design</a>, in other words, about how your eyes move on a website.</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.41.48.png"><img decoding="async" loading="lazy" class="alignnone wp-image-6184 " src="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.41.48-1024x400.png" alt="Screen Shot 2014-11-04 at 17.41.48" width="651" height="225" /></a></p>
<p>Some interesting tips As it shows the Infographic:</p>
<ul>
<li>Users maintain and “F/E” shaped viewing pattern</li>
</ul>
<p><a href="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.42.06.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-6185" src="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.42.06-253x300.png" alt="Screen Shot 2014-11-04 at 17.42.06" width="299" height="366" /></a></p>
<ul>
<li>69% of the users’ time is spent looking at the left half of a Webpage.</li>
<li>Logos and brands on top left side are remembered 58,4% more than other placement areas.</li>
<li>Users spend 80% of their time looking at information above the “fold” or the portion of the web page that doesn’t require any scrolling.</li>
</ul>
<p>&nbsp;</p>


Infographics for Web designers

<p>After approximately a year in public beta version, <a href="http://froont.com/">FROONT</a> version one came live this October 13<sup>th</sup>.</p>
<p><a href="http://froont.com/">FROONT</a>  is a tool for designers to <strong>speed up the process of protytype and design responsive web sites</strong>.</p>
<p>Take elements from other pages to build your own. Work in the environment you&#8217;re designing for – the browser. You have full control over desktop and mobile layouts, which are responsive from the start. Deliver fully working code without writing it. Connect it to the web, or simply zip the code and send to your client or developer.</p>
<p>&nbsp;</p>
<p><iframe loading="lazy" width="500" height="281" src="//player.vimeo.com/video/95264559" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p><a href="http://vimeo.com/95264559">Intro to FROONT</a> from <a href="http://vimeo.com/froont">Froont</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
<p>In other words, rather than designing in a page layout program or designing in Photoshop, designers can actually work right in the browser thanks to Froont’s pre-existing <a href="http://techcrunch.com/2013/05/06/froont/">browser-based visual editor</a>. You can explore FROONT web designs library and get inspired or literally take elements from pages you like to build your own.</p>
<p>This tools allows designers to actually build for various layouts at the same time. So any time of your design process you can check how your design looks in various devices: PC, tablet screen, phone screen&#8230;making much faster the process to build for different environments.</p>
<p><a href="/uploads-archive/2014/10/froont-editor-595x329.jpg"><img decoding="async" loading="lazy" class="wp-image-6082 size-full aligncenter" src="/uploads-archive/2014/10/froont-editor-595x329.jpg" alt="froont-editor-595x329" width="595" height="329" srcset="/uploads-archive/2014/10/froont-editor-595x329.jpg 595w, /uploads-archive/2014/10/froont-editor-595x329-300x165.jpg 300w, /uploads-archive/2014/10/froont-editor-595x329-228x126.jpg 228w" sizes="(max-width: 595px) 100vw, 595px" /></a></p>
<p>&nbsp;</p>
<p>The usual way of designing websites is that the design of the website is given to the developer, this approach however, can involve a lot of unnecessary back and forth as the design gets lost in translation. The responsive designs of FROONT, built using HTML/CSS and hosted in the cloud, can be viewed and shared instantly in a web browser, on any device being targeted. And when it’s time to hand off the design to a developer, instead of a static PNG file or something similar, in theory they’re given “nice, clean HTML/CSS or the ‘face’ of the website already made,” says the company.</p>
<p>Froont isn’t so much aiming at simplifying coding but providing better tools for design. It can be used for production, however, designs usually need to be customised in several ways upon client requests, but it is definitely a good starting point.</p>
<p>&nbsp;</p>
<p>In some ways it’s similar to how something like Github works for raw code, and the wider open source movement as a whole, but for visual web designers. As Froont co-founder and CEO Sandijs Ruluks says “The same applies for Github, where people are embracing the community and reuse code made by others. The interesting part is that open-sourced coding is now perceived as something totally normal and its benefits can’t be denied. Open-sourced design on the other hand, isn’t there yet, although we see the excitement around it”.</p>
<p>&nbsp;</p>
<p>Pages created by non-paying users are always public and can be cloned, edited and reused by others. If you want to keep your work private you pay a subscription. Or, as Ruluks puts it, “for free you pay with sharing, for privacy you pay with money”. Here you have the pricing list.</p>
<p><a href="/uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38.png"><img decoding="async" loading="lazy" class="wp-image-6085 aligncenter" src="/uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-1024x412.png" alt="Screen Shot 2014-10-21 at 17.28.38" width="619" height="249" srcset="/uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-1024x412.png 1024w, /uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-300x120.png 300w, /uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-228x91.png 228w" sizes="(max-width: 619px) 100vw, 619px" /></a></p>
<p>&nbsp;</p>
<p>Actually FROONT is not the only tool to create professional Responsive Website without code, but it is the only &#8220;free&#8221; version.</p>
<p>There&#8217;s also <a href="https://webflow.com/">Webflow</a>, <a href="https://creative.adobe.com/products/reflow">Adobe Edge Reflow</a> and <a href="http://macaw.co/">Macaw </a>. If you want to read more about the topic you might like to <a href="http://www.awwwards.com/4-tools-that-enable-small-town-designers-to-sell-an-idea-to-companies-like-coca-cola.html">read this post of Awwwards.</a></p>


FROONT:  Sharing Responsive Web Design As Easy As Sharing Code

<p>I was talking last week about <a href="http://www.awwwards.com/">AWWWARDS</a>, one of the most popular online awards that recognise the talent and effort of the best web designers, developers and agencies in the world.</p>
<p>Awwwards promise to be the meeting point where web professionals from across the world can come to find inspiration, to debate and share knowledge and experience.</p>
<p>Indeed they can proclaimed themselves as the <a href="http://www.awwwards.com/awwwards-the-most-visited-online-awards-platform-in-the-world.html">“The most visited online awards platform in the world”</a>. Awwwards recently broke the 2,000 barrier on <strong>Alexa</strong> and it is currently ranked at 1,919.</p>
<p>Worth a check, their most prestigious peers and competitors ranking is respectively: The <a href="http://www.webbyawards.com/">Webby Awards </a>(21,128), The <a href="http://www.thefwa.com/">FWA </a>(25, 943) and other important awards sites such as <a href="http://www.dandad.org/">D&amp;AD Awards</a>, <a href="http://fitc.ca/awards/">Fitc</a> and <a href="https://thenetawards.com/">The Net Awards.</a> <em>(Source: Alexa 2014).<a style="font-style: normal;" href="/uploads-archive/2014/10/awwwards-statistics-2015.png"><br />
</a></em></p>
<p><a href="/uploads-archive/2014/10/awwwards-statistics-2015.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5956 " src="/uploads-archive/2014/10/awwwards-statistics-2015.png" alt="awwwards-statistics-2015" width="649" height="482" srcset="/uploads-archive/2014/10/awwwards-statistics-2015.png 938w, /uploads-archive/2014/10/awwwards-statistics-2015-300x222.png 300w, /uploads-archive/2014/10/awwwards-statistics-2015-228x169.png 228w" sizes="(max-width: 649px) 100vw, 649px" /></a></p>
<p><a href="http://www.awwwards.com/blog/"><strong>BLOG </strong></a></p>
<p>One of the things I like the most in Awwwards it&#8217;s the blog, as I think is a good resource to keep up with the web/UI/UX  trends, top web design topics, tutorials, events and specially the latest tools for web-designers.</p>
<p><a href="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5955 " src="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22-1024x491.png" alt="Screen Shot 2014-10-07 at 16.15.22" width="644" height="309" srcset="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22-1024x491.png 1024w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22-300x144.png 300w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.15.22-228x109.png 228w" sizes="(max-width: 644px) 100vw, 644px" /></a></p>
<p><strong><a href="http://www.awwwards.com/awwwards-interviews-simon-collison.html">INTERVIEWS</a></strong></p>
<p>In the blog you&#8217;ll find a couple of interviews as well. This one I picked features Keitaro Suzuki,<span style="color: #313131;"> Art Director and Head of Web Design, UI, UX at </span><a style="color: #3c948b;" href="http://www.shiftbrain.co.jp/">ShiftBrain</a><span style="color: #313131;">, Japan, who explains about the design scene in Japan, and where he thinks the web will take us in a few years&#8217; time.</span></p>
<p><iframe loading="lazy" width="500" height="281" src="//player.vimeo.com/video/99006791" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p><strong><a href="http://www.awwwards.com/events/">EVENTS</a></strong></p>
<p>You can also keep updated with the latest events of the industry happening worldwide. Currently there is none happening soon in Japan, but on November 5th there&#8217;s an event about User Experience:<a href="http://www.awwwards.com/events/ux-futures-summit-2014.html"> UX Futures Summit 2014</a> which is online, no travel hassle!.</p>
<p><a href="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59.png"><img decoding="async" loading="lazy" class="wp-image-5957 alignleft" src="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59.png" alt="Screen Shot 2014-10-07 at 16.51.59" width="637" height="218" srcset="/uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59.png 2382w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59-300x102.png 300w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59-1024x350.png 1024w, /uploads-archive/2014/10/Screen-Shot-2014-10-07-at-16.51.59-228x78.png 228w" sizes="(max-width: 637px) 100vw, 637px" /></a></p>
<p>&nbsp;</p>


AWWWARDS : The web awards for design, creativity and innovation

<p><a href="http://usepanda.com/">Panda</a>  is the fastest way to get your daily design inspiration and news. This website (or Chrome extension, as you prefer) helps you keep up with industry news and inspiration from a variety of sources in one interface. From the moment you installed it, Panda is going to appear every time you open a new tab.</p>
<p>It can likely fit well with Web Workers of all stripes, but it is probably more oriented to front-end designers.</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5899 " src="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-1024x549.png" alt="Panda" width="621" height="333" srcset="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-1024x549.png 1024w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-300x160.png 300w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.10.28-228x122.png 228w" sizes="(max-width: 621px) 100vw, 621px" /></a></p>
<p>On the left hand side of the interface we have Panda’s news feeds playing the latest and most popular info from Hacker News, Designers News, Growth Hackers among others (classified by popular or latest).</p>
<p>On the right you can get some visual inspiration, featuring acclaimed sites like : <a href="http://www.awwwards.com/">Awwwards</a> , <a href="https://dribbble.com/">Dribbble</a> and <a href="https://www.behance.net/">Behance</a> .</p>
<p><a href="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5903 " src="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-1024x546.png" alt="Panda" width="619" height="330" srcset="/uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-1024x546.png 1024w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-300x160.png 300w, /uploads-archive/2014/09/Screen-Shot-2014-09-30-at-17.54.43-228x121.png 228w" sizes="(max-width: 619px) 100vw, 619px" /></a></p>
<p>&nbsp;</p>
<p>The overall goal is to filter the content from around the web and present it nicely, without having to click around to countless websites. Never miss anything, again.</p>
<p>&nbsp;</p>
<p>Panda doesn’t allow users to submit their own sources. Instead, co-founder William Channer, explains that the focus is on quality not customization. By sourcing sites where the community has already voted on what’s on trend.</p>
<p>&nbsp;</p>
<p>Panda is nicely done and is probably worth a bookmark.</p>
<p>&nbsp;</p>


PANDA: Relaxed Buzzfeed for Web Design

OpenStreetMapを使ってみた

<p>There are a ton of free Chrome extensions to help make your life easier.</p>
<p>In my eagerness to find good resources and tools for web design I have collected some of them. I hope you find these tools useful and help you get better results on your designs.</p>
<p>&nbsp;</p>
<p><a title="What a font" href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm" target="_blank"><strong>What a font</strong></a></p>
<p>Users: 259.649 ; Rate: 4.4</p>
<p><a href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm"><img decoding="async" loading="lazy" class="alignnone  wp-image-5561" src="/uploads-archive/2014/08/images.jpeg" alt="images" width="398" height="248" srcset="/uploads-archive/2014/08/images.jpeg 284w, /uploads-archive/2014/08/images-228x142.jpeg 228w" sizes="(max-width: 398px) 100vw, 398px" /></a></p>
<p>It is an easy way to identify fonts on websites.</p>
<p>With this extension, you could inspect web fonts by just hovering on them. This tool identifies the font faster than “Stylifyme”, which I previously posted. “What a font” is that simple and elegant.</p>
<p>&nbsp;</p>
<p><a title="Page Ruler" href="https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn" target="_blank"><strong>Page Ruler</strong></a></p>
<p>Users: 149.326 ; Rate: 4.02</p>
<p><a href="https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn"><img decoding="async" loading="lazy" class="alignnone  wp-image-5562" src="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-14.05.39-300x155.png" alt="Screen Shot 2014-08-19 at 14.05.39" width="404" height="209" srcset="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-14.05.39-300x155.png 300w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-14.05.39-1024x532.png 1024w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-14.05.39-228x118.png 228w" sizes="(max-width: 404px) 100vw, 404px" /></a></p>
<p>This tool allows you to draw a ruler to get pixel dimensions and positioning, and measure elements on any web page. It quickly displays the width, height and position.</p>
<p>The Keyboard shortcut is: Alt + P (For enable/disable page ruler).</p>
<p>&nbsp;</p>
<p><a title="Awesome Screenshot" href="https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce" target="_blank">Awesome Screenshot</a></p>
<p>Users: 1.280.032 ; Rate: 4.73</p>
<p><iframe loading="lazy" width="500" height="375" src="http://www.youtube.com/embed/MUVfhSg7-yE?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>Not only allows you to capture the whole page or any portion of it, it also lets you annotate screenshot, blur sensitive info and upload and share content with just one-click.</p>
<p>I would advice to wait until the whole page is uploaded, otherwise is not going to capture properly the site.</p>
<p>* I mentioned in previous post “Screen Capture (by Google)” but it seems it is not working anymore with the latest versions of Chrome.</p>
<p>&nbsp;</p>
<p><a title="Image Downloader" href="https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj" target="_blank"><strong>Image Downloader</strong></a></p>
<p>Users: 168.690 ; Rate: 3.98</p>
<p><a href="https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj"><img decoding="async" loading="lazy" class="alignnone  wp-image-5571" src="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.06.16-300x151.png" alt="Screen Shot 2014-08-19 at 17.06.16" width="414" height="208" srcset="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.06.16-300x151.png 300w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.06.16-1024x517.png 1024w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.06.16-228x115.png 228w" sizes="(max-width: 414px) 100vw, 414px" /></a></p>
<p>Browse and download images on a web page.</p>
<p>If you need to bulk download images from a web page, with this extension you can see all the images that the page contains. When you press the “Download” button, all selected images are saved to the default download directory of Chrome. If you don’t have one, you will have to manually choose the save location for each image.</p>
<p>&nbsp;</p>
<p><a title="Pin Search" href="https://chrome.google.com/webstore/detail/pin-it-button/gpdjojdkbbmdfjfahjcgigfpmkopogic" target="_blank"><strong>Pin Search</strong></a></p>
<p>Users: 2.371.113 ; Rate: 3.66</p>
<p><a href="https://chrome.google.com/webstore/detail/pin-it-button/gpdjojdkbbmdfjfahjcgigfpmkopogic"><img decoding="async" loading="lazy" class="alignnone  wp-image-5572" src="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.10.09-300x150.png" alt="Screen Shot 2014-08-19 at 17.10.09" width="406" height="203" srcset="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.10.09-300x150.png 300w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.10.09-1024x512.png 1024w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.10.09-228x114.png 228w" sizes="(max-width: 406px) 100vw, 406px" /></a></p>
<p>This extension helps you harness the power of Google Search simply using any old image you find on Pinterest. You can use this to track down all sites showing that image, to find more info about the person behind the image, to search for similar images… A surprisingly priceless tool.</p>
<p>&nbsp;</p>
<p><a title="Evernote web clipper" href="https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc" target="_blank"><strong>Evernote web clipper</strong></a></p>
<p>Users: 3.324.994 ; Rate: 4.68</p>
<p><iframe loading="lazy" width="500" height="281" src="http://www.youtube.com/embed/QyuAn1Z_7uM?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>Use the Evernote extension to save things you see on the web into your Evernote account.</p>
<p>Evernote Web Clipper is the easiest way to save, mark up and share anything you see online. From clipping pages to taking and annotating screenshots, it lets you capture everything, then access it from anywhere.</p>
<p>Although we might not use it within Sterfield, I think it can be very helpful when it comes to take note of the changes required by the client.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>If you want to keep updated with extensions, here is a website that review chrome extensions and filter the most popular ones:</p>
<p><a href="http://www.extensionaires.com/">http://www.extensionaires.com/</a></p>


Great extensions for Web designers:

<p>I have gathered together some interesting tools, that i found out to be really useful when it comes to get an overview of the style guide of other great websites.</p>
<p><strong><a href="http://www.wirify.com">Wirify</a></strong></p>
<p><a href="/uploads-archive/2014/08/Wirify.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-5408" alt="Wirify" src="/uploads-archive/2014/08/Wirify-300x173.png" width="400" height="273" /></a></p>
<p>The first tool will help you to see the internal structure of a website, to get inspired by the layouts of other well designed sites, turning any website you like to a wireframe, with just one click.</p>
<p>I would recommend to wait until the whole page is completely loaded before you attempt to “wirify” it. To return to the original page simply click anywhere on the wireframe.</p>
<p>The best way to keep the wireframe and use it afterwards is to save the whole page as an image, using a browser add-on or extension, like the following ones:</p>
<ul>
<li><a title="Download Google Chrome Screen Capture extension by Google" href="https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg"> Screen Capture extension</a> for Google Chrome</li>
</ul>
<p>&nbsp;</p>
<ul>
<li><a title="Download Screengrab Firefox Add-on by Andy M" href="https://addons.mozilla.org/en-US/firefox/addon/1146/"> Screengrab add-on</a> for Firefox.</li>
</ul>
<p>&nbsp;</p>
<p>Check how Wirify works in this video:</p>
<p><iframe loading="lazy" width="500" height="375" src="http://www.youtube.com/embed/XgzPHFRx-xM?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p><b> </b></p>
<p><strong><a href="http://stylifyme.com/">Stylifyme</a></strong></p>
<p><a href="/uploads-archive/2014/08/Stylifyme.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-5409" alt="Stylifyme" src="/uploads-archive/2014/08/Stylifyme-300x186.png" width="400" height="286" /></a></p>
<p>Stylifyme was created to help designers gain an overview of the style guide of a site, including colours, fonts, sizing and spacing. Just copy the link of any particular site you like, and simply paste it in Stylifyme site and you will get the results in a couple of seconds.</p>
<p><b> </b></p>
<p><strong><a href="http://lokeshdhakar.com/projects/color-thief/">Color Thief</a></strong><b> </b></p>
<p><a href="/uploads-archive/2014/08/Color-thief.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-5410" alt="Color thief" src="/uploads-archive/2014/08/Color-thief-300x221.png" width="400" height="321" /></a></p>
<p>This simple tool helps you to grab the colour palette from an image.</p>
<p>Give it a try, scroll down the site and drag an image inside, Colour thief is going to reveal the dominant colour on top and the full colour palette.</p>


Visual tools for web designers

<p>In the age of information overload&#8230;<a href="https://dragdis.com">Dragdis </a>is the ultimate bookmarking tool that pulls it all together.</p>
<p>This extension helps you curate and organize your resources as soon as you come across them thanks to an extremely simple sidebar.</p>
<p>Launched early March this year, Dragdis works by installing browser extension that adds this bookmarking functionality when you need it.</p>
<p>It goes without saying that there are plenty of tools and utilities, which do this job, like Evernote, Pinterest, Springpad, Finland’s Kippt and Pocket. But none of them focus on easing the process, most of the bookmarking tools you need to do a lot of actions to save anything. However with Dragdis all you need to do is simply drag and drop any link, text, image or video into a folder in the Dragdis bar that appears on the right side of your browser once you start dragging. Very neat.</p>
<p>Once in Dragdis, everything is stored in the cloud. They currently support Chrome, Safari and Firefox. You can have access to your selected apps too, like Facebook, Twitter, Dropbox, Google Drive, Evernote and Pinterest, for example.</p>
<p>The Lithuanian-based startup was founded back in 2012 by first-time entrepreneurs, Domas Sabockis, Karolis Malcevičius and Eugenijus Jusas. Sabockis explains he got the idea for the service while working in an ad agency as a creative, where he was constantly losing images, videos, links he found on the internet. After trying different tools and not finding one he really liked, he decided to quit his job to build Dragdis.</p>
<p>Check out this Dragdis video and see it in action.</p>
<p>&nbsp;</p>
<p><iframe loading="lazy" width="560" height="315" src="//www.youtube.com/embed/HLEAA_tIpbY" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<p>Interested users can sign up <a href="https://dragdis.com/">here</a>.</p>
<p>What do you think of this simple application?</p>


Dragdis:　The ultimate Bookmarking service

css.jpg

意外に知らなかったCSSの「content」プロパティの使い方

<p>googleが新たなデザインを提唱しているのが耳に入ったので、<br />
それを紹介します。</p>
<p><a href="http://www.google.com/design/#resources" target="_blank">Google Design</a></p>
<p><a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Introduction &#8211; Material Design &#8211; Google design guidelines</a></p>
<p>Material Designという名称でガイドラインが用意されているのですが、<br />
まぁパッと見、フラットデザインに近しい印象があります。</p>
<p>Material というと、「素材,材料,物質」という意味があるように、<br />
かなりざっくりいうと、<br />
1.デザイン要素は現実の物のメタファーを用い、<br />
2.わかりやすく意図的な色使い、グラフィック、タイポグラフィ、<br />
3.意味のあるアニメーションを用いましょう<br />
という感じかと思います。</p>
<p>項目は以下のようになっています。</p>
<p>・アニメーション<br />
・スタイル<br />
・レイアウト<br />
・コンポーネント<br />
・パターン<br />
・ユーザビリティ<br />
・リソース</p>
<p>かなり事細かに説明があり、<br />
原則から始まり、レイアウト、スタイル、コンポーネント等には、<br />
これはOK,これはダメといった指示まであります。<br />
テンプレートも用意されています。</p>
<p>スタイルの項目には、カラーやフォントについての記述があるのですが、<br />
こちらも、リソースとして、カラーパレットやフォントデータを提供してくれています。</p>
<p>細かいことはやはりサイトを見て感じてもらう必要があるかと思います。<br />
今後のデザインを作用しうるものになるかもしれないので、一読の必要性ありかもしれません。</p>
<p>といってもあまりにも従いすぎると、均一したデザインになってしまいますね。<br />
それがGoogleの狙いなのかもしれませんが。</p>
<p><a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank" class="link">Introduction &#8211; Material Design &#8211; Google design guidelines</a></p>


Googleが新たに提唱しているMaterial Design

<p>webサイトを作っていると、バナーを作成する機会というのは少なからず発生します。</p>
<p>私は、バナー作成が正直ちょっと苦手で、webのデザインからしかやってないせいか、グラフィックの領域のような気がしてしまい、いつも悩まされています。</p>
<p>そんな時は、やはり、他のバナーは一体どんな感じなのか？？</p>
<p>を知るのが大切だと思います。<br />
goole画像検索しても出てきますが、バナーを集めたサイトをご紹介させていただきます。</p>
<h2>バナーデザイン・サンプルデータベース</h3>
<p><a href="http://aka-design.sub.jp/bd/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-5180" alt="バナーデザイン・サンプルデータベース｜ホームページ作成 AKAIRO株式会社（アカイロ）" src="/uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-1024x566.jpg 1024w, /uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-300x165.jpg 300w, /uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-228x126.jpg 228w, /uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a><br />
<a class="link" href="http://aka-design.sub.jp/bd/" target="_blank">バナーデザイン・サンプルデータベース｜ホームページ作成 AKAIRO株式会社（アカイロ）</a></p>
<p>&nbsp;</p>
<h2>バナーデザインアーカイブ</h3>
<p><a href="http://banner.keizine.net/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-5181" alt="バナーデザインアーカイブ｜バナーのデザインをまとめてチェック！" src="/uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-1024x566.jpg 1024w, /uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-300x165.jpg 300w, /uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-228x126.jpg 228w, /uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a><br />
<a class="link" href="http://banner.keizine.net/" target="_blank">バナーデザインアーカイブ｜バナーのデザインをまとめてチェック！</a></p>
<p>&nbsp;</p>
<h2>バナーデザインギャラリー</h3>
<p><a href="http://www.banner-design-gallery.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-5182" alt="バナーデザインギャラリー  Banner Design Gallery" src="/uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-1024x566.jpg 1024w, /uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-300x165.jpg 300w, /uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-228x126.jpg 228w, /uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a><br />
<a class="link" href="http://www.banner-design-gallery.com/" target="_blank">バナーデザインギャラリー | Banner Design Gallery</a></p>
<p>&nbsp;</p>
<h2>バナーデザイン専門ギャラリーサイト レトロバナー</h3>
<p><a href="http://retrobanner.net/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-5183" alt="バナーデザイン専門ギャラリーサイト  レトロバナー" src="/uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-1024x566.jpg 1024w, /uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-300x165.jpg 300w, /uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-228x126.jpg 228w, /uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a><br />
<a class="link" href="http://retrobanner.net/" target="_blank">バナーデザイン専門ギャラリーサイト | レトロバナー</a></p>
<p>&nbsp;</p>
<p>他にも作るコツ等を説明してくれているブログも紹介します！</p>
<p><a href="http://www.find-job.net/startup/tips-of-banner">有名企業の事例から学ぶ！高品質なバナー広告を作るための「コツ＆レイアウト」集 | Find Job ! Startup</a></p>
<p>&nbsp;</p>
<p><a href="http://nanapi.co.jp/blog/2013/10/02/make-banner-speedy/">新人必見！倍速かつ高品質なバナーを作るためのコツを全公開します | nanapi TechBlog</a></p>
<p>&nbsp;</p>
<p><a href="http://liskul.com/banner_layout-1143">勝てるバナーレイアウト20選！│レイアウトに悩んだ時の虎の巻</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ささってかっこよくバナー作れるようになりたいですね・・・</p>


バナー作成に困った時に見たいサイト7選

<p>本日の日経朝刊に、シャープがどんな形にもできる液晶パネルを開発、との記事があった。</p>
<p>サンプルで載っていたのはこんな感じ。</p>
<p><a href="/uploads-archive/2014/06/Free_Form_Display1_140617_588x.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-5108" alt="Free_Form_Display1_140617_588x" src="/uploads-archive/2014/06/Free_Form_Display1_140617_588x.jpg" width="588" height="441" srcset="/uploads-archive/2014/06/Free_Form_Display1_140617_588x.jpg 588w, /uploads-archive/2014/06/Free_Form_Display1_140617_588x-300x225.jpg 300w, /uploads-archive/2014/06/Free_Form_Display1_140617_588x-228x171.jpg 228w" sizes="(max-width: 588px) 100vw, 588px" /></a></p>
<p>記事によると、曲線的なラインをつけたり、穴を空けたりすることも可能だという。</p>
<p>&nbsp;</p>
<p>真ん中のやつが全部モニタになっていたり</p>
<p><a href="/uploads-archive/2014/06/1.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-5126" alt="1" src="/uploads-archive/2014/06/1.png" width="656" height="328" srcset="/uploads-archive/2014/06/1.png 656w, /uploads-archive/2014/06/1-300x150.png 300w, /uploads-archive/2014/06/1-228x113.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>ハンドル内がモニタになる可能性もある。</p>
<p><a href="/uploads-archive/2014/06/2.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-5124" alt="2" src="/uploads-archive/2014/06/2.png" width="656" height="328" srcset="/uploads-archive/2014/06/2.png 656w, /uploads-archive/2014/06/2-300x150.png 300w, /uploads-archive/2014/06/2-228x113.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>あとは丸いモニタはいろんなところで出てくるかもしれない。</p>
<p><a href="/uploads-archive/2014/06/3.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-5125" alt="3" src="/uploads-archive/2014/06/3-290x300.png" width="290" height="300" srcset="/uploads-archive/2014/06/3-290x300.png 290w, /uploads-archive/2014/06/3-228x235.png 228w, /uploads-archive/2014/06/3.png 519w" sizes="(max-width: 290px) 100vw, 290px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>おそらく、ばらばら過ぎて対応しきれないのでデザインとしては今まで通りでよいかと思われるが、</p>
<p>特定のシチュエーションでの閲覧が多いと予想される場合はあるかもしれないのでメモ。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


四角形だけじゃない、これからのモニタとWebデザインの形

<p>ECサイトなどでは、</p>
<p>新商品や人気の商品、優先的に売りたい商品などを知らせるための手段として、</p>
<p>「おすすめ」や「売れてます！」といった文句の書かれた<strong>アイキャッチアイコン</strong>が度々使われます。</p>
<p>何気なく目にするものですが、効果は大きく、</p>
<p>商品を目立たせるだけでなく、</p>
<p>ECサイト以外でもユーザーが迷わないようにするためにも使われる、重要な要素です。</p>
<p>&nbsp;</p>
<p>今回このアイキャッチアイコンで、よく使われるデザインをまとめてみました。</p>
<p>&nbsp;</p>
<h3>シンプル系</h4>
<p><img decoding="async" loading="lazy" title="文字を対象に添える" alt="文字を対象に添える" src="/uploads-archive/2014/06/icon01.jpg" width="240" height="240" /></p>
<p>文字を対象に添える</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" title="四角で囲う" alt="四角で囲う" src="/uploads-archive/2014/06/icon02.jpg" width="240" height="240" /></p>
<p>四角で囲う</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" title="円で囲う" alt="円で囲う" src="/uploads-archive/2014/06/icon03.jpg" width="240" height="240" /></p>
<p>円で囲う</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" title="バクダンで囲う" alt="バクダンで囲う" src="/uploads-archive/2014/06/icon04.jpg" width="240" height="240" /></p>
<p>バクダンで囲う</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" title="吹き出しで囲う" alt="吹き出しで囲う" src="/uploads-archive/2014/06/icon05.jpg" width="240" height="240" /></p>
<p>吹き出しで囲う</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" title="三角で囲い、端におく" alt="三角で囲い、端におく" src="/uploads-archive/2014/06/icon06.jpg" width="240" height="240" /></p>
<p>三角で囲い、端におく</p>
<p>&nbsp;</p>
<h3>装飾系</h4>
<p><img decoding="async" loading="lazy" title="帯をつける" alt="帯をつける" src="/uploads-archive/2014/06/icon07.jpg" width="240" height="240" /></p>
<p>帯をつける(斜め)</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" title="帯をつける(水平)" alt="帯をつける(水平)" src="/uploads-archive/2014/06/icon08.jpg" width="240" height="240" /></p>
<p>帯をつける(水平)</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" title="リボンをつける" alt="リボンをつける" src="/uploads-archive/2014/06/icon09.jpg" width="240" height="240" /></p>
<p>リボンをつける</p>
<p>&nbsp;</p>
<p>これらの場所を変えてみたり、</p>
<p>テクスチャ、グラデーション、シャドウなどの組み合わせを変えたりして、</p>
<p>よりよいものを見つけたいです。</p>


アイキャッチアイコンのパターンをまとめてみました

<p>webデザイン力ってどうやったらあがるだろうかと、制作するたびに思わされますが、</p>
<p>そんな悩みを少し解決してくれるような記事達と出会いましたので、ご紹介させていただきます。</p>
<p>&nbsp;</p>
<p>まずは一気にご紹介させていただきます！！</p>
<p>&nbsp;</p>
<p><a href="http://www.webcreatorbox.com/tech/improve-design-skills/">Webデザインのスキルを磨こう！Webサイト模写のススメ | Webクリエイターボックス</a></p>
<p><a href="http://liginc.co.jp/web/design/photoshop/74339">模写して学ぼう！駆け出しデザイナーのためのデザイン上達法 | 株式会社LIG</a></p>
<p><a href="http://blog.idea-clippin.com/?p=332">WEBデザインが短期間に上達した方法 | FEVDES BLOG</a></p>
<p><a href="http://blog.cntlog.net/?p=820">ぼっちでも独学でWEBデザイナーになる方法（基礎編） – Cntlog</a></p>
<p><a href="http://www.web-labo.jp/archives/1946">Webデザイン完コピのススメ！ゼロから始める初心者は、まず沢山のページを模写し真似して作るべし！ | WEB-LABO</a></p>
<p><a href="http://www.actzero.jp/developer/report-3826.html">Webデザイン力をアップさせる4つのアクション | 株式会社アクトゼロ／動画コンテンツマーケティング・ソーシャルメディアマーケティング</a></p>
<p><a href="http://nishizm.com/index.php/webdesign/webdesign-study/">独学Webデザイナーの独自なWebデザイン学習法 | ニシザワのブログ</a></p>
<p>&nbsp;</p>
<h2>webデザイン力をUPさせるために必要な事</h3>
<p>&nbsp;</p>
<p>上記の記事を踏まえて、わかったことは、</p>
<p><span style="font-size: medium;"><strong>・情報収集をする(webサイトをキャプチャ、ブックマークして手元に置いておく)</strong></span></p>
<p><span style="font-size: medium;"><strong>・サイトの模写をする</strong></span></p>
<p>することです。</p>
<p>&nbsp;</p>
<p>情報収集をすることで、目を鍛え、最新のデザインに触れることができます。</p>
<p>また、収集されたものを見ると、自分の趣味趣向がわかります。</p>
<p>&nbsp;</p>
<p>そして、収集するだけでは技術は上がらないので、</p>
<p>そこで模写をする必要があるようです。</p>
<p>&nbsp;</p>
<p>模写はキャプチャしたサイトをphotoshopで同じように作っていくのですが、</p>
<p>模写のポイントとしては、以下のようなことが挙げられていました。</p>
<blockquote><p><strong>* デザインテイストを決めている要素　（写真・色・パーツの作り・フォントだったり、それらが複雑にからみ合っています）</strong><br />
<strong> * 情報の強弱・グルーピング（大きさや余白、色によって意味が違ってきます）</strong><br />
<strong> * レイアウトの幅（全体の大きさや例えば2カラムの場合の左右のカラムの大きさ。少しの幅の違いでバランスがかわります</strong><br />
<strong> * 余白間（マージン）の取り方</strong><br />
<strong> * 見出しやテキストとのジャンプ率の付け方</strong><br />
<strong> * 使用色の割合と使用数、差し色の使い方</strong><br />
<strong> * 要素同士のサイズ感のバランス</strong><br />
<strong> * 際立たせたい箇所の目立たせ方</strong></p></blockquote>
<p>これらを踏まえ、<br />
<strong>「良い」と思った理由を分析</strong>し、<strong>キーワード化して認識</strong>すると、<br />
おのずと良いデザインができるようになるのではないかということですね。</p>
<p>&nbsp;</p>
<p>そして<strong>photoshopの扱い方</strong>もまなぶことができます。<br />
<strong>グラデーション、シャイプの生成、テクスチャ</strong>等々、真似しようとすれば、<br />
どのように作成したらいいのかを考えるようになります。</p>
<p>完成したpsdはそれをもとにコーディングもやると、<br />
<strong>html構成、class/idのつけかた、css等</strong>を学ぶ勉強になるとなる思います。</p>
<p>&nbsp;</p>
<p>いいことだらけですね！！</p>
<p>これはやるしかない！！</p>
<p>と思いつつ僕もやってますが、なかなか取り組めてません・・・</p>
<p>&nbsp;</p>
<p>もっと取り組んで自分なりの考えができたら、またそれをまとめたいと思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


webデザイン力をUPさせるために必要な事を教えてくれた記事7選

<p>今回は、最近では数が少なくなってきていますが、</p>
<p>イラストを装飾に使ったサイトを探してみました。</p>
<p>&nbsp;</p>
<p><a href="http://www.yamashita-fruit.com/" target="_blank"><img decoding="async" loading="lazy" title="山下フルーツ農園" alt="山下フルーツ農園" src="/uploads-archive/2014/04/43d4a186e626f3567465de39c1bc374e.jpg" width="656" height="396" /></a></p>
<p><a class="link" href="http://www.yamashita-fruit.com/" target="_blank">山下フルーツ農園</a></p>
<p>小さなイラストが背景に散らばってる感じが面白いです。</p>
<p>&nbsp;</p>
<p><a href="http://www.kao.co.jp/asience/" target="_blank"><img decoding="async" loading="lazy" title="花王　アジエンス" alt="花王　アジエンス" src="/uploads-archive/2014/04/901a7d47f80080ae8fcaca720b35b40f.jpg" width="656" height="396" /></a></p>
<p><a class="link" href="http://www.kao.co.jp/asience/" target="_blank">花王　アジエンス 美容液シャンプー　コンディショナー　トリートメント</a></p>
<p>単色ではなく、カラフルな植物系の装飾が軽く背景にあてられているのがきれいです。</p>
<p>&nbsp;</p>
<p><a href="http://madonna-kyoto.jp/" target="_blank"><img decoding="async" loading="lazy" title="MADONNA" alt="MADONNA" src="/uploads-archive/2014/04/MADONNA.jpg" width="656" height="396" /></a></p>
<p><a class="link" href="http://madonna-kyoto.jp/" target="_blank">MADONNA styling / MADONNA hair&amp;make up | マドンナ スタイリング / ヘア&amp;メイクアップ | 京都のパーソナルスタイリスト </a></p>
<p>シンプルですが、枠の感じから高級感が出ています。</p>
<p>&nbsp;</p>
<p><a href="http://tail-of-hope.com/" target="_blank"><img decoding="async" loading="lazy" title="Catch the Tail of Hope" alt="Catch the Tail of Hope" src="/uploads-archive/2014/04/Catch_the_Tail_of_Hope.jpg" width="656" height="396" /></a></p>
<p><a class="link" href="http://tail-of-hope.com/" target="_blank">Catch the Tail of Hope</a></p>
<p>まばらに配置された不規則な図形が面白いです。</p>
<p>&nbsp;</p>
<p><a href="http://www.mitsu-mame.jp/" target="_blank"><img decoding="async" loading="lazy" title="ロート製薬｜蜜まめ(R)" alt="ロート製薬｜蜜まめ(R)" src="/uploads-archive/2014/04/34670506bb2ed78b2551d7948aef1ba6.jpg" width="656" height="396" /></a></p>
<p><a class="link" href="http://www.mitsu-mame.jp/" target="_blank">ロート製薬｜蜜まめ(R)</a></p>
<p>個人的に気に入っているサイトですが、細かな装飾と動きが面白いです。</p>


イラストや模様による装飾を使ったサイト

<p><span style="line-height: 1.5em;">さくっと時間をかけずインパクトのあるバナーなどをつくろうとした時</span>マンガ風のデザインを取り入れると楽に作れるということに今さらながら気付きそんな素材を提供してくれるサイトを自分が見つけられた範囲でまとめてみた。</p>
<h2><span style="line-height: 1.5em;">一コマ漫画素材</span></h3>
<p><a href="http://manga1.net/" target="_blank">http://manga1.net/</a></p>
<p>素材の数は少ないが、連絡・商用利用可能な人物素材を提供しているサイト。</p>
<p><a href="/uploads-archive/2014/04/1.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4756" alt="1" src="/uploads-archive/2014/04/1.png" width="656" height="354" srcset="/uploads-archive/2014/04/1.png 656w, /uploads-archive/2014/04/1-300x161.png 300w, /uploads-archive/2014/04/1-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>インパクトのあるベース素材が入手できそう。</p>
<p><a href="/uploads-archive/2014/04/a.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4761" alt="a" src="/uploads-archive/2014/04/a.png" width="656" height="354" srcset="/uploads-archive/2014/04/a.png 656w, /uploads-archive/2014/04/a-300x161.png 300w, /uploads-archive/2014/04/a-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><em>※「一コマ漫画素材」の素材を使用</em></p>
<p>&nbsp;</p>
<h2><span style="font-size: 1em; line-height: 1.5em;">無料！マンガ素材辞典β</span></h3>
<p><a href="https://www.sozaijiten.com/manga/" target="_blank">https://www.sozaijiten.com/manga/</a></p>
<p>「マンガ 素材」でググって1番に出てくるサイト。たぶん慣れた人は御用達な感じ。</p>
<p><a href="/uploads-archive/2014/04/2.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4758" alt="2" src="/uploads-archive/2014/04/2.png" width="656" height="354" srcset="/uploads-archive/2014/04/2.png 656w, /uploads-archive/2014/04/2-300x161.png 300w, /uploads-archive/2014/04/2-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>景観、高架線、文字、吹き出し、キャラクターなどなんでも揃う。</p>
<p>まだベータ版なので量が少ないが今後に期待</p>
<p><a href="/uploads-archive/2014/04/b.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4760" alt="b" src="/uploads-archive/2014/04/b.png" width="656" height="354" srcset="/uploads-archive/2014/04/b.png 656w, /uploads-archive/2014/04/b-300x161.png 300w, /uploads-archive/2014/04/b-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><em>※「無料！マンガ素材辞典β」の素材を使用</em></p>
<p>&nbsp;</p>
<h2>擬音祭り</h3>
<p><a href="http://www.gion-matsuri.net/" target="_blank">http://www.gion-matsuri.net/</a></p>
<p>擬音語だけを集めたサイト。</p>
<p><a href="/uploads-archive/2014/04/3.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4754" alt="3" src="/uploads-archive/2014/04/3.png" width="656" height="354" srcset="/uploads-archive/2014/04/3.png 656w, /uploads-archive/2014/04/3-300x161.png 300w, /uploads-archive/2014/04/3-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>言葉のチョイスに疑問が残るが使えるサイト</p>
<p><a href="/uploads-archive/2014/04/c.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4759" alt="c" src="/uploads-archive/2014/04/c.png" width="656" height="354" srcset="/uploads-archive/2014/04/c.png 656w, /uploads-archive/2014/04/c-300x161.png 300w, /uploads-archive/2014/04/c-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><em>※「擬音祭り」の素材を使用</em></p>
<p>&nbsp;</p>
<h2>フキダシデザイン</h3>
<p><a href="http://fukidesign.com/" target="_blank">http://fukidesign.com/</a></p>
<p>マンガ素材でなくても有名なサイト。</p>
<p><a href="/uploads-archive/2014/04/4.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4755" alt="4" src="/uploads-archive/2014/04/4.png" width="656" height="354" srcset="/uploads-archive/2014/04/4.png 656w, /uploads-archive/2014/04/4-300x161.png 300w, /uploads-archive/2014/04/4-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>マンガだけでく多方面で利用したいサイト</p>
<p><a href="/uploads-archive/2014/04/d.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4762" alt="d" src="/uploads-archive/2014/04/d.png" width="656" height="354" srcset="/uploads-archive/2014/04/d.png 656w, /uploads-archive/2014/04/d-300x161.png 300w, /uploads-archive/2014/04/d-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><em>※「フキダシデザイン」の素材を使用</em></p>
<p>&nbsp;</p>
<h2>背景素材(複数)</h3>
<p><a href="http://www.oujyukai.com/home/material/sharing.html" target="_blank">http://www.oujyukai.com/home/material/sharing.html</a></p>
<p>h<a href="ttp://www.manga-gai.net/mangakasoudan/haikei.html" target="_blank">ttp://www.manga-gai.net/mangakasoudan/haikei.html</a></p>
<p>背景は大変なのかあまりまとまったサイトがなさそう。</p>
<p><a href="/uploads-archive/2014/04/5.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4757" alt="5" src="/uploads-archive/2014/04/5.png" width="656" height="354" srcset="/uploads-archive/2014/04/5.png 656w, /uploads-archive/2014/04/5-300x161.png 300w, /uploads-archive/2014/04/5-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>背景は写真を見つけてPhotoshopで加工したほうが良さそう</p>
<p><a href="/uploads-archive/2014/04/e1.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4765" alt="e" src="/uploads-archive/2014/04/e1.png" width="656" height="354" srcset="/uploads-archive/2014/04/e1.png 656w, /uploads-archive/2014/04/e1-300x161.png 300w, /uploads-archive/2014/04/e1-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><em>※「マンガ工房」の素材を使用</em></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2014/12/17

2014/11/12

2014/11/05

2014/10/22

2014/10/08

2014/10/01

2014/09/03

2014/08/20

2014/08/05

2014/07/30

2014/07/30

2014/07/09

2014/07/02

2014/06/25

2014/06/03

2014/05/21

2014/04/23

2014/04/23