<p>web業界等の勉強会やセミナーのイベントを探すサービスを提供している「<a href="http://eventdots.jp/" target="_blank">dots</a>」が2015年8月1日にイベントスペースをオープンしていました。</p>
<p>コワーキングスペースがありつつ、大人数の勉強会・イベントにも対応できるキャパがあるという今までのコワーキングスペースを拡張したような場所です。</p>
<p>8月は無料だったので言ってみたのですが、かなりオシャレでひろびろとした空間でした。<br />
柱がないのですごい開放的に感じました。</p>
<p><a href="https://eventdots.jp/space" target="_blank" class="link">イベント＆コミュニティスペース &#8211; dots.[ドッツ] in 渋谷</a></p>
<p>一部のエリアです。<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-7995" src="/uploads-archive/2015/08/11705351_917950434939110_4427048311893945615_n.jpg" alt="11705351_917950434939110_4427048311893945615_n" width="640" height="360" srcset="/uploads-archive/2015/08/11705351_917950434939110_4427048311893945615_n.jpg 960w, /uploads-archive/2015/08/11705351_917950434939110_4427048311893945615_n-300x169.jpg 300w, /uploads-archive/2015/08/11705351_917950434939110_4427048311893945615_n-228x128.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>今後この場所で勉強会やセミナーが結構開催されそうな予感がしそうですね・・・</p>
<p>利用には<a href="http://eventdots.jp/" target="_blank">dots</a>の会員登録が必要なようです！<br />
9月以降は費用がかかりますが、そこまで高くないので渋谷で空き時間ができた際利用したいですね〜</p>


IT系の勉強会・イベント情報サイトの「dots」が渋谷にイベントスペースを作っていた

