Sphinxで充実ドキュメントライフを！

<p>フォントがわからない時、例えば似てるフォント使っといてと言われたときや自分で作ったのに何のフォントを使ったか思い出せないという時があると思う。</p>
<p>そんな時の対処法を2点</p>
<h2>WhatTheFont</h2>
<p><a href="http://www.myfonts.com/WhatTheFont/" target="_blank">http://www.myfonts.com/WhatTheFont/</a></p>
<p><a href="/uploads-archive/2015/10/launchcart.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8317" src="/uploads-archive/2015/10/launchcart.jpg" alt="launchcart" width="500" height="100" srcset="/uploads-archive/2015/10/launchcart.jpg 500w, /uploads-archive/2015/10/launchcart-300x60.jpg 300w, /uploads-archive/2015/10/launchcart-228x46.jpg 228w" sizes="(max-width: 500px) 100vw, 500px" /></a><br />
まずはフォントを調べたい画像を用意する</p>
<p><a href="/uploads-archive/2015/10/2.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8318" src="/uploads-archive/2015/10/2.png" alt="2" width="656" height="374" srcset="/uploads-archive/2015/10/2.png 656w, /uploads-archive/2015/10/2-300x171.png 300w, /uploads-archive/2015/10/2-228x130.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a><br />
それを選択してアップロード<br />
Continueをクリック</p>
<p><a href="/uploads-archive/2015/10/3.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8319" src="/uploads-archive/2015/10/3.png" alt="3" width="656" height="575" srcset="/uploads-archive/2015/10/3.png 656w, /uploads-archive/2015/10/3-300x263.png 300w, /uploads-archive/2015/10/3-228x200.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a><br />
するとシステムで解析、判断したそれぞれの文字が出てくる。<br />
空欄であれば何の文字かを、間違っていれば修正してContinueをクリック</p>
<p><a href="/uploads-archive/2015/10/4.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8320" src="/uploads-archive/2015/10/4.png" alt="4" width="656" height="558" srcset="/uploads-archive/2015/10/4.png 656w, /uploads-archive/2015/10/4-300x255.png 300w, /uploads-archive/2015/10/4-228x194.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a><br />
15件も近しいフォントがマッチした<br />
実際にはSteinerというフォントだったのだが、この中に正解は無かった<br />
ただ、似ているフォントを探すという意味ではすごく有用だと思われる</p>
<p>ただ、難点としては日本語フォントに対応していないということ</p>
<p>残念ながら日本語フォントに対応している類似のサイトは見つからず<br />
identifontというサービスを使うのが良さそう</p>
<h2>Identifont</h2>
<p><a href="http://www.identifont.jp/" target="_blank">http://www.identifont.jp/</a></p>
<p>形状別、名称別、スタイル別などでフォントを手動で検索できる</p>
<p>冒頭のようなケースでは形状別が良さそうだ</p>
<p><a href="/uploads-archive/2015/10/51.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8321" src="/uploads-archive/2015/10/51.jpg" alt="5" width="300" height="300" srcset="/uploads-archive/2015/10/51.jpg 300w, /uploads-archive/2015/10/51-150x150.jpg 150w, /uploads-archive/2015/10/51-228x228.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
小塚ゴシック で試してみた</p>
<p><a href="/uploads-archive/2015/10/6.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8322" src="/uploads-archive/2015/10/6.jpg" alt="6" width="656" height="2172" srcset="/uploads-archive/2015/10/6.jpg 656w, /uploads-archive/2015/10/6-91x300.jpg 91w, /uploads-archive/2015/10/6-309x1024.jpg 309w, /uploads-archive/2015/10/6-228x755.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>正解！</p>
<p>ただ、あまりメジャーではないフォントは対応していないようだ</p>


画像のフォントが何かを調べる方法

