nino-eye.jpg

インラインSVGの中の要素にリンクをつける方法

こっちの方が良い?【jquery.jpostal.js】をつかってみた

ローディングアニメーションって画像として作るのは少し面倒くさいこともあり、2,3パターン作ってから全く作ってないのですが、CSSのみで出来るとなればいろんなパターンを作ってみたくなりますね！
今回は以下のサイトを元に自分で少し試してみました。 
15パターンのローディングアニメーションがあり、ダウンロード無料です。 
<a href="http://www.css-spinners.com/" class="link" target="_blank">css-spinners</a>
私が作ったのは以下からご覧下さい。 
<a href="/demo/abe/58/" class="demo" target="_blank">DEMO</a>
CSSのkeyframesやCSS3の装飾を使ってやってます。
参考サイトを見ると、複雑なやつはソースが凄いことになっています。。。
IE10以上の対応にはなりますが、基本はIE10,11が多いと思いますし、 
IE9の方でもローディング自体あってもなくてもコンテンツ自体には問題はないので 
ローディンはグ画像ではなく、CSSで作るもので充分な気がしますね！！

CSSのみで実装されてるローディングアニメーション

SVG＆Canvas＆WebGLが選べる2Dのライブラリ「Two.js」

「あうんの呼吸でコミュニケーション」というキャッチコピーで、キャプチャを撮り、それにメモを加えて遅れるというサービスが最近出来たそうです。
前にも海外のサービスでこういうのがあった気がしたのですが、 
少し使いづらかったのかあまり記憶に残ってないです。。。
コチラのほうが断然使い勝手は良さそうだなという感じです。
webサイトの制作で修正が発生すると、それを伝えるのが結構大変なこともあります。 
社内のみならいいのですが、お客さんや別事務所にいるスタッフにいる時なんかは、 
デザインの修正を電話やメールで伝えたりしますが、 
どうしても「どこの部分？」「どんな風に？」というやりとりをしながら確認していくことになり、 
双方が大変になります。 
たまにお客さんでwebサイトをプリントアウトして、それに書き込んでそれをデータをして送ってくれ、 
それはほぼ齟齬がなく修正できるのですが、かなり労力がかかってしまいます。
このサービスは「伝える側」と「受け取る側」が共にわかりやすい指示を簡単に作成できるかと思います。
簡単にこのサービスの特徴を説明すると、 
・無料、会員登録の必要もなし 
・URL、画像、クリップボードから修正ファイルを登録できる 
・URLの場合、BASIC認証もいける 
・トリミング機能あり 
・短縮URL発行、パスワードもかけられる
といった感じでしょうか。
では使い方を見て行きましょう！
&nbsp;
<h2>AUNの使い方</h2>
TOPページにURLを記入する欄がありますが、 
そこでURLを入れてボタンを押すだけで、キャプチャを撮りメモを記入する画面に移ります。 
ちなみにBASIC認証がかかっているページでもOKです。
URLがない場合は、「画像ファイル」「クリップボード」を使うこともできます。 
<a href="/uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7533" src="/uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-1024x553.jpg" alt="2ビジュアルコミュニケーションツール - AUN[あうん]" width="630" height="340" srcset="/uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-1024x553.jpg 1024w, /uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-300x162.jpg 300w, /uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-228x123.jpg 228w, /uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043.jpg 1233w" sizes="(max-width: 630px) 100vw, 630px" /></a>
&nbsp;
画像をアップすると、トリミングをすることもできます。
メモを記入する画面は以下の通り、 
<a href="/uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7534" src="/uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-1024x553.jpg" alt="3ビジュアルコミュニケーションツール - AUN[あうん]" width="630" height="340" srcset="/uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-1024x553.jpg 1024w, /uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-300x162.jpg 300w, /uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-228x123.jpg 228w, /uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405.jpg 1233w" sizes="(max-width: 630px) 100vw, 630px" /></a>
&nbsp;
修正箇所を囲むとメモ書く吹き出しが出てきて、「メモを追加」を押すと、右側の「メモリスト」に追加されキャプチャには番号付きの赤線囲み線ができるので、どこが修正箇所なのかわかりやすくなっています。
完成し「保存する」を押すと、
&nbsp;
<img decoding="async" loading="lazy" class="alignnone wp-image-7535" src="/uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-1024x547.jpg" alt="4ビジュアルコミュニケーションツール - AUN[あうん]" width="630" height="336" srcset="/uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-1024x547.jpg 1024w, /uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-300x160.jpg 300w, /uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-228x122.jpg 228w, /uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4.jpg 1247w" sizes="(max-width: 630px) 100vw, 630px" />
&nbsp;
タイトル、パスワードを設定することができます。
そして保存をすると、共有URLが発行されますので、それを送れば相手側が見れるようになります！ 
保存期間は7日間で、経過すると削除されるようです。
これはいいサービスですね！ 
「伝える側」にとって非常にいいツールになると思います！
&nbsp;
<a class="link" href="http://aun.tools/" target="_blank">ビジュアルコミュニケーションツール &#8211; AUN[あうん]</a>
&nbsp;
最近web制作会社にとって便利なツールがどんどん出てきていて、 
効率的に進められるようになって気がします。

デザインや文字の修正依頼で活躍しそうなサービス「AUN」

高さを揃えるjQueryプラグイン「jQuery-fixHeightSimple」をレスポンシブ対応しました

フォーム・選択要素で使えそうなjQuery「Selectivity」

jQueryでフリックを実装する場合に縦スクロールできなくなる問題を解決する方法

グラフィックスの要素をPNGやJPGなどより軽量サイズで作成でき、
色を変えたり、ある程度自在に扱うことができるSVGですが、
１つ問題点があります。
それは、アニメーションの実装です。
&nbsp;
SVGではSVGの規格としてアニメーションが存在しますが、
こちらはIEでは最新バージョンの11で対応がされていないなど、対応ブラウザが限られており、
実際に公開するサイトとしては現時点では利用ができません。
&nbsp;
また、JavaScriptで実装しようとすると、とてもブラウザに負荷をかけてしまい、
動きももっさりとしたものになってしまいます。
&nbsp;
これらの問題を解決するのが、CSS3のアニメーションです。
CSS3のアニメーションもIE10以上という制約はあるものの、
最新のブラウザは網羅しているので、実用としての可能性はより高いものとなります。
&nbsp;
SVGとCSS3アニメーションの効果的な使い方を検討してみましたが、
複数のグラフィックを別々に動かす場合、
１つのSVGの要素の中でそれぞれの要素をアニメーションさせるよりも、
<a class="demo" href="/demo/ninomiya/73/" target="_blank">DEMO</a>
↑こちらのDEMOのように、HTMLの各要素の中に部品としてSVGを読み込んで、
SVGを読み込んでいるそれぞれのHTMLの要素に対して、CSS3でアニメーションさせるのが、
いいのではないかと思います。
&nbsp;
もちろん、IE9はまだそれなりにシェアがありますので、IE9用にjQueryの振り分けはまだ必要かもしれません。

SVGのアニメーションはCSS3で実装するのがよさそう

デザインを制作していると、フリー素材を使うことがよくあります。 
ブログで紹介していたり、専用のサイトがあったりと様々で、それを見つける度に、ブックマークをしているのですが、そういったサイトを一つに集約しているサイトがありましたので紹介します。
ちなみに写真のフリー素材を漁っていると、その辺の広告なんかでよくフリー素材が使われています。
<h2>Makerbook</h2>
海外のサイトになります。
以下のカテゴリでわかれています。
・Photography(写真) 
・Mockups(モックアップ) 
・Graphics(アイコン、ベクター素材等) 
・Textures(パターンやテクスチャ) 
・Fonts(フォント) 
・Colours(スウォッチ) 
・Video(動画) 
・Audio(音楽)
中には元々日頃お世話になっているサイトもありましたので、 
このサイトを起点にすると探しやすいかもと思いました。
<a href="http://makerbook.net/" target="_blank" class="link">Makerbook &#8211; The best free resources for creatives.</a>
皆さんもぜひ使ってみてください！

デザイナー向けフリー＆有料素材まとめサイト「Makerbook」

スマホに適したlightbox系javascriptプラグイン「PhotoSwipe」

jQueryでページ上に表示されるローディングのバーを作ってみる