<p>弊社では今後のwebデザインの底上げを図るために、フォントの拡充を検討したりしています。</p>
<p>そこで、ついでに日本語のwebフォントが使えるサービスを探したので、簡単に紹介します。</p>
<p>&nbsp;</p>
<h2>FONTPLUS｜フォントプラス</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7870" src="/uploads-archive/2015/08/3778d320b60973e189dc8327cb5f7923-1024x657.jpg" alt="FONTPLUS｜フォントプラス" width="630" height="404" srcset="/uploads-archive/2015/08/3778d320b60973e189dc8327cb5f7923-1024x657.jpg 1024w, /uploads-archive/2015/08/3778d320b60973e189dc8327cb5f7923-300x192.jpg 300w, /uploads-archive/2015/08/3778d320b60973e189dc8327cb5f7923-228x146.jpg 228w, /uploads-archive/2015/08/3778d320b60973e189dc8327cb5f7923.jpg 1239w" sizes="(max-width: 630px) 100vw, 630px" /><br />
入会金：10,800円<br />
例)<br />
120万ページビュー（有効期限1年）※月間10万ページビュー目安<br />
12,960円から<br />
という感じで、PV制限があり、目安のPVを超えてしまうと、つかえなくなってしまうようです。<br />
フォントの書類は、780程あります。</p>
<p>&nbsp;</p>
<p><a href="http://webfont.fontplus.jp/" target="_blank" class="link">FONTPLUS｜フォントプラス</a></p>
<p>&nbsp;</p>
<h2>TypeSquare [タイプスクウェア]</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7871" src="/uploads-archive/2015/08/db1d3eb0a6d410622914e23d5e662d3d-1024x657.jpg" alt="TypeSquare [タイプスクウェア]" width="630" height="404" srcset="/uploads-archive/2015/08/db1d3eb0a6d410622914e23d5e662d3d-1024x657.jpg 1024w, /uploads-archive/2015/08/db1d3eb0a6d410622914e23d5e662d3d-300x192.jpg 300w, /uploads-archive/2015/08/db1d3eb0a6d410622914e23d5e662d3d-228x146.jpg 228w, /uploads-archive/2015/08/db1d3eb0a6d410622914e23d5e662d3d.jpg 1239w" sizes="(max-width: 630px) 100vw, 630px" /><br />
あのモリサワのwebフォントのサービスで、こちらもPV制限があり、そして、利用可能書体数やドメインが決められています。<br />
月額2160円からでフォントの種類は600~700程あります。<br />
&nbsp;</p>
<p><a href="http://typesquare.com/" target="_blank" class="link">TypeSquare [タイプスクウェア]</a><br />
&nbsp;</p>
<h2>WEBフォント｜アマナイメージズ</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7872" src="/uploads-archive/2015/08/a83b2b118f823bec695d5b158a0a0f45-1024x657.jpg" alt="WEBフォント｜アマナイメージズ" width="630" height="404" srcset="/uploads-archive/2015/08/a83b2b118f823bec695d5b158a0a0f45-1024x657.jpg 1024w, /uploads-archive/2015/08/a83b2b118f823bec695d5b158a0a0f45-300x192.jpg 300w, /uploads-archive/2015/08/a83b2b118f823bec695d5b158a0a0f45-228x146.jpg 228w, /uploads-archive/2015/08/a83b2b118f823bec695d5b158a0a0f45.jpg 1239w" sizes="(max-width: 630px) 100vw, 630px" /><br />
言わずと知れたアマナですが、webフォントのサービスもしているそうです。<br />
540円からと謳っておりますが、その場合、1フォント×1ヶ月のようです。<br />
フォントの種類は336程あります。<br />
webフォント以外にも、ダウンロード、パッケージも扱っています。</p>
<p>&nbsp;<br />
<a href="http://amanaimages.com/font/web/index.aspx" target="_blank" class="link">WEBフォント｜アマナイメージズ</a></p>
<p>&nbsp;</p>
<h2>日本語Webフォントサービス</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7869" src="/uploads-archive/2015/08/a9834e492b8464a0139cf330fffe8702-1024x657.jpg" alt="日本語Webフォントサービス  316のデザインフォントが手軽に使えます" width="630" height="404" srcset="/uploads-archive/2015/08/a9834e492b8464a0139cf330fffe8702-1024x657.jpg 1024w, /uploads-archive/2015/08/a9834e492b8464a0139cf330fffe8702-300x192.jpg 300w, /uploads-archive/2015/08/a9834e492b8464a0139cf330fffe8702-228x146.jpg 228w, /uploads-archive/2015/08/a9834e492b8464a0139cf330fffe8702.jpg 1239w" sizes="(max-width: 630px) 100vw, 630px" /><br />
コースが３つあり、<br />
月額480円(7書体)<br />
月額2980円(316書体)<br />
月額9800円(316書体)※複数人で使用可能</p>
<p>フォントの種類は316程あります。<br />
&nbsp;<br />
<a href="http://www.digitalstage.jp/webfont/" target="_blank" class="link">日本語Webフォントサービス | 316のデザインフォントが手軽に使えます</a></p>
<p>&nbsp;</p>
<h2>Google Noto Fonts</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7868" src="/uploads-archive/2015/08/Google-Noto-Fonts-1024x657.jpg" alt="Google Noto Fonts" width="630" height="404" srcset="/uploads-archive/2015/08/Google-Noto-Fonts-1024x657.jpg 1024w, /uploads-archive/2015/08/Google-Noto-Fonts-300x192.jpg 300w, /uploads-archive/2015/08/Google-Noto-Fonts-228x146.jpg 228w, /uploads-archive/2015/08/Google-Noto-Fonts.jpg 1239w" sizes="(max-width: 630px) 100vw, 630px" /><br />
Googleのwebフォントは広く認知されていると思うのですが、日本語のフォントも対応しているようです！<br />
無料ですが、今は1種類しかないようです。<br />
&nbsp;<br />
<a href="http://www.google.com/get/noto/#sans-jpan" target="_blank" class="link">Google Noto Fonts</a></p>
<p>&nbsp;</p>
<h2>おまけ</h2>
<p>実際にwebフォントが使われているサイトを紹介してくれています。<br />
<a href="http://www.4696.co.jp/blog/9/" target="_blank">日本語Webフォントを使用している60のWebサイト | 株式会社シロクロ</a></p>
<p>実際に使われているのイメージできる上に、見てるだけでもいいですね！</p>


日本語のwebフォントを提供しているサービス5つ