<p>WEBデザインとして定番として使われているものの中には、</p>
<p>実はユーザーにとって、ストレスの元になっているものがいくつかあることを最近知りましたので、</p>
<p>そういったユーザーをいらだたせている定番のWEBデザインについてご紹介させていただきます。</p>
<p><span style="display:block;margin-bottom:-15px">&nbsp;</span></p>
<p>今回紹介するものはスマホの時に特に問題となるものが多いです。</p>
<p>PCでご覧の方でDEMOページをご覧になる方は、スマホからご覧になることをお勧めいたします。</p>
<p>↓このページのQRコード<br />
<img decoding="async" class="alignnone wp-image-8006 size-full" src="/uploads-archive/2015/08/qr1.png" alt="" width="120" srcset="/uploads-archive/2015/08/qr1.png 175w, /uploads-archive/2015/08/qr1-150x150.png 150w" sizes="(max-width: 175px) 100vw, 175px" /></p>
<p>&nbsp;</p>
<h2>予告のないポップアップ・別タブ表示(特にスマホ)</h2>
<p>通常リンクと区別のない唐突な別タブでのリンクや、</p>
<p>ページ訪問時のポップアップでの情報掲載などは、</p>
<p>ユーザーが意図していない動作であることが多く、ユーザーをいらだたせる原因となります。</p>
<p>スマホではタブ操作がやや面倒な場合が多いため、別タブでのリンクの表示もストレスのもととなります。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo01-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>リンク先を別タブで表示するときは、リンクに別タブで開くことをアイコンなどで明示する。</li>
<li>ページ訪問時の情報の載せ方は、突然表示するのではなく、<br />
明示的なボタンを置くなど、ユーザーのタイミングで表示できるように工夫する。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo01-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>スクロール操作による特殊な動作(パララックスなど; 主にPC)</h2>
<p>パララックスのような、スクロールしたときの動作をブラウザ本来の動きとは違う動きにするデザインは、</p>
<p>ユーザーが本来行いたい操作を妨害するため、ユーザーをいらだたせる原因となります。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo06-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>スクロール操作は基本的にデバイス本来の動きに合わせていないとストレスになるため、パララックスなどの操作は避ける事が望ましい。</li>
<li>どうしても演出としてパララックスなどの効果が必要とされる場合は、スクロール感がデバイス本来の動きに近づくように厳密な調整をおこなう。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo06-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>ページ内のスクロール可能な箇所(主にスマホ)</h2>
<p>ページの中に高さを固定してスクロールできるようにした場所があると、</p>
<p>ページ全体のスクロールを妨害することになるため、ユーザーをいらだたせてしまします。</p>
<p>特にスマホでは画面が小さいため、深刻になってくることが多いです。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo02-01.html">DEMO</a></p>
<p><a class="demo" href="/demo/ninomiya/82/demo03-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>スマホでの表示のときは、SNSのタイムラインの表示は諦める(SNSページヘのリンクバナーなどに置き換える)。</li>
<li>マップは画面の横幅いっぱいに表示せず、横幅は画面の1/2〜2/3程度に抑え、代わりにマップへのリンクを置く。</li>
<li>記事の表示領域を狭めておきたい場合は、折りたたみなどの方法を使う。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo02-02.html">DEMO</a></p>
<p><a class="demo" href="/demo/ninomiya/82/demo03-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>スライダー等の自動スライド</h2>
<p>自動で動くスライダーは、製作者が見せたいと思うものを目立たせたり、</p>
<p>限られたスペースで見せたいコンテンツへ誘導する手段としてよく使われていますが、</p>
<p>これはユーザー自身が操作する場合には、操作を妨害したり、誤操作を招く原因となってしまうため、</p>
<p>実はユーザーにストレスを感じさせてしまいます。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo04-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>スライダーの操作はユーザーに託し、操作可能であることがわかりやすいデザインにすることで、ユーザーによる操作を促す。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo04-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>スマホ表示でのHTMLのviewport設定による拡大縮小の制限(スマホの場合)</h2>
<p>HTMLの&lt;head&gt;内で、以下のようにviewportの設定をすると、スマホでのユーザーによる拡大縮小の操作を制限することができます。</p>

		<div id="crayon-649540158ad9c774140592" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540158ad9c774140592-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158ad9c774140592-1"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">'viewport'</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><a class="demo" href="/demo/ninomiya/82/demo05-01.html">DEMO(スマホご覧ください)</a></p>
<p>この設定は製作者が予期しない動作を制限する目的で行われることが多いのですが、</p>
<p>ユーザーが画像や小さな文字を拡大して確認するという操作を妨げますので、</p>
<p>場合によってはユーザーに不便な思いをさせてしまうことになります。</p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>viewportによる拡大縮小の制限をしない</li>
</ul>
<p></p>

		<div id="crayon-649540158ada1502367698" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540158ada1502367698-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158ada1502367698-1"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"viewport"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"width=device-width, initial-scale=1.0"</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><a class="demo" href="/demo/ninomiya/82/demo05-02.html">DEMO(スマホご覧ください)</a></p>
<p>&nbsp;</p>
<h2>まとめ (ユーザーをいらだたせるWEBデザインの共通点と新たなWEBデザインを考える場合のポイント)</h2>
<p>ユーザーをいらだたせてしまうWEBデザインの共通点は、</p>
<p>ユーザーが意図していない動作をさせたり、ユーザーの操作を妨害してしまうという点です。</p>
<p>&nbsp;</p>
<p>製作者がどうしてもユーザーに見せたいという思いが強すぎると、</p>
<p>ついついユーザーの使い勝手を忘れて、</p>
<p>ユーザーにとっては不便なデザインとなってしまう場合があります。</p>
<p>せっかく見せたいと思って工夫をこらしても、</p>
<p>それがユーザーのストレスになってしまう場合は、</p>
<p>それらはユーザーにとって「邪魔なもの」として捉えられてしまうことになってしまいます。</p>
<p>&nbsp;</p>
<p>「見せたい」の前に「使いやすい」を前提にすることが、</p>
<p>新たなWEBデザインを考えだす上で必要なことだと感じました。</p>
<p>&nbsp;</p>
<h2>参考図書</h2>
<p><a class="link" href="http://www.amazon.co.jp/dp/4862462650/" target="_blank" rel="noopener">「デザイニングWebアクセシビリティ &#8211; アクセシブルな設計やコンテンツ制作のアプローチ」 2015.7.27 太田良典(著), 伊原力也(著)</a></p>
<p><a class="link" href="http://www.amazon.co.jp/dp/4861009383/" target="_blank" rel="noopener">「融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論」 2015.1.21 渡邊恵太(著)</a></p>

ユーザーをいらだたせる定番のWEBデザイン５個とその改善策(スマホ向け多め)

