金融系などの固めのデザインを必要とするサイトでは、 
今流行っているデザインを使いづらく、 
どうしても２〜３年前に流行ったデザインなど、時代遅れなデザインになりがちです。
この１〜２年でのフラットデザインの流行により 
PCメインだった２〜３年前のデザインと、タブレットPCやスマホを重要視した最近のデザインでは使い勝手も変わってくるため、 
できれば今の時代にあったデザインにすることが理想的です。
今回は固めの印象を残しつつも、今の時代に合わせたデザインのサイトを探してみましたので、ご紹介いたします。
&nbsp;
<a class="link" href="http://www.nakazawa-kenpan.co.jp/" target="_blank">ナカザワ建販株式会社</a>
<a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://www.nakazawa-kenpan.co.jp/" target="_blank"><img decoding="async" loading="lazy" alt="" src="/uploads-archive/2014/01/80c6415fdff63a9c46f01b2e6aec3138.png" width="328" height="428" /></a>
フラット系。
スライドアニメーショが凝っていて、横画面いっぱいに広がるメインビジュアルが今っぽいです。
<a class="link" href="http://id-credit.com/index_pc.html" target="_blank">ドコモの「iD」</a>
<a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://id-credit.com/index_pc.html" target="_blank"><img decoding="async" loading="lazy" alt="ドコモの「iD」" src="/uploads-archive/2014/01/f560c3cb99651db3bb705064d4939b07.png" width="328" height="663" /></a>
グリッド系。
こちらはにぎやかで、固めのサイトから少し外れる気もしましたが、ヒントになりそうでしたので載せました。
グリッド系をイメージしたデザインですが、基本２カラムで構成されていて、安定感があります。各ボックスに小さめのドロップシャドウと小さめの角丸をつけ、落ち着いた印象を与えています。リンクを示す矢印のアイコンや、一番下のよくある質問のQのアイコンは、真円の小さなアイコンで統一されています。
&nbsp;
<a class="link" href="http://www.brotherearth.com/ja/" target="_blank">Brother Earth</a>
<a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://www.brotherearth.com/ja/" target="_blank"><img decoding="async" loading="lazy" alt="Brother Earth" src="/uploads-archive/2014/01/Brother-Earth.jpg" width="328" height="226" /></a>
フラット系＋グリッド系。
今風のデザインですが、堅実な印象も感じさせてくれます。レスポンシブデザインになっていて、各要素が無駄なく、見やすく配置されています。
&nbsp;
<a class="link" href="http://www.rohto.jp/" target="_blank">ROHTO</a>
<a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://www.rohto.jp/" target="_blank"><img decoding="async" loading="lazy" alt="ROHTO" src="/uploads-archive/2014/01/c3b73f751bf87b8c72a4bd25d9f15ab1.png" width="328" height="531" /></a>
フラット系。
青色のラインや小さなアイコン、テキストなどで堅実な印象を感じさせて筒も、画面横いっぱいに広がるニュース表示や縦スクロールのスライダーを２つ並べるなど今風の大胆な印象も感じます。商品などが数多く並べられていますが、全体が青と小さめの赤で統一されているので、うるさく感じません。
&nbsp;
<h2>ポイント</h3>
固めのサイトの印象を与えるものとしては、
<ul>
<li>ヘッダートップの横方向のライン</li>
<li>文字とラインのみで構成されたシンプルなメインビジュアル</li>
<li>小さめのフォント・アイコン</li>
</ul>
といったものがあるように思います。
また、グリッド系のデザインにする場合も、全体にグリッド要素を使わずに、
メインコンテンツに添える形で使うと、イメージを崩さないようです。
&nbsp;
固めの印象を与える要素を全体に散りばめつつ、基本的にはフラット系やグリッド系、レスポンシブといった今の時代に合わせた構成のデザインにすることで、
固めでも今風のデザインのサイトにすることができるのではないかと思います。
&nbsp;

今風(2014年はじめ)の少し固めのデザイン

といいましても、 
僕の予想ではなく、海外の記事を紹介し、 
その中で僕が思ったことを少し述べたいと思います。
<h2>2013年のデザイントレンド</h3>
まずは、2013年のデザイントレンドですが、 
以下のサイトになります。
<a href="http://www.creativebloq.com/web-design/2013-trends-121310199" target="_blank">The 10 hottest web design trends of 2013 | Web design | Creative Bloq</a>
簡単に羅列すると、 
以下のようになります。
1.レスポンシブデザイン 
2.フラットデザイン 
3.固定ヘッダー 
4.パララックス 
5.無限スクロール 
6.Retina対応 
7.タイポグラフィーデザイン 
8.丸いデザイン要素 
9.css3アニメーション 
10.大きなボタン
<h2>2014年のデザイントレンド予想</h3>
次は2014年のデザイントレンド予想は以下になります。
<a href="http://www.hongkiat.com/blog/web-design-trends-2014/" target="_blank">Web Design: 20 Hottest Trends To Watch Out For In 2014</a>
簡単に羅列すると、 
以下のようになります。
1.グリッドスタイルレイアウト 
2.狡猾な画像ホバーキャプション機能 
3.フォームの拡張機能 
4.深く考えられたランディングページ 
5.HTML5ビデオプレーヤー 
6.3Dエフェクト 
7.フラットデザインのパーツ・素材 
8.個人のポートレート 
9.SVG画像・アイコン 
10.特異なwebフォント 
11.Lazy-Loadingアニメーション 
12.カズタマイズされたイメージギャラリー 
13.メガナビゲーションメニュー 
14.伸びる検索バー 
15.特長をアイコン付きで紹介 
16.モバイルファースト 
17.html5キャンバス 
18.webブラウザゲーム 
19.素早い会員登録 
20.css3アニメーションキーフレーム
以上のような感じですが、
2013年,2014年のトレンドをみて、 
僕的には、 
フラットデザイン、 
レスポンシブデザイン、 
css3のアニメーション(ホバー等) 
ランディングページ(パララックス,フラット,アニメーション)
といったものを注目しています。
フラットデザインはいうまでもなく、2013年流行ったデザインであり、 
段々と日本語サイトでもフラットデザインを取り入れたサイトも見かけるようになりました。 
また、フラットデザインはレスポンシブデザインやランディングページは相性がいいと思うので、 
今後しばらくこの流れは継続されていくのではないかと思います。
css3については、段々と利用できるブラウザがメインになりつつある中で、 
制作者側からすると、やっといろいろできるなといった感じかと思います。 
特にホバーでは、本当に様々なことができるので、 
どんなものが出来るかこれから楽しみですね！
個人的には、「錯視」に興味があるのですが、 
それがwebサイトで使われるのはまだまだなのかなという気がします。 
使い方も限定されちゃうような気もします。。。
おまけに、 
上記で注目されいるような素材を提供してくれるサイトを紹介します。
15個のフラットUIの素材キット 
<a href="http://graphicdesignjunction.com/2014/01/creative-flat-ui-kits/" target="_blank">Flat UI Kits for Designers | Design | Graphic Design Junction</a>
30個のフリーのwebサイトテンプレートPSD素材 
<a href="http://www.splashnology.com/article/free-psd-website-templates/11229/" target="_blank">30 Fresh and Free PSD Website Templates | Splashnology.com</a>
40個の美しいランディングページ 
<a href="http://www.designzzz.com/landing-page-templates/" target="_blank">40 Beautiful Landing Page Templates</a>
150以上のフリーのアニメーションもあるSVGアイコン(フラットデザイン) 
<a href="http://www.pencilscoop.com/2013/12/150-free-animated-svg-icons/">150+ Free Animated SVG Icons | Pencil Scoop | Design &amp; Creative Blog</a>

2013年のデザイントレンドを振り返り、2014年を予想する

パララックスのサイトが少し前に流行り、今ではいろんなサイトで見られるようになり一般的になってきたような感じがする昨今ですが、簡単にパララックスっぽい動きをつけられることを今更ながら発見しましたので、試してみました。 
&nbsp; 
早速ですが、デモをご覧下さい。
&nbsp;
<a href="/demo/abe/37/" target="_blank" class="demo">DEMO</a>
どうでしょうか？ 
パララックスっぽい感じがでてますでしょうか？？
<h2>background-attachmentの実装</h3>
設定自体はとても簡単で、 
背景画像を設定した箇所に、


		<div id="crayon-64953fd595eb1667674691" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;">
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div>CSS</div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
background-attachment: fixed;</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-64953fd595eb1667674691-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-64953fd595eb1667674691-1">background-attachment: fixed;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

 
と追加しているだけです。
要は、背景画像の位置を固定にしているため、 
背景画像を設定した要素がスクロールで動いても、 
背景画像は動かないため、このような見え方になっています。
ちなみに背景画像の位置は、ブラウザを起点に位置されます。
対応ブラウザはIE8からですので、 
クライアント案件でも結構使えると思います。
なにより簡単にできるのでいいですね！写真とコンテンツの組み合わせ次第でいいサイトが出来上がるんではないでしょうか？
今度はもっと上級なパララックスも試してみたいと思います！

background-attachmentでパララックスもどきの動きをつけてみる

Webフォント×CSS3でロングシャドウアイコンを作ってみよう

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

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

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

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

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

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

Shopifyという無料でECサイトを作成できるサービスが8月に 
Shopify Ecommerce Design Awards 
と題してECサイトのデザインアワードが開催された。 
Shopifyはアメリカのサービスで2004からやっている、Store.jpやBaseの先駆け的な存在だ。 
Ruby on railsで開発されており、当時はそっちでのみ話題になっていた。
こちらがデザインアワードの結果ページ。 
<a href="http://www.shopify.com/design-awards" target="_blank">http://www.shopify.com/design-awards</a>
こちらが受賞サイト
<h2>1位 Whipping + Post</h3>
<a href="/uploads-archive/2013/10/1.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3201" alt="1" src="/uploads-archive/2013/10/1.png" width="656" height="340" srcset="/uploads-archive/2013/10/1.png 656w, /uploads-archive/2013/10/1-300x155.png 300w, /uploads-archive/2013/10/1-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="http://www.whippingpost.com/" target="_blank">http://www.whippingpost.com/</a>
&nbsp;
<h2>2位 GREATS</h3>
<a href="/uploads-archive/2013/10/2.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3202" alt="2" src="/uploads-archive/2013/10/2.png" width="656" height="340" srcset="/uploads-archive/2013/10/2.png 656w, /uploads-archive/2013/10/2-300x155.png 300w, /uploads-archive/2013/10/2-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="http://greatsbrand.com/" target="_blank">http://greatsbrand.com/</a>
&nbsp;
<h2>3位 Goodwin + Goodwin</h3>
<a href="/uploads-archive/2013/10/3.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3203" alt="3" src="/uploads-archive/2013/10/3.png" width="656" height="340" srcset="/uploads-archive/2013/10/3.png 656w, /uploads-archive/2013/10/3-300x155.png 300w, /uploads-archive/2013/10/3-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="http://www.goodwinandgoodwin.com/" target="_blank">http://www.goodwinandgoodwin.com/</a>
&nbsp;
以下は佳作。10点あるが、個人的に良かったと思ったものを3点紹介。
&nbsp;
<h2>Pure Fix Cycles</h3>
<a href="/uploads-archive/2013/10/4.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3204" alt="4" src="/uploads-archive/2013/10/4.png" width="656" height="340" srcset="/uploads-archive/2013/10/4.png 656w, /uploads-archive/2013/10/4-300x155.png 300w, /uploads-archive/2013/10/4-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="http://purefixcycles.com/" target="_blank">http://purefixcycles.com/</a>
&nbsp;
<h2>Jennifer Torosian</h3>
<a href="/uploads-archive/2013/10/5.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3205" alt="5" src="/uploads-archive/2013/10/5.png" width="656" height="340" srcset="/uploads-archive/2013/10/5.png 656w, /uploads-archive/2013/10/5-300x155.png 300w, /uploads-archive/2013/10/5-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="http://www.jennifertorosian.com/" target="_blank">http://www.jennifertorosian.com/</a>
<h2>Society of the Sun</h3>
<a href="/uploads-archive/2013/10/6.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3206" alt="6" src="/uploads-archive/2013/10/6.png" width="656" height="340" srcset="/uploads-archive/2013/10/6.png 656w, /uploads-archive/2013/10/6-300x155.png 300w, /uploads-archive/2013/10/6-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="http://shop.societyclothing.com/" target="_blank">http://shop.societyclothing.com/</a>
&nbsp;
全体の印象としては、ほとんどがレスポンシブWebデザインであり完成度が高いということ。
あとはECサイトといえば商品が大量に陳列してあるイメージが強いが、
全てがコンセプトを全面に出しており世界観で勝負しているということ。
大量仕入れ大量販売では勝負できないサイトがコンセプトを追求し
ブランドを売っていくという方法は有効だ。
そこでweb上で一番大事になってくるのはデザインだ。
そういういみではデザインがECで成功するための最も重要なファクターの1つと再認識した。

Shopify Ecommerce Design Awards

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

デザインの優先順位

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

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

webアプリケーション、webの管理画面で、
そのままでも、少し加工して、デザインの参考に、
使えそうなデザインテンプレートがありましたので、紹介します。
&nbsp;
いずれもフリーで手に入れられます。 
<a href="http://www.egrappler.com/free-premium-html-adminbackend-template-for-web-applications-bluewhale-admin/" target="_blank">BlueWhale Admin</a> 
<a href="http://www.egrappler.com/free-premium-html-adminbackend-template-for-web-applications-bluewhale-admin/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3173" alt="Dashboard BlueWhale Admin" src="/uploads-archive/2013/09/Dashboard-BlueWhale-Admin-1011x1024.jpg" width="615" height="622" srcset="/uploads-archive/2013/09/Dashboard-BlueWhale-Admin-1011x1024.jpg 1011w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin-296x300.jpg 296w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin-228x230.jpg 228w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin-120x120.jpg 120w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin.jpg 1333w" sizes="(max-width: 615px) 100vw, 615px" /></a> 
960 Grid CSSをベースに作っているようです。
&nbsp;
&nbsp;
<a href="http://www.egrappler.com/templatevamp-free-twitter-bootstrap-admin-template/" target="_blank">Twitter Bootstrap Admin Template</a> 
<a href="http://www.egrappler.com/templatevamp-free-twitter-bootstrap-admin-template/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3174" alt="Dashboard - Bootstrap Admin Template" src="/uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-699x1024.jpg" width="615" height="900" srcset="/uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-699x1024.jpg 699w, /uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-205x300.jpg 205w, /uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-228x333.jpg 228w, /uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template.jpg 1333w" sizes="(max-width: 615px) 100vw, 615px" /></a> 
こちらはTwitter Bootstrapをベースに作っているようです。こちらはシンプルでいいデザインですね！
&nbsp; 
<a href="http://www.egrappler.com/free-web-backend-admin-template-psd-app-admin/" target="_blank">Free Web Backend Admin Template PSD: App Admin</a> 
<a href="http://www.egrappler.com/free-web-backend-admin-template-psd-app-admin/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3175" alt="Dashboard" src="/uploads-archive/2013/09/Dashboard-1024x743.jpg" width="615" height="446" srcset="/uploads-archive/2013/09/Dashboard-1024x743.jpg 1024w, /uploads-archive/2013/09/Dashboard-300x217.jpg 300w, /uploads-archive/2013/09/Dashboard-228x165.jpg 228w, /uploads-archive/2013/09/Dashboard.jpg 1100w" sizes="(max-width: 615px) 100vw, 615px" /></a>
&nbsp;
&nbsp;
<h2>おまけ</h3>
<a href="https://www.clipular.com/welcome" target="_blank">clipular</a>というchromeの拡張機能が良いらしいと聞きました。 
webサイトのキャプチャを撮れるものなんですが、それだけで終わらず、クラウドに自分で撮ったキャプチャのギャラリーを作れるというなんとも素晴らしい内容。（作れるというか自動的に一覧に表示できるようになってるという感じです。）
キャプチャして、ローカルに保存してる人なんかにはとてもいい拡張機能だと思います！！

管理画面のデザインテンプレートをフリーでダウンロード!

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

以前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>）、
こちらで、WebGLはグラフィックボードによってはブラウザが最新でも使うことができないという風にご紹介しておりました。
しかしながら、最近のChromeでは、グラフィックボードが古くても、ブラウザ側で環境を再現(エミュレーション)することができるので、WebGLのサイトを見ることができることがわかりました。
&nbsp;
少しうれしくなったので、WebGLを使ったサイトや、デモを集め些細とを探してみましたので、少しご紹介いたします。
&nbsp;
<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> 
<a href="https://www.cubeslam.com/" target="_blank">CUBE SLAM</a>
動物のそれぞれの動きがすごいです。
&nbsp;
&nbsp;
<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>
<a href="https://developer.mozilla.org/ja/demos/tag/tech:webgl" target="_blank">mozilla Demo Studio WEB GL</a>
WebGLのデモ集です。いろんなタイプのWebGLのサンプルを見ることができます。
&nbsp;
&nbsp;
<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>
<a href="http://yomotsu.github.io/threejs-examples/" target="_blank">Examples created by Yomotsu useing THREE.js</a>
three.jsという、WebGLを使いやすくするライブラリを使ったデモ集です。
いきなりコアなWebGLを扱うのは敷居が高い感じがしますが、こういったライブラリを使ってはじめるのもいいと思いました。
&nbsp;

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

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

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