<p>2015年上半期も本日が最終日</p>
<p>2015年のWebデザインを振り返った記事があったのでまとめ</p>
<p>&nbsp;</p>
<h2>1. はじめに</h2>
<p>1-1. ファーストビューよりスクロールを重視するデザインに</p>
<p>1-2. シンプルなレイアウト構成</p>
<p>&nbsp;</p>
<p>ユーザーがスクロールに慣れたなめ「サイトが表示されたらとりあえず下にスクロール」という動きが普通になっているという</p>
<p>なのであまりファーストビューにこだわらなくなってきてるとのこと</p>
<p>&nbsp;</p>
<h2>2. 今流行りのweb デザイントレンド13選</h2>
<p>2-1 背景にビデオ動画活用</p>
<p>端末のスペックやネット環境が良くなっていけばそれにともなってコンテンツもリッチになっていく</p>
<p>動画が一般化し始めるのがまさに今のようだ</p>
<p>将来はゴリゴリの3Dが軽快に描画できるスペックのPCが安価になったりするのだろう</p>
<p>&nbsp;</p>
<p><a href="http://my.austria.info/" target="_blank">http://my.austria.info/</a></p>
<p><a href="http://www.kalexiko.com/" target="_blank"> http://www.kalexiko.com/</a></p>
<p>&nbsp;</p>
<p>2-2 カード・レイアウト（タイル・レイアウト）</p>
<p>この言葉を知らなかったが、要はFacebookのタイムラインのように1記事をブロックで囲っている感じのレイアウトとのこと</p>
<p>わかりやすくレスポンシブにもし易いのが良いらしい</p>
<p>&nbsp;</p>
<p><a href="http://www.google.com/landing/now/" target="_blank">http://www.google.com/landing/now/</a></p>
<p>※私の環境ではカード・レイアウトが再現できず</p>
<p>&nbsp;</p>
<p>2-3 シングルページ</p>
<p>今後は後述のゴーストボタンやマイクロインタラクションと組み合わせて進化するらしい</p>
<p><a href="http://www.kirinichiban.com/" target="_blank"> http://www.kirinichiban.com/</a></p>
<p>&nbsp;</p>
<p>2-4 パララックス・エフェクト</p>
<p>今後もこのトレンドは続き、更に進化するらしい</p>
<p><a href="http://www.lexusls.asia/" target="_blank"> http://www.lexusls.asia/</a></p>
<p>&nbsp;</p>
<p>2-5 アニメ化されたストーリー性</p>
<p>以下の参考サイトはSVGとjsでできているとのこと</p>
<p><a href="https://www.boldking.com/" target="_blank"> https://www.boldking.com/</a></p>
<p>&nbsp;</p>
<p>2-6 フラットデザイン</p>
<p>当面はこのトレンドが続くらしい</p>
<p><a href="http://www.huffingtonpost.com/2012/02/19/logos-past-future-corporate_n_1285622.html" target="_blank"> http://www.huffingtonpost.com/2012/02/19/logos-past-future-corporate_n_1285622.html</a></p>
<p><a href="http://purgotea.com/" target="_blank"> http://purgotea.com/</a></p>
<p>&nbsp;</p>
<p>2-7 マテリアル・デザインの増加</p>
<p>今後の動向が気になるマテリアルデザイン</p>
<p>以下のサイトでが勉強になるらしい</p>
<p><a href="http://material.cmiscm.com/" target="_blank"> http://material.cmiscm.com/</a></p>
<p>&nbsp;</p>
<p>2-8 インタラクティブ・デザイン</p>
<p>サンプルがすごすぎて圧巻だが、もっと小さい範囲でもアイデア次第ではおもしろいものができそう</p>
<p><a href="https://insideabbeyroad.withgoogle.com/en" target="_blank"> https://insideabbeyroad.withgoogle.com/en</a></p>
<p><a href="http://www.blitzagency.com/" target="_blank"> http://www.blitzagency.com/</a></p>
<p>&nbsp;</p>
<p>2-9 マイクロ・インタラクション</p>
<p>要はいいねボタンなどのことらしい</p>
<p>簡単なAjaxでのお問い合わせフォームなどもこれに当たる模様</p>
<p><a href="http://www.buzzfeed.com/zachkornfeld/try-guys-robot-babies#.kjJkrp6RPk" target="_blank"> http://www.buzzfeed.com/zachkornfeld/try-guys-robot-babies#.kjJkrp6RPk</a></p>
<p>&nbsp;</p>
<p>2-10 トレンドのメニューバー</p>
<p>もう飽きた気もするが引き続きトレンドなようだ</p>
<p><a href="http://bitcoinfoundation.org/" target="_blank"> http://bitcoinfoundation.org/</a></p>
<p>&nbsp;</p>
<p>2-11 ゴーストボタン</p>
<p>この言葉は知らなかったが、要は背景が透けているボタンのことらしい</p>
<p><a href="http://www.iuvo.si/" target="_blank"> http://www.iuvo.si/</a></p>
<p>&nbsp;</p>
<p>2-12 アニメーション効果</p>
<p>おそらく作成ツールの充実や作成者の技術向上により今後は当たり前になっていきそう</p>
<p><a href="http://ja.wix.com/blog/2014/05/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%8A%B9%E6%9E%9C%E3%81%AE%E9%AD%85%E5%8A%9B%E3%82%92%E5%BE%B9%E5%BA%95%E7%B4%B9%E4%BB%8B/" target="_blank"> http://ja.wix.com/blog/2014/05/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%8A%B9%E6%9E%9C%E3%81%AE%E9%AD%85%E5%8A%9B%E3%82%92%E5%BE%B9%E5%BA%95%E7%B4%B9%E4%BB%8B/</a></p>
<p>&nbsp;</p>
<p>2-13 モバイル・ファースト</p>
<p>スマホ割合が年々増えている中で当然の対応</p>
<p><a href="http://www.channelnewsasia.com/" target="_blank"> http://www.channelnewsasia.com/</a></p>