<p>2015年上半期も本日が最終日</p>
<p>2015年のWebデザインを振り返った記事があったのでまとめ</p>
<p>&nbsp;</p>
<h2>1. はじめに</h2>
<p>1-1. ファーストビューよりスクロールを重視するデザインに</p>
<p>1-2. シンプルなレイアウト構成</p>
<p>&nbsp;</p>
<p>ユーザーがスクロールに慣れたなめ「サイトが表示されたらとりあえず下にスクロール」という動きが普通になっているという</p>
<p>なのであまりファーストビューにこだわらなくなってきてるとのこと</p>
<p>&nbsp;</p>
<h2>2. 今流行りのweb デザイントレンド13選</h2>
<p>2-1 背景にビデオ動画活用</p>
<p>端末のスペックやネット環境が良くなっていけばそれにともなってコンテンツもリッチになっていく</p>
<p>動画が一般化し始めるのがまさに今のようだ</p>
<p>将来はゴリゴリの3Dが軽快に描画できるスペックのPCが安価になったりするのだろう</p>
<p>&nbsp;</p>
<p><a href="http://my.austria.info/" target="_blank">http://my.austria.info/</a></p>
<p><a href="http://www.kalexiko.com/" target="_blank"> http://www.kalexiko.com/</a></p>
<p>&nbsp;</p>
<p>2-2 カード・レイアウト（タイル・レイアウト）</p>
<p>この言葉を知らなかったが、要はFacebookのタイムラインのように1記事をブロックで囲っている感じのレイアウトとのこと</p>
<p>わかりやすくレスポンシブにもし易いのが良いらしい</p>
<p>&nbsp;</p>
<p><a href="http://www.google.com/landing/now/" target="_blank">http://www.google.com/landing/now/</a></p>
<p>※私の環境ではカード・レイアウトが再現できず</p>
<p>&nbsp;</p>
<p>2-3 シングルページ</p>
<p>今後は後述のゴーストボタンやマイクロインタラクションと組み合わせて進化するらしい</p>
<p><a href="http://www.kirinichiban.com/" target="_blank"> http://www.kirinichiban.com/</a></p>
<p>&nbsp;</p>
<p>2-4 パララックス・エフェクト</p>
<p>今後もこのトレンドは続き、更に進化するらしい</p>
<p><a href="http://www.lexusls.asia/" target="_blank"> http://www.lexusls.asia/</a></p>
<p>&nbsp;</p>
<p>2-5 アニメ化されたストーリー性</p>
<p>以下の参考サイトはSVGとjsでできているとのこと</p>
<p><a href="https://www.boldking.com/" target="_blank"> https://www.boldking.com/</a></p>
<p>&nbsp;</p>
<p>2-6 フラットデザイン</p>
<p>当面はこのトレンドが続くらしい</p>
<p><a href="http://www.huffingtonpost.com/2012/02/19/logos-past-future-corporate_n_1285622.html" target="_blank"> http://www.huffingtonpost.com/2012/02/19/logos-past-future-corporate_n_1285622.html</a></p>
<p><a href="http://purgotea.com/" target="_blank"> http://purgotea.com/</a></p>
<p>&nbsp;</p>
<p>2-7 マテリアル・デザインの増加</p>
<p>今後の動向が気になるマテリアルデザイン</p>
<p>以下のサイトでが勉強になるらしい</p>
<p><a href="http://material.cmiscm.com/" target="_blank"> http://material.cmiscm.com/</a></p>
<p>&nbsp;</p>
<p>2-8 インタラクティブ・デザイン</p>
<p>サンプルがすごすぎて圧巻だが、もっと小さい範囲でもアイデア次第ではおもしろいものができそう</p>
<p><a href="https://insideabbeyroad.withgoogle.com/en" target="_blank"> https://insideabbeyroad.withgoogle.com/en</a></p>
<p><a href="http://www.blitzagency.com/" target="_blank"> http://www.blitzagency.com/</a></p>
<p>&nbsp;</p>
<p>2-9 マイクロ・インタラクション</p>
<p>要はいいねボタンなどのことらしい</p>
<p>簡単なAjaxでのお問い合わせフォームなどもこれに当たる模様</p>
<p><a href="http://www.buzzfeed.com/zachkornfeld/try-guys-robot-babies#.kjJkrp6RPk" target="_blank"> http://www.buzzfeed.com/zachkornfeld/try-guys-robot-babies#.kjJkrp6RPk</a></p>
<p>&nbsp;</p>
<p>2-10 トレンドのメニューバー</p>
<p>もう飽きた気もするが引き続きトレンドなようだ</p>
<p><a href="http://bitcoinfoundation.org/" target="_blank"> http://bitcoinfoundation.org/</a></p>
<p>&nbsp;</p>
<p>2-11 ゴーストボタン</p>
<p>この言葉は知らなかったが、要は背景が透けているボタンのことらしい</p>
<p><a href="http://www.iuvo.si/" target="_blank"> http://www.iuvo.si/</a></p>
<p>&nbsp;</p>
<p>2-12 アニメーション効果</p>
<p>おそらく作成ツールの充実や作成者の技術向上により今後は当たり前になっていきそう</p>
<p><a href="http://ja.wix.com/blog/2014/05/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%8A%B9%E6%9E%9C%E3%81%AE%E9%AD%85%E5%8A%9B%E3%82%92%E5%BE%B9%E5%BA%95%E7%B4%B9%E4%BB%8B/" target="_blank"> http://ja.wix.com/blog/2014/05/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%8A%B9%E6%9E%9C%E3%81%AE%E9%AD%85%E5%8A%9B%E3%82%92%E5%BE%B9%E5%BA%95%E7%B4%B9%E4%BB%8B/</a></p>
<p>&nbsp;</p>
<p>2-13 モバイル・ファースト</p>
<p>スマホ割合が年々増えている中で当然の対応</p>
<p><a href="http://www.channelnewsasia.com/" target="_blank"> http://www.channelnewsasia.com/</a></p>


