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

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

フラットデザインとは、最近の流行りで、 
無駄を省いた、シンプルな質感でしばらくは今後のデザイントレンドになると考えられるものです。 
ミニマルな感じで僕は非常に好きなタイプなのですが、 
このデザインでキーとなるのが、 
「タイポグラフィ、写真、アイコン、配色」 
で、特に重要なのがタイポグラフィなので、 
日本語を使うサイトでは、英語圏のサイトに比べるとちと難易度が高いのが悩ましい所。。。
まぁそんなことをいってもしかたがないので、 
実際制作するにあたり、役に立つサイト等をお伝えします。
&nbsp;
まずは、他のサイトのフラットデザインはどんなもんかと調べるためのサイトをご紹介。 
<a href="http://fltdsgn.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2043" alt="Flat UI Design - A showcase of the best examples of the flat UI design aesthetic on the web." src="/uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web..jpg" width="601" height="334" srcset="/uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web..jpg 1167w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-300x167.jpg 300w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-768x427.jpg 768w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-228x127.jpg 228w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-1024x569.jpg 1024w" sizes="(max-width: 601px) 100vw, 601px" /></a>
<a href="http://fltdsgn.com/" target="_blank">Flat UI Design &#8211; A showcase of the best examples of the flat UI design aesthetic on the web.</a>
&nbsp;
次に、フラットデザインで配色するための色を手っ取り早く知るためのサイト
<a href="http://flatuicolors.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2046" alt="Flat UI Colors" src="/uploads-archive/2013/05/Flat-UI-Colors.jpg" width="600" height="329" srcset="/uploads-archive/2013/05/Flat-UI-Colors.jpg 1182w, /uploads-archive/2013/05/Flat-UI-Colors-300x165.jpg 300w, /uploads-archive/2013/05/Flat-UI-Colors-768x422.jpg 768w, /uploads-archive/2013/05/Flat-UI-Colors-1024x562.jpg 1024w, /uploads-archive/2013/05/Flat-UI-Colors-228x125.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<a href="http://flatuicolors.com/" target="_blank">Flat UI Colors</a>
&nbsp;
そして、フラットデザインに使えるアイコンの紹介。
こちらは先日書いた以下のブログをご覧ください！ 
<a href="/designer/%E5%95%86%E7%94%A8%E7%84%A1%E6%96%99%EF%BC%81%E6%B5%81%E8%A1%8C%E3%82%8A%E3%81%AE%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%AB%E3%81%B4%E3%81%A3%E3%81%9F%E3%82%8A.html" target="_blank">商用無料！流行りのフラットデザインにぴったりなアイコン4セット</a>
&nbsp;
最後は、実際にデザインしてあるパーツ等をPSDでダウンロード出来る素材のご紹介です。
縦長すぎるので、画像は省力しますが、 
この２つは手元に置いておきたい素材です。 
色味の参考にしてもよし、そのまま使ってもよしな非常にありがたい品です。
<a href="http://designmodo.github.io/Flat-UI/" target="_blank">Flat UI</a>
<a href="http://designmodo.com/square-free/" target="_blank">Square UI Free &#8211; User Interface Kit &#8211; Designmodo</a> 
こちらはツイッターでつぶやくとダウンロード出来るようになります。
&nbsp;
最後にあまり関係ないですが、 
webサイトで使用している色を教えてくれるサイトのご紹介です。 
urlを入れるだけで、そのサイトが実際に使っている色を割合も含めて表示してくれます。
<a href="/uploads-archive/2013/05/Colours.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2054" alt="Colours" src="/uploads-archive/2013/05/Colours.jpg" width="600" height="333" srcset="/uploads-archive/2013/05/Colours.jpg 1167w, /uploads-archive/2013/05/Colours-300x167.jpg 300w, /uploads-archive/2013/05/Colours-768x427.jpg 768w, /uploads-archive/2013/05/Colours-228x127.jpg 228w, /uploads-archive/2013/05/Colours-1024x569.jpg 1024w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<a href="http://webcolourdata.com/">Colours</a>

フラットデザインの制作に役立つあれこれ

今流行りつつあるwebデザインで、フラットデザインやらソリッドカラー等といわれていますが、 
それに適したアイコンが商用無料で配布されております。
質も申し分ないうえに量もそれなりに多いので、これさえあれば十分対応できるのではないかと思います。
イラストやアイコンをかけない僕みたいな人には、ありがたすぎますね〜
それでは以下をご覧ください。
<a href="http://www.graphicsfuel.com/2013/04/20-flat-icons-psd/#data" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2003" alt="flat1" src="/uploads-archive/2013/04/flat1.png" width="550" height="275" srcset="/uploads-archive/2013/04/flat1.png 600w, /uploads-archive/2013/04/flat1-300x150.png 300w, /uploads-archive/2013/04/flat1-228x114.png 228w" sizes="(max-width: 550px) 100vw, 550px" /></a> 
<a title="Permanent Link: 20 Flat Icons (PSD)" href="http://www.graphicsfuel.com/2013/04/20-flat-icons-psd/" target="_blank">20 Flat Icons (PSD)</a>
&nbsp;
<a href="http://www.icojam.com/blog/?p=380" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2004" alt="flat2" src="/uploads-archive/2013/04/flat2.jpg" width="540" height="379" srcset="/uploads-archive/2013/04/flat2.jpg 540w, /uploads-archive/2013/04/flat2-300x211.jpg 300w, /uploads-archive/2013/04/flat2-228x160.jpg 228w" sizes="(max-width: 540px) 100vw, 540px" /></a> 
<a href="http://www.icojam.com/blog/?p=380" target="_blank">Eldorado mini free | Icojam</a> 
こちらはなんと1262個ものアイコンがあります！ 
（カラーついてますが、全部モノクロのアイコンになります。pngファイルでどうやって色つけるんだろう。。。）
&nbsp;
<a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol1" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2005" alt="flat3" src="/uploads-archive/2013/04/flat3.jpg" width="500" height="500" srcset="/uploads-archive/2013/04/flat3.jpg 960w, /uploads-archive/2013/04/flat3-768x768.jpg 768w, /uploads-archive/2013/04/flat3-150x150.jpg 150w, /uploads-archive/2013/04/flat3-300x300.jpg 300w, /uploads-archive/2013/04/flat3-228x228.jpg 228w, /uploads-archive/2013/04/flat3-120x120.jpg 120w" sizes="(max-width: 500px) 100vw, 500px" /></a> 
<a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol1" target="_blank">Flat Design Icons Set Vol1 | Media Icons | Pixeden</a>
<a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol2" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2006" alt="flat4" src="/uploads-archive/2013/04/flat4.jpg" width="500" height="500" srcset="/uploads-archive/2013/04/flat4.jpg 960w, /uploads-archive/2013/04/flat4-768x768.jpg 768w, /uploads-archive/2013/04/flat4-150x150.jpg 150w, /uploads-archive/2013/04/flat4-300x300.jpg 300w, /uploads-archive/2013/04/flat4-228x228.jpg 228w, /uploads-archive/2013/04/flat4-120x120.jpg 120w" sizes="(max-width: 500px) 100vw, 500px" /></a> 
<a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol2" target="_blank">Flat Design Icons Set Vol2 | Media Icons | Pixeden</a>
&nbsp;
この２つに関しては、フラットなんですが、多色で作りこんでいますね〜
&nbsp;
このようなアイコンは、見てみると作れそうな気がしますが、 
実際作るとなると、けっこう難しそうですね、、、
こんなアイコンを自分で作れるようになると、ある意味楽なんですが、 
それはまだ先の話ですね〜

商用無料！流行りのフラットデザインにぴったりなアイコン4セット

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

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

お客様へどんなサイトがいいのか伝える時に言葉だけじゃちょっと・・・
といった時に参考にさせていただいているサイトのご紹介です。
<h2>WEBデザインの見本帳</h3>
<a href="http://www.web-mihon.com/"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1686" alt="スクリーンショット（2013-03-06 18.22.23）" src="/uploads-archive/2013/03/d2f17bf502936aa92733467728810f73-300x155.png" width="300" height="155" srcset="/uploads-archive/2013/03/d2f17bf502936aa92733467728810f73-300x155.png 300w, /uploads-archive/2013/03/d2f17bf502936aa92733467728810f73-768x397.png 768w, /uploads-archive/2013/03/d2f17bf502936aa92733467728810f73-228x118.png 228w, /uploads-archive/2013/03/d2f17bf502936aa92733467728810f73.png 960w" sizes="(max-width: 300px) 100vw, 300px" /></a>
http://www.web-mihon.com/
<ul>
<li>サイトのカテゴリ分けが明確</li>
<li>種類が豊富</li>
<li>サムネイルが直接表示</li>
</ul>
色や印象、業種からも探すことが可能なのでかなりおすすめです。
掲載基準もデザインにこだわわっていて、見ているだけでもかなり楽しいです。
疲れた時に優しいデザインのサイトでいやされるのもありかも。

デザインやイメージの参考サイト

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

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

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

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

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

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

3DなアニメーションGIF作ってみた

CSS3のアニメーションを使ったボタン

2013年初のブログということで、簡単にwebデザインのトレンドのお話をしたいと思います。
まずは、昨年のwebデザインから。
海外の方の好みなのでしょうか。 
数多くのwebサイトが掲載されています。
<a href="http://webdesignledger.com/inspiration/best-of-web-design-in-2012" target="_blank">Best of Web Design in 2012 | Inspiration</a>
簡単に大きく分けていうと、
・ベタ塗り 
 ・大きな写真を背景としてブラウザいっぱいに表示 
 ・背景にちょっとしたテクスチャ(紙等) 
 ・レトロな配色 
 ・ワンカラム 
 ・スクロールによるアニメーション 
 ・大きなキャッチコピー
こんな感じでしょうか。 
(もっと細かくみたら他にもあると思います・・・)
海外の方のものなので、 
日本のWEBサイトで見かけるのとは違うかも知れませんが、 
僕個人としては、確かに上記のようなサイトが多くあった感じがします。
そして、今年のデザインのトレンドですが、 
こちらも海外の方のブログですが、 
トレンドを20個紹介してくれています。
<a href="http://www.hongkiat.com/blog/web-design-trend-2013/" target="_blank">Web Design: 20 Hottest Trends To Watch Out For in 2013</a> 
箇条書きにすると以下の様な感じです。
１．レスポンシブデザイン 
 ２．Retinaの対応 
 ３．ヘッダーの固定 
 ４．背景に大きな写真 
 ５．CSSでの透過 
 ６．ミニマルなランディングページ 
 ７．QRコードの掲載 
 ８．ソーシャルメディアのバッジ 
 ９．細かいイラスト 
 １０．無限スクロール(インフィニットスクロール) 
 １１．HPのチュートリアル 
 １２．スライドでコンテンツ移動させる 
 １３．クリックで開閉、表示・非表示になるナビーゲーション 
 １４．画面いっぱいのタイポグラフィー 
 １５．オープンソースやAPIの使用 
 １６．ボックスの影(ドロップシャドウ) 
 １７．CSS３によるアニメーション 
 １８．縦のナビゲーション 
 １９．１ページのwebデザイン 
 ２０．円形の要素を使用したデザイン
ざっと書いてしまうとこんな感じです。
昨年から見られるトレンドもありますが、 
今年もトレンドとして引き続きあるってことですねー
僕として、今は、「ベタ塗り」や「テクスチャ」が好みではありますが、 
今年のトレンドには見当たらないのシフトしていかないとダメかもしれませんww

2012年のベストwebデザインと、2013年に予想されるwebデザイン

CSS3で伊勢丹の紙袋を作ってみた