この仕事を始めていこうずっと、webデザインを作成するときはPhotoshopを使っており、 
今は、Photoshop CCを使用しております。 
<a href="http://www.adobe.com/jp/products/photoshop.html" target="_blank">http://www.adobe.com/jp/products/photoshop.html</a> 
これのフォトグラフィプランですね(以前キャンペーンで期間限定的な感じだったのに、今もうプランとして固定されてる・・・)
Dreamweaverは数年前に辞め、 
Adobe製品はこれ以外には、時々illustratorを使うくらいなので、 
Photoshopをやめたら、脱Adobeになってしまうかもしれません。
とはいえ、Photoshopを辞めることなんて早々無いだろうと思っていたのですが、 
最近いろいろな情報を見ていると、Photoshopに劣らないであろう製品がいくつかあるようです。
よく目にする3つをご紹介します。
<h2>Photoshop以外の画像編集ツール</h2>
<h3>Sketch 3</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7378" src="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg" alt="Bohemian Coding - Sketch 3" width="630" height="382" srcset="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg 1024w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-300x182.jpg 300w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-228x138.jpg 228w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /> 
mac向けで、webサイトのデザインやプレゼンテーションスライドの作成ができるようです。 
$99ですが、trialも出来るので試してみて良かったら購入できますね！
cssへワンクリックで書き出せるとか、 
起動が早いとかあるみたいで、
以下でしっかりまとめられてるのでご覧ください！ 
<a href="http://matome.naver.jp/odai/2140584105966404801">デザイナー必見！今注目のツール「Sketch3」の使い方を勉強できるサイト &#8211; NAVER まとめ</a>
私もTrialをダウンロードしましたが、今だ試せずにいます。
<a class="link" href="http://bohemiancoding.com/sketch/" target="_blank">Bohemian Coding &#8211; Sketch 3</a>
<h3>Pixelmator</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7380" src="/uploads-archive/2015/05/Pixelmator-1024x621.jpg" alt="Pixelmator" width="630" height="382" srcset="/uploads-archive/2015/05/Pixelmator-1024x621.jpg 1024w, /uploads-archive/2015/05/Pixelmator-300x182.jpg 300w, /uploads-archive/2015/05/Pixelmator-228x138.jpg 228w, /uploads-archive/2015/05/Pixelmator.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /> 
こちらもmac向けですが、価格は3600円と安め。 
Photoshopと機能性はほぼ同じくらいでpsdファイルとの連携も問題ないそうです。 
最近iPhone用のアプリも発売されたようです。
<a href="http://blockworks.jp/pixelmator/" target="_blank">Pixelmator入門</a>
<a class="link" href="http://www.pixelmator.com/" target="_blank">Pixelmator</a>
<h3>GIMP</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7379" src="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg" alt="GIMP - The GNU Image Manipulation Program" width="630" height="382" srcset="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg 1024w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-300x182.jpg 300w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-228x138.jpg 228w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /> 
もう何年も前からあるソフトで、こちらはwindowsでも使用できます。 
こちらは基本無償で、簡単な写真加工ならこれで充分できるようです。 
初心者で試しに・・・という人にこちらはオススメです！！
<a href="http://synclogue-navi.com/category/gimp" target="_blank">GIMPの使い方</a> 
<a class="link" href="http://www.gimp.org/" target="_blank">GIMP &#8211; The GNU Image Manipulation Program</a>

Photoshop以外の画像編集ツールでついにAdobe脱却！？

【jQuery】CSS3のTransform3DでGPUによる滑らかなアニメーションを実装しよう【CSS3】

