Advertisement

 

「こんなことできちゃうの?!」「もっと早く知りたかった。」

 

この記事では、ホームページ制作を快適にする最新オンラインツール48個をまとめてご紹介。

 

ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな便利な新ツールを揃えています。

 

時間の短縮はもちろん、面倒だったあの作業も自動化できてしまうことも。

 

大型連休中におすすめのワクワクするようなツールを集めました。

 

 

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

 


コンテンツ目次

 

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

Webデザイン便利ツール

Loaders

HTMLとCSS、SVGで作られた無料のローディングCSSアニメーションライブラリ。デザインを邪魔しないシンプルな動きが特長で、手軽にサイトに導入できるのもうれしいポイント。

 

 

 

Gradients Components AI

CSSグラデーションを組み合わせて複雑な配色やパターンを表現できる高機能オンラインツール。右下の「Regenerate」ボタンでパターンを再生成、「Grid」でまとめてパターンを確認することも。

 

 

 

Ektogamat ThreeJS Boilerplate

ほんの数行のコードを追加するだけで、デモ機能を試すことができる、Threejsのスターターパック。使いかたを3分ほどにまとめたYouTube動画を参考にセットアップしましょう。

 

 

 

面白いウェブゲーム The Aviator を作成する方法

JavaScript と Three.js をつかった本格的なチュートリアルで、デモページを確認でき、サンプルファイルもダウンロード可能です。まずはマシンガンを入手しましょう。

 

 

 

A Typographic Scale Calculator

音楽の仕組みにヒントを得た、調和のとれた適切なフォントサイズを選ぶことができる便利ツール。

 

 

 

Snap Font

あらゆるウェブページでフォントのライブプレビューを可能にするChrome拡張プラグイン。手持ちのフォントがサイト上でどのように見えるか、その場でチェックできます。

 

 

 

SheCodes All Cheatsheets

HTMLやCSS、JavaScript、VS Code、Bootstrap、Reactなどウェブデザインに関連する用語をチートシート形式でひとまとめに確認できて超便利。

 

 

 

WordPress Block Pattern Directory

コピー&ペーストするだけで、どんなWordPressサイトにも美しいデザインのレイアウトをすぐに追加できる WordPress のブロックパターンディレクトリ。ユーザーによる投稿もはじまり、今後ウェブサイトの見せ方が変わっていきそう。

 

 

 

Clover Cities

プログラミングの知識がなくても、誰でも手軽にレトロな「Web 1.0」スタイルのウェブサイトを作成できる、コード不要のホームページ作成ツール

 

 

 

Horizon UI

Chakra UI専用に開発されたReactベースの管理画面テンプレートで、オープンソースによる提供。70以上のコンポーネントを自由に組み合わせるだけで、レイアウトを作成できます。

 

 

 

Kite

通常のコードエディタにAIテクノロジーをつかった自動コード補完機能を追加し、開発者にスーパーパワーを提供する未来のツール。

 

 

 

TailwindPDF

Tailwindで作成したHTMLファイルをPDFファイルに変換、ダウンロードできるツール。納品書や履歴書などのサンプルを確認できます。

 

 

 

Tools Ocean

さまざまなファイルをPDFに変換したり、画像ファイル圧縮などあらゆるウェブツールがずらり揃った、いざというときに開きたいお助けページ。

 

 

 

MassCode

開発者向けの普段づかいできそうなスニペット管理ツール。VSCodeと同じエディタで、ローカルでもサクサク軽快。

 

 

デザインツール

Free Abstract Elements and Sketches

1300以上の手描きイラスト、スケッチ素材を揃えたコレクションで、一括ダウンロードまたは個別に配色を変更したり、ファイル形式をPNG、SVG、PDFから選択することも可能。

 

 

 

Sine Wave SVG Generator

幅や太さ、ギザギザ具合なども細かく調整でき、作成した波ウェーブをSVGファイルでダウンロードできるオンラインツール。

 

 

 

3D Bay for Canva

だれでも手軽にデザインを楽しむことができるツールCanvaで、超立体的な3Dデザイン素材を無料で追加できるコレクション。

 

 

 

Doodle Ipsum

アップデートされスタイルがさらに充実した、イラストをつかったダミー画像生成ジェネレーター、オンラインツール

 

 

 

Natural Women Collection

飾らない女性の日常をテーマにしたストックフォトサイト。そのままCanvaで利用することもできます。

 

 

 

The Gender Spectrum Collection by Vice

ライフスタイルや文化、アート、政治などに焦点を当てたメディア Vice による、性別によって定義しない自由な表現を目的としためずらしいフォトストックサイトです。

 

 

 

Reshot

4万以上のアイコン、1500以上のイラスト、25000枚の写真素材をクレジット表記なしで自由に利用できます。キーワード検索や人気タグ別に探すことも可能。

 

 

 

Let’s Enhance

画質を落とさずに画像の解像度を上げる、AIテクノロジーを駆使したオンラインツール。写真をアップロードするだけの全自動で、完成までも一瞬です。

 

 

 

Prism Distortion Effect for Posters

フォトショップに写真を放り込むだけで、プロ並みのプリズム加工を一発で作成できるPSDファイル。

 

バグが起こったような「映像の乱れ」を表現するグリッチエフェクト。 SFサイバー感を演出でき、フォトショップでも人気の高いグラフィック効果のひとつです。しかし、
フォトショップで漫画コミックのようなイラスト風に加工する方法は、人気エフェクトのひとつです。 画像を差し替えるだけのお手軽エフェクトやベクターイラスト

 

 