Illustratorにできて、Photoshopにできない表現方法のひとつに、
「グラデーションメッシュ」があります。
グラデーションメッシュを使うと、細かにグラデーションの設定ができるので、
かなり繊細な表現が可能となります。
しかし、このグラデーションメッシュは、使い方に癖があり、複雑な形のものでは思い通りに操作することが難しいため、
なかなか手が出せずにいました。
&nbsp;
そんなときに、<a href="http://www.amazon.co.jp/dp/4861006406" target="_blank">「Illustratorグラデーションメッシュらくらく操作ガイド」</a>という本を見つけました。
こちらの本には、Illustratorのグラデーションメッシュでのソフトウェアの癖を理解したうえで、
それを回避しながら、思い通りにグラデーションメッシュを扱う方法が紹介されていました。
&nbsp;
その中でも、文字の装飾について載っていたので、ご紹介いたします。
&nbsp;
まず、私のこれまで知っていた方法でグラデーションメッシュを文字に適用するとします。
1.グラデーションメッシュを適用するオブジェクトを選択して
2.「オブジェクト」→「グラデーションメッシュを作成」
この方法でグラデーションメッシュを作ると
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img02.jpg" />
↑こちらのように、メッシュがグチャグチャになってしまい、
この状態のメッシュでグラデーションをかけようとすると、
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img03.jpg" />
↑このようによくわからないグラデーションになってしまいます。
これではグラデーションメッシュで思い通りに製作することは、到底できません。
これは、単純な形では便利に使えるようになっているIllustratorにおけるグラデーションメッシュの
作成の仕組みによるものだそうです。
&nbsp;
これを回避する方法のひとつとして、本では３つ程方法が紹介されていましたが、
今回は文字のような、既に形が出来上がっているもので、複雑な図形の編集で有効な方法である、
「ダイレクト選択メッシュ法」について、紹介いたします。
&nbsp;
まずは、文字をアウトライン化したものを用意します。
これを、ナイフツールを使い、とめ・はねのような動きのあるところを切り分けていきます。
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img04.jpg" />
次に、切り分けた、それぞれのオブジェクトの、4隅に当たる4つのアンカーポイントを、
ダイレクト選択ツールを使って選択します。
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img05.jpg" />
この状態で、「オブジェクト」→「グラデーションメッシュを作成」の手順で、メッシュを作成します。 
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img06.jpg" />
そうすると、次の画像のように、形に沿ったグラデーションメッシュが出来上がります。
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img07.jpg" />
これを切り分けたオブジェクトすべてに行うことで、
きれいなグラデーションメッシュが出来上がりました。
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img08.jpg" />
形に沿ったグラデーションメッシュができるので、
次の画像のように、思い通りにグラデーションをかけることができました。
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img09.jpg" />
&nbsp;
こちらと似たようなグラデーションを、アウトライン化した文字に、
「効果」→「スタイライズ」→「光彩(内側)」を乗算でかけることでもできますが、
細かな設定はできないので、凝った表現が必要なときは、この方法が表現を広げてくれそうです。
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img10.jpg" width="100%" />
&nbsp;
ちなみに、グラデーションメッシュは現状のSVG1.1ではサポートされていないため、
Illustratorでグラデーションメッシュを使ったオブジェクトは、jpgやpng等と同じラスターデータに変換されてしまいます。
次世代のSVGである、開発中のSVG2.0ではグラデーションメッシュが採用される予定のようですので、
SVG2.0の普及が待ち遠しいところです。

Illustratorの「グラデーションメッシュ」で、少し凝った文字の装飾

サンプルECサイトを作ってみました。~heightLineプラグインの使用~

白は、Webサイトのデザインの中で、最も多く使う色なのではないかと思います。
今回、白をメインテーマにしたサイトのデザインをすることになったので、
ただ白を使ったサイトではなく、白をうまく引き立てたデザインのWebサイトを探してみました。 
<a title="website01" href="/uploads-archive/2012/12/website01.jpg"><img decoding="async" loading="lazy" class="attachment-medium" title="website01" src="/uploads-archive/2012/12/website01-300x223.jpg" alt="website01" width="300" height="223" /></a> 
<a href="http://www.storia-wedding.jp/" target="_blank">http://www.storia-wedding.jp/</a>
上品な空の青が、新婦さんのドレスの白を綺麗に引き立てています。 
<a title="website02" href="/uploads-archive/2012/12/website02.jpg"><img decoding="async" loading="lazy" class="attachment-medium" title="website02" src="/uploads-archive/2012/12/website02-300x223.jpg" alt="website02" width="300" height="223" /></a> 
<a href="http://kuad-entrance.com/" target="_blank">http://kuad-entrance.com/</a>
余白を多く使い、白のイメージを強め、
淡いグレーが白の邪魔をすることなく、白の一部のようにして、白を引き立てています。 
<a title="website03" href="/uploads-archive/2012/12/website03.jpg"><img decoding="async" loading="lazy" class="attachment-medium" title="website03" src="/uploads-archive/2012/12/website03-300x223.jpg" alt="website03" width="300" height="223" /></a> 
<a href="http://g-u-k.jp/" target="_blank">http://g-u-k.jp/</a>
極端に余白を大きくし、有彩色の色を使わないことで、白のイメージが印象に残ります。
&nbsp;
<h3>まとめ</h4>
白を引き立てたサイトの特徴として、次のような印象を感じました。
・余白を大きく取り、白の印象を強める(色のついた場所を極力小さくする)
・上品な有彩色を背景に使って、白の白さを引き立てる
・淡いグレーやベージュを用いて、白を邪魔することなく、白の陰影のような印象にすることで、メリハリを付ける。
&nbsp;
以上のようなことを、参考に、白のサイトのデザインをしてみたいと思います。
&nbsp;

白を引き立てる白のサイト

HTML5でWebカメラ &#8211; Photobooth.js

medium_blogtop.jpg

small_blogtop.jpg

thumbnail_blogtop.jpg

blogtop.jpg

インラインSVGの基本まとめ

見出しはコンテンツの中でも重要な場所ですが、 
デザインを考えるときに、迷うことが多い場所です。
&nbsp;
特にシンプルなデザインが求められている場合、 
シンプルにしすぎて、軽すぎたり、寂しい印象になってしまったり、 
それを避けようとして、シンプルから離れてしまったりするなど、 
難しいと感じることが多いです。
&nbsp;
そこで今回は、シンプルな見出しのデザインで、 
一味違うと思うサイトを探してみることにしました。
&nbsp;
<hr />
<a href="http://www.menard.co.jp/" target="_blank">MENARD</a> 
<a href="http://www.menard.co.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img1.jpg" alt="" /></a>
&nbsp;
見出し画像 
<img decoding="async" style="width: 100%;" src="/uploads-archive/2012/10/header_img1_1.jpg" alt="" />
<img decoding="async" loading="lazy" style="width: 100%;" src="/uploads-archive/2012/10/header_img1_2.jpg" alt="" width="779" height="60" />
&nbsp;
大きな見出し、小さな見出しともに、左端に緩やかなグラデーションのかかったマークがあります。 
これだけだと、よく見られる一般的なものですが、 
大きな見出しのほうは、マークの４つの角が、半透明程度に削られています。 
小さな見出しのほうも、上側だけが、2px程度の角丸になっていました。
&nbsp;
下に入れられたボーダーは、両者とも、グラデーションが入っています。 
大きなほうは、一直線なグラデーションではなく、ランダムなグラデーションがかかっていました。 
これによって、ただの線という感じから脱しています。
&nbsp;
ボーダーの下には少し幅のある淡いドロップシャドウがつけられていて、ほんのりと立体感が出ています。 
大きな見出しのほうは、ドロップシャドウが真ん中ほど幅広くなっていて、より質感が出されていました。
&nbsp;
大きな見出しは、タイトルと説明の文字色のトーンを微妙に変えてメリハリをつけ、 
右端に添えられた英語のタイトルは、グラデーションがかけられていました。
&nbsp;
<a href="http://madamefigaro.jp/" target="_blank">FIGARO.jp</a>
<a href="http://madamefigaro.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img2.jpg" alt="" /></a>
&nbsp;
見出し画像
<img decoding="async" src="/uploads-archive/2012/10/header_img2.jpg" alt="" />
&nbsp;
とてもシンプルなのですが、フォントの使い方や、文字の配置の仕方が面白く、印象的です。
&nbsp;
<a href="http://coetoiro.jp/" target="_blank">コエトイロ</a>
<a href="http://coetoiro.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img3.jpg" alt="" /></a>
&nbsp;
見出し画像 
<img decoding="async" src="/uploads-archive/2012/10/header_img3.jpg" alt="" />
&nbsp;
見出しはシンプルなアイコンと３本線と筆文字風のフォントで構成されたシンプルなものですが、 
和の感じが十分伝わってきます。
 

和柄を感じさせる線の使い方と、ひっそり右端でフェイドアウトしているところが、 
より和の感じを出しているように思います。
&nbsp;
&nbsp;
<hr />
<h2></h2>
<h2>まとめ</h2>
今回シンプルな見出しを探してみたところ、 
文字だけだったり、 
点線や実践一本、１色ののマークやアイコンが左端にひとつあるなどのものが、 
大半を占めていました。
 

ケース・バイ・ケースではありますが、 
シンプルなデザインをする場合、装飾に頼らず、レイアウトによって 
見出しを引き立てる技術が、より重要になってくるのだということを、 
感じました。

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2013/05/09

2013/05/02

2013/04/24

2013/03/14

2013/03/07

2013/03/07

2013/02/07

2013/01/31

2013/01/24

2013/01/17

2013/01/10

2013/01/10

2012/12/13

2012/12/13

2012/12/06

2012/12/06

2012/11/22

2012/10/18