<p>border-radiusやbox-shadow、transitionなど、PCサイトでもCSS3を使うことは徐々に増えてきました。</p>
<p>今回は、そんなCSS3を使ってアニメーションをしているサイトで、</p>
<p>ちょっとひと味違う感じのサイトを集めてみました。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://giorgibou.com/" target="_blank">Georgina Bousia | Architect and Graphic Designer</a></p>
<p><a href="http://giorgibou.com/" target="_blank"><img decoding="async" loading="lazy" alt="Georgina Bousia" src="/uploads-archive/2014/04/Georgina.png" width="656" height="382" /></a></p>
<p>&nbsp;</p>
<p>メインビジュアルに使われている、微かに白がかった菱形がゆっくり移動するアニメーションがcss3によって実装されています。<br />
ナビゲーションにbefore疑似要素でつけられた伸び縮みするアンダーラインも面白いです。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.newbalance.co.jp/wellness/" target="_blank">Wellness｜New Balance Japan</a></p>
<p><a href="http://www.newbalance.co.jp/wellness/" target="_blank"><img decoding="async" loading="lazy" alt="Wellness" src="/uploads-archive/2014/04/Wellness.png" width="656" height="521" /></a></p>
<p>&nbsp;</p>
<p>メインビジュアルの動画もインパクトがありますが、コンテンツへのリンクをマウスでホバーしたときの画像の拡大と、変形が面白いです。</p>
<p>&nbsp;</p>
<p><a class="link" href="https://trip-u.com/" target="_blank">TRIP(トリップ)：観光･体験商品の売買プラットフォーム</a></p>
<p><a href="https://trip-u.com/" target="_blank"><img decoding="async" loading="lazy" alt="TRIP(トリップ)" src="/uploads-archive/2014/04/58bf890e57cf7b71d2ae9ffda86c3885.png" width="656" height="419" /></a></p>
<p>メインビジュアルのテキスト部分がスライダーと連動してアニメーションしています。<br />
この部分と下のコンテンツ画像はマウスでホバーすると拡大されます。</p>
<p>ホバーすると画像が拡大されるアニメーションの使われたサイトが増えてきている印象を感じました。</p>
<p>&nbsp;</p>


CSS3アニメーションがひと味違うサイト