nodetoy

ゲーム開発アプリUnityで使える Shader Graph(シェーダー・グラフ)を直感的で使いやすいツールを使って作成、フォーク、共有することができる新しいプロジェクト。現在、ウェイティングリストになっています。

 

 

 

Retro 3D Devices

90年代のレトロなバイブスを感じる3Dイラスト素材集で、無料デモ版では1つ素材をPNGとFigmaファイルでダウンロードできます。

 

 

 

100 Cloud Photoshop Brushes

本物そっくりな雲模様100種類を表現できるフォトショップブラシ。スタンプを押すように使えて、仕上がりは超リアルな4Kサイズ対応。

 

 

 

20 Free Holographic Video Loops

七色に輝くホログラフィックテクスチャを利用した、動画用のビデオループ20種類をまとめてダウンロードできます。

 

 

配色ツール

Design Gradients

ウェブサイトやグラフィックなどあらゆる作品に使える、48種類のCSSグラデーションカラーを集めた無料プラットフォーム。クリックでCSSコードをコピーできます。

 

 

 

Grainients

ザラザラとした粒状の質感を追加したグラデーション2000枚が揃うデザインライブラリ。この他にも、オーロラBlobシェイプライブラリなども公開されています。

 

 

 

Reasonable Colors

使いやすさや読みやすさなどのアクセシビリティに配慮した、魅力的な配色カラーツール。ソースコードはGitHubで公開されており、MITライセンスでだれでも自由に利用できるオープンソース。

 

 

 

Color Morph

SVG形式のメッシュグラデーションをCSSで生成できるオンラインツール。トレンディな配色が多く、色数をカスタマイズすることも可能。

 

 

 

UI Color for Tailwind CSS

HEXカラーコードを入力すると、自動でカラーパレットを作成してくれるツール。Spaceキーでランダム表示してくれます。

 

 

プロトタイプ・アイコンツール

Material Symbols

2,500以上のグリフを1つのフォントファイルに統合。幅広いデザインバリエーションを持つ最新のGoogle謹製アイコンです。シンボルは3つのスタイルと、4つの調整可能な可変フォントスタイル(フィル、ウェイト、グレード、オプティカルサイズ)で提供されています。

 

 

 

Tabler Icons

ウェブサイトやスマホアプリを魅力的に、そして一貫性のあるシンプルで美しい見た目を実現したオープンソースのアイコンライブラリ。現在1950以上のアイコンが公開されています。

 

 

 

Iconer

シンプルで何にでも利用できる、UIデザイン用の商用可なSVGアイコンライブラリ36セットから横断検索ができる便利アイコンツール。

 

 

 

Uikit

ウェブデザイン作成に活用できる高品質なUIキットやコンポーネントを無料ダウンロードできるサイト。FigmaやAdobe XDファイルが中心で、タグ別に絞り込むことも可能。

 

 

 

NFT Market – Free Website Template

NFTマーケットを想定したウェブサイト用テンプレートで、プロトタイプツール Figma の簡単な使いかたでカスタマイズできる.figファイルによる収録です。

 

 

 

Flex UI Library for tailwind CSS

700以上のウェブコンポーネントを並べるだけでウェブページを作成できる時短コレクション。Tailwind CSSに対応しており、ノーコードツールShuffleと連動したデザイン。Figmaファイルは無料ですべて利用できます。

 

 

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

Blackbox

Chrome拡張プラグインをインストールすると、YouTubeやNetflixといった画像から目的の文字テキストを検索、抽出できるというツール。

 

 

 

イライザペンシル

入力したキーワードから日本語の文章を約6秒で自動生成できる文章執筆AIツール。

 

 

 

Tab Maker

コーディング不要で、誰でも簡単にChromeのカスタムタグ機能を拡張、構築できるGoogle発のスゴ技ツール。

 

 

 

Arteater

特殊なマス目が描かれた用紙をプリントアウトし、順番にイラストを書き込み、アップロードページに貼り付ければ、パラパラ漫画のようなアニメーションを作成できます。

 

 

 

Screenity

Chromeブラウザでもっとも強力で多機能をうたう拡張機能プラグイン。文字やスケッチを入力し、ビデオ画面にフィードバック用の注釈を追加でき、動画の編集もラクラクです。

 

 

 

WeekToDo

シンプルな週間スケジュールを確認するシンプルなToDoリスト。予定にあるものを優先するのではなく、優先したいものを予定に入れることをコンセプトに、プライバシーを重視したツール。

 

 

 

Eight Colors

W/A/S/D または矢印キーで操作し、お手本と同じように揃えるミニゲーム。最初は簡単ですが、徐々にルービックキューブのような感覚に。

 

 

 

The Typerature Variable Color Fonts

Variableフォントをつかって何ができるのか、AからZのアルファベットをつかってプレビュー例示した特設サイト。Safari、Firefox、Chromeで最適に表示されます。

 

 

 

Climate Spiral to show temperature chnage

NASAが実際に公開している、1880年から2021年までの月別の地球気温の偏差を表したビデオデータ。特に1951-1980年ごろからが異常。

 

 

Crunk Dancer

曲に合わせてモコモコのモデルが踊るというデモコンセプト。配色やボディの分厚さのほかに、ヒップホップやブレイキン、スイングといった踊りもカスマイズできます。

 

 

前回の便利オンラインツールも一緒にチェックしてみてはいかがでしょう。

この記事では、Webデザイン制作がグッと楽になる最新オンラインツール50個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイテ