nino_eye.jpg

jQueryプラグインを使わずにフリック＆ドラッグで動くスライダーを作ってみる

<p>Photoshopを使い始めて数年経ちましたが、</p>
<p>最近になってようやく知った、便利なショートカットを少しだけご紹介します。</p>
<p>&nbsp;</p>
<h2>移動ツール選択中に「ctrl(command) + 左クリック」</h3>
<p>このショートカットを使うと、Illustratorでオブジェクトを選択するときと同じように、</p>
<p>クリックした場所にある要素のレイヤーを選択することができます。</p>
<p>大量のレイヤーの中から、目的の要素があるレイヤーを選択するのに便利です。</p>
<p><img decoding="async" loading="lazy" alt="ss" src="/uploads-archive/2013/11/ss00.jpg" width="656" height="525" /></p>
<p>↓</p>
<p><img decoding="async" loading="lazy" alt="ss" src="/uploads-archive/2013/11/ss01.jpg" width="656" height="525" /></p>
<p>&nbsp;</p>
<h2>移動ツール選択中に「ctrl(command) + J」</h3>
<p>このショートカットを使うと、選択しているレイヤーを複製することができます。</p>
<p>同じ要素を多数複製したりする場合に便利です。</p>
<p><img decoding="async" loading="lazy" alt="ss" src="/uploads-archive/2013/11/ss02.jpg" width="656" height="525" /></p>
<p>&nbsp;</p>
<p>覚えるととても便利なショートカットですので、</p>
<p>使ったことのない方は、是非使ってみてください。</p>


ひそかに便利なPhotoshopのショートカット（レイヤー系）

<p>インラインSVGはブラウザの制約等により、管理画面などを除いては、なかなか目にする機会が少ないですが、</p>
<p>インラインSVGによるグラフィックとアニメーションを大胆に使ったサイトが面白かったのでご紹介いたします。</p>
<p>&nbsp;</p>
<p>↓サイトはこちらです↓</p>
<p>「<span style="color: #000000; font-family: monospace; font-size: medium; line-height: normal; white-space: pre-wrap;">Fontwalk</span>」<a href="http://www.fontwalk.de/" target="_blank">http://www.fontwalk.de/</a></p>
<p><a href="http://www.fontwalk.de/" target="_blank"><img decoding="async" loading="lazy" title="Fontwalk" alt="Fontwalk" src="/uploads-archive/2013/10/nino_image01.jpg" width="328" height="224" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>まずはこちらのシーン</p>
<p><img decoding="async" loading="lazy" alt="シーン１" src="/uploads-archive/2013/10/nino_image02.jpg" width="328" height="224" /></p>
<p>変化する図形や背景の情報などが大きな数字によって表示されていて、印象的です。</p>
<p>真ん中の回転する分度器のようなものはSVGならではという印象です。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" alt="シーン2" src="/uploads-archive/2013/10/nino_image03.jpg" width="328" height="224" /></p>
<p>つづいて、車で走っているようなアニメーションです。</p>
<p>画面いっぱいに広がるグラフィックを表示しても軽いのもSVGの魅力ですが、</p>
<p>こちらではその利点が最大限に活かされている印象です。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" alt="シーン3" src="/uploads-archive/2013/10/nino_image04.jpg" width="328" height="223" /></p>
<p>筆記体で文字が書かれていくアニメーションです。</p>
<p>WEB上ではFlashを除いてSVGでなければ、このようなアニメーションを表示できないのではないでしょうか。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" alt="シーン4" src="/uploads-archive/2013/10/nino_image05.jpg" width="328" height="224" /></p>
<p>フォントが徐々に変化するアニメーションです。</p>
<p>パッと見たときは気づきませんでしたが、</p>
<p>とても凝ったアニメーションです。</p>
<p>&nbsp;</p>
<p>画面いっぱいにアニメーションを表示する場合に、</p>
<p>SVGが大きな力を発揮するということを、</p>
<p>今回改めて感じました。</p>


SVGとスクロールによるアニメーションを使ったインパクトのあるサイト