webデザインをしている中で、僕の場合はほとんどPSDなんですが、やはり他の人がどんな風にデザインしているのか、どんなテクニックを使っているのかというのは非常に気になる所です。
そんな中、有名で人気のあるサイトのUIがPSDでゲットできちゃうというサイトがありました。
Github,apple,facebook等のサイトのUIなんかがあります。
なんと教育目的(?)のたまに、正確にPSDでおこしたそうです。
appleに関しては、単純そうに見えて、意外と手が込んでました。。。
やはり「神は細部に宿る」ですかね。
そのサイトはこちらになります。
<a href="http://lukechesser.github.io/Popular-UIs/" target="_target">Popular UIs | Free PSDs of popular Web Interfaces</a>
<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>
そしてさらにもうひとつ。
50個の無料のwedデザインPSD、そして中にはHTMLソースまであるやつもあります！
<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>
こんなものがあるなんて我々webデザイナーの役割って・・・って感じです。
まぁこれは海外のものなんでちょっと日本のとは違うので、使いづらいかもしれません。
ただ、非常に参考になります。
勉強させてもらいます！！
&nbsp;

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

Web上ではPDFファイルへのリンクを貼ることが度々あります。
ただその場合閲覧する側は、一度ページを離れなくてはならないだけでなく、
PDFがダウンロードされるのを待たねばならないため、あまり軽快とはよべないページになってしまいがちです。
&nbsp;
今回ご紹介するGoogle Docs Viewerは、Googleドライブを利用している方は
その中でファイルを開くときに、目にする機会も多いと思いますが、
コチラのビューアをWebページ内に設置して、
PDFなどのファイルを軽快に閲覧できるようにすることができます。
&nbsp;
今回はPDFで紹介しますが、他にも多くのドキュメントファイルの表示に対応しています。
対応しているファイル形式(<a href="https://support.google.com/drive/answer/2423485?p=docs_viewer&amp;rd=1" target="_blank">Googleドライブヘルプより</a>)
<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>
&nbsp;
↓こちらがDEMOです。
<a class="demo" href="/demo/ninomiya/22/" target="_blank">DEMO</a>
&nbsp;
<h2>設置の仕方</h3>
<h3>1.Googleドキュメントビューアのページを開きます。</h4>
URL：
<a href="https://docs.google.com/viewer" target="_blank">https://docs.google.com/viewer</a>
&nbsp;
<h3>2.表示させるPDFファイル(または表示に対応している他の形式のファイル)のURLを入力し、HTMLタグを生成します。</h4>
<img decoding="async" loading="lazy" alt="ファイルのURL入力" src="/uploads-archive/2013/06/ggl_dv01.jpg" width="656" height="438" />
&nbsp;
<h3>3.生成したHTMLタグをWebページの表示させたい場所にコピー&amp;ペーストすれば、完了です。</h4>
<img decoding="async" loading="lazy" alt="HTMLタグ生成" src="/uploads-archive/2013/06/ggl_dv02.jpg" width="656" height="611" />
&nbsp;
※注意点
テスト環境などで、Basic認証などのアクセス制限がかかっていると、ビューアがPDFにアクセスできないため、
表示することができませんので、ご注意ください。
&nbsp;
Googleドキュメントビューアのサイトに毎回アクセスしてHTMLタグを生成しなくても、下の「ファイルのURL」のところに表示したいURLを入力すれば、Webページ内での表示が可能です。

		<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;">
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div>XHTML</div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;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">&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;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

ただ、こちらのURLは普通のURLではなく、URLエンコード形式にする必要があります。
静的なサイトの場合はコチラのサイト（<a href="http://www.tagindex.com/tool/url.html">http://www.tagindex.com/tool/url.html</a>）などでエンコードして利用することができます。
PHPなど動的なサイトの場合は、「 urlencode ([ファイルのURL])」などの関数を使って、
利用することができます。
&nbsp;
現時点での欠点としては、<a href="/demo/ninomiya/22/" target="_blank">DEMO</a>で見ていただけると分かりますが、
写真などのラスター形式の画像は、画質が著しく劣化します。
画質を重視する場合は、あまりオススメできません。
&nbsp;
その分表示速度はとても速く、ファイルも軽いので、
軽快にPDFを表示したい場合にはとてもオススメです。
&nbsp;
&nbsp;
&nbsp;

nino_eye130612.jpg

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

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

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

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

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2014/01/29

2014/01/15

2013/12/18

2013/12/18

2013/11/13

2013/10/31

2013/10/22

2013/10/02

2013/10/01

2013/09/25

2013/09/25

2013/08/21

2013/07/17

2013/07/03

2013/06/25

2013/06/13

2013/06/06

2013/05/15