<p>ブラウザ上でFlashを使わずに3Dのグラフィック描画を可能にする<strong>HTML5</strong>での新技術の<strong>WebGL</strong>ですが、</p>
<p>動作環境が限定されているのが現状です。</p>
<p>&nbsp;</p>
<p>とはいえど、今後利用範囲が拡大していくことは確実ですので、</p>
<p>まずは利用できる環境を知りたいと思ったので、まとめてみました。</p>
<p>&nbsp;</p>
<p><strong>WebGL</strong>の動作環境として特徴的なのは、</p>
<p>他のHTML5技術ではブラウザ環境だけが制限の要因となることが多いですが、</p>
<p><strong>WebGL</strong>ではグラフィックボードを利用しているため、</p>
<p>グラフィックボードの<strong>OpenGL</strong>への対応状況が制限の要因となってきます。</p>
<p>つまり、ブラウザが最新でもPCが古い場合は利用できないこともあるということです。</p>
<p><strong>※追記→最新のChromeでは、グラフィックボードが対応していなくても、ブラウザ側で再現してしまうので、</strong></p>
<p><strong>問題なく使えるようです。</strong></p>
<p>&nbsp;</p>
<h3>OpenGLの対応状況</h4>
<table>
<tbody>
<tr>
<th>OpenGL 1.x</th>
<th>OpenGL 2.x</th>
<th>OpenGL 3.x</th>
<th>OpenGl ES 2.0</th>
<th>OpenGl ES 3.0</th>
</tr>
<tr>
<td style="text-align: center;">×</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
</tr>
</tbody>
</table>
<p>○：対応　△：ブラウザの設定変更が必要　×：非対応</p>
<p>&nbsp;</p>
<h3>PCブラウザの対応状況</h4>
<table>
<tbody>
<tr>
<th>Firefox 4 以降</th>
<th>Chrome 9 以降</th>
<th>Safari 5.1以降</th>
<th>Opera 12以降</th>
<th>IE 11以降</th>
</tr>
<tr>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">○になりそう</td>
</tr>
</tbody>
</table>
<p>○：対応　△：ブラウザの設定変更が必要　×：非対応</p>
<p>&nbsp;</p>
<h3>スマホのブラウザの対応状況</h4>
<table>
<tbody>
<tr>
<th colspan="4">Android</th>
<th rowspan="2">iOS</th>
</tr>
<tr>
<th>Firefox for Mobile 以降</th>
<th>Opera Mobile 12 以降</th>
<th>Google Chrome for Android 25 以降</th>
<th>Android ブラウザ 以降</th>
</tr>
<tr>
<td style="text-align: center;">○(android 4以降)</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">△(iAdのみ)</td>
</tr>
</tbody>
</table>
<p>○：対応　△：ブラウザの設定変更が必要　×：非対応</p>
<p>&nbsp;</p>
<p>スマホの場合、「Enable WebGL」というアプリをスマホに導入することで、</p>
<p>非対応のブラウザでも<strong>WebGL</strong>を利用可能になるようです。</p>
<p>&nbsp;</p>
<p>ユーザーが<strong>WebGL</strong>を有効にすれば利用可能になるブラウザも多くあるので、</p>
<p>クッキーの説明のように、<strong>WebGL</strong>についての設定を載せるなどして、</p>
<p>作る側が利用拡大を模索していくことも、<strong>WebGL</strong>の普及には重要かもしれません。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


WebGLの動作環境まとめ

<p>Web上ではPDFファイルへのリンクを貼ることが度々あります。</p>
<p>ただその場合閲覧する側は、一度ページを離れなくてはならないだけでなく、</p>
<p>PDFがダウンロードされるのを待たねばならないため、あまり軽快とはよべないページになってしまいがちです。</p>
<p>&nbsp;</p>
<p>今回ご紹介するGoogle Docs Viewerは、Googleドライブを利用している方は</p>
<p>その中でファイルを開くときに、目にする機会も多いと思いますが、</p>
<p>コチラのビューアをWebページ内に設置して、</p>
<p>PDFなどのファイルを軽快に閲覧できるようにすることができます。</p>
<p>&nbsp;</p>
<p>今回はPDFで紹介しますが、他にも多くのドキュメントファイルの表示に対応しています。</p>
<p>対応しているファイル形式(<a href="https://support.google.com/drive/answer/2423485?p=docs_viewer&amp;rd=1" target="_blank">Googleドライブヘルプより</a>)</p>
<ul>
<li>画像ファイル（.JPEG、.PNG、.GIF、.TIFF、.BMP）</li>
<li>動画ファイル（WebM、.MPEG4、.3GPP、.MOV、.AVI、.MPEGPS、.WMV、.FLV）</li>
<li>テキスト ファイル（.TXT）</li>
<li>マークアップ/コード（.CSS、.HTML、.PHP、.C、.CPP、.H、.HPP、.JS）</li>
<li>Microsoft Word（.DOC、.DOCX）</li>
<li>Microsoft Excel（.XLS、.XLSX）</li>
<li>Microsoft PowerPoint（.PPT、.PPTX）</li>
<li>Adobe Portable Document Format（.PDF）</li>
<li>Apple Pages（.PAGES）</li>
<li>Adobe Illustrator（.AI）</li>
<li>Adobe Photoshop（.PSD）</li>
<li>Tagged Image File Format（.TIFF）</li>
<li>Autodesk AutoCad（.DXF）</li>
<li>Scalable Vector Graphics（.SVG）</li>
<li>PostScript（.EPS, .PS）</li>
<li>TrueType（.TTF）</li>
<li>XML Paper Specification（.XPS）</li>
<li>アーカイブ ファイルの種類（.ZIP and .RAR）</li>
</ul>
<p>&nbsp;</p>
<p>↓こちらがDEMOです。</p>
<p><a class="demo" href="/demo/ninomiya/22/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>設置の仕方</h3>
<h3>1.Googleドキュメントビューアのページを開きます。</h4>
<p>URL：</p>
<p><a href="https://docs.google.com/viewer" target="_blank">https://docs.google.com/viewer</a></p>
<p>&nbsp;</p>
<h3>2.表示させるPDFファイル(または表示に対応している他の形式のファイル)のURLを入力し、HTMLタグを生成します。</h4>
<p><img decoding="async" loading="lazy" alt="ファイルのURL入力" src="/uploads-archive/2013/06/ggl_dv01.jpg" width="656" height="438" /></p>
<p>&nbsp;</p>
<h3>3.生成したHTMLタグをWebページの表示させたい場所にコピー&amp;ペーストすれば、完了です。</h4>
<p><img decoding="async" loading="lazy" alt="HTMLタグ生成" src="/uploads-archive/2013/06/ggl_dv02.jpg" width="656" height="611" /></p>
<p>&nbsp;</p>
<p>※注意点</p>
<p>テスト環境などで、Basic認証などのアクセス制限がかかっていると、ビューアがPDFにアクセスできないため、</p>
<p>表示することができませんので、ご注意ください。</p>
<p>&nbsp;</p>
<p>Googleドキュメントビューアのサイトに毎回アクセスしてHTMLタグを生成しなくても、下の「ファイルのURL」のところに表示したいURLを入力すれば、Webページ内での表示が可能です。</p>

		<div id="crayon-64953fd58b483660315348" 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;iframe src="http://docs.google.com/viewer?url=「ファイルのURL」&amp;amp;embedded=true" width="565" height="780" style="border: none;"&gt;&lt;/iframe&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-64953fd58b483660315348-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-64953fd58b483660315348-1"><span class="crayon-r ">&lt;iframe </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"http://docs.google.com/viewer?url=「ファイルのURL」&amp;amp;embedded=true"</span><span class="crayon-h"> </span><span class="crayon-e ">width</span>=<span class="crayon-s ">"565"</span><span class="crayon-h"> </span><span class="crayon-e ">height</span>=<span class="crayon-s ">"780"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"border: none;"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/iframe&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ただ、こちらのURLは普通のURLではなく、URLエンコード形式にする必要があります。</p>
<p>静的なサイトの場合はコチラのサイト（<a href="http://www.tagindex.com/tool/url.html">http://www.tagindex.com/tool/url.html</a>）などでエンコードして利用することができます。</p>
<p>PHPなど動的なサイトの場合は、「 <b>urlencode</b> ([ファイルのURL])」などの関数を使って、</p>
<p>利用することができます。</p>
<p>&nbsp;</p>
<p>現時点での欠点としては、<a href="/demo/ninomiya/22/" target="_blank">DEMO</a>で見ていただけると分かりますが、</p>
<p>写真などのラスター形式の画像は、画質が著しく劣化します。</p>
<p>画質を重視する場合は、あまりオススメできません。</p>
<p>&nbsp;</p>
<p>その分表示速度はとても速く、ファイルも軽いので、</p>
<p>軽快にPDFを表示したい場合にはとてもオススメです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

nino_eye130612.jpg

PDFなどをページ内で軽快に閲覧できるGoogle Docs Viewer

<p>海に周りを囲まれ、陸地の大半を野山が占める日本では、</p>
<p>青と緑は好まれ、デザインでも使われることが多い色です。</p>
<p>&nbsp;</p>
<p>青と緑は類似色で相性もいいので、共に使われることも多いですが、</p>
<p>サイトのデザインに使う場合、ほのぼのとした印象が強くなりがちなので、</p>
<p>スタイリッシュにまとめるのは難しい印象があります。</p>
<p>&nbsp;</p>
<p>今回は、この２色を使ったスタイリッシュなサイトを</p>
<p>青を多く使ったものを中心にまとめてみました。</p>
<p>&nbsp;</p>
<h4>アクアシャボン</h6>
<p><a href="/uploads-archive/2013/06/ss_site01.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site1" src="/uploads-archive/2013/06/ss_site01_thum.jpg" width="656" height="472" /></a><br />
<a href="http://www.aquasavon.jp/" target="_blank">http://www.aquasavon.jp/</a></p>
<p>メインビジュアルがグラデーションの効果で、きれいにまとめられています。</p>
<p>&nbsp;</p>
<h4>株式会社田部</h6>
<p><a href="/uploads-archive/2013/06/ss_site02.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site2" src="/uploads-archive/2013/06/ss_site02_thum.jpg" width="656" height="472" /></a><br />
<a href="http://www.tanabeco.com/" target="_blank">http://www.tanabeco.com/</a></p>
<p>サイト自体にはほとんど青が使われていませんが、</p>
<p>緑を中心とした写真を多く配置して、</p>
<p>緑を自然に感じることができます。</p>
<p>&nbsp;</p>
<h4>アクアセレクト</h6>
<p><a href="/uploads-archive/2013/06/ss_site03.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site3" src="/uploads-archive/2013/06/ss_site03_thum.jpg" width="656" height="472" /></a><br />
<a href="http://www.aquaselect.jp/" target="_blank">http://www.aquaselect.jp/</a></p>
<p>ロゴに軽く添えたり、写真に緑のあるものを使うことで、水と緑を感じられます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4>住まいのGood News</h6>
<p><a href="/uploads-archive/2013/06/ss_site04.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site4" src="/uploads-archive/2013/06/ss_site04_thum.jpg" width="656" height="472" /></a><br />
<a href="http://sumai.goodnews.jp/" target="_blank">http://sumai.goodnews.jp/</a></p>
<p>こちらも緑は写真メインといった感じです。</p>
<p>&nbsp;</p>
<h4>特定医療法人清翠会</h6>
<p><a href="/uploads-archive/2013/06/ss_site05.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site5" src="/uploads-archive/2013/06/ss_site05_thum.jpg" width="656" height="472" /></a><br />
<a href="http://www.maki-group.jp/" target="_blank">http://www.maki-group.jp/</a></p>
<p>写真や、アイコンで緑を感じられます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>青をメインにした場合、緑は写真で配置したり、軽く添えるくらいが</p>
<p>スタイリッシュにする方法としてよいようです。</p>
<p>&nbsp;</p>


青と緑を使ったスタイリッシュなサイトまとめ

ドラッグ&#038;ドロップで移動できるライトボックス風のjQueryプラグインを作ってみた(改良その１)

<p>Googleドライブで画像を表示したとき、</p>
<p>画像を拡大した場合に、ドラッグ&amp;ドロップで移動させることで、</p>
<p>画像の画面外に隠れて見えなくなっていた場所を表示させることができるのが便利と思い、</p>
<p>jQueryのプラグインぽいものを作ってみました、</p>
<p>&nbsp;</p>
<p>追記：改良しました！→<a href="/designer/%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E7%A7%BB%E5%8B%95%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%A9%E3%82%A4%E3%83%88%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E9%A2%A8-2.html">ドラッグ&amp;ドロップで移動できるライトボックス風のjQueryプラグインを作ってみた(改良その１)</a></p>
<p>&nbsp;</p>
<p>↓こちらがデモ</p>
<p><a href="/demo/ninomiya/20/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>実装方法</h3>
<p>１．必要なJS、CSSのダウンロード</p>
<p><a href="http://jquery.com/" target="_blank">jQuery</a> (jQuery-1.9.1を推奨します)</p>
<p><a href="http://pep.briangonzalez.org/" target="_blank">jQuery.pep.js</a> (画像のドラッグ&amp;ドロップに利用)</p>
<p><a href="/demo/ninomiya/20/js/jquery-fiview.js" target="_blank">jquery-fiview.js</a> (今回作ったもの)</p>
<p><a href="/demo/ninomiya/20/css/jquery-fiview.css" target="_blank">jquery-fiview.css</a></p>
<p>&nbsp;</p>
<p>2.HTML</p>

		<div id="crayon-64953fd58a330645391417" 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;link href="css/jquery-fiview.css" rel="stylesheet" type="text/css"&gt;

&lt;script type="text/javascript" src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.pep.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery-fiview.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-64953fd58a330645391417-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a330645391417-2">2</div><div class="crayon-num" data-line="crayon-64953fd58a330645391417-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a330645391417-4">4</div><div class="crayon-num" data-line="crayon-64953fd58a330645391417-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-64953fd58a330645391417-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"css/jquery-fiview.css"</span><span class="crayon-h"> </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">"stylesheet"</span><span class="crayon-h"> </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"text/css"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a330645391417-2">&nbsp;</div><div class="crayon-line" id="crayon-64953fd58a330645391417-3"><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-64953fd58a330645391417-4"><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.pep.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-64953fd58a330645391417-5"><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-fiview.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ダウンロードしたJSやCSSをヘッダで読み込みます。</p>

		<div id="crayon-64953fd58a335178121043" 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;div id="wrapper"&gt;
	&lt;p class="bwWrapper"&gt;&lt;a href="images/img01_big.jpg"&gt;&lt;img src="images/img01.jpg" alt="image1"&gt;&lt;/a&gt;&lt;/p&gt;
	&lt;p class="bwWrapper"&gt;&lt;a href="images/img02_big.jpg"&gt;&lt;img src="images/img02.jpg" alt="image2"&gt;&lt;/a&gt;&lt;/p&gt;
	&lt;p class="bwWrapper"&gt;&lt;a href="images/img03_big.jpg"&gt;&lt;img src="images/img03.jpg" alt="image3"&gt;&lt;/a&gt;&lt;/p&gt;
	&lt;p class="bwWrapper"&gt;&lt;a href="images/img04_big.jpg"&gt;&lt;img src="images/img04.jpg" alt="image4"&gt;&lt;/a&gt;&lt;/p&gt;
	&lt;p class="bwWrapper"&gt;&lt;a href="images/img05_big.jpg"&gt;&lt;img src="images/img05.jpg" alt="image5"&gt;&lt;/a&gt;&lt;/p&gt;
	&lt;p class="bwWrapper"&gt;&lt;a href="images/img06_big.jpg"&gt;&lt;img src="images/img06.jpg" alt="image6"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;!-- wrapper end --&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-64953fd58a335178121043-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a335178121043-2">2</div><div class="crayon-num" data-line="crayon-64953fd58a335178121043-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a335178121043-4">4</div><div class="crayon-num" data-line="crayon-64953fd58a335178121043-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a335178121043-6">6</div><div class="crayon-num" data-line="crayon-64953fd58a335178121043-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a335178121043-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-64953fd58a335178121043-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"wrapper"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a335178121043-2"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"bwWrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"images/img01_big.jpg"</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/img01.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image1"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-64953fd58a335178121043-3"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"bwWrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"images/img02_big.jpg"</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/img02.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image2"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a335178121043-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"bwWrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"images/img03_big.jpg"</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/img03.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image3"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-64953fd58a335178121043-5"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"bwWrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"images/img04_big.jpg"</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/img04.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image4"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a335178121043-6"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"bwWrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"images/img05_big.jpg"</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/img05.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image5"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-64953fd58a335178121043-7"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"bwWrapper"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"images/img06_big.jpg"</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/img06.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image6"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58a335178121043-8"><span class="crayon-r ">&lt;/div&gt;</span><span class="crayon-c">&lt;!-- wrapper end --&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>任意の場所に画像へのリンクをはります。</p>
<p>&nbsp;</p>
<p>3.JSの設定</p>

		<div id="crayon-64953fd58a336076392917" 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(){
	$("#wrapper a").fiview();
});</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-64953fd58a336076392917-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58a336076392917-2">2</div><div class="crayon-num" data-line="crayon-64953fd58a336076392917-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-64953fd58a336076392917-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-64953fd58a336076392917-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#wrapper a"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">fiview</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58a336076392917-3"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>$(function(){</p>
<p>$(セレクタ).fiview();</p>
<p>});</p>
<p>をJSに書き込みます。</p>
<p>セレクタは、画像へのリンクの場所を設定してください。</p>
<p>4.close画像の設置（調整中）</p>
<p>現時点では、HTMLのあるディレクトリ下のimageフォルダに設置する必要があります。</p>
<p>画像の場所を変える場合は、jquery-fiview.jsの8行目にある&lt;img class=&#8217;fivClose&#8217; src=&#8217;images/close.png&#8217;&gt;</p>
<p>のsrcのパスを変更する必要があります。現在調整の必要がないように改良予定です。</p>
<p>&nbsp;</p>
<h3>今後の課題</h4>
<p>・画像の拡大縮小に対応</p>
<p>・close画像の調整が不要になるようにする</p>
<p>・画像の移動範囲の限定</p>

ドラッグ&#038;ドロップで移動できるライトボックス風のjQueryプラグインを作ってみた

<p>今回お仕事で<strong>地球</strong>の<strong>イラスト</strong>画像が必要になったのですが、</p>
<p>日本を真ん中にあるものを選んだり、光のかかり方がイメージに合うものなど、</p>
<p>デザインの都合に合わせたものを、素材の中から探す出すのは、</p>
<p>とても大変な作業となります。</p>
<p>&nbsp;</p>
<p><strong>Illustrator</strong>では、「効果」→「3D」の機能を使って、</p>
<p>簡単な<strong>3D</strong>の<strong>イラスト</strong>を制作することができるのですが、</p>
<p>この機能を使えば、比較的簡単に都合に合わせた地球のイラストを制作することができます。</p>
<p>&nbsp;</p>
<p>そこで、今回はその方法をご紹介いたします。</p>
<p>&nbsp;</p>
<h2>手順</h3>
<ol>
<li>世界地図のベクター画像(AI、EPSなど)を準備する</li>
<li>世界地図の画像をシンボルに追加する</li>
<li>半円を作る</li>
<li>「効果」の「3D」で回転体を作成する</li>
<li>シンボル化した世界地図をマッピングする</li>
<li>位置や影のかかり方などを調整する</li>
</ol>
<p>&nbsp;</p>
<h2>方法</h3>
<h3>1.世界地図のベクター画像(AI、EPSなど)を準備する</h4>
<p>世界地図のAIやEPSなどのベクター画像は、フリーの素材で入手することが可能です。</p>
<p>ここでは、データを紹介しているサイトをご紹介いたします。</p>
<p>→「<a href="http://photoshopvip.net/archives/15537" target="_blank">ベクターアートでデザインされた高品質な世界地図の無料素材25個まとめ</a>」</p>
<p>&nbsp;</p>
<h3>2.世界地図の画像をシンボル化する</h4>
<p>Illustratorでファイルを新規作成し、</p>
<p>先程入手したデータをアートボードの外に、配置します。</p>
<p>配置できたら、「シンボル」パネルの「新規シンボル」のアイコンをクリックします。</p>
<p><img decoding="async" loading="lazy" alt="step1-1" src="/uploads-archive/2013/05/nino_image01.jpg" width="430" height="300" /></p>
<p>シンボルオプションが表示されたら、「種類」を「グラフィック」に変更して、「OK」をクリックします。</p>
<p><img decoding="async" loading="lazy" alt="1-2" src="/uploads-archive/2013/05/nino_image02.jpg" width="430" height="300" /></p>
<p>これで、世界地図のデータをシンボルに追加することができました。</p>
<p><img decoding="async" loading="lazy" alt="1-3" src="/uploads-archive/2013/05/nino_image03.jpg" width="430" height="300" /></p>
<p>&nbsp;</p>
<h3>3.半円を作る</h4>
<p>次に、半円を作ります。</p>
<p>半円を作る方法は多くありますが、「円ツール」を使った方法が一番簡単です。</p>
<p>まず、「円ツール」を選択し、[Shift]キーを押したままドラッグし、正円を描きます。</p>
<p><img decoding="async" loading="lazy" alt="2-1" src="/uploads-archive/2013/05/nino_image04.jpg" width="428" height="300" /></p>
<p>そして、「ダイレクト選択ツール」に切り替えて、円のアンカーポイントをひとつだけ選択します（左右のどちらかがいいです）。</p>
<p><img decoding="async" loading="lazy" alt="2-2" src="/uploads-archive/2013/05/nino_image05.jpg" width="428" height="300" /></p>
<p>[Delete]キーを押して選択したアンカーポイントを削除すれば、半円が出来上がります。</p>
<p><img decoding="async" loading="lazy" alt="2-3" src="/uploads-archive/2013/05/nino_image06.jpg" width="428" height="300" /></p>
<p>&nbsp;</p>
<h3>4.「効果」の「3D」で回転体を作成する</h4>
<p>「選択ツール」に切り替えてこの半円を選択した後で、</p>
<p>上のメニューから、「効果」→「3D」→「回転体」を選択します。</p>
<p><img decoding="async" loading="lazy" alt="4-1" src="/uploads-archive/2013/05/nino_image08.jpg" width="500" height="400" /></p>
<p>3D回転オプションが表示されますので、右の「プレビュー」にチェックを入れて、</p>
<p>作成される球体の状態を確認しながら、各種オプションを調整します。</p>
<p><img decoding="async" loading="lazy" alt="4-2" src="/uploads-archive/2013/05/nino_image09.jpg" width="500" height="400" /></p>
<p>地球のベースとなる球体はこれで出来上がりです。</p>
<p>&nbsp;</p>
<h3>5.シンボル化した世界地図をマッピングする</h4>
<p>続いて、先程準備した世界時図を球体の上に描きます。</p>
<p>まずは、先程の3D回転体オプションで、右にある「マッピング」をクリックします。</p>
<p><img decoding="async" loading="lazy" alt="5-1" src="/uploads-archive/2013/05/nino_image10.jpg" width="500" height="400" /></p>
<p>上の「シンボル」から、手順２で制作した世界地図のシンボルを選択します。</p>
<p><img decoding="async" loading="lazy" alt="5-2" src="/uploads-archive/2013/05/nino_image11.jpg" width="500" height="400" /></p>
<p>下の「面にあわせる」、「アートワークに陰影を適用」をクリックし、右の「プレビュー」にチェックを入れて、</p>
<p>状態を確認し、よければ「OK」をクリックします。</p>
<p><img decoding="async" loading="lazy" alt="5-3" src="/uploads-archive/2013/05/nino_image12_2.jpg" width="500" height="400" /></p>
<p>これで世界地図を球体上に描くことができました。</p>
<p>&nbsp;</p>
<h3>6.位置や影のかかり方などを調整する</h4>
<p>最後に、プレビューで状態を確認しながら、</p>
<p>3D回転体オプションの上側にある「位置」の立方体をドラッグで操作して、</p>
<p>マッピングの位置を調整したり、</p>
<p>&nbsp;</p>
<p>下側にある「表面」（こちらが表示されていない場合は、右側の「詳細オプション」をクリック）にある球体上にある</p>
<p>ポイントを調整して、陰影の位置を調整したりするなどして、</p>
<p>好みの状態に調整します。</p>
<p><img decoding="async" loading="lazy" alt="6-1" src="/uploads-archive/2013/05/nino_image12.jpg" width="500" height="400" /></p>
<p>これで、地球の3Dイラストが完成しました。</p>
<p><img decoding="async" loading="lazy" alt="6-2" src="/uploads-archive/2013/05/nino_image13.jpg" width="500" height="400" /></p>
<p>ベクターデータなので、大きさや状態を後から自由に変えることができますので、</p>
<p>一つ作っておくと便利です。</p>
<p>&nbsp;</p>
<h3>おまけ 海を半透明にする</h4>
<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>これで、海が半透明になった地球の3Dイラストを制作することができました。</p>
<p><img decoding="async" loading="lazy" alt="6-3" src="/uploads-archive/2013/05/nino_image14.jpg" width="500" height="400" /></p>
<p><img decoding="async" loading="lazy" alt="地球の3Dイラスト" src="/uploads-archive/2013/05/nino_eye.jpg" width="656" height="398" /></p>


Illustratorを使った地球の3Dイラストの作り方