<p>「D-Ucar.net」</p>
<p><a href="http://ducar.carsensor.net/" target="_blank"><img decoding="async" loading="lazy" alt="D-Ucar.net" src="/uploads-archive/2013/10/image01.jpg" width="656" height="361" /></a></p>
<p><a href="http://ducar.carsensor.net/" target="_blank">http://ducar.carsensor.net/</a></p>
<p>シルエットをメインにしたイラスト。</p>
<p>お店や街頭がおしゃれ感を出しています。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>「コープさが生活協同組合」</p>
<p><a href="http://www.saga.coop/" target="_blank"><img decoding="async" loading="lazy" alt="コープさが" src="/uploads-archive/2013/10/image03.jpg" width="656" height="362" /></a></p>
<p><a href="http://www.saga.coop/" target="_blank">http://www.saga.coop/</a></p>
<p>淡い色彩で、落ち着いた感じです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>「三好不動産」</p>
<p><a href="http://www.miyoshi.co.jp/" target="_blank"><img decoding="async" loading="lazy" alt="コープさが" src="/uploads-archive/2013/10/image02.jpg" width="656" height="345" /></a></p>
<p><a href="http://www.miyoshi.co.jp/" target="_blank">http://www.miyoshi.co.jp/</a></p>
<p>線をメインにしたイラストで、色数が控えられていて、クールな印象です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>「KALDI COFFEE FARM」</p>
<p><a href="http://www.kaldi.co.jp/" target="_blank"><img decoding="async" loading="lazy" alt="KALDI COFFEE FARM" src="/uploads-archive/2013/10/image05.jpg" width="656" height="365" /></a></p>
<p><a href="http://www.kaldi.co.jp/" target="_blank">http://www.kaldi.co.jp/</a></p>
<p>アートな感じで、おしゃれです。</p>
<p>Flashによるアニメーションが印象的です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>「水からはじまるストーリー「つないで、つながって」(TOTO)」</p>
<p><a href="http://www.toto.co.jp/greenchallenge/tsunaide/" target="_blank"><img decoding="async" loading="lazy" alt="KALDI COFFEE FARM" src="/uploads-archive/2013/10/image04.jpg" width="656" height="362" /></a></p>
<p><a href="http://www.toto.co.jp/greenchallenge/tsunaide/" target="_blank">http://www.toto.co.jp/greenchallenge/tsunaide/</a></p>
<p>こちらも線画メインですが、多色による線画になっています。</p>
<p>ただ、トーンが抑えられていて、落ち着いています。</p>


おしゃれな感じのイラストを使ったサイト

<p>MT(MovableType)はテンプレートをMTの独自タグを使って組み上げていくのですが、</p>
<p>その書き方は作られた時期や、作った人、また、作った人の気分によりバラバラだったりします。</p>
<p>「どれが正しいんだ？」「なぜこんなに書き方があるんだ？」ということがとても気になっていたので、</p>
<p>調べてみたところ、こちらのサイト（→「<a href="http://blog.aklaswad.com/2008/000358.html" target="_blank">MTタグの書き方を調べてみました。</a>」）に詳しく説明がありましたので、</p>
<p>私なりにまとめてみました。</p>
<p>&nbsp;</p>
<h3>一番の基本形</h4>
<p></p>

		<div id="crayon-64953fd5923e5520473413" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;$MTBlogName$&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-64953fd5923e5520473413-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-64953fd5923e5520473413-1"><span class="crayon-r ">&lt;$MTBlogName$&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ブロックタグの場合は</p>

		<div id="crayon-64953fd5923e9049531960" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;MTEntries&gt;
・・・
&lt;/MTEntries&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-64953fd5923e9049531960-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5923e9049531960-2">2</div><div class="crayon-num" data-line="crayon-64953fd5923e9049531960-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-64953fd5923e9049531960-1"><span class="crayon-r ">&lt;MTEntries&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5923e9049531960-2"><span class="crayon-i ">・・・</span></div><div class="crayon-line" id="crayon-64953fd5923e9049531960-3"><span class="crayon-r ">&lt;/MTEntries&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&lt;$MT[タグ名]$&gt;の形が元々の基本形。</p>
<p>ブロックタグの場合は&lt;MT[タグ名]&gt;&lt;/MT[タグ名]&gt;で、$で囲わず、終了タグの先頭に/をつける。</p>
<p>&nbsp;</p>
<h3>MT3から</h4>
<p>MT3以降、$は省略が可能となり、</p>

		<div id="crayon-64953fd5923eb093513938" 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;MTBlogName&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-64953fd5923eb093513938-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-64953fd5923eb093513938-1"><span class="crayon-h">&lt;</span><span class="crayon-i">MTBlogName</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>という記述も可能になった。</p>