【Webデザイン】2015年 上半期のトレンド

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

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


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

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

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


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

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


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

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


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

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


マテリアルデザイン(material design)の基本の基本についてまとめてみました

ECサイトでよくある横並びのリストのいろいろなコーディング方法

<p>昨今のwebサイトデザインにはアイコンが欠かせないと言っていいかと思います。<br />
テキストより絵で視覚的に訴える方が強いです。</p>
<p>しかし、アイコンを制作していたら時間がかかってしまいます。<br />
ましてやそんなアイコンを作る絵心・センスがない・・・<br />
お客さんには費用がかかってしまう・・・</p>
<p>そんな時には、フリーで使えるアイコンを使用するのが良いかと思います。<br />
僕はアイコンつくれないので、必死に探して、適切なものを使用しています。</p>
<p>早速紹介したいと思います。</p>
<h2>FLAT ICON DESIGN</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7208" src="/uploads-archive/2015/03/20150331-1024x616.jpg" alt="20150331" width="640" height="385" srcset="/uploads-archive/2015/03/20150331-1024x616.jpg 1024w, /uploads-archive/2015/03/20150331-300x181.jpg 300w, /uploads-archive/2015/03/20150331-228x137.jpg 228w, /uploads-archive/2015/03/20150331.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>流行り(?)のフラットデザインのアイコンが豊富にあります！<br />
しっかりしたアイコンなのに無料！<br />
ai,eps,jpg,png,svgの形式でダウンロードできます。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://flat-icon-design.com/" target="_blank">FLAT ICON DESIGN -フラットアイコンデザイン-</a></p>
<h2>Endless Icons</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7209" src="/uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-1024x616.jpg" alt="Endless Icons  Free Icon Library" width="640" height="385" srcset="/uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-1024x616.jpg 1024w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-300x181.jpg 300w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-228x137.jpg 228w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>シルエット的なシンプルなアイコンが揃っています。<br />
Tag付されており、探しやすいです！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.endlessicons.com/" target="_blank">Endless Icons | Free Icon Library</a></p>
<h2>アイコン配布中！</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7210" src="/uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-1024x616.jpg" alt="リアルアイコン一覧　～TOUCH＆SLIDEが運営する編集可能なアイコンがダウンロードできる「アイコン配布中！」～" width="640" height="385" srcset="/uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-1024x616.jpg 1024w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-300x181.jpg 300w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-228x137.jpg 228w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>今はもうあんまりなくなってしまったかもしれない・・・リアルなアイコン、<br />
そしてシルエットアイコンをダウンロードできます。<br />
リクエストも受付しているようです！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://icon.touch-slide.jp/real/" target="_blank">リアルアイコン一覧　～TOUCH＆SLIDEが運営する編集可能なアイコンがダウンロードできる「アイコン配布中！」～</a></p>
<p>&nbsp;</p>
<p>一昔前ならこのクオリティのアイコン達は無料なんかでゲット出来なかったのですが、<br />
いい時代になりました・・・（みんな同じアイコンばっかり使って画一的になりそう気もしますが・・・）</p>
<p>本当は自分でサッと作れたらいいなぁ。。。</p>