<p>Webフォントは、最新のブラウザやスマートフォンやタブレットPCで利用できるだけでなく、</p>
<p>形式によってはIE6などでも利用することができます。</p>
<p>&nbsp;</p>
<p>なんとなくとっつきにくいイメージがあったのですが、調べてみると、</p>
<p>サービスも広がっていて、今後実際に自分で使う機会も増えていくように感じました。</p>
<p>&nbsp;</p>
<p>今回調べた中で、自作したアイコンをWebフォントに変換して利用する方法がありましたので、</p>
<p>実際にやってみることにしました。</p>
<p>（参考サイト：<a href="http://www.slideshare.net/r360studio/css-nite68-iconv3" target="_blank">仕事で使える、アイコン作画のコツとSVG変換のススメ</a>）</p>
<p>↓こちらが作ってみたものです</p>
<p><a class="demo" href="/demo/ninomiya/19/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<h3> 1.SVGのアイコン画像を準備する</h4>
<p>参考のサイトでは、Fireworksを使った方法でしたが、</p>
<p>今回はIllustratorでアイコンを制作し、SVGで出力する方法を使いました。</p>
<h4>i.画像の準備</h6>
<p><img decoding="async" loading="lazy" alt="Illustratorでアイコンを制作" src="/uploads-archive/2013/05/nino_image_01.jpg" width="640" height="497" /></p>
<p>パスツールなどを使って画像を制作します。</p>
<p>ポイントは、シルエットにし、重なった部分は「パスファインダー」などを使って合体させておくことです。</p>
<p>合体させておかないと、Webフォントにしたときに、意図した形にならないことがあります。</p>
<p>&nbsp;</p>
<p>また、Webフォントに変換してしまうと、グラデーションはもちろん、色の情報はなくなってしまうので、</p>
<p>黒一色で制作するとわかりやすいです。</p>
<p>&nbsp;</p>
<h4>ii.SVGで出力</h6>
<p>できたら、「ファイル」→「Webおよびデバイス用に保存」で、保存形式をSVGに設定し、書き出します。</p>
<p><img decoding="async" loading="lazy" alt="SVG形式で出力" src="/uploads-archive/2013/05/nino_image_02.jpg" width="716" height="549" /></p>
<p>&nbsp;</p>
<h3>2.SVGをWebフォントに変換</h4>
<p>IcoMoonのWebアプリを使ってWebフォントに変換します。</p>
<p>サイトはこちら→<a href="http://icomoon.io/app/" target="_blank">http://icomoon.io/app/</a></p>
<h4>i.ファイルを選択する</h6>
<p><img decoding="async" loading="lazy" alt="IcoMoon　ファイルを選択" src="/uploads-archive/2013/05/nino_image_03.jpg" width="640" height="442" /></p>
<p>「import Icons」をクリックして画像を選択して（複数選択可）、</p>
<p>その後下に表示されたアイコンをクリックして選択します。</p>
<p>&nbsp;</p>
<h4>ii.アイコンをあてる文字を選択し、データをダウンロード</h6>
<p><img decoding="async" loading="lazy" alt="フォントをあてる文字を選択" src="/uploads-archive/2013/05/nino_image_04.jpg" width="656" height="385" /></p>
<p>アイコンをあてる文字をそれぞれ選択します。</p>
<p>ここで選択した文字を入力したときに、その文字にあてたアイコンが表示されることになります。</p>
<p>フォント名を「Preferences」から指定することができます。</p>
<p>入力が終わったら、下のDownloadのボタンからデータをダウンロードしてください。</p>
<p>&nbsp;</p>
<h3>3.HTML+CSSで実装する</h4>
<p>IcoMoonでダウンロードしたデータに、フォントのセットと、CSS等のサンプルが入っています。</p>
<p>こちらを利用して、Webフォントを指定していきます。</p>
<p>HTML</p>

		<div id="crayon-64953fd5894a6118355911" 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;p&gt;&lt;span class="icon"&gt;m&lt;/span&gt;&amp;nbsp;桃&amp;nbsp;-m-&lt;/p&gt;
&lt;p&gt;&lt;span class="icon"&gt;y&lt;/span&gt;&amp;nbsp;ヨット&amp;nbsp;-y-&lt;/p&gt;
&lt;p&gt;&lt;span class="icon"&gt;p&lt;/span&gt;&amp;nbsp;鉛筆&amp;nbsp;-p-&lt;/p&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-64953fd5894a6118355911-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894a6118355911-2">2</div><div class="crayon-num" data-line="crayon-64953fd5894a6118355911-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-64953fd5894a6118355911-1"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">m</span><span class="crayon-r ">&lt;/span&gt;</span><span class="crayon-i ">&amp;nbsp;桃&amp;nbsp;-m-</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894a6118355911-2"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">y</span><span class="crayon-r ">&lt;/span&gt;</span><span class="crayon-i ">&amp;nbsp;ヨット&amp;nbsp;-y-</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-64953fd5894a6118355911-3"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">p</span><span class="crayon-r ">&lt;/span&gt;</span><span class="crayon-i ">&amp;nbsp;鉛筆&amp;nbsp;-p-</span><span class="crayon-r ">&lt;/p&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>アイコンをあてる文字のみ、&lt;span&gt;などでクラスをつけます。</p>
<p>CSS</p>

		<div id="crayon-64953fd5894aa728540308" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
@font-face {
	font-family: 'testicon';
	src:url('fonts/testicon.eot');
	src:url('fonts/testicon.eot?#iefix') format('embedded-opentype'),
		url('fonts/testicon.woff') format('woff'),
		url('fonts/testicon.ttf') format('truetype'),
		url('fonts/testicon.svg#testicon') format('svg');
	font-weight: normal;
	font-style: normal;
}
.icon{
	font-family: "testicon";
}</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-64953fd5894aa728540308-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-2">2</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-4">4</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-6">6</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-8">8</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-10">10</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-12">12</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-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-64953fd5894aa728540308-1"><span class="crayon-n">@font-face </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-2"><span class="crayon-h">	</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'testicon'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-3"><span class="crayon-h">	</span><span class="crayon-e ">src</span><span class="crayon-sy">:</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.eot'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-4"><span class="crayon-h">	</span><span class="crayon-e ">src</span><span class="crayon-sy">:</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.eot?#iefix'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'embedded-opentype'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-5"><span class="crayon-h">		</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.woff'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'woff'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-6"><span class="crayon-h">		</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.ttf'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'truetype'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-7"><span class="crayon-h">		</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.svg#testicon'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'svg'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-8"><span class="crayon-h">	</span><span class="crayon-e ">font-weight</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-9"><span class="crayon-h">	</span><span class="crayon-e ">font-style</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-10"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-11"><span class="crayon-k ">.icon</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-12"><span class="crayon-h">	</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"testicon"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-13"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ダウンロードしたデータに入っているstyle.cssにある「@font-face」をコピー&amp;ペーストし、</p>
<p>対象のクラスにフォント名を指定します。</p>
<p>あとは装飾などをCSSで指定すれば実装が完了します。</p>
<p>大きさを自由に変えられるので、Retinaなどの高解像度のデバイスでも安心です。</p>
<p>&nbsp;</p>
<p>アイコンを制作する時間や手間が取れないときは、多くのWebフォントアイコンを公開しているサイトもありますので、</p>
<p>是非ご利用してみてください。</p>
<p>「<a href="http://weboook.blog22.fc2.com/blog-entry-332.html" target="_blank">画像の代わりに使えるアイコンタイプのWebフォントのまとめ</a>」</p>
<p>&nbsp;</p>
<p>参考サイト：</p>
<p>アイコンのWebフォント化：</p>
<p><a href="http://www.slideshare.net/r360studio/css-nite68-iconv3" target="_blank">http://www.slideshare.net/r360studio/css-nite68-iconv3</a></p>
<p>Webフォントの形式と対応状況：</p>
<p><a href="http://tech.nitoyon.com/ja/blog/2012/04/26/web-font-popularity/">http://tech.nitoyon.com/ja/blog/2012/04/26/web-font-popularity/</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>

オリジナルアイコンをWebフォントで使ってみよう

CSS3でステップのリストをつくる

CSS3だけで折りたたみ表示

jQueryでマウスの場所に合わせて遠近を出す

IE6もOK！画像を白黒にするjQueryプラグイン 「jQuery.BlackAndWhite」

