【2016年上半期】海外で話題になったWebデザイナー向けツール24コ

【2016年上半期】海外で話題になったWebデザイナー向けツール24コ

2016年ももう8月ですね。普段使い慣れているWebデザインツールがあると思いますが、新しいツールにも触れていますか?2016年の上半期だけを見ても、海外では様々なデザインツールが話題になっていました。

この記事では、2016年1月〜6月までに、海外で話題になっていたWebデザイナー向けツールを24コ紹介します。日本にまでは届いていなかったツールも紹介しているので、休日のちょっとした空き時間に試しに使ってみてくださいね。

また、2015年で話題になったツールをまだ確認していない方は、こちらも合わせてどうぞ。

リンク:「【総まとめ】2015年海外で話題になったWebデザイナ―ツール50選

今回の記事では4つのカテゴリに分けて、ツールを紹介しています。

  • キット・ツール・ライブラリ等(10コ)
  • デザイン変遷(2コ)
  • デザイン素材(4コ)
  • デザインキュレーション・インスピレーション(8コ)

■キット・ツール・ライブラリ等

Webデザインをしていく上で、使えそうなツールなどをまとめています。

柔軟なアニメーションを描けるJavaScriptライブラリ「anime.js」

01

リンク:「anime.js

ワンクリックでどんなサイトもワイヤーフレームに変換「Wirify」

02

リンク:「Wirify

 

Webページの各要素のフォント設定を試せる「typeanything」

スクリーンショット 2016-08-12 18.53.19

リンク:「typeanything

実際に文字を見ながら簡単に細かい調整ができるので便利です。

指定したサイトのフォントを自由自在に調整できるサイト「Font fit」

スクリーンショット 2016-08-12 19.21.33

URLを指定してあげるだけで、そのサイト上の特定のフォントを変更できます。例えば、ボタンだけやbody内だけ、といったように指定できます。

リンク:「Font fit

Googleフォントを微調整して取得できる「Google Fonts」

リンク:「Google Fonts

Sketch用のメッセージデザインキット「Messaging Design Kit」

06

リンク:「MessagingDesign Kit

シンプルなCSSグリッド「Simple Grid」

http://simplegrid.io/

リンク:「Simple Grid

プロトタイプ制作のためのワイヤーフレームキット「Platforma Wireframe Kit」

04

リンク:「Platforma WireframeKit

ポンポンと選んで少し修正を加えるだけで、つくろうとしているLPなどのプロトタイプが完成します。さらっと作ってすぐにイメージを共有できます。

メッセージでのBOT用UIキット「Bots UI Kit」

スクリーンショット 2016-08-12 19.03.22

 

リンク:「Bots UI Kit

コードを書かずにフレキシブルでレスポンシブなレイアウトが作れる「Meet the first visual flexboxbuilder」

10

 

リンク:「Meet the firstvisual flexbox builder

■デザイン変遷

アプリやサイトなどの、デザインがどう変遷を遂げて現在に至るのかを覗いて見ましょう。

Instagramなどの有名アプリのデザイン変遷が年ごとに覗ける「Great Apps Timeline」

スクリーンショット 2016-08-12 19.06.03

 

リンク:「Great AppsTimeline

いきなり100%のデザインは作れませんし、時代の流れとともに変化するユーザーの感性に合わせて、アプリのデザインは変化しています。その変遷を1年とごとに見比べて、デザインの流れ、ユーザーの好みの流れを読み解きましょう。

NASAのサイトで見る、1991年からのWebデザインの進化変遷「The Evolution OfWebdesign」

スクリーンショット 2016-08-12 19.06.52

リンク:「TheEvolution Of Webdesign

■デザイン素材

アイコンやボタンといった、Webデザインに使用する素材を探すためのサイトをまとめています。今までもそういったサイトはありましたが、新しく登場したサイトは、使いやすくなっていたり、機能が多かったりしています。

大量のアイコン素材を選んで加工までできる「illustrio」

11

リンク:「illustrio

イケてるボタンエフェクト素材「Distorted Button Effects」

movie

リンク:「DistortedButton Effects

サイト内でボタンをクリックすると、どんな動きをするのか確かめられるので、是非押してみてください。

無料のあらゆるWeb素材を集めた「Freebiesbug」

スクリーンショット 2016-08-12 19.13.25

リンク:「Freebiesbug

簡単に企業やブランドロゴを検索できる「Instant Logo Search」

スクリーンショット 2016-08-12 19.15.25

リンク:「Instant LogoSearch

■デザインキュレーション・インスピレーション

日々様々なサイトが作られ、新しいデザインが生まれています。最新のデザインから流行を読み解いたり、新しいデザイン制作のヒントにしてみてください。

UIのインスピレーションを浴びるキュレーションサイト「UI Interactions」

スクリーンショット 2016-08-12 19.19.16

リンク:「UIInteractions

美しいモダンなWebサイトギャラリー「SiteSee」

 

スクリーンショット 2016-08-12 19.14.43

リンク:「SiteSee

デザインキュレーションサイト「Design Hunt for Web」

スクリーンショット 2016-08-12 19.15.53

リンク:「Design Hunt forWeb

美しいWebサイトやデザイナー向け素材のキュレーションサイト「FreshDesign.io」

 

スクリーンショット 2016-08-12 19.16.37

リンク:「FreshDesign.io

カラーパレットのインスピレーションサイト「LOL Colors」

スクリーンショット 2016-08-12 19.17.04

リンク:「LOL Colors

UIデザインのキュレーションサイト「Collect UI」

 

スクリーンショット 2016-08-12 19.17.38

リンク:「Collect UI

デザインキュレーションサイト「Muzli」

スクリーンショット 2016-08-12 19.18.11

リンク:「Muzli

Eコマースサイト製作者のための、デザイン・技術のインスピレーションサイト「ecomm.design」

スクリーンショット 2016-08-12 19.18.46

リンク:「ecomm.design

終わりに

今回は「Webデザイナーツール」をまとめました。

他にも

  • Webエンジニアツール
  • 仕事に役立つツール
  • 生活を豊かにするツール

を同じく2016年上半期海外で話題になったものに絞って紹介します。この記事が気に入っていただけましたら、上記3つもチェックしてくださいね。SNSなどで更新情報を配信しているので、よかったらフォローしてください。

FBTwitter

関連するまとめ

このまとめに関するまとめ

アクセスランキング

最近アクセス数の多い人気のまとめ