私自身、エンジニアってわけではないのですが、プログラムに片足突っ込んでいるようなものなので、よくわからないことがあり、ググってみたりすると、最近エンジニアに特化している質問サイト等に出くわすことが多くなりました。
以前は誰か個人のブログが多いのですが、最近徐々にこのようなサイトが台頭しているよう感じます。
それでは早速ご紹介します！
<h2>teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム</h2>
<a href="https://teratail.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7311" src="/uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-1024x628.jpg" alt="teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム" width="620" height="380" srcset="/uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-1024x628.jpg 1024w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-300x184.jpg 300w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-228x140.jpg 228w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
2014年7月に誕生したレバレジーズさんが運営しているサイトです。 
デザインがスッキリしていて見やすいです。
&nbsp;
<a class="link" href="https://teratail.com/" target="_blank">teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム</a>
&nbsp;
<h2>スタック・オーバーフロー</h2>
<a href="http://ja.stackoverflow.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7314" src="/uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-1024x628.jpg" alt="スタック・オーバーフロー" width="620" height="380" srcset="/uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-1024x628.jpg 1024w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-300x184.jpg 300w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-228x140.jpg 228w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはよくググると、海外版のサイトがひっかかっていたのですが、その日本語版が2014年12月頃にベータ版として登場したようです。 
こちらもシンプルなデザインで見やすいですね！
&nbsp;
<a class="link" href="http://ja.stackoverflow.com/" target="_blank">スタック・オーバーフロー</a>
&nbsp;
<h2>Qiita &#8211; プログラマの技術情報共有サービス</h2>
<a href="https://qiita.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7310" src="/uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-1024x628.jpg" alt="Qiita - プログラマの技術情報共有サービス" width="620" height="380" srcset="/uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-1024x628.jpg 1024w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-300x184.jpg 300w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-228x140.jpg 228w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはどちらかと言うと、技術情報共有に重きを置いていて、その中でフィードバックもらうことが出来るようになっています。 
緑が印象的で記憶に残りやすいサイトですね。
&nbsp;
<a class="link" href="https://qiita.com/" target="_blank">Qiita &#8211; プログラマの技術情報共有サービス</a>
&nbsp;
<h2>CodePen</h2>
<a href="http://codepen.io/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7307" src="/uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-1024x628.jpg" alt="CodePen - Front End Developer Playground &amp; Code Editor in the Browser" width="620" height="380" srcset="/uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-1024x628.jpg 1024w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-300x184.jpg 300w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-228x140.jpg 228w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらは質問＆回答ではなく、技術共有のサイトです。 
プログラミングよりはフロントエンドよりの技術が多いかと思います。 
実行の結果とソースが一画面に表示されとても見やすいです！
例えば以下のようなものになります。 
<a href="http://codepen.io/egrucza/pen/bNjQLY" target="_blank">&#8220;Stupid&#8221; Case Study Hover</a>
&nbsp;
<a class="link" href="http://codepen.io/" target="_blank">CodePen</a>
&nbsp;
<h2>Forkwell &#8211; エンジニアのためのポートフォリオサービス</h2>
<a href="https://forkwell.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7308" src="/uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-1024x628.jpg" alt="Forkwell - エンジニアのためのポートフォリオサービス" width="620" height="380" srcset="/uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-1024x628.jpg 1024w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-300x184.jpg 300w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-228x140.jpg 228w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
ポートフォリオサービスとありますが、技術共有サイトです。 
エンジニアだけでなく、webクリエイター全般に対応しております。 
求人サイトと直結しているようなので、転職を目指す人にはいいかもしれません。
&nbsp;
<a class="link" href="https://forkwell.com/" target="_blank">Forkwell</a>
&nbsp;
<h2>WordPress フォーラム</h2>
<a href="https://ja.forums.wordpress.org/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7313" src="/uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-1024x628.jpg" alt="WordPress › フォーラム" width="620" height="380" srcset="/uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-1024x628.jpg 1024w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-300x184.jpg 300w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-228x140.jpg 228w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはご存知の通り、wordpress専用のサイトです。 
wordpress関連のことを調べるとよくたどり着きます。
&nbsp;
<a class="link" href="https://ja.forums.wordpress.org/" target="_blank">WordPress フォーラム</a>
&nbsp;
<h2>jsdo.it</h2>
<a href="http://jsdo.it/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7309" src="/uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-1024x628.jpg" alt="jsdo.it - Share JavaScript, HTML5 and CSS" width="620" height="380" srcset="/uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-1024x628.jpg 1024w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-300x184.jpg 300w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-228x140.jpg 228w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはカヤックさんが運営しているサイトで、 
JavaScript,HTML5,CSSに特化しているようなので、エンジニアというよりフロントエンドよりですね。
&nbsp;
<a class="link" href="http://jsdo.it/" target="_blank">jsdo.it</a>
&nbsp;
<h2>W3Q &#8211; Web制作のお悩みを解決するQ&amp;Aとまとめサービス</h2>
<a href="http://w3q.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7312" src="/uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-1024x628.jpg" alt="W3Q - Web制作のお悩みを解決するQ&amp;Aとまとめサービス" width="620" height="380" srcset="/uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-1024x628.jpg 1024w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-300x184.jpg 300w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-228x140.jpg 228w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはweb制作、web業界に関する質問をなんでもっていうサイトなのですが、 
今まで紹介してきたサイトと比べると、匿名のため品のない回答も多く見受けられます・・・
&nbsp;
<a class="link" href="http://w3q.jp/" target="_blank">W3Q</a>
&nbsp;
&nbsp;
私自身エンジニア歴は長くはないので、 
調べたらなんとかなるという状況にいましたが、当初からすると贅沢な状況になっているのかもしれません。
私にとってありがたいサービスが生まれて来ているので、こうゆうサイトで知識を蓄えつつ、 
回答する側に行きたいなぁと思います。

webエンジニアが技術共有＆質問できるサイト7つ

マテリアルデザイン(material design)は昨年2014年7月にGoogleから提唱された、
WEB端末向けの新たなデザイン体系です。
&nbsp;
Google関係のアプリをはじめ、少しずつ見かける機会は増えているものの、
具体的にどんなものなのか知らずにいました。
私は単純にフラットデザインのひとつの形に過ぎないと想像していましたが、
実際には別物だということを知り、
今後のためにもちゃんと調べようと思ったので、
<a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Googleが公開しているマテリアルデザインのガイドライン</a>を調べて、
内容をまとめてみました。
&nbsp;
公式のガイドライン
<a class="link" href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Introduction &#8211; Material design &#8211; Google design guidelines</a>
&nbsp;
<h2>マテリアルデザインの基本</h2>
<h3>マテリアルデザインに用いられる単位(dp)について</h3>
ガイドラインでは、度々dpという単位が使われています。
この単位は解像度が160dpiの場合の1pxを基本としています。
解像度が240dipなら1dpは1.5px、320dpiなら1dpは2pxになります。
(ちなみにiPhone4-6の解像度は326dpiです。ノートパソコンは100〜150dpiくらい)
&nbsp;
まず、マテリアルデザインの核となる部分
<h3>３次元空間(3D)を意識する</h3>
<a class="link" href="http://www.google.com/design/spec/what-is-material/environment.html" target="_blank">参考: Environment &#8211; What is material? &#8211; Google design guidelines</a>
縦方向と横方向の平面上にレイアウトすることを意識したフラットデザインと違い、
マテリアルデザインは、縦方向と横方向に加えて、画面の奥行きを意識したデザインになっています。
<a href="/uploads-archive/2015/04/axis.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7299 size-full" src="/uploads-archive/2015/04/axis.png" alt="axis" width="656" height="480" srcset="/uploads-archive/2015/04/axis.png 656w, /uploads-archive/2015/04/axis-300x220.png 300w, /uploads-archive/2015/04/axis-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
&nbsp;
マテリアルデザインの一つの大きな特徴であるシャドウ(shadow)は、
この奥行きを視覚的に知らせることを目的としています。
そのため、このシャドウはそれまでにもあった装飾としてのシャドウとは違い、
その要素の奥行の状態に合わせて変化させる必要があります。
また、そのシャドウの位置・方向や濃さを決めるために、光源(light)を意識することも必要になります。
&nbsp;
重要な要素についてはその奥行が決められていて、
デバイスによっても、その奥行が変化します。
<a href="/uploads-archive/2015/04/3d_space1.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7302 size-full" src="/uploads-archive/2015/04/3d_space1.jpg" alt="3d_space" width="656" height="480" srcset="/uploads-archive/2015/04/3d_space1.jpg 656w, /uploads-archive/2015/04/3d_space1-300x220.jpg 300w, /uploads-archive/2015/04/3d_space1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a class="link" href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation-android-" target="_blank">参考: Objects in 3D space &#8211; What is material? &#8211; Google design guidelines</a>
&nbsp;
<h3>各要素の基本的な素材は紙のようなものをイメージする</h3>
<a class="link" href="http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-movement-of-material" target="_blank">Material properties &#8211; What is material? &#8211; Google design guidelines</a>
マテリアルデザイン上では、各要素を薄い紙として扱います。
ただ、実際の紙と違って、その紙は様々に変形することが許容されています。
とはいえ、別の奥行きにあった要素が貫通してしまうような変形や、
折りたたむ、<ruby>捲<rp>(</rp><rt>めく</rt><rp>(</rp></ruby>るといった変形は許されていません。
形が変わる（円から四角形になるなど）、伸び縮みする、融合・分離する、回転するなどが許容されている変形です。
&nbsp;
<h3>アニメーションの基本</h3>
マテリアルデザインの重要な特徴として、アニメーションを多く利用するというものがあります。
そのアニメーションにももちろんルールがあります。
通常のアニメーションのイージングは基本的にはAsymmetric(非対称：開始と終了の動きが時間的に対象になっていない)なイージングがより自然な動きということで、推奨されています。
<a href="/uploads-archive/2015/04/responsive-reaction1.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7328 size-full" src="/uploads-archive/2015/04/responsive-reaction1.png" alt="responsive-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/responsive-reaction1.png 656w, /uploads-archive/2015/04/responsive-reaction1-300x220.png 300w, /uploads-archive/2015/04/responsive-reaction1-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
&nbsp;
ただ、もともと画面上になかった要素が入ってきたり、出て行ったりする場合は、
入ってくるときは徐々に減速、出て行く時は徐々に加速させるようなイージングが推奨されています。
ただ最終的には、製作者により、より自然な動きになるように調整することが求められています。
&nbsp;
<h3>Responsive interaction</h3>
ユーザーがタッチしたことを明確に知らせ、操作感の改善を目指したものです。
マテリアルデザインのアニメーションの中で最も特徴的といえる効果です。
日本では波紋エフェクトとも呼ばれています。
タッチした場所を中心に、波紋のようなアニメーションを表示することで、
タッチした場所を知らせ、触ったという視覚効果を明確に表現しています。
<a href="/uploads-archive/2015/04/surface-reaction.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7305 size-full" src="/uploads-archive/2015/04/surface-reaction.png" alt="surface-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/surface-reaction.png 656w, /uploads-archive/2015/04/surface-reaction-300x220.png 300w, /uploads-archive/2015/04/surface-reaction-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
&nbsp;
タッチした場所を起点に、要素が飛び出してきたり、収納されたりするような視覚効果もそのひとつです。
&nbsp;
<h3>視覚的な連続性のあるアニメーション</h3>
マテリアルデザインの中で、私が最も共感するアニメーションルールですが、
タッチした要素と遷移先の要素を視覚的に同一視できるような効果をつけるというものです。
例えば記事の一欄があった場合、
一覧から記事を選ぶと、タッチした要素が画面いっぱいに広がるようにして、
記事の詳細のページヘ遷移するというアニメーションをつけます。
一覧に戻るときにも、記事が一覧に戻っていくようなアニメーションをつけます。
そうすることで、情報の連続性を視覚的にユーザーに知らせることができ、
ユーザーも現在の場所を見失うことなく、ページを遷移することが可能になります。
<a href="/uploads-archive/2015/04/responsive-reaction.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7315 size-full" src="/uploads-archive/2015/04/responsive-reaction.png" alt="responsive-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/responsive-reaction.png 656w, /uploads-archive/2015/04/responsive-reaction-300x220.png 300w, /uploads-archive/2015/04/responsive-reaction-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
&nbsp;
その他、公式のガイドラインには、色やアイコンの作り方など、細かなルールが決められていて、
マテリアルデザインという枠を超えてデザインの勉強になると思います。
動画を使ってわかりやすく説明がされているので、ページ量は多いですが、とても読み進めやすいです。
興味のある方は是非、<a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">公式のガイドライン</a>をご覧になってください。

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2015/06/26

2015/06/17

2015/06/17

2015/06/17

2015/06/10

2015/06/10

2015/06/04

2015/06/04

2015/05/29

2015/05/28

2015/05/20

2015/05/20

2015/05/13

2015/05/12

2015/04/22

2015/04/22

2015/04/21

2015/04/15