<p><a class="link" title="Amazon.co.jpへ" href="http://www.amazon.co.jp/%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E2%80%95%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E5%9F%BA%E6%9C%AC%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB-%E5%B8%B8%E7%94%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E5%8D%97%E9%9B%B2-%E6%B2%BB%E5%98%89/dp/4766120175/" target="_blank">「レイアウトデザイン -レイアウト基本マニュアル-」南雲 治嘉</a></p>
<p><a style="display:block;text-align:center;" title="Amazon.co.jpへ" href="http://www.amazon.co.jp/%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E2%80%95%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E5%9F%BA%E6%9C%AC%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB-%E5%B8%B8%E7%94%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E5%8D%97%E9%9B%B2-%E6%B2%BB%E5%98%89/dp/4766120175/" target="_blank"><img decoding="async" loading="lazy" class="aligncenter" title="Amazon.co.jp" alt="レイアウト・デザイン" src="http://ecx.images-amazon.com/images/I/41bm80MhSQL._SL500_AA300_.jpg" width="150" height="150" /></a></p>
<p>&nbsp;</p>
<p>WEB・印刷を問わず、デザインに必要なレイアウトの基礎が、</p>
<p>実例とともにわかりやすく説明されています。</p>
<p>これまで、それとなく使っていた基本的なことについても、それが必要とされる理由について、丁寧に説明してくれています。</p>
<p>これからデザインを勉強する方だけでなく、基礎を復習したい方にもとてもおすすめです。</p>
<p>&nbsp;</p>
<p><a class="link" title="Amazon.co.jpへ" href="http://www.amazon.co.jp/%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%BB%E3%83%AB%E3%83%BC%E3%83%AB%E3%82%BA-%E8%89%B2%E3%81%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8-%E4%BC%8A%E9%81%94-%E5%8D%83%E4%BB%A3/dp/4844358839/" target="_blank">「カラー・ルールズ」伊達 千代</a></p>
<p><a style="display:block;text-align:center;" title="Amazon.co.jpへ" href="http://www.amazon.co.jp/%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%BB%E3%83%AB%E3%83%BC%E3%83%AB%E3%82%BA-%E8%89%B2%E3%81%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8-%E4%BC%8A%E9%81%94-%E5%8D%83%E4%BB%A3/dp/4844358839/" target="_blank"><img decoding="async" loading="lazy" class="aligncenter" title="Amazon.co.jp" alt="カラー・ルールズ" src="http://ecx.images-amazon.com/images/I/41DXbRrv52L._SL500_AA300_.jpg" width="150" height="150" /></a></p>
<p>私は色の扱いが子供のころから苦手だったのですが、</p>
<p>こちらの本に出会ってから、色の使い方や他の色との合わせ方について理解することができました。</p>
<p>今は新品で手に入れるのは難しいようですが、</p>
<p>色の使い方についてこれから学習する方にはおすすめです。</p>
<p>&nbsp;</p>
<p><a class="link" title="Amazon.co.jpへ" href="http://www.amazon.co.jp/%E3%83%95%E3%83%A9%E3%83%83%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%83%AB%E3%83%BC%E3%83%AB-Web%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%96%B0%E3%81%97%E3%81%84%E8%80%83%E3%81%88%E6%96%B9%E3%80%82-%E4%BD%90%E8%97%A4-%E5%A5%BD%E5%BD%A6/dp/4844335057/" target="_blank">「フラットデザインの基本ルール」佐藤 好彦</a></p>
<p><a style="display:block;text-align:center;" title="Amazon.co.jpへ" href="http://www.amazon.co.jp/%E3%83%95%E3%83%A9%E3%83%83%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%83%AB%E3%83%BC%E3%83%AB-Web%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%96%B0%E3%81%97%E3%81%84%E8%80%83%E3%81%88%E6%96%B9%E3%80%82-%E4%BD%90%E8%97%A4-%E5%A5%BD%E5%BD%A6/dp/4844335057/" target="_blank"><img decoding="async" loading="lazy" class="aligncenter" title="Amazon.co.jp" alt="フラットデザインの基本ルール" src="http://ecx.images-amazon.com/images/I/41BrJ-9F7UL._SL500_AA300_.jpg" width="150" height="150" /></a></p>
<p>&nbsp;</p>
<p>今WEBで必要とされているフラットデザインについて、</p>
<p>フラットデザインが必要とされる背景も踏まえた上で、丁寧に説明されています。</p>
<p>一線で活躍されているデザイナーの方々のインタビューもあり、</p>
<p>いろんな角度からフラットデザインについて学ぶことができるので、おすすめです。</p>


デザインの勉強におすすめの本(基礎編)

eye-nino.png

【jQuery】cookieをJSON形式で保存して読み込む方法

レスポンシブ＆タッチ対応！スライダーjQueryプラグイン「SlidesJS」

<p>iOS7では、アプリのグループを選択したときに、グループのアイコンと一緒に背景も拡大されていて、</p>
<p>アイコンが近づいてくる感じをより強く感じることができます。</p>
<p>この動きがかっこいいと思ったので、</p>
<p>Webサイト上でもできないかと思い、jQueryを使ってやってみました。</p>
<p>&nbsp;</p>
<p>↓作ってみたもの(Firefox以外推奨)</p>
<p><a class="demo" href="/demo/ninomiya/43/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<p>今回は、ある要素がhoverになったときに、</p>
<p>bodyに設定した背景画像を拡大させるようにします。</p>
<p>HTMLは普通に組みます。</p>
<p>ただ今回の方法ではhtmlとbodyの高さを100%に設定する必要があるので、一画面内に閲覧する要素が収まっている必要があります。</p>
<p>&nbsp;</p>
<p>CSSの設定をします。</p>

		<div id="crayon-64953fd598de0773419965" 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">CSS</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;">
html, body{ width:100%;height:100%;} 
body{
	background-image: url(../images/bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover; /*背景画像の大きさをbody要素いっぱいに表示*/
	overflow: hidden; /*画面外にはみ出した部分を隠します*/
}</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-64953fd598de0773419965-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de0773419965-2">2</div><div class="crayon-num" data-line="crayon-64953fd598de0773419965-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de0773419965-4">4</div><div class="crayon-num" data-line="crayon-64953fd598de0773419965-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de0773419965-6">6</div><div class="crayon-num" data-line="crayon-64953fd598de0773419965-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de0773419965-8">8</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-64953fd598de0773419965-1"><span class="crayon-k ">html, body</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de0773419965-2"><span class="crayon-k ">body</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd598de0773419965-3"><span class="crayon-h">	</span><span class="crayon-e ">background-image</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 ">../images/bg.jpg</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de0773419965-4"><span class="crayon-h">	</span><span class="crayon-e ">background-repeat</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" id="crayon-64953fd598de0773419965-5"><span class="crayon-h">	</span><span class="crayon-e ">background-position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">center</span><span class="crayon-h"> </span><span class="crayon-i ">center</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de0773419965-6"><span class="crayon-h">	</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><span class="crayon-h"> </span><span class="crayon-c">/*背景画像の大きさをbody要素いっぱいに表示*/</span></div><div class="crayon-line" id="crayon-64953fd598de0773419965-7"><span class="crayon-h">	</span><span class="crayon-e ">overflow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">hidden</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">/*画面外にはみ出した部分を隠します*/</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de0773419965-8"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>htmlとbodyのwidthとheightを100%に設定します。</p>
<p>bodyに背景画像を指定し、background-size: coverで、body要素いっぱいに背景画像を表示するように設定します。</p>
<p>bodyのoverflowは、hiddenにする必要があります。</p>
<p>&nbsp;</p>
<p>jQueryで動きをつけます。</p>

		<div id="crayon-64953fd598de4051629978" 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(){

	$("nav&gt;ul&gt;li").hover(function(){ //対象の要素をhoverしたときに実行
		$("html").animate({ //html要素を拡大し、拡大してよってしまう分だけ左に移動させる
			"width" : "125%",
			"margin-left": "-12.5%"
		}, 500);
	},function(){ //元に戻す
		$("html").animate({
			"width" : "100%",
			"margin-left": "0"
		}, 500);
	});

});</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-64953fd598de4051629978-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-2">2</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-4">4</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-6">6</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-8">8</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-10">10</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-12">12</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598de4051629978-14">14</div><div class="crayon-num" data-line="crayon-64953fd598de4051629978-15">15</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-64953fd598de4051629978-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-64953fd598de4051629978-2">&nbsp;</div><div class="crayon-line" id="crayon-64953fd598de4051629978-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"nav&gt;ul&gt;li"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">hover</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><span class="crayon-h"> </span><span class="crayon-c">//対象の要素をhoverしたときに実行</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de4051629978-4"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"html"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">//html要素を拡大し、拡大してよってしまう分だけ左に移動させる</span></div><div class="crayon-line" id="crayon-64953fd598de4051629978-5"><span class="crayon-h">			</span><span class="crayon-s">"width"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"125%"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de4051629978-6"><span class="crayon-h">			</span><span class="crayon-s">"margin-left"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"-12.5%"</span></div><div class="crayon-line" id="crayon-64953fd598de4051629978-7"><span class="crayon-h">		</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">500</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de4051629978-8"><span class="crayon-h">	</span><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><span class="crayon-h"> </span><span class="crayon-c">//元に戻す</span></div><div class="crayon-line" id="crayon-64953fd598de4051629978-9"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"html"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de4051629978-10"><span class="crayon-h">			</span><span class="crayon-s">"width"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"100%"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd598de4051629978-11"><span class="crayon-h">			</span><span class="crayon-s">"margin-left"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0"</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598de4051629978-12"><span class="crayon-h">		</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">500</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd598de4051629978-13"><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 crayon-striped-line" id="crayon-64953fd598de4051629978-14">&nbsp;</div><div class="crayon-line" id="crayon-64953fd598de4051629978-15"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>今回の方法では、html要素を拡大することによって 背景を表示する領域を拡大し、</p>
<p>結果として背景画像が拡大されて表示されるようにしました。</p>
<p>背景を設定しているbody要素を拡大すれば背景画像も拡大されるように思いましたが、</p>
<p>body要素を拡大しても背景画像の大きさはそのまま固定されてしまい、うまく行きませんでした。</p>
<p>そこでbody要素を覆っているhtmlを拡大してみたところうまく行ったので、この方法を使いました。</p>
<p>ただこの方法だと、htmlを拡大したときに横方向のスクロールバーが出てしまうので、bodyにoverflow:hiddenを設定しています。</p>
<p>&nbsp;</p>
<p>DEMOではhoverした要素も拡大して、より動きをiOS7に近づけてみました。</p>
<p>カテゴリーで商品検索をするときなどに、この方法で直感的に操作できるのではないかと期待しています。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

