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

<p>日々、お優しいブロガーの方々がフリーで素材を提供してくれています。</p>
<p>&nbsp;</p>
<p>その中でも、コレも無料でもらえちゃうんだ！という驚きのものもあります。</p>
<p>実際に使用するのもよし、素材を見てデザイン力を学ぶのもよし、ダウンロード必須の素材です。</p>
<p>&nbsp;</p>
<h3><a href="http://www.splashnology.com/article/45-psd-ui-kits/8238/" target="_blank">45 PSD UI Kits | Splashnology.com</a></h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://www.splashnology.com/article/45-psd-ui-kits/8238/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2913" alt="psdsozai1" src="/uploads-archive/2013/08/psdsozai1.jpg" width="599" height="349" srcset="/uploads-archive/2013/08/psdsozai1.jpg 600w, /uploads-archive/2013/08/psdsozai1-300x175.jpg 300w, /uploads-archive/2013/08/psdsozai1-228x133.jpg 228w" sizes="(max-width: 599px) 100vw, 599px" /></a></p>
<p>&nbsp;</p>
<p>いろんなテーマで、UI,パーツが揃っています。</p>
<p>パーツが一つのテーマでいくつかあるので、統一したデザインが出来そうです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3><a href="http://graphicdesignjunction.com/2013/02/free-psd-files-65-useful-ui-design-psd-files-for-download/" target="_blank">Free PSD Files: 65 Useful UI Design PSD Files for Download | Freebies | Graphic Design Junction</a></h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://graphicdesignjunction.com/2013/02/free-psd-files-65-useful-ui-design-psd-files-for-download/" target="_blank"><img decoding="async" loading="lazy" class="size-full wp-image-2914 aligncenter" alt="psdsozai2" src="/uploads-archive/2013/08/psdsozai2.jpg" width="400" height="300" srcset="/uploads-archive/2013/08/psdsozai2.jpg 400w, /uploads-archive/2013/08/psdsozai2-228x171.jpg 228w, /uploads-archive/2013/08/psdsozai2-300x225.jpg 300w" sizes="(max-width: 400px) 100vw, 400px" /></a></p>
<p>ところどころで使えそうなパーツが揃っています。</p>
<p>勉強にも使えそうです。</p>
<p>&nbsp;</p>
<h3><a href="http://dribbble.com/shots/187607-Shiny-Blue-UI-PSD-" target="_blank">Shiny Blue UI [PSD]</a></h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://dribbble.com/shots/187607-Shiny-Blue-UI-PSD-" target="_blank"><img decoding="async" loading="lazy" class="size-full wp-image-2915 aligncenter" alt="psdsozai3" src="/uploads-archive/2013/08/psdsozai3.jpg" width="536" height="299" srcset="/uploads-archive/2013/08/psdsozai3.jpg 536w, /uploads-archive/2013/08/psdsozai3-300x167.jpg 300w, /uploads-archive/2013/08/psdsozai3-228x127.jpg 228w" sizes="(max-width: 536px) 100vw, 536px" /></a></p>
<p> こちらもいろんなパーツ、アイコン等があります。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3><a href="http://designreflect.com/free-website-templates-psd-files/" target="_blank">20 Free Website Templates PSD Files</a></h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://designreflect.com/free-website-templates-psd-files/" target="_blank"><img decoding="async" loading="lazy" class="size-full wp-image-2916 aligncenter" alt="psdsozai4" src="/uploads-archive/2013/08/psdsozai4.jpg" width="550" height="300" srcset="/uploads-archive/2013/08/psdsozai4.jpg 550w, /uploads-archive/2013/08/psdsozai4-300x164.jpg 300w, /uploads-archive/2013/08/psdsozai4-228x124.jpg 228w" sizes="(max-width: 550px) 100vw, 550px" /></a></p>
<p class="aligncenter">こちらはwebサイトのテンプレートのpsd素材です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3><a href="http://graphicdesignjunction.com/2013/06/psd-ui-kits/" target="_blank">Free PSD UI Kits | Design | Graphic Design Junction</a></h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="/uploads-archive/2013/08/psdsozai5.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2917" alt="psdsozai5" src="/uploads-archive/2013/08/psdsozai5.jpg" width="500" height="854" srcset="/uploads-archive/2013/08/psdsozai5.jpg 500w, /uploads-archive/2013/08/psdsozai5-176x300.jpg 176w, /uploads-archive/2013/08/psdsozai5-228x389.jpg 228w" sizes="(max-width: 500px) 100vw, 500px" /></a></p>
<p>&nbsp;</p>
<p>UIのkitが揃っておりそのままでも十分すぎる程使用出来るかと思います。</p>
<p>&nbsp;</p>
<p>本当にこういったものはありがたく、</p>
<p>今後とも頑張って提供して頂きたいですね！！</p>
<p>&nbsp;</p>


