Advertisement

50webtool-2016

 

2016年にリリースされた、ウェブデザインの制作時間を節約できる無料ウェブツールやアプリをまとめてご紹介します。インストールなどする必要もなく、ブックマークしておけばいざという時にも便利です。

 

今回は、デザインツールを以下のカテゴリーごとに分けています。お気に入りのツールを見つけてみてはいかがでしょう。

 

 

 

コンテンツ目次

 

Web タイポグラフィー関連ツール

Type Anything

ウェブサイトで利用したいフォントを試すことができるクリエイティブなツールで、フォントの種類やサイズ、ウエイトなど細かい点まで直感的に選ぶことができます。

free-web-based-tools-from-2016-04

目次へ戻る

 

 

 

Type Nugget

オンライン上でフォントの細かい設定を行い、そのままCSSをダウンロードできます。今後、レスポンシブデザインにも対応予定。

weekly-news-for-designers-week-3-july-2016-05

目次へ戻る

 

 

 

Megatype | デモページ

ページ上に方眼紙のようにマス目が表示されており、line-heightなど細かいフォント設定を手軽に行うことができます。

weekly-news-designers-march-z-2016-06

目次へ戻る

 

 

 

Type Term

タイポグラフィーの基本となる各種用語を学ぶことができるオンラインツール。

weekly-news-designers-june-b-02

目次へ戻る

 

 

 

Glyphdiff

異なる2つのフォントの違いをひと目で比較することができるシンプルなツール。

weekly-designer-news-may-05-2016-08

目次へ戻る

 

 

 

配色カラー関連ツール

ColorDrop

美しい配色の組み合わせを集めたオンラインコレクションで、クリックするだけでHEX値をコピーすることができます。

weekly-news-for-designers-week-2-july-2016-01

目次へ戻る

 

 

 

Palettable

好きか嫌いか選ぶだけで、合計5色の配色パレットを直感的に作成できるツール。

weekly-news-for-designers-week-3-july-2016-03

目次へ戻る

 

 

 

Impalette

用意しておいた画像イメージをアップロードすることで、自動で配色カラーパレットを生成してくれるツール。

weekly-designer-news-may-01-2016-06

目次へ戻る

 

 

 

Material Palette

Google のマテリアルデザインで利用されている配色カラーパレットを、クリックひとつで生成します。

weekly-designer-news-april-24-2016-07

目次へ戻る

 

 

 

Simple Flat Colour Selector

フラットスタイルの基本カラーリングを、HEX値やRGB値でコピペできるシンプルなツール。

weekly-designer-news-may-03-2016-02

目次へ戻る

 

 

 

Brands in Colours

実際に利用されているブランドカラーをまとめて確認できるだけでなく、Sass Variables としても利用できます。

weekly-news-designers-c-01

目次へ戻る

 

 

 

Web ベース CSS 関連ツール

Flex Layout Attribute

今後ますます利用機会が増えてくるであろう CSS Flexbox レイアウトを手軽に実現できるツール。

weekly-news-for-designers-week-1-july-2016-02

目次へ戻る

 

 

 

CSS Stats

ウェブサイトのURLを入力することで、CSSスタイルシートの詳細や統計を分かりやすく示してくれます。

weekly-news-for-designers-28-august-07

目次へ戻る

 

 

 

img2css

画像イメージをアップロードすると、CSSに変換してくれるシンプルツール。

weekly-news-for-designers-28-august-08

目次へ戻る

 

 

 

CSS vs. JS

CSS と JS を利用した要素の選択方法の違いを比較できるページ。

weekly-news-designers-29-feb-2016-05

目次へ戻る

 

 

 

Pixel Art to CSS

ページ上でピクセルアートを作成し、ボタンをクリックするだけで、CSSに変換してくれる描画ツール。

weekly-news-resources-tools-designers-03

目次へ戻る

 

 

 

cssFilters.co

CSSを使った写真用フィルタをプレビュー画面を見ながら調整できるツール。あらかじめ Instagram のようなフィルタも用意されています。

weekly-news-designers-c-03

目次へ戻る

 

 

 

Blend

選択した2つの色を利用して、美しいCSSグラデーションカラーを作成できるツール。

design-news-for-designers-oct-07

目次へ戻る

 

 

 

Filter Blend

CSS blend mode と Filter 機能を利用して、画像イメージに加工を加えることができるツール。

weekly-news-nov-week3-04

目次へ戻る

 

 

 

レスポンシブ・ウェブデザイン関連ツール

Resizer

お好みのURLを入力すると、デスクトップとタブレット、モバイル端末用レイアウトをまとめて確認できる、Google謹製のウェブツール。

weekly-news-designers-29-feb-2016-03

目次へ戻る

 

 

 

Embed Responsively

YouTube や Vimeo、Google Maps などのサードパーティー・メディアの埋め込みコードをレスポンシブ対応に変換してくれるツール。

weekly-news-for-designers-28-august-05

目次へ戻る

 

 

 

Responsive Image Breakpoints Generator

画像イメージを自由なブレイクポイントでレスポンシブ対応にできるお役立ちツール。

weekly-news-feb-2016-04

目次へ戻る

 

 

 

ウェブパフォーマンス関連ツール

PerfTool

URLを入力すると全体のパフォーマンスを管理画面から手軽に確認できるツール。

weekly-news-for-designers-week-2-july-2016-04

目次へ戻る

 

 

 

Performance Budget Builder Tool

ホームページやカテゴリーページ、記事ページごとにファイルサイズを指定し、どれくらいのファイル容量を使用しているか棒グラフで分かりやすく教えてくれます。

weekly-news-feb-2016-02

目次へ戻る

 

 

 

Hookbin

