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


WebGLの動作環境まとめ

<p>webデザインをしている中で、僕の場合はほとんど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>この業界は、日々新しいことが生まれたり、技術に上限がなかったりと、</p>
<p>日々学んでいくことが必要とされていますが、</p>
<p>そのために必要な勉強会やサイトの情報を紹介します。</p>
<p>現段階で僕が知っている情報ですので、もっと他にもあればぜひぜひ教えて頂きたいです！！</p>
<p>紹介するのは、webサービスや勉強会、イベントサイトになります。</p>
<p>&nbsp;</p>
<h2>3分動画でマスターする初心者向けプログラミング学習サイト &#8211; ドットインストール</h3>
<p><a href="http://dotinstall.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2452" alt="3分動画でマスターする初心者向けプログラミング学習サイト - ドットインストール" src="/uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563.jpg 1228w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-300x164.jpg 300w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-768x419.jpg 768w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-1024x559.jpg 1024w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>このサイトは素晴らしく、web系をまんべんなく網羅しています。<br />
全部やりきれば一人でほとんどのことはできるんじゃないでしょうか？<br />
無料という所も素晴らしいです！有料にすると、添削機能もつきます！</p>
<p>&nbsp;</p>
<p><a href="http://dotinstall.com/" target="_blank">3分動画でマスターする初心者向けプログラミング学習サイト &#8211; ドットインストール</a></p>
<p>&nbsp;</p>
<h2>schoo（スクー） WEB-campus</h3>
<p><a href="http://schoo.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2453" alt="schoo（スクー） WEB-campus" src="/uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b.jpg 1228w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-300x164.jpg 300w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-768x419.jpg 768w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-1024x559.jpg 1024w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>このサイトはIT専門ってわけではなく、<br />
ビジネスマンのための学校をweb上で体現しています。<br />
その道のプロが毎週変わる変わるweb上で授業をしてくれます。<br />
動画配信なので、一回だけでなく、好きなときに見ることも出来ます。</p>
<p>無料で利用できますが、有料でも月500円なのでお得だと思います。</p>
<p>&nbsp;</p>
<p><a href="http://schoo.jp/" target="_blank">schoo（スクー） WEB-campus</a></p>
<p>&nbsp;</p>
<h2>TechAcademy [テックアカデミー] | ITに特化したスクール</h3>
<p><a href="http://techacademy.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2454" alt="TechAcademy [テックアカデミー]  ITに特化したスクール" src="/uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b.jpg" width="598" height="326" srcset="/uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b.jpg 1228w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-300x164.jpg 300w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-768x419.jpg 768w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-1024x559.jpg 1024w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-228x124.jpg 228w" sizes="(max-width: 598px) 100vw, 598px" /></a></p>
<p>こちらはweb系よりの学校で、お金はかかりますが、時間単位で換算すると、<br />
そこまで高くないかと思います。<br />
まだ一度も行ったことはないので、なにか参加してみたいなぁと思っております。</p>
<p>&nbsp;</p>
<p><a href="http://techacademy.jp/" target="_blank">TechAcademy [テックアカデミー] | ITに特化したスクール</a></p>
<p>&nbsp;</p>
<h2>ストリートアカデミー</h3>
<p><a href="http://www.street-academy.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2455" alt="ストリートアカデミー" src="/uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9.jpg" width="601" height="327" srcset="/uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9.jpg 1228w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-300x164.jpg 300w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-768x419.jpg 768w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-1024x559.jpg 1024w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-228x124.jpg 228w" sizes="(max-width: 601px) 100vw, 601px" /></a></p>
<p>こちらは、勉強会サイトで、IT/web専門というわけではないですが、比較的多く行われているようです。</p>
<p>&nbsp;</p>
<p><a href="http://www.street-academy.com/" target="_blank">ストリートアカデミー</a></p>
<p>&nbsp;</p>
<h2>イベントの決済ができるコミュニティ運営システム | Doorkeeper</h3>
<p><a href="http://www.doorkeeper.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2456" alt="イベントの決済ができるコミュニティ運営システム  Doorkeeper" src="/uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44.jpg 1228w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-300x164.jpg 300w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-768x419.jpg 768w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-1024x559.jpg 1024w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a><br />
<a href="http://www.doorkeeper.jp/" target="_blank">イベントの決済ができるコミュニティ運営システム | Doorkeeper</a></p>
<p>こちらは、勉強会告知のコミュニティサイトで、けっこうプログラムの要素が濃く、<br />
すでにコミュニティがいろいろと存在しているので、近くにあるならば参加してみたいですね</p>
<p>&nbsp;</p>
<h2>ライブ・クラブ・セミナー・イベントの集客管理ツール : everevo</h3>
<p><a href="http://everevo.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2457" alt="ライブ・クラブ・セミナー・イベントの集客管理ツール - everevo" src="/uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42.jpg" width="599" height="319" srcset="/uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42.jpg 1228w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-768x410.jpg 768w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-228x122.jpg 228w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-300x160.jpg 300w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-1024x546.jpg 1024w" sizes="(max-width: 599px) 100vw, 599px" /></a></p>
<p>イベントツールのサイトですが、<br />
どちらかというと交流会要素が強いものが開催されているかなと思います。</p>
<p>&nbsp;</p>
<p><a href="http://everevo.com/" target="_blank">ライブ・クラブ・セミナー・イベントの集客管理ツール : everevo</a></p>
<p>&nbsp;</p>
<h2>イベント集客 告知 | 集客ならイベントアテンド</h3>
<p><a href="http://atnd.org/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2458" alt="イベント集客 告知  集客ならイベントアテンド" src="/uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881.jpg 1228w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-300x164.jpg 300w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-768x419.jpg 768w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-1024x559.jpg 1024w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>あらゆるタイプのイベントを集客するサイトなので、IT系はそこまで多くありません。</p>
<p>&nbsp;</p>
<p><a href="http://atnd.org/" target="_blank">イベント集客 告知 | 集客ならイベントアテンド</a></p>
<p>&nbsp;</p>
<h2>CSS Nite公式サイト</h3>
<p><a href="http://cssnite.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2459" alt="CSS Nite公式サイト - 「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント" src="/uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b.jpg" width="598" height="326" srcset="/uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b.jpg 1228w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-300x164.jpg 300w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-768x419.jpg 768w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-1024x559.jpg 1024w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-228x124.jpg 228w" sizes="(max-width: 598px) 100vw, 598px" /></a></p>
<p>&nbsp;</p>
<p>言わずと知れたcss nite で説明するまでもないと思いますが、<br />
web系を学ぶための集まりとしてはうってつけで暇があればぜひ参加したいものばかり開催されています。</p>
<p>&nbsp;</p>
<p><a href="http://cssnite.jp/" target="_blank">CSS Nite公式サイト &#8211; 「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント</a></p>
<p>&nbsp;</p>
<p>僕的には、もっとデザインよりのイベント・勉強会があればいいな〜と思っています。</p>
<p>参加できるときは参加して、もっと成長したいと思います！</p>


IT・web系の勉強をするためのwebサービス

<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>最近、コーディング案件が多く、<br />
せっせとやらせてもらっているのですが、<br />
コーディングの際、意外と手間取るのが、<br />
<strong>画像のスライス</strong>、かつ<strong>画像の命名</strong>です。</p>
<p>画像の命名については<br />
どういう名前にしようか、<br />
少し手が止まったりしちゃう時もあります。</p>
<p>一応自分の中でルールを決めつつやるのですが、<br />
なんだかんだで曖昧になって統一されてないものになっちゃいます。</p>
<p>ですので、今後画像命名をスムーズにするため、<br />
命名ルールを決めたいと思います。</p>
<h2>命名ルールを決めるメリット</h3>
<p>メリットとしては、<br />
<span style="font-size: medium;"><strong>１．画像切り出しがちょっと早くなるかも</strong></span><br />
<span style="font-size: medium;"><strong> ２．後々画像が増えた場合も悩まなくて済む</strong></span><br />
<span style="font-size: medium;"><strong> ３．画像ファイルを探しやすくなる</strong></span><br />
<span style="font-size: medium;"><strong> ４．動的に出力する際に便利かも</strong></span></p>
<p>と言った感じでしょうか。</p>
<p>画像の命名ルールに関しては、<br />
<strong>WebDesigning2013/4号</strong><br />
にコーディングガイドラインについての記事がありましたので、<br />
それを思いっきり参考にさせてもらいます。</p>
<p>まずは、下のイメージが、基本的なルールです。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2254" alt="file_rule" src="/uploads-archive/2013/05/file_rule.png" width="656" height="300" srcset="/uploads-archive/2013/05/file_rule.png 656w, /uploads-archive/2013/05/file_rule-300x137.png 300w, /uploads-archive/2013/05/file_rule-228x104.png 228w" sizes="(max-width: 656px) 100vw, 656px" /><br />
例：btn_top01.jpg</p>
<p>識別名の一覧は以下になります。</p>
<table>
<tbody>
<tr>
<th>識別名</th>
<th>用途</th>
<th>命名サンプル</th>
</tr>
<tr>
<td>bg</td>
<td>背景や、ボーダ用にリピートされて使われる画像</td>
<td>bg_top01.jpg<br />
bg_dotx01.jpg<br />
bg_dotx_3x1.jpg</td>
</tr>
<tr>
<td>btn</td>
<td>ボタンとして使われる画像</td>
<td>btn_contact01.jpg<br />
btn_contact01_on.jpg</td>
</tr>
<tr>
<td>ico</td>
<td>アイコンとして使われる画像</td>
<td>ico_arrow01.jpg<br />
ico_square01.jpg</td>
</tr>
<tr>
<td>bnr</td>
<td>バナーとして使われる画像</td>
<td>bdr_top01.jpg<br />
bnr_side01.jpg</td>
</tr>
<tr>
<td>h1-h6</td>
<td>h1タグなどの論理タグで囲まれる見出し画像</td>
<td>h2_business01.jpg<br />
h3_service01.jpg</td>
</tr>
<tr>
<td>tit</td>
<td>h1-h6等に用途が限られない見出し画像</td>
<td>tit_blog01.jpg<br />
tit_news01.jpg</td>
</tr>
<tr>
<td>txt</td>
<td>デザイン上、画像化するテキストの画像</td>
<td>txt_blog01.jpg<br />
txt_news01.jpg</td>
</tr>
<tr>
<td>pic</td>
<td>商品や人物、風景などの写真画像</td>
<td>pic_blog01.jpg<br />
pic_news01.jpg</td>
</tr>
<tr>
<td>thumb</td>
<td>写真と連動するサムネイル(小さい)画像</td>
<td>thumb_blog01.jpg<br />
thumb_news01.jpg</td>
</tr>
<tr>
<td>img</td>
<td>写真以外のイラストや図表などの画像</td>
<td>img_blog01.jpg<br />
img_news01.jpg</td>
</tr>
<tr>
<td>mainimg</td>
<td>ページのメイン画像</td>
<td>mainimg_top.jpg<br />
mainimg_news.jpg</td>
</tr>
</tbody>
</table>
<p>識別名はこれだけではなく、いろいろまた追加もあると思います。</p>
<p>とりあえず、このルール上で今後、<br />
やって行きたいと思います。</p>
<p>これが載っている雑誌はこちらです。</p>
<p><iframe loading="lazy" width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&amp;bc1=FFFFFF&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=alantrigger-22&amp;o=9&amp;p=8&amp;l=as1&amp;m=amazon&amp;f=ifr&amp;ref=qf_sp_asin_til&amp;asins=B00BPBUZU8" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe></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>4月22日に<a title="アマゾン データ サービス ジャパン株式会社" href="http://kokucheese.com/main/host/%E3%82%A2%E3%83%9E%E3%82%BE%E3%83%B3+%E3%83%87%E3%83%BC%E3%82%BF+%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9+%E3%82%B8%E3%83%A3%E3%83%91%E3%83%B3%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE/">アマゾン データ サービス ジャパン株式会社</a>主催のセミナーに参加してきました。</p>
<p>どのような内容かというと、</p>
<blockquote><p><strong>[クリエイティブ×クラウドについて]</strong><br />
キャンペーンサイト・スマホ&amp;TV連動・ソーシャル活用・O2O、、、 デジタルマーケティングにおいてクラウドは欠かせない技術となってきました。本セミナーでは、実際にクラウドを企業マーケティングに活用されているWeb制作・クリエイティブの皆様に最新の活用事例をご紹介いただきながら、新たなクラウド活用の可能性を探っていきます。</p></blockquote>
<p>というものです。アマゾンさんが主催ということで、基本的にはアマゾンウェブサービス（以下、AWS）の活用事例を複数社がプレゼンをするという内容でした。</p>
<p>対象ターゲットとしては、AWSの理解を深めたい、AWSを使用したことがないので検討したい、そもそもAWSってどうなのよ？といった方たち向けで、私の会社も普段は、さくらインターネットさんにお世話になることが多いので、大変参考になる話を聞くことが出来ました。</p>
<p>以下、抜粋でご紹介します。</p>
<h2> アマゾンウェブサービスの強み</h3>
<p>custer experienceを高めていく、小売のamazonのDNAが注ぎ込まれたサービスを提供している。</p>
<p>具体的には、AWS商品ラインナップを拡充して利用者を拡大→規模の経済を働かせ、徹底的に効率を追求→コストを下がったところで、サービスの値下げと商品ラインナップの拡充→さらに利用者を拡大というサイクルを常に回している。</p>
<p>また、お客様のフィードバックに基づく迅速なイノベーションを行い、機能改善を続けている。</p>
<p>実際に、AWSは数十回の値下げと数百回のバージョンアップを繰り返している。</p>
<p>&nbsp;</p>
<h2>未来の予測が立てにくい新規サービスに最適</h3>
<p>チームラボさんは</p>
<ul>
<li>AWS使用歴は2年</li>
<li>300名 70%がエンジニア</li>
<li>100人月超規模の大規模SI</li>
</ul>
<p>というような会社さんで、業界では超有名な企業ですが、</p>
<ul>
<li>新規サービス、新規事業の立ち上げが多い</li>
<li>ゼロスタートで試行錯誤</li>
<li>未来の予測がたてにくい</li>
</ul>
<p>お仕事が多いため、AWSとの相性がすごくいいとのことです。</p>
<p>&nbsp;</p>
<p>そして、こんな話がありました。</p>
<p><a href="http://www.teamlabbody.com/3dnote-jp/" target="_blank"> チームラボボディ</a>というサービスを立ち上げることが決まった時点で、全くの新しいため、インフラのランニングコストが読めない。</p>
<p>とりあえず、スモールスタートでVPSにて構築。</p>
<p>医療機関の方々が見る想定でサービスインをしたところ</p>
<p><strong>yahoo砲発動！！！</strong></p>
<p>一気にサーバ落ちる。</p>
<p>すぐに、AWSに移行し、サーバ復旧させたとのこと。</p>
<p>また、unityという3Dエンジンを利用していたため、初期で数十MBをロードしていることが判明。</p>
<p>これも、AWS内のcloudfrontというサービスに移管し、負荷を最適化させることが出来た。</p>
<p>さらに、AWS移行後も継続的にアクセスが集中。</p>
<p>トラフィックを調べていくと、デザイナーや美術の方がデッサンにちょうどいいという内容がTwitterに拡散されていて、当初想定していたターゲットと異なる層から大量のアクセスがあることが分かり、AWSでなければこれも危なかったとのこと。</p>
<p>以上のような様々なことがあったにも関わらず月額$82で済みました。</p>
<h2>トラフィックが一時的に集中するキャンペーンサイトに最適</h3>
<p>CMなど広告向けの制作会社大手のTYOさんもキャンペーンサイトとのAWSの相性はよいと仰っていました。</p>
<ul>
<li>どのインスタンスを使えばよいのか？</li>
<li>どういう組合わせがいいのか？</li>
<li>アクセス数は？</li>
</ul>
<p>→結局いくらかかるの？</p>
<p>というところを具体的に紹介してくれました。</p>
<p>AWSがpay as you goで使った分だけ支払うというものであり、ストレージ容量、転送量、CPU、メモリのスペックなど細かく課金されるため、参考値ということです。</p>
<ul>
<li>ピーク時30万PV/日で月額$300〜$400</li>
<li>ピーク時600万PV/日で月額$2000</li>
</ul>
<p>いずれもピーク時の値で、グラフを見せて頂いた限りでは、開始当初にピークが立ちその後は緩やかにトラフィックが下がっていく典型的なものでした。それにしても、ピーク時600万PVというのは感覚的ですが、非常に大型のキャンペーンサイトですね。CMやyahoo!のトップバナーでも展開しない限り行かない数値かと思います。もしこれを予測し、ピークに合わせて専用サーバを構築していればとても、$2000では済まないことでしょう。</p>
<h2>まとめ</h3>
<p>セミナーを聞いていくと、弊社のビジネス活動においてAWSを選ばない理由が少ないと感じました。</p>
<p>また、AWSを使いこなしている友人エンジニアに聞くと、日本で展開されているクラウドは「値段」「サポート」においてはAWSに勝っているが、機能面や速度はAWSに軍配が上がるとのこと。英語が理解出来てやサポートがなくてもゴリゴリと進められるエンジニアであれば、AWS以外に選択肢はないと言い切っていました。</p>


クリエイティブＸクラウド　最新テクノロジーが生み出すWEBコンテンツ事例セミナー

<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><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>web制作において、ワイヤーフレームを書くことはほぼ必須になってはいますが、<br />
みなさん何を使って制作しているのでしょうか？？</p>
<p>僕はなぜかその時々によって違いますが、手書きやPSDでやります。<br />
ツールはいまいちな感じだったんですが、最近のはよくできているのが多いので、<br />
その中でも無料で使用できるものをご紹介します。</p>
<p>&nbsp;</p>
<h2>ワイヤーフレーム作成の無料ツール</h3>
<p>&nbsp;</p>
<h3>moqups</h4>
<p class="center"><a href="https://moqups.com/#!/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire01.jpg" width="500" /></a></p>
<p>・アカウント登録なしで使用できる（画像UPするのにアカウントが必要）<br />
・制限も特になし<br />
・ページ遷移の設定ができる</p>
<p>&nbsp;</p>
<h3>cacoo</h4>
<p class="center"><a href="https://cacoo.com/lang/ja/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire02.jpg" width="500" /></a></p>
<p>・オンラインで作成<br />
・アカウント作成の必要あり<br />
・フリー(機能限定)25枚、エクスポート機能３回まで<br />
・chromeの拡張機能でも使える<br />
・日本製</p>
<p>&nbsp;</p>
<h3>wireframe.cc</h4>
<p class="center"><a href="http://wireframe.cc/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire03.jpg" width="500" /></a></p>
<p>・アカウント登録なしで使用できる<br />
・URLを共有できる<br />
・スマホバージョンにもできる</p>
<p>&nbsp;</p>
<h3>Justinmind</h4>
<p class="center"><a href="http://www.justinmind.com/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire04.jpg" width="500" /></a></p>
<p>・ダウンロードしてローカルで使用(windows,mac)<br />
・スマホバージョンにもできる<br />
・PDF、画像書き出し<br />
・枚数制限なし</p>
<p>&nbsp;</p>
<h3>google drive図形描画</h4>
<p>・アカウント必要あり<br />
・日本語対応<br />
・wireframe専用ではない</p>
<p>&nbsp;</p>
<p>といった５つになります。<br />
僕的には、moqups、Justinmindがいいのではないかと思っています。<br />
moqupsのページの遷移ができるってのはかなり良いポイントですね！</p>
<p>&nbsp;</p>
<p>そして、<br />
こういうツールを使うのではなく、<br />
手書きの方がいい！っていう方のために、<br />
手書き用のテンプレートもご紹介します。<br />
もちろん、すべてフリーです。</p>
<p>&nbsp;</p>
<h2>手書き用テンプレートPDF</h3>
<p>&nbsp;</p>
<h3>paper browser</h4>
<p class="center"><a href="http://www.raincreativelab.com/paperbrowser/#download-templates" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire05.jpg" width="500" /></a></p>
<p>いくつか種類があるので、お好みのをダウンロードできます。</p>
<p><a href="http://www.raincreativelab.com/paperbrowser/#download-templates" target="_blank">ダウンロードページ</a></p>
<p>&nbsp;</p>
<h3>ZURB Grid Paper</h4>
<p class="center"><a href="http://www.zurb.com/playground/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire06.jpg" width="500" /></a></p>
<p>他にも様々なテンプレートがあります。</p>
<p><a href="http://www.zurb.com/playground/playground/tools/ZURB-Grid-Paper.zip" target="_blank">ダウンロード</a></p>
<p>&nbsp;</p>
<h3>Web Sketching Template</h4>
<p class="center"><a href="http://www.flickr.com/photos/88005207@N00/3884016462/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire07.jpg" width="500" /></a></p>
<p><a href="http://www.flickr.com/photos/88005207@N00/3884016462/" target="_blank">ダウンロードページ</a></p>
<p>&nbsp;</p>
<h3>sneakpeekit</h4>
<p class="center"><a href="http://sneakpeekit.com/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire08.jpg" width="500" /></a></p>
<p>ここは、webサイトだけでなく、ipadやiphone用等もあります。</p>
<p><a href="http://sneakpeekit.com/wireframe-sketchsheets/" target="_blank">ダウンロードページ</a></p>
<p>&nbsp;</p>
<h3>paperkit</h4>
<p class="center"><a href="http://paperkit.net/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire09.jpg" width="500" /></a></p>
<p>こちらはワイヤーフレームというわけではなく、<br />
方眼紙を自由なサイズにして、ダウンロードできるものです。</p>
<p><a href="http://paperkit.net/" target="_blank">paperkit</a></p>
<p>&nbsp;</p>
<p>以上となります。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>大変便利ですね〜、こういうツールは本当にありがたい。</p>