フラットアイコンやシンプルなアイコンを無料でダウンロードできるサイト

<p>以前、CSSの優先順位についての記事を書いたのですが、<br />
<a href="/designer/%e5%88%9d%e7%b4%9a%e8%80%85%e3%81%af%e6%84%8f%e5%a4%96%e3%81%a8%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e3%81%aa%e3%81%84css%e3%81%ae%e5%84%aa%e5%85%88%e9%a0%86%e4%bd%8d%e3%81%ab%e3%81%a4%e3%81%84.html">初級者は意外と理解してない(?)CSSの優先順位について | スターフィールド株式会社</a></p>
<p>その順位をチェックできるツールがありました。<br />
ポイント制になっておりわかりやすくなっています。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7175" src="/uploads-archive/2015/03/Specificity-Calculator-1024x591.jpg" alt="Specificity Calculator" width="640" height="369" srcset="/uploads-archive/2015/03/Specificity-Calculator-1024x591.jpg 1024w, /uploads-archive/2015/03/Specificity-Calculator-300x173.jpg 300w, /uploads-archive/2015/03/Specificity-Calculator-228x132.jpg 228w, /uploads-archive/2015/03/Specificity-Calculator.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>「+Duplicate」で比べたいセレクタを追加し、左上にある「Sort by specificity」を押すと、高い順に並べてくれます。</p>
<p><a class="link" href="http://specificity.keegan.st/" target="_blank">Specificity Calculator</a></p>
<h2>CSS3のブラウザサポート表</h2>
<h3>HTML5 &amp; CSS3 Web Design</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7174" src="/uploads-archive/2015/03/HTML5-CSS3-Web-Design-1024x591.jpg" alt="HTML5 &amp; CSS3 Web Design" width="640" height="369" srcset="/uploads-archive/2015/03/HTML5-CSS3-Web-Design-1024x591.jpg 1024w, /uploads-archive/2015/03/HTML5-CSS3-Web-Design-300x173.jpg 300w, /uploads-archive/2015/03/HTML5-CSS3-Web-Design-228x132.jpg 228w, /uploads-archive/2015/03/HTML5-CSS3-Web-Design.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" /><br />
各css3がどのブラウザに対応しているかを表にしているサイトです。わかりやすいですね！</p>
<p><a class="link" href="http://fmbip.com/litmus/" target="_blank">HTML5 &amp; CSS3 Web Design</a></p>
<h3>Can I use&#8230; Support tables for HTML5, CSS3, etc</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7176" src="/uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-1024x591.jpg" alt="Can I use... Support tables for HTML5, CSS3, etc" width="640" height="369" srcset="/uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-1024x591.jpg 1024w, /uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-300x173.jpg 300w, /uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-228x132.jpg 228w, /uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>こちら同様ですが、もっと細かく別れており、詳細ページへ行くと以下のようにわかり易く表示してくれています。こちらのサイトの方がブラウザ、バージョンの数は多いですね。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7177" src="/uploads-archive/2015/03/Can-I-use...-Support-tables-1024x591.jpg" alt="Can I use... Support tables" width="640" height="369" srcset="/uploads-archive/2015/03/Can-I-use...-Support-tables-1024x591.jpg 1024w, /uploads-archive/2015/03/Can-I-use...-Support-tables-300x173.jpg 300w, /uploads-archive/2015/03/Can-I-use...-Support-tables-228x132.jpg 228w, /uploads-archive/2015/03/Can-I-use...-Support-tables.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>赤がサポート外ですね。<br />
あとそれぞれの四角い項目にマウスオンすると、そのブラウザ（＆バージョン）のシェアの％を教えてくれます。<br />
便利ですね！</p>
<p><a class="link" href="http://beta.caniuse.com/" target="_blank">Can I use&#8230; Support tables for HTML5, CSS3, etc</a></p>
<p>これらを見ると、今はほぼIE9以上の対応でいい雰囲気なので、</p>
<p>・Box Sizing<br />
・Border Radius<br />
・Box Shadow<br />
・Background Size<br />
・CSS Transforms<br />
・nth-child等の擬似要素</p>
<p>なんかはもう普通に使用してもいいかもしれませんね！<br />
これを使用できるだけでだいぶ違いますね〜</p>
<p>あとはcss animationやcss transitionが使えるようになると変わりますね。</p>


