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

2015年も様々なWebデザイン、フロントエンドツールが生まれていました

今回はその中でも今年特に話題になった、Webデザイン・フロントエンドツールを50選紹介します。日本ではあまり話題にはならかったけれども、導入したくなるような魅力的なツールが、数多く揃っているので是非御覧ください。

2015年Webデザイナー向けツール50選

それぞれ次のようにまとめているので、興味のあるところから見ていきましょう！

• 素材収集サイト（12）
• カラーセレクトツール（5）
• 情報収集サイト・インスピレーションサイト（8）
• 便利なJavaScriptライブラリ（6）
• Webデザイナー向け一般ツール（19）

素材収集サイト

アイコンや画像などWebデザインにおいて欠かせない素材集集サイトがこの2015年にもたくさん新登場しました。その中でも特に使える室の良いフリー素材サイトをご紹介していきます。

Facebookデザイナーが作成したフリー素材集

サイトリンク：「Facebook Design Resources」

ハイクオリティ画像収集サイト

サイトリンク：「Stock Up 2.0」

高クオリティ画像検索サイト

サイトリンク：「Pexels 2.0」

一流デザイナーによるフリーアイコン集

サイトリンク：「IconStore」

必須アイコン集8000個

サイトリンク：「Nova」

美しい、カスタム可能なアニメGIFアイコン集

サイトリンク：「Animaticons」

アイコンを簡単に探す、使うためのツール

サイトリンク：「Iconjar」

美しいアイコンのプラットフォーム

サイトリンク：「Glyphs Company」

BootstrapやWordPressなどのテンプレテーマキュレーションサイト

サイトリンク：「Template Stash」

美しいハイクオリティ画像収集サイト

サイトリンク：「MyStockPhotos」

１万以上のハイクオリティな画像収集サイト

サイトリンク：「Tookapic Stock Photos」

芸術的な無料の画像集

サイトリンク：「Skuawk Public Domain Photos」

カラーセレクトツール

少しカラーコードが違うだけでも、全く変わった印象を受ける「色」。その色選択で迷った時の手助けとなるような「色」に関するサイトをご紹介します。

様々なWebサイトのカラーコードをクリックひとつで取得できるサービス

サイトリンク：「Social Colors」

美しい色の組み合わせのキュレーションサイト

サイトリンク：「Color Hunt」

マテリアルデザインのカラーパレットサイト

サイトリンク：「Material UI Colors」

カラーパレットを簡単に見つけるツール

サイトリンク：「PLLTS」

シンプルで美しいCSS3 グラデーションを作成するツール

サイトリンク：「Blend」

情報収集サイト・インスピレーションサイト

最新のWebデザイン動向を知る上でも、どこのWebサイトから情報を仕入れるのかは大切なところ。また、日々いろいろなWebデザインに触れることでインスピレーションを受け、「良い」と思えるものを体に染み込ませることも大切です。その一助となるような、情報サイトをご紹介します。

UI/UX関連情報キュレーションサイト

サイトリンク：「uxmill」

日々の素晴らしいUIデザインキュレーションサイト

サイトリンク：「UI Movement」

ランディングページのインスピレーションを受けるキュレーションサイト

サイトリンク：「LandingFolio」

日々のUI要素100個

サイトリンク：「100 Days UI」

iOS/Macの創造的なデザインキュレーションサイト

サイトリンク：「iOS-up」

素晴らしいWebデザインのキュレーションサイト

サイトリンク：「Inspirizone」

ランディングページのインスピレーションを受けるキュレーションサイト

サイトリンク：「Lapa」

モダンなWebサイトを作るのに役立つ書体インスピレーションサイト

サイトリンク：「Typewolf」

便利なJavaScriptライブラリ

何かと便利なJavaScriptライブラリ。今年もWebデザイナーやフロントエンドエンジニアが、様々なJavaScriptライブラリを公開しました。その中でも導入してみたくなるような、魅力的なライブラリをまとめています。

ガイド機能を簡単に付けられるJavaScript

サイトリンク：「Intro.js v2.0」

簡単に画像の色を抽出してカスタムできるJavaScript

サイトリンク：「Colorify.js」

講座認証を可能にするJavaScript

サイトリンク：「Dwolla.js」

一瞬で美しいブッキングウィジェットを埋め込めるJavaScript

サイトリンク：「Booking.js by Timekit」

最高の検索UIを実現するJavaScript

サイトリンク：「instantsearch.js by Algolia」

日付を細かく設定して表示まで簡単にできるJavaScript

サイトリンク：「Moment.js」

Webデザイナー向け一般ツール

その他、一般的にWebデザイナー向けのツールをご紹介します。かゆいところに手が届くようなツールが今年は沢山そろっています。ぜひご活用ください。

スマホ上でアプリのモックアップを作成

サイトリンク：「Inspr」

どのUIが効果あり？15のA/Bテスト結果

サイトリンク：「GoodUI Evidence」

コーディング不要！簡単に3D効果をCSSでつけるツール

サイトリンク：「Webflow 3D Transforms」

リアルな手書き文章を作成するAPI

サイトリンク：「Handwriting.io」

ノンコードでWebアプリを作成するビジュアルプログラミング

サイトリンク：「Bubble」

Web上で簡単にサイトへフィードバックを送ったり、共有できるChrome拡張

サイトリンク：「Codesign.io for Chrome」

プロのように写真の配色調整が簡単にできるスマホアプリ

サイトリンク：「Show & Hide」

フロントエンドエンジニア・デザイナーの主要ツール一覧

サイトリンク：「Front-End List」

スタイルガイドを５分以内に作成するツール

サイトリンク：「Frontify」

同時共同でデザインを作成するツール

サイトリンク：「Figma」

驚くほど画面録画を簡単にしたツール

サイトリンク：「ilos」

効率的にレスポンシブデザインを作成するためのSketchプラグイン

サイトリンク：「Fluid for Sketch」

動画をGIFに驚異的に簡単にしたツール

サイトリンク：「Drop to GIF」

SNSにフィットする完璧な画像を簡単に作成するツール

サイトリンク：「Pablo 2.0 by Buffer」

UX/UIデザイン、プロトタイピングツール

サイトリンク：「Adobe Comet」

あらゆるデバイスで、あらゆるデザインのWebサイトを作る無料ツール

サイトリンク：「Weld Websites」

ソースコードで書体を作成するツール

サイトリンク：「Hack」

美しいインタラクションを最速で設計するツール

サイトリンク：「Atomic」

URLを入力すると自動でLOGOを取得するAPI

サイトリンク：「Company Logo API」

終わりに

いかがでしたか？画像探しや、デザインのインスピレーション、デザイントレンド、などなど、Webデザイナーやフロントエンドエンジニアにとっては、これまで使っていた似たようなツール以上のものがあったのではないでしょうか。

もし今回使ってみたいツールを見つけましたら、実際に導入してみてもいいかもしれませんね。

こちらの記事もお勧めです
「2015年リリースされ、海外で話題になったWebエンジニアツール24選」