無料でゲットできちゃう高品質PSD素材！

<p>ぜひ見本にしたいサイトを30サイトまとめてくれております。</p>
<p>海外のサイトですと、やはりミニマル・フラットデザインは良い感じですよね〜</p>
<p>ちまたで少し言われているみたいで、僕もそうだと思うのですが、<br />
やはり日本語のフォントだとかっこ良くならないんですよねなぜか。</p>
<p>ただ、参考にして勉強させて頂きます！</p>
<p><a href="http://designinstruct.com/visual-inspiration/web-design-inspiration/minimalist-web-designs/">30 Beautiful Minimalist Web Designs</a></p>
<p><a href="/uploads-archive/2013/07/30-Beautiful-Minimalist.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-2753" alt="30-Beautiful-Minimalist" src="/uploads-archive/2013/07/30-Beautiful-Minimalist.jpg" width="621" height="12528" srcset="/uploads-archive/2013/07/30-Beautiful-Minimalist.jpg 690w, /uploads-archive/2013/07/30-Beautiful-Minimalist-228x4600.jpg 228w" sizes="(max-width: 621px) 100vw, 621px" /></a></p>


ぜひ見本したい！美しいミニマル・フラットデザインのwebサイト30個

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


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

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


PhotoshopでFlashのような滑らかなGIFアニメを作るための裏技

<p>webデザインをしている中で、僕の場合はほとんどPSDなんですが、やはり他の人がどんな風にデザインしているのか、どんなテクニックを使っているのかというのは非常に気になる所です。</p>
<p>そんな中、有名で人気のあるサイトのUIがPSDでゲットできちゃうというサイトがありました。</p>
<p>Github,apple,facebook等のサイトのUIなんかがあります。</p>
<p>なんと教育目的(?)のたまに、正確にPSDでおこしたそうです。</p>
<p>appleに関しては、単純そうに見えて、意外と手が込んでました。。。</p>
<p>やはり「神は細部に宿る」ですかね。</p>
<p>そのサイトはこちらになります。</p>
<p><a href="http://lukechesser.github.io/Popular-UIs/" target="_target">Popular UIs | Free PSDs of popular Web Interfaces</a></p>
<p><a href="/uploads-archive/2013/06/Popular-UIs-Free-PSDs-of-popular-Web-Interfaces-e1372096753498.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-2473" alt="Popular UIs  Free PSDs of popular Web Interfaces" src="/uploads-archive/2013/06/Popular-UIs-Free-PSDs-of-popular-Web-Interfaces-e1372096753498.jpg" width="624" height="2485" srcset="/uploads-archive/2013/06/Popular-UIs-Free-PSDs-of-popular-Web-Interfaces-e1372096753498-257x1024.jpg 257w, /uploads-archive/2013/06/Popular-UIs-Free-PSDs-of-popular-Web-Interfaces-e1372096753498-75x300.jpg 75w" sizes="(max-width: 624px) 100vw, 624px" /></a></p>
<p>そしてさらにもうひとつ。</p>
<p>50個の無料のwedデザインPSD、そして中にはHTMLソースまであるやつもあります！</p>
<p><a href="http://www.splashnology.com/article/50-new-and-free-psd-website-templates/9457/">50 New and Free PSD Website Templates | Splashnology.com</a></p>
<p>こんなものがあるなんて我々webデザイナーの役割って・・・って感じです。</p>
<p>まぁこれは海外のものなんでちょっと日本のとは違うので、使いづらいかもしれません。</p>
<p>ただ、非常に参考になります。</p>
<p>勉強させてもらいます！！</p>
<p>&nbsp;</p>


とてつもなく参考になるwebデザインのPSDをダウンロードできちゃうサイト

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


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

<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フォントで使ってみよう

<p>フラットデザインとは、最近の流行りで、<br />
無駄を省いた、シンプルな質感でしばらくは今後のデザイントレンドになると考えられるものです。<br />
ミニマルな感じで僕は非常に好きなタイプなのですが、<br />
このデザインでキーとなるのが、<br />
「タイポグラフィ、写真、アイコン、配色」<br />
で、特に重要なのがタイポグラフィなので、<br />
日本語を使うサイトでは、英語圏のサイトに比べるとちと難易度が高いのが悩ましい所。。。</p>
<p>まぁそんなことをいってもしかたがないので、<br />
実際制作するにあたり、役に立つサイト等をお伝えします。</p>
<p>&nbsp;</p>
<p>まずは、他のサイトのフラットデザインはどんなもんかと調べるためのサイトをご紹介。<br />
<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></p>
<p><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></p>
<p>&nbsp;</p>
<p>次に、フラットデザインで配色するための色を手っ取り早く知るためのサイト</p>
<p><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></p>
<p><a href="http://flatuicolors.com/" target="_blank">Flat UI Colors</a></p>
<p>&nbsp;</p>
<p>そして、フラットデザインに使えるアイコンの紹介。</p>
<p>こちらは先日書いた以下のブログをご覧ください！<br />
<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></p>
<p>&nbsp;</p>
<p>最後は、実際にデザインしてあるパーツ等をPSDでダウンロード出来る素材のご紹介です。</p>
<p>縦長すぎるので、画像は省力しますが、<br />
この２つは手元に置いておきたい素材です。<br />
色味の参考にしてもよし、そのまま使ってもよしな非常にありがたい品です。</p>
<p><a href="http://designmodo.github.io/Flat-UI/" target="_blank">Flat UI</a></p>
<p><a href="http://designmodo.com/square-free/" target="_blank">Square UI Free &#8211; User Interface Kit &#8211; Designmodo</a><br />
こちらはツイッターでつぶやくとダウンロード出来るようになります。</p>
<p>&nbsp;</p>
<p>最後にあまり関係ないですが、<br />
webサイトで使用している色を教えてくれるサイトのご紹介です。<br />
urlを入れるだけで、そのサイトが実際に使っている色を割合も含めて表示してくれます。</p>
<p><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></p>
<p><a href="http://webcolourdata.com/">Colours</a></p>


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

<p>今流行りつつあるwebデザインで、フラットデザインやらソリッドカラー等といわれていますが、<br />
それに適したアイコンが商用無料で配布されております。</p>
<p>質も申し分ないうえに量もそれなりに多いので、これさえあれば十分対応できるのではないかと思います。</p>
<p>イラストやアイコンをかけない僕みたいな人には、ありがたすぎますね〜</p>
<p>それでは以下をご覧ください。</p>
<p><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><br />
<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></p>
<p>&nbsp;</p>
<p><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><br />
<a href="http://www.icojam.com/blog/?p=380" target="_blank">Eldorado mini free | Icojam</a><br />
こちらはなんと1262個ものアイコンがあります！<br />
（カラーついてますが、全部モノクロのアイコンになります。pngファイルでどうやって色つけるんだろう。。。）</p>
<p>&nbsp;</p>
<p><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><br />
<a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol1" target="_blank">Flat Design Icons Set Vol1 | Media Icons | Pixeden</a></p>
<p><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><br />
<a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol2" target="_blank">Flat Design Icons Set Vol2 | Media Icons | Pixeden</a></p>
<p>&nbsp;</p>
<p>この２つに関しては、フラットなんですが、多色で作りこんでいますね〜</p>
<p>&nbsp;</p>
<p>このようなアイコンは、見てみると作れそうな気がしますが、<br />
実際作るとなると、けっこう難しそうですね、、、</p>
<p>こんなアイコンを自分で作れるようになると、ある意味楽なんですが、<br />
それはまだ先の話ですね〜</p>


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

<p>インフォグラフィックのリンク集をご紹介します。</p>
<p>インフォグラフィックとは、<br />
情報、データ、知識を視覚的に表現したもので、見る側にとって、目に止まりやすく。感覚的に理解しやすいものです。<br />
イラストを使用したり、キレイにレイアウトしたり、方法は様々ありますが、<br />
伝えたい情報をわかりやすく素早く伝えたい場合、有効な手段になります。</p>
<p>チラシやパンフレット等では、当然のごとく使用されていますが、<br />
webサイトでは、LPではよくあるかもしれませんが、普通のサイトでは、そこまで見かけないかなぁと思います。</p>
<p>当然、今後必要とされる要素ではありますが、この領域はもうwebデザインではなく、<br />
エディトリアルデザインなので、僕自身得意ではない分野ではありますが、<br />
以下に紹介させて頂くサイトを参考に勉強していきたいと思います。</p>
<p>それでは、インフォグラフィックをまとめているサイトを紹介します。<br />
最初の２つは、日本のサイトですね。</p>
<p>&nbsp;</p>
<h3>infogra.me（インフォグラミー）</h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://infogra.me/" target="_blank"><img decoding="async" loading="lazy" class=" wp-image-1929 aligncenter" alt="info1" src="/uploads-archive/2013/04/info1.jpg" width="600" height="369" srcset="/uploads-archive/2013/04/info1.jpg 1089w, /uploads-archive/2013/04/info1-300x185.jpg 300w, /uploads-archive/2013/04/info1-768x473.jpg 768w, /uploads-archive/2013/04/info1-1024x630.jpg 1024w, /uploads-archive/2013/04/info1-228x140.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://infogra.me/" target="_blank">infogra.me（インフォグラミー） | インフォグラフィックスコミュニケーションサービス</a></p>
<p>&nbsp;</p>
<h3>infographic.jp</h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://infographic.jp/" target="_blank"><img decoding="async" loading="lazy" class="size-full wp-image-1931 aligncenter" alt="info2" src="/uploads-archive/2013/04/info2.jpg" width="600" height="369" srcset="/uploads-archive/2013/04/info2.jpg 1089w, /uploads-archive/2013/04/info2-300x185.jpg 300w, /uploads-archive/2013/04/info2-768x473.jpg 768w, /uploads-archive/2013/04/info2-1024x630.jpg 1024w, /uploads-archive/2013/04/info2-228x140.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a><br />
<a href="http://infographic.jp/" target="_blank">infographic.jp &#8211; インフォグラフィックス by IOIX</a></p>
<p>&nbsp;</p>
<h3>Visual.ly</h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://visual.ly/" target="_blank"><img decoding="async" loading="lazy" class=" wp-image-1932 aligncenter" alt="info3" src="/uploads-archive/2013/04/info3.jpg" width="600" height="369" srcset="/uploads-archive/2013/04/info3.jpg 1089w, /uploads-archive/2013/04/info3-300x185.jpg 300w, /uploads-archive/2013/04/info3-768x473.jpg 768w, /uploads-archive/2013/04/info3-1024x630.jpg 1024w, /uploads-archive/2013/04/info3-228x140.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://visual.ly/" target="_blank">Infographics &amp; Data Visualization | Visual.ly</a></p>
<p>&nbsp;</p>
<h3>Daily Infographic</h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://dailyinfographic.com/" target="_blank"><img decoding="async" loading="lazy" class=" wp-image-1933 aligncenter" alt="info4" src="/uploads-archive/2013/04/info4.jpg" width="601" height="361" srcset="/uploads-archive/2013/04/info4.jpg 1089w, /uploads-archive/2013/04/info4-768x462.jpg 768w, /uploads-archive/2013/04/info4-1024x616.jpg 1024w, /uploads-archive/2013/04/info4-300x180.jpg 300w, /uploads-archive/2013/04/info4-228x137.jpg 228w" sizes="(max-width: 601px) 100vw, 601px" /></a></p>
<p><a href="http://dailyinfographic.com/" target="_blank">Daily Infographic | A New Infographic Every Day | Data Visualization, Information Design and Infographics</a></p>
<p>&nbsp;</p>
<h3>Infographics Showcase</h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://www.infographicsshowcase.com/" target="_blank"><img decoding="async" loading="lazy" class=" wp-image-1934 aligncenter" alt="info5" src="/uploads-archive/2013/04/info5.jpg" width="600" height="369" srcset="/uploads-archive/2013/04/info5.jpg 1089w, /uploads-archive/2013/04/info5-300x185.jpg 300w, /uploads-archive/2013/04/info5-768x473.jpg 768w, /uploads-archive/2013/04/info5-1024x630.jpg 1024w, /uploads-archive/2013/04/info5-228x140.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://www.infographicsshowcase.com/" target="_blank">Infographics Showcase &#8211; Infographic Reviews &#8211; Submit Infographic</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>素晴らしいインフォグラフィックがいっぱいですね！</p>
<p>作成するのがすごい大変そうですが、<br />
簡単に作成できるツールがあるそうです。<br />
それは以下のリンクからご覧ください。</p>
<p><a href="http://bazubu.com/infographictools-6427.html" target="_blank">驚くほど簡単にインフォグラフィックを作成できる無料ツール７選</a></p>
<p>まだ試してはいないんですが、簡単にできてしまうと、<br />
我々の仕事の価値もなくなってしまうようで複雑です。。。</p>