ウェブサイトのHTTPリクエストがどのくらいあるのか、ひと目で確認できる無料ウェブツール。

weekly-news-designers-c-09

目次へ戻る

 

 

 

オンラインチェックリスト、ガイド、参考リファレンス

Security Guide for Developers

ウェブサイトのセキュリティーに欠点がないか確認できる、実践向けチェックリスト。

weekly-news-for-designers-july-2016-t-04

目次へ戻る

 

 

 

Web Designer’s Checklist App

ウェブプロジェクトすべての進行状況を管理できるシンプルツール。

weekly-news-designers-june-a-03

目次へ戻る

 

 

 

画像イメージ関連ツール & 編集エディター

Vectr

ベクターグラフィックを手軽に、そして直感的に作成できるオンライングラフィックエディター。

weekly-news-designer-sept-02

目次へ戻る

 

 

 

Visual Center

画像イメージの中心を一発で探すことできるツール。

weekly-designer-news-may-04-2016-05

目次へ戻る

 

 

 

Photopea Photo Editor

Photoshop がインストールされていない環境でも、オンライン上でPSDファイルを編集できるウェブツール。

weekly-news-designers-june-45-03

目次へ戻る

 

 

 

Jpeg.io

PNGやGIF、SVGファイルの他にも Illustrator 用 EPSファイルや Photoshop用 PSD ファイル、WEBPファイルなどを最適化された JPEG ファイルに自動変換できるツール。

weekly-designer-news-2-october-2016-06

目次へ戻る

 

 

 

BSE64

画像イメージを BASE64 にエンコーディングできるオンラインツール。

free-web-based-tools-from-2016-08

目次へ戻る

 

 

 

SVGOMG

SVG ファイルを最適化できるウェブベースのアプリ。

wk2_03

目次へ戻る

 

 

 

Iconogen

ファイルをアップロードするだけで、ファビコンや Andorid、iOS 用アイコンを自動作成してくれるウェブツール。

free-web-based-tools-from-2016-07

目次へ戻る

 

 

 

ウェブデザイナー向けお役立ちディレクトリ

Sketchpack

Sketch アプリの使えるプラグインを集めたディレクトリ。

weekly-news-designers-march-z-2016-04

目次へ戻る

 

 

 

PostCSS.parts

PostCSS プラグインをカテゴリ別にまとめ、検索することもできるカタログサイト。

weekly-news-designers-29-feb-2016-07

目次へ戻る

 

 

 

UIDB.io

特定のUIやサイトデザインをキーワード別にまとめているので、アイデアが欲しいときに確認したいサイトのひとつ。

weekly-news-designers-march-2016-02

目次へ戻る

 

 

 

Good Copy

Eメールニュースレターで実際に使われているキャッチコピーや文章をまとめたサイト。英語による参考例が欲しいときに。

weekly-designer-news-april-10-05

目次へ戻る

 

 

 

その他ツール

Codepad

ウェブデザイン制作に活用できるコードスニペットをまとめ、共有できるお役立ちツール。

weekly-news-designers-b-04

目次へ戻る

 

 

 

Sharingbuttons.io

各種ソーシャルメディア用シェアボタンを自由に作成でき、そのままHTML/CSSソースコードをコピペできるツール。

weekly-news-for-designers-august-01

目次へ戻る

 

 

 

Grid.Guide

ウェブサイトのデザインに合ったグリッドレイアウトを作成できるツールで、ピクセル単位で細かく調整できます。

small-web-based-tools-01

目次へ戻る

 

 

 

CreateBrief

複数のデザイナーでプロジェクトを進めるときに、アイデアなどを共有できるデザイン・ブリーフ(クリエイティブ・ブリーフ)をオンラインで手軽に作成できるツール。

small-web-based-tools-02

目次へ戻る

 

 

 

Launchaco

検索ボックスに使いたいドメイン名の使用状況や、ロゴに使えるフォント素材の価格などをまとめて探すことができるツール。

free-web-based-tools-from-2016-01

目次へ戻る

 

 

 

Viewedit

画面スクリーンを録画、共有できるだけでなく、誰が見ているかも瞬時に分かるオンラインツール。Chrome拡張機能も同時に公開されています。

free-web-based-tools-from-2016-02

目次へ戻る

 

 

 

Site Auditor

ウェブサイトを検索エンジン用に最適化したり、修正する個所を見つけることができるツール。

free-web-based-tools-from-2016-03

目次へ戻る

 

 

 

Hero Patterns

継ぎ目のないシームレスなSVGテクスチャをコレクションしているサイトで、模様の大きさや色なども自由にカスタマイズすることができます。

weekly-news-for-designers-2016-october-06-02

目次へ戻る

 

 

 

Word HTML

Word 文書を自動整形して、HTMLファイルに変換してくれるオンラインツール。

free-web-based-tools-from-2016-05

目次へ戻る

 

 

 

JSON Editor

JSONを確認、編集、整形できるオンラインツール。

free-web-based-tools-from-2016-06

目次へ戻る

 

 

 

最後に。

Web Design in 4 Minutes

今どきのウェブサイトを4分で完成させるデモサイト。各項目の一番最後にあるリンクをクリックすることで、順番にステップを進めていくことができます。

web-design-in-4min

目次へ戻る

 

 

こちらのツールも一緒に活用してみてはいかがでしょう。デザイナー向けオンラインツールをまとめています。

75-web-resource
オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめてい

海外サイト Speckyboy Design Magazine で公開された 50 Tiny, Time-Saving, and Free Tools for Web Designers from 2016 より許可をもらい、翻訳転載しています。

 

参照元リンク : 50 Tiny, Time-Saving, and Free Tools for Web Designers from 2016