ツールリンク集
もろもろツール系リンク集
Inkscape:ベクター画像を作成・編集できるソフト
GIMP:画像処理ソフト
Figma:WEBデザイン ツール
アイブロウヘッドライン
[https://uxmilk.jp/75005](https://uxmilk.jp/75005)
錯視
[https://youtu.be/oWfFco7K9v8](https://youtu.be/oWfFco7K9v8)
ボイスファースト
VUI
[https://www.slideshare.net/yukio.andoh/voice-ui-designer-meetup-tokyo-vui](https://www.slideshare.net/yukio.andoh/voice-ui-designer-meetup-tokyo-vui)
Aframe
[https://aframe.io/docs/0.8.0/introduction/](https://aframe.io/docs/0.8.0/introduction/)
サイトファポーマンス測定
[https://developers.google.com/speed/pagespeed/insights/?hl=ja](https://developers.google.com/speed/pagespeed/insights/?hl=ja)
コードを書きながらデザインできる「Hadron」
[https://www.webprofessional.jp/designed-code-editor-hadron-released-preview-version/](https://www.webprofessional.jp/designed-code-editor-hadron-released-preview-version/)
正規表現
[http://kyu-mu.net/coffeescript/regexp/](http://kyu-mu.net/coffeescript/regexp/)
スクロールに合わせ画像表示
(eachで複数一括設定 / jQuery)
[http://qiita.com/39_isao/items/4ae594df83911b9acf32](http://qiita.com/39_isao/items/4ae594df83911b9acf32)
JavaScriptでDOM操作(jQなどライブラリを使わない) [http://qiita.com/kouh/items/dfc14d25ccb4e50afe89](http://qiita.com/kouh/items/dfc14d25ccb4e50afe89)
Google、ジャーナリズムのためのデータやツールを提供「News Lab」 [https://newslab.withgoogle.com/](https://newslab.withgoogle.com/)
テキストに動きをつける
[http://textillate.js.org/](http://textillate.js.org/)
CSS の :after でアイコン追加と上下中央配置
[http://h2ham.net/add-icon-after-and-middle](http://h2ham.net/add-icon-after-and-middle)
z-index の重なり順を維持したまま背面要素の操作を可能にする 前面要素に pointer-events: none; を指定 IE 10 以下を除けば、ほぼすべてのブラウザで利用できます
mac OSX yosemite にバーチャルホスト設定 HD/etc/apache2/httpd.conf HD/etc/apache2/extra/httpd-vhosts.conf HD/etc/hosts を修正
[http://qiita.com/hrkd/items/2dd624d31292f142efb6](http://qiita.com/hrkd/items/2dd624d31292f142efb6)[http://negimemo.net/2488](http://negimemo.net/2488)
CSS解析:style stats
[http://www.stylestats.org/](http://www.stylestats.org/)
チュートリアルが作れるIntro.js
[http://introjs.com/](http://introjs.com/)[http://blog.livedoor.jp/sasata299/archives/51891797.html](http://blog.livedoor.jp/sasata299/archives/51891797.html)
年表が作れるjqtimeline.js
[http://www.skuare.net/2013/05/jqueryjqtimeline.html](http://www.skuare.net/2013/05/jqueryjqtimeline.html)
オーバーレイで説明表示 Chardin.js
[http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-chardin-js.html](http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-chardin-js.html)
—
## WEB DESING TOOL
Sketch
[http://bohemiancoding.com/sketch/](http://bohemiancoding.com/sketch/)[http://web-layman.com/charm-of-sketch-3/](http://web-layman.com/charm-of-sketch-3/)
—
## text-shadowをanimateさせるプラグイン
[http://alexpeattie.com/projects/animate-textshadow/](http://alexpeattie.com/projects/animate-textshadow/)
—
## ヘッダー固定だけど、、、
[http://wicky.nillia.ms/headroom.js/playroom/](http://wicky.nillia.ms/headroom.js/playroom/)
—
## ページ遷移時のアニメーション
[http://git.blivesta.com/animsition/](http://git.blivesta.com/animsition/)
—
## 文字のアニメーション、装飾、変形など
[http://infinityforest.net/home/archives/2831](http://infinityforest.net/home/archives/2831)[http://tuxsudo.com/code/project/letterfx](http://tuxsudo.com/code/project/letterfx)[http://jschr.github.io/textillate/](http://jschr.github.io/textillate/)
—
## 1ページごとに表示、スクロールさせる
fullPage.js
[http://alvarotrigo.com/fullPage/#firstPage](http://alvarotrigo.com/fullPage/#firstPage)
—
## 子要素をスクロールするときは、ウィンドウをスクロールしない
[http://qiita.com/suin/items/23f31f580f9c5d8ab2f3](http://qiita.com/suin/items/23f31f580f9c5d8ab2f3)
—
Grid displayer
[http://alefeuvre.github.io/foundation-grid-displayer/](http://alefeuvre.github.io/foundation-grid-displayer/)
—
viewport resizer
[http://lab.maltewassermann.com/viewport-resizer/](http://lab.maltewassermann.com/viewport-resizer/)
—
Whatfont Tool
[http://chengyinliu.com/whatfont.html](http://chengyinliu.com/whatfont.html)
—
Wirify
[http://www.wirify.com/](http://www.wirify.com/)
—
Subtle Patterns Bookmarklet
[http://bradjasper.com/subtle-patterns-bookmarklet/](http://bradjasper.com/subtle-patterns-bookmarklet/)
—
OuiSEO
[http://moz.com/ugc/a-onestop-seo-bookmarklet-that-includes-social-metadata](http://moz.com/ugc/a-onestop-seo-bookmarklet-that-includes-social-metadata)
—
Google カレンダーガンチャート
[http://gigazine.net/news/20150402-ganttplanner/](http://gigazine.net/news/20150402-ganttplanner/)
—
3D Curtain Template
[http://codyhouse.co/demo/3d-curtain-template/index.html](http://codyhouse.co/demo/3d-curtain-template/index.html)
js 複数のクラスを取得
[http://qiita.com/konojunya/items/a909aa1e8d685f1ea545](http://qiita.com/konojunya/items/a909aa1e8d685f1ea545)
レスポニシブ対応 フリップコンテンツ
[http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-flipster.html](http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-flipster.html)
ソートをアニメーションで理解
[http://sorting.at/](http://sorting.at/)
小技集
CSSだけでレスポシンブ対応のiframe動画
[http://www.webcreatorbox.com/tech/css-tips-2/](http://www.webcreatorbox.com/tech/css-tips-2/)
—
## デザイン参考サイト
子供向け、仕掛けが盛りだくさん
[http://joha.dk/en/our-wool](http://joha.dk/en/our-wool)
[fashionsnap.com](http://fashionsnap.com/)
見せ方に工夫を感じるニュース系サイト。良し悪しは別。
[http://www.fashionsnap.com/](http://www.fashionsnap.com/)
レイアウトUI
[https://dribbble.com/shots/2304849-Lystable-UI-X-Style-Guide](https://dribbble.com/shots/2304849-Lystable-UI-X-Style-Guide)[http://coliss.com/articles/build-websites/operation/design/style-guides-for-ui-design.html](http://coliss.com/articles/build-websites/operation/design/style-guides-for-ui-design.html)
—
## デザイン学習サイト
色当て
[http://color.method.ac/](http://color.method.ac/)
パス
[http://bezier.method.ac/](http://bezier.method.ac/)
カーニング
[http://type.method.ac/#](http://type.method.ac/#)
—
## GIFアニメーション
ニュースサイトではなかなか使いどころの無いgifアニメ
プレイヤーいらずで動きのある絵を見せられる
使い方によって面白い効果
写真とGIFアニメの組み合わせ シネマグラム
[https://giphy.com/search/cinemagram](https://giphy.com/search/cinemagram)
飛び出すGIFアニメ
[http://gigazine.net/news/20140301-3d-gif-animation/](http://gigazine.net/news/20140301-3d-gif-animation/)[http://www.huffingtonpost.jp/2015/03/24/3d-gifs_n_6936446.html](http://www.huffingtonpost.jp/2015/03/24/3d-gifs_n_6936446.html)
立体感のあるGIFアニメ
[http://gif89a.net/how-to-make-3d-gif/](http://gif89a.net/how-to-make-3d-gif/)[http://karapaia.com/archives/51756580.html](http://karapaia.com/archives/51756580.html)
低画質ならではの雰囲気
[http://cre-m.jp/movie_925/](http://cre-m.jp/movie_925/)
GIFアニメ アーティストの作品
[http://cre-m.jp/movie_918/](http://cre-m.jp/movie_918/)
ネタ系:ドット絵との相性バツグン
[https://blog-001.west.edge.storage-yahoo.jp/res/blog-b2-21/akamsan100/folder/570498/27/17612627/img_1?1288601506](https://blog-001.west.edge.storage-yahoo.jp/res/blog-b2-21/akamsan100/folder/570498/27/17612627/img_1?1288601506)
[https://gifmagazine.net/?locale=ja](https://gifmagazine.net/?locale=ja)
ニコニコ静画
国際GIFアニメアワード 2014まで
[http://portal.nifty.com/iaga2014/](http://portal.nifty.com/iaga2014/)
GIF関連の記事
[https://wired.jp/2017/06/16/gif-turns-30/](https://wired.jp/2017/06/16/gif-turns-30/)
the GIFs 2017 コンテスト
[http://thegifs.net/](http://thegifs.net/)[https://gifmagazine.net/contests/theGifs2016](https://gifmagazine.net/contests/theGifs2016)[https://gifmagazine.net/contests/theGifs2015](https://gifmagazine.net/contests/theGifs2015)
素材
・絵(文字)
・写真
・動画
アプリ
[https://mag.app-liv.jp/archive/66721](https://mag.app-liv.jp/archive/66721)
・複数をコラージュ、斜めに加工、一部を白黒
APNG (a)
[https://ics.media/entry/2441](https://ics.media/entry/2441)
GIFアニメに変わる規格
APNG
MNG
XNG
—
組み合わせ
・画像の遅延読み込み、表示エリアに入ったら読み込み(スタート)
—
フォント
もじうご:意味に合わせて文字に動きをつける
[http://type.center/columns/9874](http://type.center/columns/9874)
カラーフォント:最初から色が付いてる文字
[https://ferret-plus.com/7626](https://ferret-plus.com/7626)[https://coliss.com/articles/build-websites/operation/design/colorfont-week-by-fontself.html](https://coliss.com/articles/build-websites/operation/design/colorfont-week-by-fontself.html)
アニメーションフォント
[https://www.shutterstock.com/ja/blog/free-animated-font](https://www.shutterstock.com/ja/blog/free-animated-font)[https://www.youtube.com/watch?v=xo7HviXZ0cQ](https://www.youtube.com/watch?v=xo7HviXZ0cQ)
—
## デザイン システム
Nachos
[https://design.trello.com/](https://design.trello.com/)