jQueryでiOS7のようにアイコンを選択したときに背景を拡大させる方法を考える

<p>CSSの設定で、&#8221;overflow: auto&#8221; や&#8221;overflow:scroll&#8221;を指定したとき、</p>
<p>iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、</p>
<p>スクロールは可能なのですが、スクロールバーが表示されません。</p>
<p>そのままでは、そこがスクロール可能であるということがわかりづらく、</p>
<p>サイトとして使いづらくなってしまう可能性が高くなります。</p>
<p>&nbsp;</p>
<p>なんとか解決策はないかと探していたところ、</p>
<p>Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、</p>
<p>その方法についてご紹介いたします。</p>
<p>&nbsp;</p>
<p>↓こちらがデモです(ChromeもしくはSafariにてご覧下さい)</p>
<p><a class="demo" href="/demo/ninomiya/42/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<p>スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundとborder-radiusとなります。</p>
<p><img decoding="async" loading="lazy" alt="-webkit-scrollbarの説明" src="/uploads-archive/2014/03/webkit-scrollbar.png" width="640" height="640" /></p>
<p>横方向のスクロールバーを別で指定する場合には、:horizontal疑似クラスを設定することで可能となります。</p>
<p>また、スクロールバーの動く部分(scrollbar-thumb)の前の部分は:start疑似クラス、後ろの部分は:end疑似クラスにて設定が可能です。</p>
<p>例：</p>

		<div id="crayon-64953fd5988a7717493864" 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">CSS</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;">
.element{ /* 対象となる要素のクラス名が"element"の場合 */
	overflow: auto;
}
.element::-webkit-scrollbar{ /* スクロールバー本体 */
	width: 5px;
	background: #9aadfc;
}
.element::-webkit-scrollbar:horizontal{ /* 横方向のスクロールバー本体 */
	width: 5px;
	background: #9aadfc;
}
.element::-webkit-scrollbar-thumb{ /* スクロールバーの動く部分 */
	background: #435295;
	border-radius: 2px;
}
.element::-webkit-scrollbar-thumb:horizontal{ /* 横方向のスクロールバーの動く部分 */
	background: #435295;
	border-radius: 2px;
}
.element::-webkit-scrollbar-track-piece:start{ /* スクロールバーの動く部分の前 */
	background: #9aadfc;
}
.element::-webkit-scrollbar-track-piece:end{ /* スクロールバーの動く部分の後ろ */
	background: #a3d2a0;
}
.element::-webkit-scrollbar-corner{ /* スクロールバー角 */
	background: transparent;
}</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-64953fd5988a7717493864-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-2">2</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-4">4</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-6">6</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-8">8</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-10">10</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-12">12</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-14">14</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-16">16</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-18">18</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-20">20</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-22">22</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-24">24</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-26">26</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-28">28</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-64953fd5988a7717493864-1"><span class="crayon-k ">.element</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* 対象となる要素のクラス名が"element"の場合 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-2"><span class="crayon-h">	</span><span class="crayon-e ">overflow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-4"><span class="crayon-k ">.element::-webkit-scrollbar</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバー本体 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-5"><span class="crayon-h">	</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">5px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-6"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#9aadfc</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-7"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-8"><span class="crayon-k ">.element::-webkit-scrollbar:horizontal</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* 横方向のスクロールバー本体 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-9"><span class="crayon-h">	</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">5px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-10"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#9aadfc</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-11"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-12"><span class="crayon-k ">.element::-webkit-scrollbar-thumb</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバーの動く部分 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-13"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#435295</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-14"><span class="crayon-h">	</span><span class="crayon-e ">border-radius</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">2px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-15"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-16"><span class="crayon-k ">.element::-webkit-scrollbar-thumb:horizontal</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* 横方向のスクロールバーの動く部分 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-17"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#435295</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-18"><span class="crayon-h">	</span><span class="crayon-e ">border-radius</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">2px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-19"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-20"><span class="crayon-k ">.element::-webkit-scrollbar-track-piece:start</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバーの動く部分の前 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-21"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#9aadfc</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-22"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-23"><span class="crayon-k ">.element::-webkit-scrollbar-track-piece:end</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバーの動く部分の後ろ */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-24"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#a3d2a0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-25"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-26"><span class="crayon-k ">.element::-webkit-scrollbar-corner</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバー角 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-27"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">transparent</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-28"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>こちらのサイト（→<a href="http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/webkit-%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/" target="_blank">WebKitを使ってスクロールバーをカスタマイズ</a>）で、より詳しい説明をしていただいてました。</p>
<p>&nbsp;</p>
<p>あまり細かな設定はできませんが、スクロールバーの存在を示す場合には十分に使うことができるので、</p>
<p>Webkitの利用が多いスマートフォンサイトなどでは実用としても利用できると思います。</p>
<p>&nbsp;</p>
<h3>参考サイト</h4>
<p><a class="link" href="http://dev.classmethod.jp/client-side/webkit-scrollbar-design/" target="_blank">Webkit独自拡張でスクロールバーのデザインを変更する</a></p>
<p><a class="link" href="http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/webkit-%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/" target="_blank">WebKitを使ってスクロールバーをカスタマイズ</a></p>