ページの印象をUPさせるインフォグラフィックのリンク集サイト５つ

<p>アプリのデザインをチュートリアルとして公開してくれてる記事を紹介させて頂きます。</p>
<p>海外のサイトですが、<br />
高品質なアプリアイコンの作り方を丁寧に説明してくれています。</p>
<p>どれも素晴らしいものなので、勉強にもってこいです！！</p>
<p>&nbsp;</p>
<p><a href="http://designrfix.com/icons/create-notes-app-icon-photoshop" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-1897" alt="app1" src="/uploads-archive/2013/04/app1.jpg" width="540" height="416" srcset="/uploads-archive/2013/04/app1.jpg 540w, /uploads-archive/2013/04/app1-228x176.jpg 228w, /uploads-archive/2013/04/app1-300x231.jpg 300w" sizes="(max-width: 540px) 100vw, 540px" /></a><br />
<a href="http://designrfix.com/icons/create-notes-app-icon-photoshop" target="_blank">How To Create A Notes App Icon In Photoshop | designrfix.com</a></p>
<p>&nbsp;</p>
<p><a href="http://www.photoshop-plus.co.uk/2011/12/31/carbon-fibre-style-metallic-icon-design/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-1898" alt="app2" src="/uploads-archive/2013/04/app2.png" width="600" height="400" srcset="/uploads-archive/2013/04/app2.png 600w, /uploads-archive/2013/04/app2-300x200.png 300w, /uploads-archive/2013/04/app2-228x152.png 228w" sizes="(max-width: 600px) 100vw, 600px" /></a><br />
<a href="http://www.photoshop-plus.co.uk/2011/12/31/carbon-fibre-style-metallic-icon-design/" target="_blank">Learn How To Create A Metallic Carbon Fibre Icon</a></p>
<p>&nbsp;</p>
<p><a href="http://psd.tutsplus.com/tutorials/icon-design/mobile-app-icon/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-1900" alt="app4" src="/uploads-archive/2013/04/app4.jpg" width="600" height="600" srcset="/uploads-archive/2013/04/app4.jpg 600w, /uploads-archive/2013/04/app4-150x150.jpg 150w, /uploads-archive/2013/04/app4-300x300.jpg 300w, /uploads-archive/2013/04/app4-228x228.jpg 228w, /uploads-archive/2013/04/app4-120x120.jpg 120w" sizes="(max-width: 600px) 100vw, 600px" /></a><br />
<a href="http://psd.tutsplus.com/tutorials/icon-design/mobile-app-icon/" target="_blank">Create a Mobile App Icon in Photoshop | Psdtuts+</a></p>
<p>&nbsp;</p>
<p><a href="http://abduzeedo.com/radar-icon-photoshop" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-1899" alt="app3" src="/uploads-archive/2013/04/app3.jpg" width="600" height="604" srcset="/uploads-archive/2013/04/app3.jpg 680w, /uploads-archive/2013/04/app3-298x300.jpg 298w, /uploads-archive/2013/04/app3-228x230.jpg 228w, /uploads-archive/2013/04/app3-150x150.jpg 150w, /uploads-archive/2013/04/app3-120x120.jpg 120w" sizes="(max-width: 600px) 100vw, 600px" /></a><br />
<a href="http://abduzeedo.com/radar-icon-photoshop" target="_blank">Radar Icon in Photoshop | Abduzeedo Design Inspiration &amp; Tutorials</a></p>
<p>&nbsp;<br />
&nbsp;</p>
<p>最後のはアプリとはちょっと違いますが、応用できるんじゃないかなと思います。</p>
<p>それにしてもこれだけの記事を作るのに、どのぐらいの時間がかかっているのかが気になります。</p>