<p>&nbsp;</p>
<h3>MT4から</h4>
<p>MT4以降、さらに記述方法が多様化。</p>
<p>タグの大文字・小文字の区別がなくなり、</p>
<p>MTとタグ名の間に:をつけられるようになった。</p>

		<div id="crayon-64953fd5923ed457405288" 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;mtblogname&gt;
でも
&lt;mtBlogName&gt;
でも
&lt;mTblOgnAme&gt;
でも
&lt;mt:blogname&gt;
でもOK</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-64953fd5923ed457405288-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5923ed457405288-2">2</div><div class="crayon-num" data-line="crayon-64953fd5923ed457405288-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5923ed457405288-4">4</div><div class="crayon-num" data-line="crayon-64953fd5923ed457405288-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5923ed457405288-6">6</div><div class="crayon-num" data-line="crayon-64953fd5923ed457405288-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5923ed457405288-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-64953fd5923ed457405288-1"><span class="crayon-h">&lt;</span><span class="crayon-i">mtblogname</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5923ed457405288-2">でも</div><div class="crayon-line" id="crayon-64953fd5923ed457405288-3"><span class="crayon-h">&lt;</span><span class="crayon-i">mtBlogName</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5923ed457405288-4">でも</div><div class="crayon-line" id="crayon-64953fd5923ed457405288-5"><span class="crayon-h">&lt;</span><span class="crayon-i">mTblOgnAme</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5923ed457405288-6">でも</div><div class="crayon-line" id="crayon-64953fd5923ed457405288-7"><span class="crayon-h">&lt;</span><span class="crayon-i">mt</span><span class="crayon-sy">:</span><span class="crayon-i">blogname</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5923ed457405288-8">でも<span class="crayon-i">OK</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>タグ名の大文字と小文字の区別がないということは、</p>
<p>今回調べて初めて知りました。</p>
<p>&nbsp;</p>
<p>さらに、ブロックタグではない通常のタグで、XMLのような</p>

		<div id="crayon-64953fd5923ee336466415" 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;MTBlogName /&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-64953fd5923ee336466415-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-64953fd5923ee336466415-1"><span class="crayon-h">&lt;</span><span class="crayon-i">MTBlogName</span><span class="crayon-h"> </span>/<span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>という記述も可能に。</p>
<p>&nbsp;</p>
<p>要するに、書きやすい方法で自由に記述してOKということのようです。</p>
<p>個人的には&lt;mt:BlogName /&gt;という書き方が混乱せずにいいかなと思っていますが、</p>
<p>どれが正しいとかは特にないようです。</p>

MT(MovableType)のタグの書き方が多い！

jQueryのプチプラグイン化でjQueryを使った関数を広く使えるようにする

<p>デザインを考えるとき、何を優先してデザインしていくかということで迷うことがあります。</p>
<p>「<a href="http://www.amazon.co.jp/dp/4766120175" target="_blank">レイアウトデザイン レイアウト基本マニュアル（南雲治嘉 著）</a>」で優先順位とその理由について、</p>
<p>詳しく説明されていました。</p>
<p>この本ではその他、レイアウトの方法について、基礎の観点からとてもわかりやすく説明されているのでおすすめです。</p>
<p>今回はこの本から、<strong>デザイン</strong>の<strong>優先順位</strong>の部分について、一部ご紹介いたします。</p>
<p><a href="http://www.amazon.co.jp/dp/4766120175" target="_blank"><img decoding="async" loading="lazy" alt="レイアウトデザイン　レイアウト基本マニュアル　南雲治嘉著" src="/uploads-archive/2013/10/bookimage.jpg" width="250" height="250" /></a></p>
<p>&nbsp;</p>
<h2>1.わかりやすさ</h3>
<p>見た瞬間に、その画面が何を伝えようとしているのかが、わかるようにするということ。</p>
<p>情報を整理し、優先順位をつけ、複雑な分割構成は避ける。</p>
<p>&nbsp;</p>
<h2>2.読みやすさ</h3>
<p>デザインには文字は欠かせないもの。</p>
<p>読めないような小さいサイズ、飾りすぎたり踊るような入れ方は避けるべき。</p>
<p>読みやすいサイズ、字間・行間、配置を心がける。</p>
<p>&nbsp;</p>
<h2>3.美しさ・かっこよさ</h3>
<p>作品は美的でなければならない。人にいい感じを与えることが、レイアウトの使命でもある。</p>
<p>しかし、最初に手をつけるものではない。</p>
<p>わかりやすさ、読みやすさを処理した後の、仕上げである。</p>
<p>&nbsp;</p>
<p>補足として</p>
<h2>4.見る人を眠らせない</h3>
<p>全体のまとまりがよくても、ある条件をクリアしていないと眠くなる。</p>
<p>その条件とは視覚的な対比であり、コントラストのことである。</p>
<p>&nbsp;</p>
<p>デザインをするとき、ついつい美しさやかっこよさを一番最初に考えてしまいがちですが、</p>
<p>それ以前にやるべき大切なことがあることが理解できました。</p>
<p>&nbsp;</p>
<p>４の見る人を眠らせないという部分も、</p>
<p>まとまりばかりを意識していて、眠いデザインになってしまったことが私にもあるので、</p>
<p>納得できました。</p>
<p>&nbsp;</p>
<p>みなさんもデザインに迷ったときや見直す必要があるときは、是非参考にされてみてください。</p>


デザインの優先順位

<p>ナビゲーションにアニメーションを使うことは、今ではごく普通のこととなりましたが、</p>
<p>アニメーションの仕方がちょっと変わっていて面白いサイトを集めてみました。</p>
<p>&nbsp;</p>
<h3><a href="http://jtpj.jp/" target="_blank">「女子旅つくるプロジェクト」</a></h4>
<p><a href="http://jtpj.jp/" target="_blank"><img decoding="async" loading="lazy" alt="女子旅つくるプロジェクト" src="/uploads-archive/2013/09/SS01.jpg" width="656" height="362" /></a></p>
<p>CSS3アニメーションとjQueryを組み合わせたアニメーションが使われています。</p>
<p>数種類のアニメーションが組み合わされていて、</p>
<p>とてもきれいです。</p>
<p>&nbsp;</p>
<h3><a href="http://azitas.co.jp/recruit2014/" target="_blank">「Azitas 新卒採用2014・2015」</a></h4>
<p><a href="http://azitas.co.jp/recruit2014/" target="_blank"><img decoding="async" loading="lazy" alt="Azitas 新卒採用2014・2015" src="/uploads-archive/2013/09/SS02.jpg" width="656" height="362" /></a></p>
<p>ホバーアニメーションは普通ですが、</p>
<p>ナビゲーションにGIFアニメが使われていて、</p>
<p>思わず目が止まります。</p>
<p>&nbsp;</p>
<h3><a href="http://fonta.kayac.com/" target="_blank">「FONTA」</a></h4>
<p><img decoding="async" loading="lazy" alt="FONTA" src="/uploads-archive/2013/09/SS03.jpg" width="656" height="362" /></p>
<p>&nbsp;</p>
<p>CSS3アニメーションとjQueryを組み合わせたアニメーションが使われています。</p>
<p>Webアプリとしてのリッチな印象を、アニメーションが高めています。</p>
<p>&nbsp;</p>
<h3><a href="http://cp.okinawastory.jp/" target="_blank">「しゅんおき！旬香周島おきなわ」</a></h4>
<p><img decoding="async" loading="lazy" alt="しゅんおき！旬香周島おきなわ" src="/uploads-archive/2013/09/SS04.jpg" width="656" height="362" /></p>
<p>&nbsp;</p>
<p>CSS3アニメーションがバナー類に使われています。</p>
<p>ゆったりとしたアニメーションが、控えめながら印象を残します。</p>
<p>&nbsp;</p>
<h3><a title="風景結々" href="http://www.fukei-okinawa.jp/" target="_blank">「風景結々」</a></h4>
<p><a href="http://www.fukei-okinawa.jp/" target="_blank"><img decoding="async" loading="lazy" alt="風景結々" src="/uploads-archive/2013/09/SS05.jpg" width="656" height="362" /></a></p>
<p>&nbsp;</p>
<p>左側のナビゲーションにアニメーションが使われています。</p>
<p>よく見るアニメーションのように思いましたが、</p>
<p>よくみると、色の反転の仕方などが凝っています。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


ナビゲーションに面白いアニメーションが使われたサイト

高さを揃えるjQueryプラグイン「jQuery-fixHeightSimple」つくりました

jQueryとCSS3で円の型抜きのホバー効果

jQuery.Deferredでわかりやすく順番にアニメーションする方法

レスポンシブ化に便利！CSSで画像を文字に置き換える方法

jQueryで順番にアニメーションする方法を考える

jQueryで簡単なloading画面を作る

WebGLのJSライブラリー「Three.js」を使ってみた

