Advertisement

sapiens

 

この記事では、日々進化を続けるWeb制作で役立つ、便利な最新オンラインツールをまとめてご紹介しています。

 

Ai、人工知能を利用した、これまで面倒だった作業を改善できるツールも見かけるように。また、プロトタイプツールFigmaに関する便利なプラグイン、テレワークによるオンラインミーティングで使えるさーびすなども増えています。

 

カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。

 


コンテンツ目次

 

Web制作が面白いほどはかどる!便利な最新オンラインツールまとめ

 

Web制作便利ツール

Eazy CSS

どんなウェブサイトのデザインも、コード知識不要でタブ操作のみで変更でき、完成したデザインは直接ソースコードでコピペ可能、ノーコード革命です。

eazycss

 

 

 

Header CSS

ウェブサイトのレスポンシブ対応のヘッダーナビゲーションメニュー17種類が揃ったライブラリ。フレームワークを使わず、できるだけ少ないCSSコードで表現できます。

header-css

 

 

 

CSS box-shadow Examples

さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好みの影エフェクトをクリックすれば、ソースコードのコピーが可能。

css-dropshadow-generator

 

マテリアルデザインや最近話題のニューモーフィズム・スタイルで見かける、立体感を演出するドロップシャドウ、影エフェクト。 CSS box-shadow

 

 

React Content Loader

実際のコンテンツが表示されるまでの、待ち時間用スケルトンUIを作成できるオンラインツール。Reactの他にもVueやVanilla HTMLにも対応。

react-custom-loader

 

 

 

Omatsuri

ウェブ制作で普段使いできるオープンソースで完全無料のオンラインツール。CSSで三角形を作成したり、SVGファイル圧縮、Base64エンコーディングなど、見落とされがちな便利ツールが揃います。

omatsuri

 

 

 

Webflow University

コード不要でWebページを作成できるWebflowの使い方を、テーマやトピックごとにコースに分け、動画で分かりやすく紹介しているドキュメント的ページ。

webflow-university

 

 

 

UI Playbook

ツールチップやボタン、テキストフィールドなどの各UIコンポーネント別に、詳しく解説したドキュメント・コレクションで、今後も随時アップデート予定。

ui_playbook

 

 

 

Lookup Design

ブログ記事やヘッダー、カード、バナー、フッター、ナビメニューなどのキーワードを入力すると、参考にしたいデザインサンプルが一覧表示される、Web制作に便利なインピレーション系ギャラリーサイト。

product-header

 

 

 

Unicorn

美しくて魅力的なランディンイグページを作成するオンラインツールで、スタートアップやモバイルアプリ、Saasなどでの利用を想定しています。

unicorn

 

 

 

ztext.js

Web上で文字テキストを3Dに変換し、カーソルやスクロールのに合わせて自由に動かすことができるライブラリ。data属性を利用した実装しやすさもポイント。

ztext-js

 

 

 

WP Cost Calculator

プロジェクトのコストを算出してくれる、WordPress計算機プラグイン。独自の計算ツールを作成し、お好みの数字にリアルタイムで変更できます。

wp-cost-calculator

 

 

 

Webring

毎日主要なデザインニュース3つだけに絞ってキュレーションするSidebar.ioのスピンオフ企画。Webデザイン業界で活躍する人物の最新ニュースを1ページにまとめています。

sidebar-webring

 

 

 

 

デザインコレクション、UIキット

Trace

写真をアップロードするだけで、人物を背景から切り抜く人工知能を活用したオンラインサービス。Remove.BGと比べても、切り抜き精度は高いと言えるでしょう。

trace

 

Remove BGは、画像をアップロードしてほんの数秒待つだけで、人物を切り抜いてくれる人気のウェブサービスで、当サイトでも以前紹介しています。 ht

 

 

AI Image Enhancer

写真をアップロードすれば、AIが色合いやコントラストを自動で調整し、写真のクオリティを改善してくれるオンラインツール。

ai-image-enlarger

 

 

 

Magic Pattern

丸や三角などのシンプルなシェイプを使って、美しいデザインパターンを数秒で作成できるオンラインサービス。

magicpattern

 

 

 

Device Shots

撮影したウェブサイトやモバイルアプリのスクリーンショットをアップロードするだけで、スマホやタブレット、パソコンなどの高画質なデバイスモックアップに仕上げてくれる無料オンラインサービス。

device-shots

 

 

 

Avatarz

組み合わせ次第で2,000を超える3Dキャラクターを作成でき、Blender用ジェネレーターも同時収録。$39で販売中。

avatarz

 

 

 

Design Resources

300を超えるツールを、配色やデザインツール、アイコン、モックアップなどカテゴリごとに15に分類したデザイン便利リスト。

design_resources

 

 

 

Design Encyclopedia

ウェブで使われる用語をわかりやすいサンプルと一緒に解説した、デザイン辞典のようなサービス。参考記事やリファレンス、リソース素材なども多数揃います。

design-encyclopedia

 

 

 

 

イラスト系ライブラリ

sapiens

男女のキャラクターイラストをカスタマイズおよび作成し、SVGまたはPNGファイルでダウンロードできるオンラインサービス。キャラクター作成アプリも$39で販売されています。

 

 

 

pixeltrue

商用利用も可能なSVGベクターイラストを無料配布しているサイト。Illustratorで編集できるAiファイルの他、Lottie対応のアニメーション付イラストもJSONファイルでも公開中。

free_vector_illustrations

 

最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの
この記事は、2019年4月23日の初投稿から再編集、アップデートを随時行っています。2020年2月25日に新しい無料イラストを加え、合計54個のフリー素材サイトを紹介し

 

 

 

配色ツール

Hexpalette

美しい4色カラーパレットを集めたコレクションで、クリックでHEXカラーをコピー可能。お気に入りパレットを保存したり、独自の配色も追加できます。

hexpalette_-_color_matching_for_artist

 

この記事は、2016年8月22日に公開してから再編集、アップデートを随時行っています。新しいツールを加え、サービスが終了しているツールは削除し、合計66個の配色ツールサ

 

 

ColorDoo

ロゴやブランドカラーに最適な美しい色合いや、2色グラデーション、5色カラーパレットなど、色選びに困ったら確認したいリソースを一覧でどうぞ。

home_-_colordoo

 

 

 

 

プロトタイプツール

Noted for Figma

作業しているFigmaファイルに、ぱっと思いついたメモを残すことができる、付箋のようなプラグイン。テンプレートも豊富に用意されており、カスタマイズも可能。

figma-noted

 

 

 

Figma to Code

Figmaで作成したデザインをTailwindやFlutter,SwiftUIフレームワークを使って、レスポンシブレイアウトに自動変換してくれるツール。Bootstrapももちろん対応しています。

figma-to-code-tailwind

 

 

 

Figma Low Code

Figmaで作成したデザインをVue..jsアプリケーションように変換し、再度デザインを編集してもアップ自動アップデートしてくる機能に注目のプラグイン。

figma-low-code

 

 

 

Gifmock for Figma

Figmaファイルのレイヤーを使って、高品質なGIFアニメーションを作成できる拡張プラグイン。Figma関連、ぞくぞくと増えてます。

gifmock-for-figma

 

 

 

Many Master for Figma

このFgimiaプラグインを使えば、複数行にまたがるデータを個別のテキストレイヤーとして、一括挿入できるようになります。

many-paster

 

Figmaは、現在人気となっているプロトタイプツールのひとつです。 SketchやAdobe XDと比較すると、「リアルタイムで他の人とコラボレーショ
どんなツールもショートカットを覚えることで、制作時間の短縮、効率化を図ることができます。しかし、膨大にあるショートカットキーをすべて覚えるのはなかなか大変な作業。こ

 

 

 

アイコンツール

Discipline

10月にリリース予定のMac新OS Big Sur向けアイコン100種類を揃えたコレクション。Adobe各種アプリを筆頭に、メジャーアプリに対応している模様で、%5.99で販売中。

discipline

 

 

 

Lottieflow

WebページビルダーWebflowなどで利用できる、Lottieアニメーションファイルを無料ダウンロードできるサイト。カテゴリ別にまとめられており、JSONファイルで取得できます。

lottieflow

 

 

 

Get Loaf

SVGアイコンを編集したり、アニメーションを追加できるアプリで、今後ますます需要が増えていきそうな分野のひとつ。Windows版とMac版が公開されています。

loaf

 

 

 

IconHub

Web制作で普段使いできる、シンプルで実用的なアイコン211種類を、5つのスタイルで用意された巨大アイコンライブラリ。サイズやストローク線の太さ、配色などもカスタマイズ可能で、必要なものだけをまとめてダウンロードできます。

iconhub

 

この記事では、ウェブサイトのUIデザインに便利な、無料の人気SVGアイコンライブラリをまとめて紹介しています。 豊富な収録数に加え、サイズや配色などの

 

 

Fluent System Style Icons

Microsoftスタイルのアイコン5,000個以上が揃ったUIデザイン向けアイコンライブラリで、PNGファイルは無料、SVGファイルは$13で販売中。

fluent-system-style-icons

 

 

 

 

コラボ、リモートワークツール

Avocode Write

Adobe XDやSketch、Figmaで作成したデザインを、変更なしでAvocode上で編集できるようになりました。

avocode-writing

 

 

 

Rume

複数人でオンラインゲームができたり、ひとつのスペースで複数の会話を行うなど、Zoomよりも仕事っぽっくないビデオチャットサービス。

rume

 

 

 

Hyprmeet

Zoomなどのオンラインミーティングで、自分の代わりに動くアバターを使える新しいツール。用意されたパーツから選択して、自分だけのアバターを作成します。

 

 

 

Choosify

ビジネス向けチャットツールSlackを利用して、ライブチャット機能をウェブサイトに実装できるツール。

choosify

 

 

 

Papercups

カスタマーサポートとしてチャット機能を実装できるオープンソースツール。カスタマイズの柔軟さもポイントで、リアルタイムでの対話を実現します。

papercups

 

 

 

 

面白、クリエイティブツール

Naturaltts

入力した文字をスピーチに変換し、MP3ファイルでダウンロードできるサービス。主要な6ヶ国語に対応し、61種類の声質が用意されています。

naturaitts

 

 

 

Limus

撮影したスクリーンショットをアップロードすれば、異なるアングルから見たユニークなスクリーンショットに自動変換してくれます。

limus

 

 

 

ct.js

平面的な2dゲームを作成するオープンソース・エディタ。モジュールライブラリや詳しいドキュメントで、たのしくプログラミングを学びながら、より手軽にゲーム開発をすすめることができます。

cs-js

 

 

 

Bed Time Calculator

起床したい時刻を入力すると、いつ就寝すべきか教えてくれるツール。睡眠にまつわる疑問をまとめたQ&Aも(英語のみ)。

bed_time_calculator_-_optimize_your_sleep_schedule_with_sleepsources

 

 

 

IsoFlow

情報を整理し、シンプルな図で表すダイアグラムを、クラウド上で数分で作成できるオンラインツール。

 

 

 

Paper Plotter

エクセルなどの表計算ソフトやプログラムで作成したファイルを、プリンターで印刷、組み立て可能な3次元グラフに変換してくれるオンラインツール。

paper_plotter

 

 

 

NSFW Filter

仕事中にふさわしくない広告バナーをブロックしてくれるFirefoxブラウザ・アドオン。

nsfw

 

 

 

Sound of the Forest

世界中の森林の音を集めたオープンソース・ライブラリ。ヨーロッパや北米が中心ですが、アフリカやブラジル、中国などで録音した音も。残念ながら日本の音は、現時点では未収録。

sounds-of-the-forest

 

 

これまでのベストツールもチェックしよう

当サイトでこれまでに紹介したその他のツールも確認してみましょう。特に便利なツールのみを厳選し、定期的にまとめています。

 

この記事では、ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介します。 「こんなツールが欲しかった」をかたちにし
この記事では、Webデザインやグラフィックデザインの制作スピード、生産性がアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ
この記事では、日常行っているWebデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめてご紹介しています。 これらの新しいツールやサ
2019年も残すところわずかとなり、今年もWeb制作を快適にするオンラインツールがたくさん公開されました。 この記事では、今年紹介したツールのなかでも
この記事では、2020年に入ってから公開された、Webデザインを快適にする最新オンラインツールをまとめてご紹介します。 ウェブデザインに限らず、グラフ
この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利
この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。
この記事では、Webデザインやグラフィックデザインの制作が捗る、公開されたばかりの最新便利オンラインツール、無料デザイン素材をまとめています。 これら

 

サムネイル@ : Warp SVG