【Webデザイン】2015年 上半期のトレンド

<p>この仕事を始めていこうずっと、webデザインを作成するときはPhotoshopを使っており、<br />
今は、Photoshop CCを使用しております。<br />
<a href="http://www.adobe.com/jp/products/photoshop.html" target="_blank">http://www.adobe.com/jp/products/photoshop.html</a><br />
これのフォトグラフィプランですね(以前キャンペーンで期間限定的な感じだったのに、今もうプランとして固定されてる・・・)</p>
<p>Dreamweaverは数年前に辞め、<br />
Adobe製品はこれ以外には、時々illustratorを使うくらいなので、<br />
Photoshopをやめたら、脱Adobeになってしまうかもしれません。</p>
<p>とはいえ、Photoshopを辞めることなんて早々無いだろうと思っていたのですが、<br />
最近いろいろな情報を見ていると、Photoshopに劣らないであろう製品がいくつかあるようです。</p>
<p>よく目にする3つをご紹介します。</p>
<h2>Photoshop以外の画像編集ツール</h2>
<h3>Sketch 3</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7378" src="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg" alt="Bohemian Coding - Sketch 3" width="630" height="382" srcset="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg 1024w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-300x182.jpg 300w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-228x138.jpg 228w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /><br />
mac向けで、webサイトのデザインやプレゼンテーションスライドの作成ができるようです。<br />
$99ですが、trialも出来るので試してみて良かったら購入できますね！</p>
<p>cssへワンクリックで書き出せるとか、<br />
起動が早いとかあるみたいで、</p>
<p>以下でしっかりまとめられてるのでご覧ください！<br />
<a href="http://matome.naver.jp/odai/2140584105966404801">デザイナー必見！今注目のツール「Sketch3」の使い方を勉強できるサイト &#8211; NAVER まとめ</a></p>
<p>私もTrialをダウンロードしましたが、今だ試せずにいます。</p>
<p><a class="link" href="http://bohemiancoding.com/sketch/" target="_blank">Bohemian Coding &#8211; Sketch 3</a></p>
<h3>Pixelmator</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7380" src="/uploads-archive/2015/05/Pixelmator-1024x621.jpg" alt="Pixelmator" width="630" height="382" srcset="/uploads-archive/2015/05/Pixelmator-1024x621.jpg 1024w, /uploads-archive/2015/05/Pixelmator-300x182.jpg 300w, /uploads-archive/2015/05/Pixelmator-228x138.jpg 228w, /uploads-archive/2015/05/Pixelmator.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こちらもmac向けですが、価格は3600円と安め。<br />
Photoshopと機能性はほぼ同じくらいでpsdファイルとの連携も問題ないそうです。<br />
最近iPhone用のアプリも発売されたようです。</p>
<p><a href="http://blockworks.jp/pixelmator/" target="_blank">Pixelmator入門</a></p>
<p><a class="link" href="http://www.pixelmator.com/" target="_blank">Pixelmator</a></p>
<h3>GIMP</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7379" src="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg" alt="GIMP - The GNU Image Manipulation Program" width="630" height="382" srcset="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg 1024w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-300x182.jpg 300w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-228x138.jpg 228w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /><br />
もう何年も前からあるソフトで、こちらはwindowsでも使用できます。<br />
こちらは基本無償で、簡単な写真加工ならこれで充分できるようです。<br />
初心者で試しに・・・という人にこちらはオススメです！！</p>
<p><a href="http://synclogue-navi.com/category/gimp" target="_blank">GIMPの使い方</a><br />
<a class="link" href="http://www.gimp.org/" target="_blank">GIMP &#8211; The GNU Image Manipulation Program</a></p>


Photoshop以外の画像編集ツールでついにAdobe脱却！？