nino-eye (4).jpg

iPhoneやAndroidのサイトでスクロールバーをカスタマイズ

<p>フラットデザインのような比較的シンプルなサイトでは、</p>
<p>装飾が少ない分、ユーザーを退屈させないためにも、</p>
<p>コンテンツに高いクオリティが必要となってきます。</p>
<p>&nbsp;</p>
<p>パララックスのようにアニメーションをつけることも効果的ですが、</p>
<p>グラフィックが魅力的であると、一目で惹き付けられるため、こちらも効果的です。</p>
<p>また、写真素材に頼れない場合にも、グラフィックで魅せることができると、</p>
<p>デザインとして幅を広げることができます。</p>
<p>&nbsp;</p>
<p>そういったわけで、今回はグラフィックが魅力的だと感じたサイトを９つご紹介いたします。</p>
<p>&nbsp;</p>
<p><a class="link" title="株式会社ツキボシPP" href="http://www.tsukiboshi-pp.jp/" target="_blank">株式会社ツキボシPP</a></p>
<p><a href="http://www.tsukiboshi-pp.jp/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/1949fa3fd0ca336f430b5e27d1e6d33c.png" width="656" height="370" /></a></p>
<p>機械の部品を、配置や背景の効果によって芸術作品のように見せています。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.nissanusa.com/passiongenome/#landing" target="_blank">Nissan Passion Genome</a></p>
<p><a href="http://www.nissanusa.com/passiongenome/#landing" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/NissanPassionGenome.png" width="656" height="353" /></a></p>
<p>動きもすごいですが、静止画としてみた場合でも、人物の写真がワイヤーのようなものでできていて、面白いです。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://fremtidenshoder.no/index" target="_blank">NITH</a></p>
<p><a href="http://fremtidenshoder.no/index" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/NITH.png" width="656" height="370" /></a></p>
<p>こちらもとにかく動きがすごいですが、見た目も点が形を作っていて面白いです。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.yamazen-net.co.jp/" target="_blank">ヤマゼンコミュニケイションズ株式会社</a></p>
<p><a href="http://www.yamazen-net.co.jp/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/9f8516c9afebca2aac60eb770e87a735.png" width="656" height="370" /></a></p>
<p>円の中に見切れる ぎりぎりのところまでテキストを配置しているのが、印象的です。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://fixedagency.com/" target="_blank">Fixed Digital Agency</a></p>
<p><a href="http://fixedagency.com/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/FixedDigitalAgency.png" width="656" height="353" /></a></p>
<p>大きな面の色をうまく使っています。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.spicebox.co.jp/fresh/" target="_blank">spicebox 新卒採用2015</a></p>
<p><a href="http://www.spicebox.co.jp/fresh/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/3e1a4545d156160f5072f3e86f442b6b.png" width="656" height="370" /></a></p>
<p>線の使い方が面白いです。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://gggggggg.jp/" target="_blank">株式会社Gear8</a></p>
<p><a href="http://gggggggg.jp/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/15f12b7e414f1a513b262fcbb813360d.png" width="656" height="370" /></a></p>
<p>背景や前景の泡などををポリゴン状にしてみせていて、ただの写真ではない面白さがあります。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.homac.co.jp/-/recruit/2015/" target="_blank">ホーマック株式会社　2015年度 新卒採用サイト</a></p>
<p><a href="http://www.homac.co.jp/-/recruit/2015/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/65d1f7e13e9420c1195ff2344181f792.png" width="656" height="370" /></a></p>
<p>大胆に使った白地と目立つ赤の使い方が絶妙です。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://ja.ad-stir.com/" target="_blank">広告配信SSP 「AdStir」</a></p>
<p><a href="http://ja.ad-stir.com/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/7b6dedf00e6bdec2c3311099799d7c2b.png" width="656" height="370" /></a></p>
<p>複雑なパララックスを使っています。背景に使ったテキストがかっこいいです。</p>
<p>&nbsp;</p>