CSSの優先順位をチェックできるツール＆CSS3のブラウザサポート表

<p>背景に動画を設置しているサイトをよく見ると思います。</p>
<p>ページ全体に表示するのはcssだけでできるので、実装はかなりシンプルにできます。</p>
<h2>videoで動画を挿入する</h2>
<p></p>

		<div id="crayon-649540158539e622024199" 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></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;video autoplay loop poster="image/sampleposter.jpg" id="sampleVideo"&gt;
&lt;source src="video/shinjuku.mp4" type="video/mp4"&gt;
&lt;source src="shinjuku.webm" type="video/webm"&gt;
&lt;source src="shinjuku.ogv" type="video/ogv"&gt;
&lt;/video&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-649540158539e622024199-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158539e622024199-2">2</div><div class="crayon-num" data-line="crayon-649540158539e622024199-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158539e622024199-4">4</div><div class="crayon-num" data-line="crayon-649540158539e622024199-5">5</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-649540158539e622024199-1"><span class="crayon-h">&lt;</span><span class="crayon-e">video </span><span class="crayon-e">autoplay </span><span class="crayon-e">loop </span><span class="crayon-i">poster</span>=<span class="crayon-s">"image/sampleposter.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"sampleVideo"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158539e622024199-2"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/shinjuku.mp4"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/mp4"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158539e622024199-3"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"shinjuku.webm"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/webm"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158539e622024199-4"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"shinjuku.ogv"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/ogv"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158539e622024199-5"><span class="crayon-h">&lt;</span>/<span class="crayon-i">video</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>autoplayにしておいて、videoに対応していないブラウザの為にposterを設定しておきます。</p>
<p>動画素材はブラウザによって形式が異なるので、mp4、webmの２つを用意する必要があります。</p>
<p>各ブラウザへの対応状況は以下を参考にしてください。</p>
<p><a href="/uploads-archive/2015/03/mp4.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-7166" src="/uploads-archive/2015/03/mp4.png" alt="mp4" width="326" height="190" srcset="/uploads-archive/2015/03/mp4.png 642w, /uploads-archive/2015/03/mp4-300x175.png 300w, /uploads-archive/2015/03/mp4-228x133.png 228w" sizes="(max-width: 326px) 100vw, 326px" /></a></p>
<p><a href="http://caniuse.com/#search=mp4">http://caniuse.com/#search=mp4</a></p>
<p><a href="/uploads-archive/2015/03/webm.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-7167" src="/uploads-archive/2015/03/webm.png" alt="webm" width="322" height="196" srcset="/uploads-archive/2015/03/webm.png 642w, /uploads-archive/2015/03/webm-300x183.png 300w, /uploads-archive/2015/03/webm-228x139.png 228w" sizes="(max-width: 322px) 100vw, 322px" /></a></p>
<p><a href="http://caniuse.com/#search=WebM">http://caniuse.com/#search=WebM</a></p>
<p>ファイルフォーマットの変換は編集ソフトで吐き出す際に変換できる場合もありますが、フリーのコンバーターも結構あるので探してみて下さい。</p>
<h2>動画を背景に設定する</h2>
<p></p>

		<div id="crayon-64954015853a2854513256" 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;">
#sampleVideo {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -10;
  background: url(image/sampleposter.jpg) no-repeat;
  background-size: cover;
}</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-64954015853a2854513256-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-2">2</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-4">4</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-6">6</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-7">7</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-64954015853a2854513256-1"><span class="crayon-k ">#sampleVideo </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">fixed</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">right</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">bottom</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">min-width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">min-height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">z-index</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">-10</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-i ">image/sampleposter.jpg</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">no-repeat</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">background-size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">cover</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-7"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>videoを右下に設置して、幅と高さをauto、さらに最少値をどちらも100%にします。</p>
<p>対応していないブラウザためにbackgroundに静止画を設置します。</p>
<p>&nbsp;</p>
<p>今回使用した動画はNHKのライブラリー（フリー）から持ってきたのでかなり粗いのですが、通常背景に設置する場合はHDで撮影した動画の方が良いと思います。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/makabe/01/01demo.html">DEMO</a></p>