<p>マテリアルデザイン(material design)は昨年2014年7月にGoogleから提唱された、</p>
<p>WEB端末向けの新たなデザイン体系です。</p>
<p>&nbsp;</p>
<p>Google関係のアプリをはじめ、少しずつ見かける機会は増えているものの、</p>
<p>具体的にどんなものなのか知らずにいました。</p>
<p>私は単純にフラットデザインのひとつの形に過ぎないと想像していましたが、</p>
<p>実際には別物だということを知り、</p>
<p>今後のためにもちゃんと調べようと思ったので、</p>
<p><a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Googleが公開しているマテリアルデザインのガイドライン</a>を調べて、</p>
<p>内容をまとめてみました。</p>
<p>&nbsp;</p>
<p>公式のガイドライン</p>
<p><a class="link" href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Introduction &#8211; Material design &#8211; Google design guidelines</a></p>
<p>&nbsp;</p>
<h2>マテリアルデザインの基本</h2>
<h3>マテリアルデザインに用いられる単位(dp)について</h3>
<p>ガイドラインでは、度々dpという単位が使われています。</p>
<p>この単位は解像度が160dpiの場合の1pxを基本としています。</p>
<p>解像度が240dipなら1dpは1.5px、320dpiなら1dpは2pxになります。</p>
<p>(ちなみにiPhone4-6の解像度は326dpiです。ノートパソコンは100〜150dpiくらい)</p>
<p>&nbsp;</p>
<p>まず、マテリアルデザインの核となる部分</p>
<h3>３次元空間(3D)を意識する</h3>
<p><a class="link" href="http://www.google.com/design/spec/what-is-material/environment.html" target="_blank">参考: Environment &#8211; What is material? &#8211; Google design guidelines</a></p>
<p>縦方向と横方向の平面上にレイアウトすることを意識したフラットデザインと違い、</p>
<p>マテリアルデザインは、縦方向と横方向に加えて、画面の奥行きを意識したデザインになっています。</p>
<p><a href="/uploads-archive/2015/04/axis.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7299 size-full" src="/uploads-archive/2015/04/axis.png" alt="axis" width="656" height="480" srcset="/uploads-archive/2015/04/axis.png 656w, /uploads-archive/2015/04/axis-300x220.png 300w, /uploads-archive/2015/04/axis-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>マテリアルデザインの一つの大きな特徴であるシャドウ(shadow)は、</p>
<p>この奥行きを視覚的に知らせることを目的としています。</p>
<p>そのため、このシャドウはそれまでにもあった装飾としてのシャドウとは違い、</p>
<p>その要素の奥行の状態に合わせて変化させる必要があります。</p>
<p>また、そのシャドウの位置・方向や濃さを決めるために、光源(light)を意識することも必要になります。</p>
<p>&nbsp;</p>
<p>重要な要素についてはその奥行が決められていて、</p>
<p>デバイスによっても、その奥行が変化します。</p>
<p><a href="/uploads-archive/2015/04/3d_space1.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7302 size-full" src="/uploads-archive/2015/04/3d_space1.jpg" alt="3d_space" width="656" height="480" srcset="/uploads-archive/2015/04/3d_space1.jpg 656w, /uploads-archive/2015/04/3d_space1-300x220.jpg 300w, /uploads-archive/2015/04/3d_space1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a class="link" href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation-android-" target="_blank">参考: Objects in 3D space &#8211; What is material? &#8211; Google design guidelines</a></p>
<p>&nbsp;</p>
<h3>各要素の基本的な素材は紙のようなものをイメージする</h3>
<p><a class="link" href="http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-movement-of-material" target="_blank">Material properties &#8211; What is material? &#8211; Google design guidelines</a></p>
<p>マテリアルデザイン上では、各要素を薄い紙として扱います。</p>
<p>ただ、実際の紙と違って、その紙は様々に変形することが許容されています。</p>
<p>とはいえ、別の奥行きにあった要素が貫通してしまうような変形や、</p>
<p>折りたたむ、<ruby>捲<rp>(</rp><rt>めく</rt><rp>(</rp></ruby>るといった変形は許されていません。</p>
<p>形が変わる（円から四角形になるなど）、伸び縮みする、融合・分離する、回転するなどが許容されている変形です。</p>
<p>&nbsp;</p>
<h3>アニメーションの基本</h3>
<p>マテリアルデザインの重要な特徴として、アニメーションを多く利用するというものがあります。</p>
<p>そのアニメーションにももちろんルールがあります。</p>
<p>通常のアニメーションのイージングは基本的にはAsymmetric(非対称：開始と終了の動きが時間的に対象になっていない)なイージングがより自然な動きということで、推奨されています。</p>
<p><a href="/uploads-archive/2015/04/responsive-reaction1.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7328 size-full" src="/uploads-archive/2015/04/responsive-reaction1.png" alt="responsive-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/responsive-reaction1.png 656w, /uploads-archive/2015/04/responsive-reaction1-300x220.png 300w, /uploads-archive/2015/04/responsive-reaction1-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>ただ、もともと画面上になかった要素が入ってきたり、出て行ったりする場合は、</p>
<p>入ってくるときは徐々に減速、出て行く時は徐々に加速させるようなイージングが推奨されています。</p>
<p>ただ最終的には、製作者により、より自然な動きになるように調整することが求められています。</p>
<p>&nbsp;</p>
<h3>Responsive interaction</h3>
<p>ユーザーがタッチしたことを明確に知らせ、操作感の改善を目指したものです。</p>
<p>マテリアルデザインのアニメーションの中で最も特徴的といえる効果です。</p>
<p>日本では波紋エフェクトとも呼ばれています。</p>
<p>タッチした場所を中心に、波紋のようなアニメーションを表示することで、</p>
<p>タッチした場所を知らせ、触ったという視覚効果を明確に表現しています。</p>
<p><a href="/uploads-archive/2015/04/surface-reaction.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7305 size-full" src="/uploads-archive/2015/04/surface-reaction.png" alt="surface-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/surface-reaction.png 656w, /uploads-archive/2015/04/surface-reaction-300x220.png 300w, /uploads-archive/2015/04/surface-reaction-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>タッチした場所を起点に、要素が飛び出してきたり、収納されたりするような視覚効果もそのひとつです。</p>
<p>&nbsp;</p>
<h3>視覚的な連続性のあるアニメーション</h3>
<p>マテリアルデザインの中で、私が最も共感するアニメーションルールですが、</p>
<p>タッチした要素と遷移先の要素を視覚的に同一視できるような効果をつけるというものです。</p>
<p>例えば記事の一欄があった場合、</p>
<p>一覧から記事を選ぶと、タッチした要素が画面いっぱいに広がるようにして、</p>
<p>記事の詳細のページヘ遷移するというアニメーションをつけます。</p>
<p>一覧に戻るときにも、記事が一覧に戻っていくようなアニメーションをつけます。</p>
<p>そうすることで、情報の連続性を視覚的にユーザーに知らせることができ、</p>
<p>ユーザーも現在の場所を見失うことなく、ページを遷移することが可能になります。</p>
<p><a href="/uploads-archive/2015/04/responsive-reaction.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7315 size-full" src="/uploads-archive/2015/04/responsive-reaction.png" alt="responsive-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/responsive-reaction.png 656w, /uploads-archive/2015/04/responsive-reaction-300x220.png 300w, /uploads-archive/2015/04/responsive-reaction-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>その他、公式のガイドラインには、色やアイコンの作り方など、細かなルールが決められていて、</p>
<p>マテリアルデザインという枠を超えてデザインの勉強になると思います。</p>
<p>動画を使ってわかりやすく説明がされているので、ページ量は多いですが、とても読み進めやすいです。</p>
<p>興味のある方は是非、<a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">公式のガイドライン</a>をご覧になってください。</p>


マテリアルデザイン(material design)の基本の基本についてまとめてみました

<p>昨今のwebサイトデザインにはアイコンが欠かせないと言っていいかと思います。<br />
テキストより絵で視覚的に訴える方が強いです。</p>
<p>しかし、アイコンを制作していたら時間がかかってしまいます。<br />
ましてやそんなアイコンを作る絵心・センスがない・・・<br />
お客さんには費用がかかってしまう・・・</p>
<p>そんな時には、フリーで使えるアイコンを使用するのが良いかと思います。<br />
僕はアイコンつくれないので、必死に探して、適切なものを使用しています。</p>
<p>早速紹介したいと思います。</p>
<h2>FLAT ICON DESIGN</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7208" src="/uploads-archive/2015/03/20150331-1024x616.jpg" alt="20150331" width="640" height="385" srcset="/uploads-archive/2015/03/20150331-1024x616.jpg 1024w, /uploads-archive/2015/03/20150331-300x181.jpg 300w, /uploads-archive/2015/03/20150331-228x137.jpg 228w, /uploads-archive/2015/03/20150331.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>流行り(?)のフラットデザインのアイコンが豊富にあります！<br />
しっかりしたアイコンなのに無料！<br />
ai,eps,jpg,png,svgの形式でダウンロードできます。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://flat-icon-design.com/" target="_blank">FLAT ICON DESIGN -フラットアイコンデザイン-</a></p>
<h2>Endless Icons</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7209" src="/uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-1024x616.jpg" alt="Endless Icons  Free Icon Library" width="640" height="385" srcset="/uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-1024x616.jpg 1024w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-300x181.jpg 300w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-228x137.jpg 228w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>シルエット的なシンプルなアイコンが揃っています。<br />
Tag付されており、探しやすいです！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.endlessicons.com/" target="_blank">Endless Icons | Free Icon Library</a></p>
<h2>アイコン配布中！</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7210" src="/uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-1024x616.jpg" alt="リアルアイコン一覧　～TOUCH＆SLIDEが運営する編集可能なアイコンがダウンロードできる「アイコン配布中！」～" width="640" height="385" srcset="/uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-1024x616.jpg 1024w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-300x181.jpg 300w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-228x137.jpg 228w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>今はもうあんまりなくなってしまったかもしれない・・・リアルなアイコン、<br />
そしてシルエットアイコンをダウンロードできます。<br />
リクエストも受付しているようです！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://icon.touch-slide.jp/real/" target="_blank">リアルアイコン一覧　～TOUCH＆SLIDEが運営する編集可能なアイコンがダウンロードできる「アイコン配布中！」～</a></p>
<p>&nbsp;</p>
<p>一昔前ならこのクオリティのアイコン達は無料なんかでゲット出来なかったのですが、<br />
いい時代になりました・・・（みんな同じアイコンばっかり使って画一的になりそう気もしますが・・・）</p>
<p>本当は自分でサッと作れたらいいなぁ。。。</p>


フラットアイコンやシンプルなアイコンを無料でダウンロードできるサイト

<p>背景に動画を設置しているサイトをよく見ると思います。</p>
<p>ページ全体に表示するのはcssだけでできるので、実装はかなりシンプルにできます。</p>
<h2>videoで動画を挿入する</h2>
<p></p>

		<div id="crayon-649540158539e622024199" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;video autoplay loop poster="image/sampleposter.jpg" id="sampleVideo"&gt;
&lt;source src="video/shinjuku.mp4" type="video/mp4"&gt;
&lt;source src="shinjuku.webm" type="video/webm"&gt;
&lt;source src="shinjuku.ogv" type="video/ogv"&gt;
&lt;/video&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-649540158539e622024199-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158539e622024199-2">2</div><div class="crayon-num" data-line="crayon-649540158539e622024199-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158539e622024199-4">4</div><div class="crayon-num" data-line="crayon-649540158539e622024199-5">5</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-649540158539e622024199-1"><span class="crayon-h">&lt;</span><span class="crayon-e">video </span><span class="crayon-e">autoplay </span><span class="crayon-e">loop </span><span class="crayon-i">poster</span>=<span class="crayon-s">"image/sampleposter.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"sampleVideo"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158539e622024199-2"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/shinjuku.mp4"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/mp4"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158539e622024199-3"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"shinjuku.webm"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/webm"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158539e622024199-4"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"shinjuku.ogv"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/ogv"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158539e622024199-5"><span class="crayon-h">&lt;</span>/<span class="crayon-i">video</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>autoplayにしておいて、videoに対応していないブラウザの為にposterを設定しておきます。</p>
<p>動画素材はブラウザによって形式が異なるので、mp4、webmの２つを用意する必要があります。</p>
<p>各ブラウザへの対応状況は以下を参考にしてください。</p>
<p><a href="/uploads-archive/2015/03/mp4.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-7166" src="/uploads-archive/2015/03/mp4.png" alt="mp4" width="326" height="190" srcset="/uploads-archive/2015/03/mp4.png 642w, /uploads-archive/2015/03/mp4-300x175.png 300w, /uploads-archive/2015/03/mp4-228x133.png 228w" sizes="(max-width: 326px) 100vw, 326px" /></a></p>
<p><a href="http://caniuse.com/#search=mp4">http://caniuse.com/#search=mp4</a></p>
<p><a href="/uploads-archive/2015/03/webm.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-7167" src="/uploads-archive/2015/03/webm.png" alt="webm" width="322" height="196" srcset="/uploads-archive/2015/03/webm.png 642w, /uploads-archive/2015/03/webm-300x183.png 300w, /uploads-archive/2015/03/webm-228x139.png 228w" sizes="(max-width: 322px) 100vw, 322px" /></a></p>
<p><a href="http://caniuse.com/#search=WebM">http://caniuse.com/#search=WebM</a></p>
<p>ファイルフォーマットの変換は編集ソフトで吐き出す際に変換できる場合もありますが、フリーのコンバーターも結構あるので探してみて下さい。</p>
<h2>動画を背景に設定する</h2>
<p></p>

		<div id="crayon-64954015853a2854513256" 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;">
#sampleVideo {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -10;
  background: url(image/sampleposter.jpg) no-repeat;
  background-size: cover;
}</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-64954015853a2854513256-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-2">2</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-4">4</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-6">6</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-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-64954015853a2854513256-1"><span class="crayon-k ">#sampleVideo </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">fixed</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">right</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">bottom</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">min-width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">min-height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">z-index</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">-10</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">background</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-i ">image/sampleposter.jpg</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">no-repeat</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">background-size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">cover</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-7"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>videoを右下に設置して、幅と高さをauto、さらに最少値をどちらも100%にします。</p>
<p>対応していないブラウザためにbackgroundに静止画を設置します。</p>
<p>&nbsp;</p>
<p>今回使用した動画はNHKのライブラリー（フリー）から持ってきたのでかなり粗いのですが、通常背景に設置する場合はHDで撮影した動画の方が良いと思います。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/makabe/01/01demo.html">DEMO</a></p>

動画：cssでvideoを背景に使う

<p>GoogleからMaterial Designが提唱され、しばらく経ち広まっているかどうかは定かではないのですが、制作にするのに便利なサービスを発見したので、紹介したいと思います。</p>
<p>まずは、Material Designとはなにかということは以下のサイトからご覧ください。<br />
<a href="http://www.google.com/design/spec/material-design/introduction.html">Introduction &#8211; Material design &#8211; Google design guidelines</a></p>
<p>&nbsp;</p>
<h2>フレームワーク</h2>
<p>&nbsp;</p>
<h3>MUI</h3>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7069" src="/uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-1024x605.jpg" alt="MUI - Material Design CSS Framework" width="620" height="366" srcset="/uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-1024x605.jpg 1024w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-300x177.jpg 300w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-228x135.jpg 228w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /><br />
ひと通りのコンポーネントが揃っているかと思います。</p>
<p><a class="link" href="https://www.muicss.com/" target="_blank">MUI &#8211; Material Design CSS Framework</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Materialize</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7065" src="/uploads-archive/2015/03/Documentation-Materialize-1024x605.jpg" alt="Documentation - Materialize" width="620" height="366" srcset="/uploads-archive/2015/03/Documentation-Materialize-1024x605.jpg 1024w, /uploads-archive/2015/03/Documentation-Materialize-300x177.jpg 300w, /uploads-archive/2015/03/Documentation-Materialize-228x135.jpg 228w, /uploads-archive/2015/03/Documentation-Materialize.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /><br />
上記のサイトよりも豊富で、jQueryの動きもけっこうあります。</p>
<p><a class="link" href="http://dogfalo.github.io/materialize/" target="_blank">Documentation &#8211; Materialize</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Material UI</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7068" src="/uploads-archive/2015/03/Material-UI-Material-Design-React-Components-1024x605.jpg" alt="Material UI - Material Design React Components" width="620" height="366" srcset="/uploads-archive/2015/03/Material-UI-Material-Design-React-Components-1024x605.jpg 1024w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components-300x177.jpg 300w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components-228x135.jpg 228w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /></p>
<p>こちらもひと通りのコンポーネントが揃っています。<br />
&nbsp;<br />
<a class="link" href="http://material-ui.com/#/" target="_blank">Material UI &#8211; Material Design React Components</a><br />
&nbsp;<br />
&nbsp;<br />
どのフレームワークもひと通りコンポーネントは揃っており、アニメーションでそれぞれ少しづつ違う感じです。<br />
パッと見て良さそうなのは、Materializeかなと思います。</p>
<p>&nbsp;</p>
<h2>配色ツール</h2>
<p>&nbsp;</p>
<h3>Material Palette</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7066" src="/uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-1024x597.jpg" alt="Material Design Color Palette Generator - Material Palette" width="620" height="361" srcset="/uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-1024x597.jpg 1024w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-300x175.jpg 300w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-228x133.jpg 228w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette.jpg 1120w" sizes="(max-width: 620px) 100vw, 620px" /><br />
こちらは２つの色を選ぶと、<br />
その色に合わせて簡単なカラーパレットを教えてくれます。</p>
<p><a class="link" href="http://www.materialpalette.com/" target="_blank">Material Design Color Palette Generator &#8211; Material Palette</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Material UI Colors</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7067" src="/uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-1024x597.jpg" alt="Material UI  Material Design  Material UI Colors" width="620" height="361" srcset="/uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-1024x597.jpg 1024w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-300x175.jpg 300w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-228x133.jpg 228w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors.jpg 1120w" sizes="(max-width: 620px) 100vw, 620px" /><br />
色数が豊富で、色情報をいろんな形式でコピーすることができます。</p>
<p><a class="link" href="http://www.materialui.co/colors" target="_blank">Material UI | Material Design | Material UI Colors</a></p>
<p>今後どんどん便利なサービスが出てくるかと思います。<br />
これらを上手いこと使いながら良いサイトを作りたいですね！！</p>


Material Designの制作に便利なwebサービス5つ

最近見かけるCSS3アニメーションを使ったトグルのメニューボタンを再現してみた

<p class="single-first-p">I would like to feature and summarise an article I read in the <a href="http://www.webdesignerdepot.com/2015/01/4-essential-layout-trends-for-2015/" target="_blank">Web designer depot</a> about this year layout trends.</p>
<p class="single-first-p">If we looked back 10 years we will find that the web had the same go-to pattern consisted of a header, footer, sidebar and content area. It was the expected layout for the web. Current web design you will no doubt notice that the fundamental structure for web pages is anything but fixed. The new norm as it were, is that there appears to be no fixed formula at all.</p>
<p>Although we can observe several trends in layout design representing unusual layouts, unusual as they don’t follow a strict formula. But they are trends because there&#8217;s hundreds of examples for each category.</p>
<p>This blend of trends will hopefully be an inspiration for your  future projects.</p>
<h2></h2>
<p>&nbsp;</p>
<h2>SPLIT SCREENS</h2>
<p>The sites that split the screen using a vertical divide.</p>
<p><a href="http://eightandfour.com/"><img decoding="async" loading="lazy" class="alignundefined wp-image-6843 " src="/uploads-archive/2015/02/161.jpg" alt="161" width="717" height="453" /></a></p>
<p>You can use it when you either want to promote two things, two elements of equal importance. Or to remark trough two elements what defines the company, which is the duality that gives the core strengths.</p>
<p>This approach allows the user to rapidly select between the two elements and easily explain the corporate identity of the company and give a lasting impression.</p>
<h2></h2>
<h2></h2>
<p>&nbsp;</p>
<h2>NO DECORATIONS!</h2>
<p>A common trend now, which I specially like, is to remove all of this extra containing elements (boxes, borders, shapes, etc,) that we usually use to separate the content of a page (header, footer,&#8230;). Check these sites.</p>
<p><a href="http://www.br-time.jp/"><img decoding="async" loading="lazy" class="alignundefined wp-image-6844 " src="/uploads-archive/2015/02/02.jpg" alt="02" width="669" height="380" /></a></p>
<p>In this example, you can appreciate no limitation between header and footer. It feels more like an interactive kiosk instead. The hierarchy of content is done through a left to right division. As a consequence the beautiful products shine through.</p>
<p><a href="http://foreword.io/"><img decoding="async" loading="lazy" class="aligncenter wp-image-6850 " src="/uploads-archive/2015/02/131.jpg" alt="131" width="658" height="425" srcset="/uploads-archive/2015/02/131.jpg 928w, /uploads-archive/2015/02/131-300x194.jpg 300w, /uploads-archive/2015/02/131-228x147.jpg 228w" sizes="(max-width: 658px) 100vw, 658px" /></a></p>
<p>&nbsp;</p>
<p>Here, the content is greatly emphasized. Instead of reading a header first, you read the name of the company and the statement about what they do (and where they do it). Followed by the global navigation.</p>
<p>It is a good way to emphasise the brand, and make a good first impact,  before getting people to navigate. Very neat.</p>
<h2></h2>
<p>&nbsp;</p>
<h2>MODULAR OR GRID BASED</h2>
<p>This trend is not exactly new, we have used it in the past too indeed. Little by little it&#8217;s gaining notoriety thanks to the introduction of responsive web design. The layout built on modular or grid-like structures can flex based on the screen size.</p>
<p><a href="http://www.teambadcompanyrowing.com/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6853" src="/uploads-archive/2015/02/04.jpg" alt="04" width="692" height="422" /></a></p>
<p>This example perfectly demonstrates the idea. The design is completely responsive. As the screen size changes each module adapts and sizes to fit the space.</p>
<p><a href="http://madagascar.dreamworks.com/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6854" src="/uploads-archive/2015/02/19.jpg" alt="19" width="732" height="537" /></a></p>
<p>&nbsp;</p>
<p>In this example there is an important design element at work here, which the previous example lacked. The size of the modules vary to reflect the order of importance and its place in the hierarchy.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>SINGLE SCREEN</h2>
<p>When the design adapts to completely fill the screen, without scrolling, which means that the content has to be extremely focused, and the hierarchy of content clearly established.</p>
<p><a href="http://hatchcollective.co.uk/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6855" src="/uploads-archive/2015/02/09.jpg" alt="09" width="725" height="518" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>


LAYOUT TRENDS FOR 2015

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


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

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


Free Web Templates &#038; Themes

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


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2015/12/25

2015/10/23

2015/08/26

2015/06/30

2015/05/13

2015/04/22

2015/04/01

2015/03/25

2015/03/11

2015/02/27

2015/02/11

2015/01/14

2015/01/14

2014/12/17

2014/11/12

2014/11/05

2014/10/22

2014/10/08