グラフィックが魅力的なサイト

<p>SafariやGoogle Chromeなど、webkitを使ったブラウザではCCS3のfilterを使って、コンテンツをぼかすことができます。</p>
<p>しかし、上に重ねたコンテンツのところだけをぼかすように、部分的にぼかすことはできません。</p>
<p>SVGを使った方法もありますが、CSS3のfilterとjQueryを使ってなんとかできないかやってみました。</p>
<p>&nbsp;</p>
<p>↓こちらが作ってみたものです(ChromeもしくはSafariでご覧下さい)。</p>
<p><a class="demo" href="/demo/ninomiya/41/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<p>今回は、body内の要素を丸々コピーして要素の上に被せ、</p>
<p>被せた要素にfilterをかけてcssのclipで一部だけ表示するという方法を使いました。</p>
<p>&nbsp;</p>
<p>HTML</p>

		<div id="crayon-64953fd597e37519460867" 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;body&gt;
&lt;div class="contents"&gt;
	：
	(コンテンツ)
	：
&lt;/div&gt;
&lt;/body&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-64953fd597e37519460867-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e37519460867-2">2</div><div class="crayon-num" data-line="crayon-64953fd597e37519460867-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e37519460867-4">4</div><div class="crayon-num" data-line="crayon-64953fd597e37519460867-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e37519460867-6">6</div><div class="crayon-num" data-line="crayon-64953fd597e37519460867-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-64953fd597e37519460867-1"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e37519460867-2"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"contents"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd597e37519460867-3"><span class="crayon-i ">	：</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e37519460867-4"><span class="crayon-i ">	(コンテンツ)</span></div><div class="crayon-line" id="crayon-64953fd597e37519460867-5"><span class="crayon-i ">	：</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e37519460867-6"><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd597e37519460867-7"><span class="crayon-r ">&lt;/body&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>JavaScript</p>

		<div id="crayon-64953fd597e3b848665737" 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(){
	 //body内のコンテンツをコピーしてコンテンツの後ろに挿入する
	$("body").append($(".contents").clone());

	$(".contents:last").css({
		"width" : "100%",
		"position" : "absolute",
		"top" : "0",
		"left" : "0",
		"-webkit-filter" : "blur(10px)", //ぼかしをかける
		"clip" : "rect(540px 600px 900px 240px)" //クリッピングして一部だけ表示する
	});
});</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-64953fd597e3b848665737-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-2">2</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-4">4</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-6">6</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-8">8</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-10">10</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-12">12</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-13">13</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-64953fd597e3b848665737-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-64953fd597e3b848665737-2"><span class="crayon-h">	 </span><span class="crayon-c">//body内のコンテンツをコピーしてコンテンツの後ろに挿入する</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"body"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">append</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".contents"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">clone</span><span class="crayon-sy">(</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-64953fd597e3b848665737-4">&nbsp;</div><div class="crayon-line" id="crayon-64953fd597e3b848665737-5"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".contents:last"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-6"><span class="crayon-h">		</span><span class="crayon-s">"width"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"100%"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-7"><span class="crayon-h">		</span><span class="crayon-s">"position"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"absolute"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-8"><span class="crayon-h">		</span><span class="crayon-s">"top"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-9"><span class="crayon-h">		</span><span class="crayon-s">"left"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-10"><span class="crayon-h">		</span><span class="crayon-s">"-webkit-filter"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"blur(10px)"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//ぼかしをかける</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-11"><span class="crayon-h">		</span><span class="crayon-s">"clip"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"rect(540px 600px 900px 240px)"</span><span class="crayon-h"> </span><span class="crayon-c">//クリッピングして一部だけ表示する</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-12"><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-64953fd597e3b848665737-13"><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>今回作ったものは、現在のところChrome, Safariだけで使える方法なので、</p>
<p>実用にはまだまだ遠いですが、SVGを使った方法（参考→「<a href="http://unformedbuilding.com/articles/frosted-glass-effect-with-css-and-svg/" target="_blank">CSS と SVG で曇りガラスのような効果を作る</a>」）と合わせ、</p>
<p>効果の出し分けをするなどすれば、少しでも実用化に近づけることができるかもしれません。</p>
<p>&nbsp;</p>
<p>いずれにしても、Android2.3系でもぼかし効果を使うことはあきらめなければならなそうです。<br />
Android2.3系は、Androidの中でも2014年2月時点でも2割のシェアがあり（<a href="http://developer.android.com/about/dashboards/index.html" target="_blank">参考</a>）、無視することもできないため、</p>
<p>もしぼかし効果を使う場合は、Android2.3系において、ぼかし無しで問題無いようなデザインにしておく必要がありそうです。</p>