ワイヤーフレーム作成に無料で使えるツール5選、手書き用テンプレートPDFも紹介

<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>世の中便利になったもので、<br />
非常にありがたいものが無料で見ることができます。</p>
<p>日々いろんな情報を取得していく中で、<br />
最近(けっこう前でもある)タメになったものをご紹介します！</p>
<h2>デザイン</h3>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/11608357" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/shirokuro331/web-11608357" title="Webデザインのセオリーを学ぼう" target="_blank">Webデザインのセオリーを学ぼう</a> </strong> from <strong><a href="http://www.slideshare.net/shirokuro331" target="_blank">Toshiaki Sasaki</a></strong> </div>
<p>非常に丁寧でわかりやすく書かれています。<br />
デザインは論理的ですね！</p>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/14902681" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/saucerjp/ss-14902681" title="ノンデザイナーのための配色理論" target="_blank">ノンデザイナーのための配色理論</a> </strong> from <strong><a href="http://www.slideshare.net/saucerjp" target="_blank">tsukasa obara</a></strong> </div>
<p>なるほどなるほど・・・それでも配色は難しい・・・</p>
<h2>ディレクション</h3>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15442293" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/cafekenta/20121117-01-dirmtg01" title="20121117 01 dir-mtgスライド01" target="_blank">20121117 01 dir-mtgスライド01</a> </strong> from <strong><a href="http://www.slideshare.net/cafekenta" target="_blank">Kenta Nakamura</a></strong> </div>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15442318" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/cafekenta/20121125-02-dirmtg02" title="20121125 02 dir-mtgスライド02" target="_blank">20121125 02 dir-mtgスライド02</a> </strong> from <strong><a href="http://www.slideshare.net/cafekenta" target="_blank">Kenta Nakamura</a></strong> </div>
<p>まさしくディレクションとはこのことだと思います。<br />
もっとこれを多く実践してくれる人が増えたらいいのにと思います。</p>
<h2>その他</h3>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/7665168" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/hayatomizuno/jquery-7665168" title="ノンプログラマーのためのjQuery入門" target="_blank">ノンプログラマーのためのjQuery入門</a> </strong> from <strong><a href="http://www.slideshare.net/hayatomizuno" target="_blank">Hayato Mizuno</a></strong> </div>
<p>初心者向けですね。枚数は多いですが、サクサク読み進められるので、時間はあまりかからないと思います。</p>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15002576" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/nukaga/webwordpress-15002576" title="文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう" target="_blank">文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう</a> </strong> from <strong><a href="http://www.slideshare.net/nukaga" target="_blank">Junko Nukaga</a></strong> </div>
<p>これも初心者向けですね。概念から方法までわかりやすく見やすいものになってます。</p>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/16459192" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/copywritter/ss-16459192" title="カヤックコピー部のコピー講座" target="_blank">カヤックコピー部のコピー講座</a> </strong> from <strong><a href="http://www.slideshare.net/copywritter" target="_blank">長谷川 哲士</a></strong> </div>
<p>これは、もうなるほどと思ってしまう内容で、とても参考になります。</p>
<p>こういうスライドは本当にありがたく勉強になります。<br />
僕も何か書いてみようかな。。。</p>


web制作においてタメになる(なった)スライドのご紹介

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


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Web

2013/06/26

2013/06/25

2013/06/19

2013/06/13

2013/06/06

2013/05/22

2013/05/15

2013/05/09

2013/05/02

2013/04/24

2013/04/24

2013/04/17

2013/03/14

2013/03/13

2013/03/07

2013/03/07

2013/02/28

2013/02/07