丁寧に説明してくれてるアプリのデザインチュートリアル(PSD)がすごい！！

<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>お客様へどんなサイトがいいのか伝える時に言葉だけじゃちょっと・・・</p>
<p>といった時に参考にさせていただいているサイトのご紹介です。</p>
<h2>WEBデザインの見本帳</h3>
<p><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></p>
<p>http://www.web-mihon.com/</p>
<ul>
<li>サイトのカテゴリ分けが明確</li>
<li>種類が豊富</li>
<li>サムネイルが直接表示</li>
</ul>
<p>色や印象、業種からも探すことが可能なのでかなりおすすめです。</p>
<p>掲載基準もデザインにこだわわっていて、見ているだけでもかなり楽しいです。</p>
<p>疲れた時に優しいデザインのサイトでいやされるのもありかも。</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>


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

<p>3Dプリンタの実用化が本格化しているとの情報が多く入るようになったので<br />
現時点での市場の動向についてまとめてみた。</p>
<p>■市場規模<br />
2013年は23億ドル、2019年には65億ドルと予想されている。</p>
<p>■ツール<br />
様々なモデリングソフトが存在するが、<br />
現在は3D CADが一般化している模様。<br />
世界での利用者は500万人程度。<br />
2D CAD利用者約1400万人のうち年間約100万人が3D CADに移行している。</p>
<p>■メーカー<br />
本場アメリカでは<br />
3D Systems Corporation<br />
Stratasys<br />
の2社が大手。</p>
<p>日本でも<br />
ホットプロシード<br />
キーエンス<br />
ローランド ディー. ジー.<br />
などの企業が有名。</p>
<p>■使用出来る素材<br />
・樹脂<br />
・セラミック<br />
・金属<br />
印刷用素材としては、家庭用ではフィラメントが一般的で<br />
カラーも多く出回っている。</p>
<p>■まとめ<br />
直近では医療や工業製品で使われ始めており、<br />
例えば医療では自分の骨格にぴったりのインプラントを作ったり<br />
最近ではES細胞をプリントして臓器を作る研究も進んでいる。<br />
<a href="http://wired.jp/2013/02/17/bodies-will-print-in-the-laboratory/" target="_blank">http://wired.jp/2013/02/17/bodies-will-print-in-the-laboratory/</a></p>
<p>また、GE社は3Dプリンタによってジェットエンジンの部品を生産しており、<br />
ボーイング社の小型機への供給が決まっている。</p>
<p>プロトタイプの印刷という利用方法としては既に浸透しつつあり、<br />
MS社のsurfaceは開発に300個以上の試作を用意しており<br />
その多くは3Dプリンタによって作られたという。</p>
<p>今後は上記のような利用方法から発展していく傍ら<br />
中小規模での利用も増え、そうなるとモデリングを得意とする会社や<br />
デザイナーを抱える会社がモデリング技術を備えることにより<br />
メーカーとの連携が増え、結果として3D制作関連の企業も増加すると思う。</p>
<p>また、個人レベルでの製造業が可能となり、<br />
例えばiPhoneケースやメガネなどの個人メーカーが増えるかもしれない。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2013/08/21

2013/08/21

2013/07/24

2013/07/17

2013/07/03

2013/06/25

2013/06/13

2013/06/06

2013/05/15

2013/05/09

2013/05/02

2013/04/24

2013/04/17

2013/04/10

2013/03/14

2013/03/07

2013/03/07

2013/02/21