jQueryやCSS3を使って画面の一部をぼかす方法を考える

<p>日本語フォントでは、基本一つ一つの文字が等幅で作られていることがほとんどで、</p>
<p>ウェブサイト上でテキストによって文字組をした場合に、不自然な文字間隔になってしまう場所が出てきます。</p>
<p>フラットデザインやレスポンシブデザインが標準化傾向にある今、</p>
<p>ウェブサイトでの文字は文章はもちろんのこと、テキストにおいても画像を使わずテキストを使う必要性が高まってきており、</p>
<p>日本語フォント独特の文字間隔の不自然さが、ウェブデザインでの障害となることもあります。</p>
<p>&nbsp;</p>
<p>そんな中、ウェブページのテキストの文字詰めを自動でしてくれるJSが公開されていましたので、</p>
<p>こちらをご紹介いたします。</p>
<p><a class="link" href="http://fladdict.net/blog/2011/02/auto-kerning.html" target="_blank">HTMLで文字詰めするタイポグラフィー用JS</a></p>
<p>ファイルはこちらのサイトよりダウンロードください。</p>
<p>&nbsp;</p>
<p>↓DEMO作ってみました。</p>
<p><a class="demo" title="DEMO" href="/demo/ninomiya/40/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>使い方</h3>
<p>まず、jQueryとダウンロードした文字詰めのJSファイルを読み込みます。</p>

		<div id="crayon-64953fd597a64243774703" 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;script type="text/javascript" src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/FLAutoKerning.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd597a64243774703-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a64243774703-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd597a64243774703-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-1.9.1.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597a64243774703-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/FLAutoKerning.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>次に、文字詰めを行うHTML要素に、</p>