<p><strong>写真の上</strong>に<strong>文字</strong>を配置することは、メインビジュアルなどでよく行います。</p>
<p>そのとき、写真が差し替えになるなどして、写真と文字の相性が悪く、</p>
<p>文字が目立たなくなってしまうことも、よくあります。</p>
<p>&nbsp;</p>
<p>その際に、文字の色を変えられるなど自由度が高ければ、</p>
<p>文字が目立つようにデザインを変更することも楽なのですが、</p>
<p>文字の色を変えるとサイトの印象が変わってしまったり、</p>
<p>お客様のご要望で変えることができない場合もあります。</p>
<p>&nbsp;</p>
<p>こういった場合に、どうやったら<strong>目立たせる</strong>ことができるのか、</p>
<p>Photoshopを使ってできる範囲で、７つほど方法を考えてみました。</p>
<p>&nbsp;</p>
<p>今回試してみたのはこちらの写真。文字の色は白</p>
<p>文字が写真とやや同化して、とても文字が見づらくなっています。</p>
<p><a href="/uploads-archive/2013/03/textphoto1.jpg" target="_blank"><img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></a></p>
<p>&nbsp;</p>
<h2>1.文字の配置を変更する</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto2.jpg" target="_blank"><img decoding="async" loading="lazy" alt="1" src="/uploads-archive/2013/03/textphoto2.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>文字の位置を変えられるのであれば、真っ先に試したい方法です。</p>
<p>&nbsp;</p>
<p>この写真の場合、はじめの位置ではタンポポの綿毛の色と文字の色が同系色で、</p>
<p>文字が写真と同化してしまい見づらいですが、</p>
<p>右下の辺りに文字を配置すれば、写真と文字のコントラストがはっきりとして見やすくなります。</p>
<p>&nbsp;</p>
<p>ただ、文字の位置を変更できない場合もよくあります。</p>
<p>そういったときの方法について考えてみます。</p>
<p>&nbsp;</p>
<h2>2.文字の後ろにプレートを敷く</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto3.jpg" target="_blank"><img decoding="async" loading="lazy" alt="2" src="/uploads-archive/2013/03/textphoto3.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>文字と写真、両方と相性のいい色のプレートを、文字と写真の間に敷くことで、</p>
<p>両方のバランスを保ちながら、文字を目立たせることができます。</p>
<p>&nbsp;</p>
<p>ただこの方法ですと、写真を一部隠してしまうことになります。</p>
<p>今回はプレートを半透明にして、できるだけ写真を隠す量を減らすように考慮してますが、</p>
<p>それでもやはり、プレートの部分は写真が見づらくなります。</p>
<p>場合によっては使用できないことも多いです。</p>
<p>&nbsp;</p>
<h2>3.背景と文字の間に境界線を置く</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto4.jpg" target="_blank"><img decoding="async" loading="lazy" alt="3" src="/uploads-archive/2013/03/textphoto4.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>文字と写真の間に境界を設けることで、文字を目立たせることができます。</p>
<p>プレートを置く方法よりも、写真を隠してしまう範囲が小さくて済みます。</p>
<p>&nbsp;</p>
<p>ただこの方法ですと、文字自体のイメージが変わってしまうことが多いです。</p>
<p>落ち着いたイメージや、高級感を出す場合には、この方法は向きません。</p>
<p>&nbsp;</p>
<h2>4.袋文字にする</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto5.jpg" target="_blank"><img decoding="async" loading="lazy" alt="4" src="/uploads-archive/2013/03/textphoto5.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>背景と文字の間に境界線を置く方法の、文字と境界の色を逆にしたものです。</p>
<p>先程と同様に文字を目立たせることができます。</p>
<p>&nbsp;</p>
<p>ただやはり、こちらも文字自体のイメージが変わってしまうことが多いので、</p>
<p>使う状況に注意が必要です。</p>
<p>&nbsp;</p>
<h2>5.ドロップシャドウを置く</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto6..jpg" target="_blank"><img decoding="async" loading="lazy" alt="5" src="/uploads-archive/2013/03/textphoto6.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>写真をほとんど隠すことなく、文字を引き立てることができます。</p>
<p>&nbsp;</p>
<p>ただ、プレートや境界線を置く方法に比べると、文字を目立たせる効果はどうしても小さくなってしまいます。</p>
<p>&nbsp;</p>
<h2>6.レイヤー効果の「光彩(外側)」を描画モード「乗算」で置く</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto7.jpg" target="_blank"><img decoding="async" loading="lazy" alt="6" src="/uploads-archive/2013/03/textphoto7.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>効果がかかっているのをできるだけ見る人に気づかせずに、</p>
<p>文字を目立たせるのに効果的な方法です。</p>
<p>&nbsp;</p>
<p>ただ、気づかれないように効果を抑えれば、その分だけ文字を目立たせることが難しくなります。</p>
<p>効果をつけすぎると、印象を変えてしまいますので、加減の調整が必要です。</p>
<p>&nbsp;</p>
<h2>7.文字周辺のコントラストを下げる</h3>
<p>修正後↓<br />
<a href="/uploads-archive/2013/03/textphoto8.jpg" target="_blank"><img decoding="async" loading="lazy" alt="7" src="/uploads-archive/2013/03/textphoto8.jpg" width="328" height="246" /></a></p>
<p>修正前↓<br />
<img decoding="async" loading="lazy" alt="ノーマル" src="/uploads-archive/2013/03/textphoto1.jpg" width="328" height="246" /></p>
<p>今回の写真のように、情報量の多い写真の上に文字を置く場合に効果的です。</p>
<p>ごちゃごちゃとした感じを抑えて、文字を目立たせることができます。</p>
<p>&nbsp;</p>
<p>ただ、写真の色や明るさなどの情報が一部少なくなり、写真の印象が変わってしまうこともあるので、</p>
<p>使い方や、加減に注意が必要です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>いずれの場合も、全体のデザインに合わせて臨機応変に使い分けて、加減を調整することが必要です。</p>
<p>いかに写真と文字のコントラストを高めるかがポイントになります。</p>
<p>&nbsp;</p>
<p>限られた条件の中で、どういったことができるのかを模索することは、</p>
<p>難しい作業ですが、</p>
<p>あらゆる状況に対応できるように、より多くの方法を見つけていきたいです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


写真の上の文字を色を変えずに目立たせるには？