動画：cssでvideoを背景に使う

<p>GoogleからMaterial Designが提唱され、しばらく経ち広まっているかどうかは定かではないのですが、制作にするのに便利なサービスを発見したので、紹介したいと思います。</p>
<p>まずは、Material Designとはなにかということは以下のサイトからご覧ください。<br />
<a href="http://www.google.com/design/spec/material-design/introduction.html">Introduction &#8211; Material design &#8211; Google design guidelines</a></p>
<p>&nbsp;</p>
<h2>フレームワーク</h2>
<p>&nbsp;</p>
<h3>MUI</h3>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7069" src="/uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-1024x605.jpg" alt="MUI - Material Design CSS Framework" width="620" height="366" srcset="/uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-1024x605.jpg 1024w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-300x177.jpg 300w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-228x135.jpg 228w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /><br />
ひと通りのコンポーネントが揃っているかと思います。</p>
<p><a class="link" href="https://www.muicss.com/" target="_blank">MUI &#8211; Material Design CSS Framework</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Materialize</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7065" src="/uploads-archive/2015/03/Documentation-Materialize-1024x605.jpg" alt="Documentation - Materialize" width="620" height="366" srcset="/uploads-archive/2015/03/Documentation-Materialize-1024x605.jpg 1024w, /uploads-archive/2015/03/Documentation-Materialize-300x177.jpg 300w, /uploads-archive/2015/03/Documentation-Materialize-228x135.jpg 228w, /uploads-archive/2015/03/Documentation-Materialize.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /><br />
上記のサイトよりも豊富で、jQueryの動きもけっこうあります。</p>
<p><a class="link" href="http://dogfalo.github.io/materialize/" target="_blank">Documentation &#8211; Materialize</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Material UI</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7068" src="/uploads-archive/2015/03/Material-UI-Material-Design-React-Components-1024x605.jpg" alt="Material UI - Material Design React Components" width="620" height="366" srcset="/uploads-archive/2015/03/Material-UI-Material-Design-React-Components-1024x605.jpg 1024w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components-300x177.jpg 300w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components-228x135.jpg 228w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /></p>
<p>こちらもひと通りのコンポーネントが揃っています。<br />
&nbsp;<br />
<a class="link" href="http://material-ui.com/#/" target="_blank">Material UI &#8211; Material Design React Components</a><br />
&nbsp;<br />
&nbsp;<br />
どのフレームワークもひと通りコンポーネントは揃っており、アニメーションでそれぞれ少しづつ違う感じです。<br />
パッと見て良さそうなのは、Materializeかなと思います。</p>
<p>&nbsp;</p>
<h2>配色ツール</h2>
<p>&nbsp;</p>
<h3>Material Palette</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7066" src="/uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-1024x597.jpg" alt="Material Design Color Palette Generator - Material Palette" width="620" height="361" srcset="/uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-1024x597.jpg 1024w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-300x175.jpg 300w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-228x133.jpg 228w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette.jpg 1120w" sizes="(max-width: 620px) 100vw, 620px" /><br />
こちらは２つの色を選ぶと、<br />
その色に合わせて簡単なカラーパレットを教えてくれます。</p>
<p><a class="link" href="http://www.materialpalette.com/" target="_blank">Material Design Color Palette Generator &#8211; Material Palette</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Material UI Colors</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7067" src="/uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-1024x597.jpg" alt="Material UI  Material Design  Material UI Colors" width="620" height="361" srcset="/uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-1024x597.jpg 1024w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-300x175.jpg 300w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-228x133.jpg 228w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors.jpg 1120w" sizes="(max-width: 620px) 100vw, 620px" /><br />
色数が豊富で、色情報をいろんな形式でコピーすることができます。</p>
<p><a class="link" href="http://www.materialui.co/colors" target="_blank">Material UI | Material Design | Material UI Colors</a></p>
<p>今後どんどん便利なサービスが出てくるかと思います。<br />
これらを上手いこと使いながら良いサイトを作りたいですね！！</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Web

2015/08/26

2015/08/05

2015/06/30

2015/06/17

2015/06/10

2015/06/10

2015/05/28

2015/05/13

2015/04/22

2015/04/22

2015/04/15

2015/04/01

2015/03/25

2015/03/25

2015/03/11

2015/02/27

2015/02/27

2015/02/11