<p>FLAutoKerning.process($(&#8216;対象の要素&#8217;));</p>
<p>と行った形でスクリプトをあてます。</p>

		<div id="crayon-64953fd597a68292024937" 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(){
	FLAutoKerning.process($('.group2 h1'));
	FLAutoKerning.process($('.group2 nav li a'));
	FLAutoKerning.process($('.group2 h2'));
	FLAutoKerning.process($('.group2 section .text'));
});</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-64953fd597a68292024937-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-2">2</div><div class="crayon-num" data-line="crayon-64953fd597a68292024937-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-4">4</div><div class="crayon-num" data-line="crayon-64953fd597a68292024937-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-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-64953fd597a68292024937-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-64953fd597a68292024937-2"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 h1'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597a68292024937-3"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 nav li a'</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-64953fd597a68292024937-4"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 h2'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597a68292024937-5"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 section .text'</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-64953fd597a68292024937-6"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>これで文字詰めが行われます。</p>
<p>文字詰めを行う文字一つ一つが&lt;span&gt;で囲まれますので、&lt;span&gt;で文字の大きさや色などを指定していたりする場合は注意が必要です。</p>
<p>&nbsp;</p>
<p>全体として文字の間にできる不自然な空白が抑えられ、</p>
<p>特に句読点や括弧などの前後にできる大きな空白が抑えられているので、</p>
<p>まとまった感じがします。</p>
<p>&nbsp;</p>
<p>等幅でなくなるため、行の終わりが揃わなくなるという問題が出てくるため、</p>
<p>タイトルやキャッチコピーなどでの利用に抑えたり、</p>
<p>センタリングや右寄せした文章のような、行の終わりをそろえる必要がないような箇所に使うなどの利用法がいいかもしれません。</p>

日本語の文字詰め(カーニング)を自動で調整してくれるjQuery

jQueryとWebフォントでスマホの傾きで色の変わるアイコンを作ってみる

<p>金融系などの固めのデザインを必要とするサイトでは、<br />
今流行っているデザインを使いづらく、<br />
どうしても２〜３年前に流行ったデザインなど、時代遅れなデザインになりがちです。</p>
<p>この１〜２年でのフラットデザインの流行により<br />
PCメインだった２〜３年前のデザインと、タブレットPCやスマホを重要視した最近のデザインでは使い勝手も変わってくるため、<br />
できれば今の時代にあったデザインにすることが理想的です。</p>
<p>今回は固めの印象を残しつつも、今の時代に合わせたデザインのサイトを探してみましたので、ご紹介いたします。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.nakazawa-kenpan.co.jp/" target="_blank">ナカザワ建販株式会社</a></p>
<p><a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://www.nakazawa-kenpan.co.jp/" target="_blank"><img decoding="async" loading="lazy" alt="" src="/uploads-archive/2014/01/80c6415fdff63a9c46f01b2e6aec3138.png" width="328" height="428" /></a></p>
<p>フラット系。</p>
<p>スライドアニメーショが凝っていて、横画面いっぱいに広がるメインビジュアルが今っぽいです。</p>
<p><a class="link" href="http://id-credit.com/index_pc.html" target="_blank">ドコモの「iD」</a></p>
<p><a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://id-credit.com/index_pc.html" target="_blank"><img decoding="async" loading="lazy" alt="ドコモの「iD」" src="/uploads-archive/2014/01/f560c3cb99651db3bb705064d4939b07.png" width="328" height="663" /></a></p>
<p>グリッド系。</p>
<p>こちらはにぎやかで、固めのサイトから少し外れる気もしましたが、ヒントになりそうでしたので載せました。</p>
<p>グリッド系をイメージしたデザインですが、基本２カラムで構成されていて、安定感があります。各ボックスに小さめのドロップシャドウと小さめの角丸をつけ、落ち着いた印象を与えています。リンクを示す矢印のアイコンや、一番下のよくある質問のQのアイコンは、真円の小さなアイコンで統一されています。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.brotherearth.com/ja/" target="_blank">Brother Earth</a></p>
<p><a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://www.brotherearth.com/ja/" target="_blank"><img decoding="async" loading="lazy" alt="Brother Earth" src="/uploads-archive/2014/01/Brother-Earth.jpg" width="328" height="226" /></a></p>
<p>フラット系＋グリッド系。</p>
<p>今風のデザインですが、堅実な印象も感じさせてくれます。レスポンシブデザインになっていて、各要素が無駄なく、見やすく配置されています。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.rohto.jp/" target="_blank">ROHTO</a></p>
<p><a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://www.rohto.jp/" target="_blank"><img decoding="async" loading="lazy" alt="ROHTO" src="/uploads-archive/2014/01/c3b73f751bf87b8c72a4bd25d9f15ab1.png" width="328" height="531" /></a></p>
<p>フラット系。</p>
<p>青色のラインや小さなアイコン、テキストなどで堅実な印象を感じさせて筒も、画面横いっぱいに広がるニュース表示や縦スクロールのスライダーを２つ並べるなど今風の大胆な印象も感じます。商品などが数多く並べられていますが、全体が青と小さめの赤で統一されているので、うるさく感じません。</p>
<p>&nbsp;</p>
<h2>ポイント</h3>
<p>固めのサイトの印象を与えるものとしては、</p>
<ul>
<li>ヘッダートップの横方向のライン</li>
<li>文字とラインのみで構成されたシンプルなメインビジュアル</li>
<li>小さめのフォント・アイコン</li>
</ul>
<p>といったものがあるように思います。</p>
<p>また、グリッド系のデザインにする場合も、全体にグリッド要素を使わずに、</p>
<p>メインコンテンツに添える形で使うと、イメージを崩さないようです。</p>
<p>&nbsp;</p>
<p>固めの印象を与える要素を全体に散りばめつつ、基本的にはフラット系やグリッド系、レスポンシブといった今の時代に合わせた構成のデザインにすることで、</p>
<p>固めでも今風のデザインのサイトにすることができるのではないかと思います。</p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: ninomiya

2014/04/16

2014/04/09

2014/04/01

2014/03/25

2014/03/19

2014/03/12

2014/03/05

2014/02/19

2014/02/13

2014/02/05

2014/01/29

2014/01/22

2014/01/15

2014/01/07

2013/12/18

2013/12/10

2013/12/04

2013/11/27