<p>4つ以上の色相を使ったカラフルなデザインは、元気で楽しげな印象を与えてくれます。</p>
<p>にぎやかさや楽しげな印象を出したいときに、よく使われるデザインで、子ども・ファミリー向けで見かけることの多いです。</p>
<p>ただ、色数が多いので、バランスを整えたり、印象を狙い通りにしていくことが、難しいです。</p>
<p>&nbsp;</p>
<p>そこで今回は、全色相系でデザインされた５つのサイトについて、調べてみました。</p>
<p>&nbsp;</p>
<p><a href="http://bikke-bikke.jp/" target="_blank"><img decoding="async" loading="lazy" alt="bikke" src="/uploads-archive/2013/03/site01.jpg" width="328" height="236" /></a></p>
<p>&nbsp;</p>
<p><a href="http://bikke-bikke.jp/" target="_blank">http://bikke-bikke.jp/</a></p>
<p>メインのイメージにアイコン的なイラストと、文字をカラフルに並べ、</p>
<p>楽しそうなイメージがたくさんつまった印象を感じます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://givery.co.jp/special/" target="_blank"><img decoding="async" loading="lazy" alt="givery" src="/uploads-archive/2013/03/site02.jpg" width="328" height="236" /></a></p>
<p><a href="http://givery.co.jp/special/" target="_blank">http://givery.co.jp/special/</a></p>
<p>ごくわずかな場所に限定してカラフルな場所を使い、</p>
<p>カラフルながらに、落ち着いた印象を受けます。</p>
<p>&nbsp;</p>
<p><a href="http://map.itp.ne.jp/" target="_blank"><img decoding="async" loading="lazy" alt="マップMAP" src="/uploads-archive/2013/03/site03.jpg" width="328" height="236" /></a></p>
<p><a href="http://map.itp.ne.jp/" target="_blank">http://map.itp.ne.jp/</a></p>
<p>全体に広がるように全色相が並べられていて、地図の色と合わせて、</p>
<p>楽しげな印象が感じられます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://agrinext.jp/kidsmuseum/" target="_blank"><img decoding="async" loading="lazy" alt="http://agrinext.jp/kidsmuseum/" src="/uploads-archive/2013/03/site04.jpg" width="328" height="236" /></a></p>
<p><a href="http://agrinext.jp/kidsmuseum/" target="_blank">http://agrinext.jp/kidsmuseum/</a></p>
<p>全色相系ですが、緑が多く使われていて、</p>
<p>かわいらしさと、まとまった印象を感じることができます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://motoiderico.com/" target="_blank"><img decoding="async" loading="lazy" alt="motoideRico" src="/uploads-archive/2013/03/site05.jpg" width="328" height="236" /></a></p>
<p><a href="http://motoiderico.com/" target="_blank">http://motoiderico.com/</a></p>
<p>他の4つと異なり、白いスペースが一切ありません。</p>
<p>ピンク系にやや色を偏らせているようです。</p>
<p>にぎやかさを超えた、サイケデリックな印象を受けます。</p>
<p>&nbsp;</p>
<h2>まとめ</h3>
<ul>
<li>基本は白をそれぞれの色に使い別ける。</li>
<li>カラフルな部分が限定されるほど、落ち着いた印象になる。</li>
<li>全色相系でも、中心となる色相に近い色を多めに配置することで、ある色のイメージを出すこともできる。</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


全色相系のサイトデザインを調べる

HTML5のCanvasアニメーションに挑戦

CSS3のtransformを使ったアニメーション(基本編)

