もろもろツール系リンク集

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/)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA