dall-e-2-uncrop-masterpiece
dall-e-2-uncrop-masterpiece

もっと早く知りたかった!便利な最新Web、オンラインツール30選

ワークフローを劇的に変えるツールが大集合

dall-e-2-uncrop-masterpiece

この記事では、「もっと早く知りたかった」と思ってしまう、便利な最新オンラインツールをまとめてご紹介します。

AIをフル活用した次世代ツールから、これまでの作業が嘘のように捗る便利なものまで、今後のワークフローを変えてくれそうなツールを中心に揃えています。

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


コンテンツ目次

 

Web制作の効率、生産性アップ!話題の最新オンラインツールまとめ

Webデザイン便利ツール

3D Perspective Glitch Hover Effect

グリッチアニメーション中にピクセル化された画像を表示する、ユニークでたのしいホバーエフェクト

 

Bike Demo Three.js

マウススクロールに合わせて、バイクを立体的に回転、拡大しながら、各パーツや機能を紹介するインタラクティブなデモテンプレート。

3d bike webGL Three.js template

 

Mediaquery.style

メディアクエリの構文をいつも忘れてしまった困る、そんなひとにオススメ。必要なコードスニペットがまとめられており、コピーボタンで簡単コピペできます。

what was that media query code again

 

System.css

1984年から1991年まで稼働していた、AppleのSystem OSそっくりのUIインターフェイスを構築できるCSSライブラリ。

system_css

 

Mobile First

モバイルサイトを検証するためのスマートフォンとタブレットのシュミレーター。iPhone 13やGalaxy S21, Google Pixel 6などのモデルも利用可能。Google Chrome拡張プラグインで使いやすい。

Smartphone_simulator_on_computer

 

Playcode

数秒でコーディングを開始でき、とても早いJavaScriptコーディング体験ができるライブエディタ。

PLAYCODE_-_Javascript_Playground

 

kmenu

ふわりとした心地よいアニメーション付きで、自由にアクセスできるコマンドメニューを実装したいときに。デモページも用意されています。

kmenu

 

Laws of UX

デザイナーがUIデザインを作成するときに、考慮したい法則やベストプラクティスをまとめた一覧ガイド。

Home___Laws_of_UX

 

Custom SVG Cursors with an Interactive Emitter Effect

SVGをつかったインタラクティブなカーソルエフェクトを実現します。4種類のデモが用意されています、まずは動きを確認してみると良いでしょう。

EmitterCursor effect

 

one ‘div’ loader

たったひとつのDIV要素とCSSアニメーションデザインされた、シンプルな読み込みスピナーを集めたオープンソースのコレクション。ワンクリックでCSSコードをコピー可能。

css loaders-one div loaders

 

デザイン・配色ツール

Palette Maker

お好みの配色をクリックで選ぶだけで、大量の制作サンプル例で色味を確認することができ、本当に必要なカラーパレットを直感的に選ぶことができます。

Palette_Maker_-_Generate_and_Preview_Colors_on_Real_Design_Templates

 

Artboard

あらゆるアニメーションをブラウザ上で手軽にデザイン、作成できるオンラインツール。

 

Font Buddies

ウェブサイトのUIデザインにマッチするフォントの組み合わせを厳選したライブラリ。おしゃれなフォントが多いのも特長です。

font buddies - best free font pairings

 

hhhue

コピペで利用できる、美しいカラーパレットを厳選したコレクション。独自のカラーリングに編集することも可能です。他のおすすめ配色ツールと一緒に活用してみましょう。

hhhue curated collection of beatiful color palettes

 

befront

ガイドの手順通りに進めていくだけで、Figmaの使い方にはじまり、デザインスキルを学ぶことができる無料コース。

 

3Dデジタル生物標本1400点がダウンロード可能に

九州大学が水生生物など700種類以上を3Dモデル化、オンライン公開を開始しました。CC BY 4.0ライセンスで、だれでも自由に利用できます。

「3Dデジタル生物標本」1400点以上、九大が公開

 

Physically Based

CGアーティストのための物理ベースの値を一覧でまとめたデータベース。

Physically_Based_-_The_PBR_values_database

 

Reflection Photo Effect

まるでガラス越しに見ているような、写真に反射を加えることができるPhotoshop加工ファイル。PSDファイルに写真を放り込むだけで完成のお手軽アイテム。

reflection-photo-effect for photoshop

 

Funky Scribbbles

デザインプロジェクトのアクセントにぴったりな、ファンキーな落書きコレクション。ベクターファイル形式による収録で、使いやすさもばっちり。

Funky Scribbbles for figma

 

モックアップ・アイコンツール

Heroicons

人気フレームワークTailwind CSSの作者による、使い勝手の良いシンプルなSVGアイコンのひとつ。280個のアイコンが揃い、24×24または20×20のミニサイズで収録。

Heroicons

 

House of Mockup

まるで本物そっくりな高品質なPhotoshopモックアップ素材を公開しているウェブサイト。一部の素材は、無料でのダウンロードも可能です。

House of Mockup

 

Poly

AIを使うことで、文字テキストを入力するだけで、あらゆるテクスチャをほんの数秒で自動生成できる画期的なツール。

Poly__Generate_design_assets_with_A.I.

 

Social Media Framework for Figma

InstagramやTwitter、YouTubeにはじまり、合計14のソーシャルメディア投稿用のテンプレートを揃えたフレームワーク集。サイズは多数用意されているので、用途に応じたデザインを選ぶことができます。

Social Media Framework for Figma

 

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

アニメ大全

日本のアニメ作品総合データベースが一般公開。年代別やあいうえお検索にも対応しています。

日本アニメのデータベース「アニメ大全」一般公開

 

Tocaly

シンプルなスケジュール日程調整アプリ。国産の日本語にも対応しており、はじめてでも迷わない直感的なUI操作が魅力です。

tocaly

 

Steve Jobs Archives

Appleの創設者スティーブ・ジョブズの名言をまとめたアーカイブページ。

The_Steve_Jobs_Archive

 

Mini Tokyo 3D

東京の公共交通のリアルタイム3Dデジタルマップ。遅延情報に従って列車や旅客機が運行されるなど、ずっと見ていたくなるサイト。

Mini Tokyo 3D

 

おしゃべりひろゆきメーカー

ひろゆきさんの声を再現したAIに、140字までの文章を読み上げさせることができるジェネレーターツール。

おしゃべりひろゆきメーカー

 

Dall-Eの新機能「アウトペインティング」登場

文字テキストによる記述だけで、元の画像の境界線を越えて、同じスタイルの要素を追加したり、新しい方向性のストーリーを展開する、もはや魔法のような機能。

フェルメール作の「真珠の耳飾りの少女」、じつはキッチンで撮影されていた、なんてことも自由自在。

dall-e-2-uncrop-masterpiece