<p>以前WebGLの動作環境についてご紹介いたしましたが（<a href="/designer/webgl%E3%81%AE%E5%8B%95%E4%BD%9C%E7%92%B0%E5%A2%83%E3%81%BE%E3%81%A8%E3%82%81.html">こちら</a>）、</p>
<p>こちらで、WebGLはグラフィックボードによってはブラウザが最新でも使うことができないという風にご紹介しておりました。</p>
<p>しかしながら、最近のChromeでは、グラフィックボードが古くても、ブラウザ側で環境を再現(エミュレーション)することができるので、WebGLのサイトを見ることができることがわかりました。</p>
<p>&nbsp;</p>
<p>少しうれしくなったので、WebGLを使ったサイトや、デモを集め些細とを探してみましたので、少しご紹介いたします。</p>
<p>&nbsp;</p>
<p><a href="https://www.cubeslam.com/" target="_blank"><img decoding="async" loading="lazy" style="vertical-align: text-top;" alt="CUBE SLAM" src="/uploads-archive/2013/07/image01.jpg" width="640" height="455" /></a><br />
<a href="https://www.cubeslam.com/" target="_blank">CUBE SLAM</a></p>
<p>動物のそれぞれの動きがすごいです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="https://developer.mozilla.org/ja/demos/tag/tech:webgl" target="_blank"><img decoding="async" loading="lazy" alt="WebGL DEMO" src="/uploads-archive/2013/07/image03.jpg" width="640" height="455" /></a></p>
<p><a href="https://developer.mozilla.org/ja/demos/tag/tech:webgl" target="_blank">mozilla Demo Studio WEB GL</a></p>
<p>WebGLのデモ集です。いろんなタイプのWebGLのサンプルを見ることができます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://yomotsu.github.io/threejs-examples/" target="_blank"><img decoding="async" loading="lazy" alt="three.js" src="/uploads-archive/2013/07/image02.jpg" width="640" height="455" /></a></p>
<p><a href="http://yomotsu.github.io/threejs-examples/" target="_blank">Examples created by Yomotsu useing THREE.js</a></p>
<p>three.jsという、WebGLを使いやすくするライブラリを使ったデモ集です。</p>
<p>いきなりコアなWebGLを扱うのは敷居が高い感じがしますが、こういったライブラリを使ってはじめるのもいいと思いました。</p>
<p>&nbsp;</p>


webGLの3Dをつかったサイトやデモサイト

CSS3 + jQueryによる、グラデーションのホバー効果

<p>こちらのサイト（→<a href="http://triand.jp/">http://triand.jp/</a>）をご覧いただきたいのですが、</p>
<p>こちらのサイトでは、トップページのビジュアル部分にアニメーションが使われています。</p>
<p>とても滑らかな動きなので、FlashかHTML5のCanvasで作られていると思ったのですが、実際にはGIFファイルでした。</p>
<p>GIFアニメだと独特のカクカクとした動きしかできないものだと思っていたので驚きました。</p>
<p>調べてみると0.03秒に1コマというとても細かい間隔で作られていました。</p>
<p>&nbsp;</p>
<p>通常Photoshopでは、0.1秒までしか設定できませんが、実はもっと細かくできるんじゃないかと思って、</p>
<p>いろいろ試していたところ、普通にできてしまうことがわかったので、その方法をご紹介いたします。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>まずは「ウィンドウ」→「アニメーション」でアニメーションのフレームを表示します。</p>
<p><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2013/07/img02.jpg" width="480" height="368" /></p>
<p>&nbsp;</p>
<p>つぎに、アニメーションの間隔を指定します。</p>
<p><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2013/07/img01.jpg" width="480" height="368" /></p>
<p>&nbsp;</p>
<p>ドロップボックスに表示されるのは0.1秒までなのですが、</p>
<p>その他を選ぶことでもっと細かく指定できます。</p>
<p><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2013/07/img04.jpg" width="480" height="368" /></p>
<p>1コマ1コマなのでかなり根気の要る作業となりますが、</p>
<p>ちょっとした効果をJS等を使わずに表現するとき、</p>
<p>役に立ちそうです。</p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: ninomiya

2013/11/21

2013/11/13

2013/10/31

2013/10/22

2013/10/22

2013/10/08

2013/10/01

2013/09/25

2013/09/11

2013/09/05

2013/08/28

2013/08/21

2013/08/07

2013/07/31

2013/07/24

2013/07/17

2013/07/10

2013/07/03