<p>最近よく見かけるようになってきた、フラットなデザインのサイト。<br />
こちらのブログ(→<a href="http://w3q.jp/t/3526" target="_blank">http://w3q.jp/t/3526</a>)でフラットなデザインのWebサイトについてまとめられていたので、<br />
こちらで紹介されているサイトが、どうしてかっこよく見えるのか、まとめてみました</p>
<p><a href="http://w3q.jp/t/3526" target="_blank"><img decoding="async" loading="lazy" alt="フラットなデザインのWebサイトまとめ17個" src="/uploads-archive/2013/02/tn_blogimg.jpg" width="328" height="170" /></a></p>
<p>&nbsp;</p>
<h2> &#8211; 形 &#8211;</h3>
<p>&nbsp;</p>
<p>四角、正円といったシンプルな形をベースに構成しています。</p>
<p>四角については、Web上のコンテンツが仕様上四角なので、<br />
各要素の外枠になるボックスが四角なのはWebサイトでは一般的なことですが、、<br />
フラットなデザインのサイトでは、枠だけでなく、ロゴやアイコンやイラストなども<br />
四角がベースになっていて、統一感が出されています。<br />
角も丸めたり、削ったりせずに、そのままです。</p>
<p>逆に丸い要素は、正円がベースになっていて、安定感と統一感を支えています</p>
<p><img decoding="async" loading="lazy" alt="四角" src="/uploads-archive/2013/02/tn_eximg00.jpg" width="328" height="226" /></p>
<p><img decoding="async" loading="lazy" alt="丸" src="/uploads-archive/2013/02/tn_eximg00_2.jpg" width="328" height="226" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>&#8211; 色 &#8211;</h3>
<p>グラデーションでの色の変化がないため、<br />
使った色がそのまま飛び込んできて印象にのこります。<br />
サイトのイメージが色として記憶に残る感じです。<br />
単色のサイトも多い印象です。<br />
２色以上の場合でも、トーンを変えて他の場所に使うということはなく、<br />
全くそのままの色が、全体の要素に使われています。</p>
<p>こちらのサイト(→<a href="http://www.diesel.com/" target="_blank">http://www.diesel.com/</a>)では多色を使っているように見えましたが、<br />
それぞれのコンテンツに合わせて、コンテンツのイメージカラーが統一されています。<br />
スクロールで表示されているコンテンツに合わせて、上下のナビゲーションの色が変化していて、おもしろいです。</p>
<p><img decoding="async" loading="lazy" alt="DEISEL ピンク" src="/uploads-archive/2013/02/tn_eximg01.jpg" width="328" height="226" /></p>
<p><img decoding="async" loading="lazy" alt="DIESEL 緑" src="/uploads-archive/2013/02/tn_eximg02.jpg" width="328" height="226" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>&#8211; レイアウト・文字 &#8211;</h3>
<p>文字はフラットさを引き立てるように、<br />
大きな余白が用いられたレイアウトが目立ちます。</p>
<p>フラットなデザインでは装飾が少ない分、文字の大きさや太さにメリハリをつけて、<br />
変化やリズム感が出されています。<br />
文字の大きさの差は、２倍以上あることが多いようです。</p>
<p>画像を使わずに、テキストとして配置されていますが、<br />
フォントの種類を細かに変化させていることがわかります。<br />
日本のサイトの場合だと、使えるフォントが限られてくるので、<br />
この辺がネックになりそうです。<br />
必要と想定される代理のフォントを絞込み、具体的に設置するのがポイントになりそうです。</p>
<p><img decoding="async" loading="lazy" alt="文字のメリハリ" src="/uploads-archive/2013/02/tn_eximg03.jpg" width="314" height="253" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>&#8211; アイコン &#8211;</h3>
<p>白抜きや単色のアイコンが圧倒的に多いです。<br />
大きくデフォルメされた、シンプルな形のアイコンが使われることが多いようです。<br />
ファビコンについても、とてもシンプルなものが多いです。</p>
<p><img decoding="async" loading="lazy" alt="白抜きアイコン" src="/uploads-archive/2013/02/tn_eximg04.jpg" width="176" height="50" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>～ まとめ ～</h4>
<ul>
<li>色はイメージカラーに統一。トーンを変化させたバリエーションの色は使わない。</li>
<li>四角・正円で要素の形を統一。それ以外の形も、シンプルな線で。</li>
<li>余白を多くとって色を強調。</li>
<li>文字は大きさのちがいを２倍ほどつけてメリハリを。</li>
<li>細かくフォントを設定して、フォントでもメリハリを。</li>
<li>アイコンは単色。シンプルに。</li>
</ul>
<p>&nbsp;</p>
<p>まとめてみると、デザインで重要なポイントが凝集されている印象です。<br />
フラットなデザインの製作は、デザインの基本を学ぶいい機会になりそうです。</p>
<p>&nbsp;</p>


フラット（べた塗り）なデザインのサイトを調べてみる

GIFアニメを使ったちょっと味のあるナビゲーション

<p>http://dainfagerholm.blogspot.jp/</p>
<p>こちらのサイトで紹介されている作品は、</p>
<p>「ステレオグラフィック・ドローイング」という手法で製作されています。</p>
<p>平面で描かれたイラストが、左右に振れるGIFアニメーションによって、</p>
<p>立体的に浮かび上がります。</p>
<p>&nbsp;</p>
<p>今回はこちらを写真で作ってみることにしました。</p>
<p>&nbsp;</p>
<h2>作り方</h3>
<h3>手順１　写真をステレオグラム化する</h4>
<p>「ステレオグラム」とは、２枚並んだ画像を、平行法・交差法といった特殊な見方をすることで、</p>
<p>裸眼で立体的に見ることができるものです。</p>
<p>&nbsp;</p>
<p>もちろん普通の同じ写真をただ横に並べただけでは立体的には見えません。</p>
<p>人が立体を感じることができるのは、右目と左目でものを見たときにズレがあり、</p>
<p>そのズレを元に、脳が立体だと感じるようになっているためです。</p>
<p>そのため、ステレオグラムを実現するためには、</p>
<p>この左右の見え方のズレを再現した２枚の画像が必要になります。</p>
<p>&nbsp;</p>
<p>今回は、<a href="http://www1.axfc.net/uploader/so/1149833" target="_blank">seeneon</a>というソフトを使って、このステレオグラムを製作しました。</p>
<h4>seeneonを使ったステレオグラムの作成手順</h6>
<p>1.　立体化する画像を準備します</p>
<p>今回はこの２枚の画像を立体化します。</p>
<p><img decoding="async" loading="lazy" alt="リス" src="/uploads-archive/2013/01/867880_27859284.jpg" width="400" height="286" /><img decoding="async" loading="lazy" alt="犬" src="/uploads-archive/2013/01/1142381_49316099.jpg" width="400" height="291" /></p>
<p>&nbsp;</p>
<p>2.　深度マップを作成する</p>
<p>写真を元に、深度マップを作成します。</p>
<p>こちらのソフトでは、赤・緑・青のいずれかを選び、その濃さから深度を判定します。</p>
<p>今回は赤を使いました。赤が濃いところほど近く、赤が薄いところほど遠くになります。</p>
<p><img decoding="async" loading="lazy" alt="リス深度マップ" src="/uploads-archive/2013/01/867880_27859284_dp.jpg" width="400" height="286" /></p>
<p><img decoding="async" loading="lazy" alt="犬深度マップ" src="/uploads-archive/2013/01/1142381_49316099_dp.jpg" width="400" height="291" /></p>
<p>&nbsp;</p>
<p>3.　 seeneonを使ってステレオグラム化する</p>
<p>i.　元の画像と、深度マップの画像のファイルをドラッグ＆ドロップします</p>
<p><img decoding="async" loading="lazy" alt="使い方1" src="/uploads-archive/2013/01/flow1.jpg" width="338" height="223" /></p>
<p>ii.　 深度マップに使った色を選びます（今回は赤なので&#8217;R&#8217;）</p>
<p><img decoding="async" loading="lazy" alt="使い方2" src="/uploads-archive/2013/01/flow2.jpg" width="338" height="223" /></p>
<p>iii.　生成ボタンを押します</p>
<p><img decoding="async" loading="lazy" alt="使い方3" src="/uploads-archive/2013/01/flow3.jpg" width="338" height="223" /></p>
<p>これでステレオグラムが完成しました。</p>
<p><img decoding="async" loading="lazy" alt="リスのステレオグラム" src="/uploads-archive/2013/01/867880_27859284_parallel.png" width="716" height="255" /></p>
<p><img decoding="async" loading="lazy" alt="犬のステレオグラム" src="/uploads-archive/2013/01/1142381_49316099_parallel.png" width="716" height="260" /></p>
<p>今回は平行法で作っているので、平行法(画像の真ん中にしきいをつけて、画像が重なって見えるようにする)で見ると、</p>
<p>この状態でも立体的に見えます。</p>
<p>しかし、GIFアニメーションを利用して、２つを重ねて表示すると、特殊な見方をしなくても立体的に見ることができるので、</p>
<p>今度はPhotoshopを使ってGIFアニメーションを作ります。</p>
<p>&nbsp;</p>
<h3>手順2　Photoshopでアニメーションにする</h4>
<p>1.　「作った画像の半分の幅」×「作った画像と同じ高さ」の大きさで「ファイル」→「新規作成」</p>
<p>2.　作った画像を右、左それぞれが枠内に収まるようにして、レイヤーで重ねます</p>
<p><img decoding="async" loading="lazy" alt="重ねる" src="/uploads-archive/2013/01/pt_flow1.jpg" width="400" height="305" /></p>
<p>3.　「ウィンドウ」→「アニメーション」でフレームを表示</p>
<p><img decoding="async" loading="lazy" alt="フレーム" src="/uploads-archive/2013/01/pt_flow2.jpg" width="400" height="177" /></p>
<p>4.秒数を指定します（今回は0.1秒）</p>
<p><img decoding="async" loading="lazy" alt="フレーム秒数" src="/uploads-archive/2013/01/pt_flow3.jpg" width="205" height="178" /></p>
<p>5.　フレームを新規作成し、新規作成したほうの表になっていたレイヤーを非表示にして、アニメーションの完成です。</p>
<p><img decoding="async" loading="lazy" alt="フレーム追加" src="/uploads-archive/2013/01/pt_flow4.jpg" width="400" height="125" /></p>
<p>&nbsp;</p>
<h3>手順3　GIFに出力する</h4>
<p>「ファイル」→「Webおよびデバイス用に保存」でGIF形式で書き出せば、完成です。</p>
<p><img decoding="async" loading="lazy" alt="GIF書き出し" src="/uploads-archive/2013/01/pt_flow5.jpg" width="400" height="296" /></p>
<h3>完成</h4>
<p>↓↓できあがったもの↓↓</p>
<p><img decoding="async" loading="lazy" alt="3DりすGIFアニメーション" src="/demo/ninomiya/11/squirrel.gif" width="400" height="285" /></p>
<p><img decoding="async" loading="lazy" alt="3D犬IGFアニメーション" src="/demo/ninomiya/11/dog.gif" width="400" height="291" /></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: ninomiya

2013/06/26

2013/06/13

2013/06/06

2013/05/30

2013/05/23

2013/05/15

2013/05/09

2013/05/02

2013/04/25

2013/04/18

2013/04/04

2013/03/14

2013/03/07

2013/02/28

2013/02/14

2013/02/07

2013/01/31

2013/01/24