目まぐるしい変化への対応を求められるウェブ従事者にとって、制作をより快適にする便利な最新オンラインツールをまとめてご紹介します。
いままで時間のかかっていた面倒な作業がワンクリックで完了の時短ツールから、そのまま使えるウェブテンプレート、シンプルで使いやすいアイコン素材など、ウェブ制作のお悩みをまとめて解決できる、無料のツールや素材を中心にセレクト。
さいごは、「こんなツール、あったんだ」と思える、クリエイティブ全開なツールが控えます。暇なときの時間つぶしにもいかがでしょう。
カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。
- 1. Webデザイン便利ツール
- 2. デザインツール
- 3. プロトタイプ・アイコンツール
- 4. クリエイティブ・面白ツール
Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ
Webデザイン便利ツール
How to Create a Cover Page Transition
画像をクリックすると別ページになめらかに遷移するアニメーションが特長で、GReenSockのGSAPを使用しています。
Large Image to Content Page Transition
大きな画像と見出しタイトルのあるメインページで、パララックス風のスクロールエフェクトを実現。GSAPのFlipプラグインを使用すること絵、画像を元に位置に簡単に戻すことができるアニメーション。デモページ。
100種類のコピペできるCSSボタンを揃えたライブラリで、さまざまな印象に残るホバーエフェクトを実現できます。
iPhoneやGalaxy、iPadなどあらゆるスマホとタブレット端末でのウェブサイト表示をテストできるChrome拡張機能プラグイン。
Notionのような感覚で、ノーコードでウェブサイトを作成できるオンラインツール。ノーコード系ツール、どんどん増えています。
「STUDIO夏のカイゼン祭り」と題し、新機能を続々提供予定。API連携やWordPressインポート、パズルのようにデータとデザインをつなぐ、新しい「データパネル」など、より使いやすくなっていきそう。
スマホアプリを1行のコードも書かずに作成できる画期的なオンラインツール。
ウェブサイトで利用されているCSSを、ワンクリックで細かく分析してくれる無料オンラインツール。
ボタンやタブ、パンくずリストなどのUIコンポーネントの作成で参考にしたい、世界のデザインシステムからサンプル例を集め、まとめて確認できる最新リポジトリ。
Three.jsで作成されたランディングページの無料デモファイル。つくり方は動画で紹介されており、実際のサンプルページも確認してみましょう。
プライバシーを最優先にした、オープンソースのWebフォントプラットフォーム。Google Fontsからの切り替えも、URLを「https://fonts.bunny.net/css」に書き換えるだけで終了。
人気フレームワーク Taiwindで作成された、高品質なダッシュボードテンプレート。無料ダウンロードでき、サンプルページも参考にどうぞ。
ものごとの楽しさを知りながら、実践による新しい技術スキルを習得し、エンジニアリングの専門知識を増やし、キャリアアップを目指しましょう。
デザインツール
90種類の3Dオブジェクトを揃えた巨大コレクションで、ウェブページにインパンクと今っぽさを演出できる素材のひとつ。無料版は25種類、PNGファイルでのダウンロードが可能。
Checkered Pixelated Poster Effect
ダウンロードできるPSDファイルを開き、加工したい写真を追加するだけで完成の超お手軽Photoshopデザイン素材。
加工したい画像サイズに関係なく、オリジナルのまま自動で背景を切り抜くオンラインツール。ファイルサイズに制限がないというのはめずらしいかも。
Humanities Illustration Library
ユニークな手書きのキャラクターイラスト35点をPNGファイルで収録した素材集。無料版はクレジット表記が必要。
シンプルで美しい3Dデザインが特長の壁紙ウォールペーパーを無料ダウンロードできます。最大6K対応の高解像度も魅力。
プロトタイプ・アイコンツール
デザインコラボツール Figmaの日本語版の提供がスタート。国内でもすでにヤフー、LINE、楽天、富士通などが採用するなど、今後ますますたのしみ。
魅力的なモーショングラフィクを用いたモックアップを手軽に作成できるオンラインツール。現在5種類のデモ用テンプレートが公開されています。
シンプルでカスタマイズしやすい、320+個のミニアイコン（24x24px）素材をあつめたReact用パッケージ。HTMLでウェブアイコンとして利用も可能。16/24/32の3サイズ、1/1.5/2のストローク線からえらびましょう。
Figmaアプリで直接、背景の切り抜きがワンクリックでできるプラグイン。スマホ向けアプリが元ベース。
13,000個を超えるオープンソースのアイコン素材を集めたライブラリで、随時アップデートされており、現在v2.4。アイコンのリクエストも可能です。
Social Media Framework for Figma
モバイル対応、あらゆるソーシャルメディア向けの画像レイアウトを作成できるテンプレート集。Figmaでどうぞ。
モバイルアプリのプロトタイプを、デザインスキル不要で作成できるオンラインツール。個人はもちろん、チームでの利用が便利。
System 22 – The UI Kit for Everyone
書体から配色、ロゴなどのブランディングにはじまり、あらゆるUIコンポーネントを揃えた無料とは思えないアイテム。
ラインやデュオトーン、ソリッドなど4スタイル合計、4600種類のUIアイコンを揃えたFigma用ファイル。
クリエイティブ・面白ツール
全国の花火大会の開催スポットが地図上でひと目でわかるYahoo!MAPアプリ。8/31までの期間限定の公開です。
あらゆるマーケティング目標のためにコンバージョンを促進する、CTA 300種類が揃イます。だれもが思わずクリックしたくなる、行動を促すフレーズづくりに。
すべての会議を価値のあるものにする、をコンセプトにしたチームによる共同作業をより効率的にするオンラインツール。
自然を守る募金プラットフォームとして、自然そのままのサウンドを体験できるオンラインFM。世界各地の自然の音をお楽しみいただけます。
深い集中力でフロー状態にいざなう、効果的なアンビエント音楽を無料で視聴できるオンラインサービス。ここぞ集中、というときにいかがでしょう。
ThreeJSを使用して、GitHubコントリビューショングラフから3Dのイラスト都市を自動で生成するツール。
現代のウェブサービスの流れを皮肉たっぷりに体験できるデモサイト。たしかに多いです、こういうサイト。
お気に入りページへのクイックアクセス、翻訳ツールや計算機などをすぐ利用できる、Chrome専用の拡張プラグイン。
世界各国の「注目すべき人物（Notable People）」の出生地を地図上に表示したオンラインツール。特定のカテゴリの絞り込みは左側をクリック。日本は、宮崎駿監督が大きく表示されています。
動画の流れるビルボード広告をバーチャルに体験、カスタマイズできるオンラインツイール。昼と夜で雰囲気ががらりと変わりますよ。
オリジナル指輪メーカー。さまざまなアングルに変更しながら、台座と宝石の色を決めていきましょう。キラキラと美しく輝くマイリングをデザインします。
インスピレーションを整理したり、ムードボードの作成、配色カラーパレットの組み合わせなどを行うオンラインツール。リアルタイムの共同作業ができるワークスペースが魅力。
前回の最新オンラインツールまとめはこちら、どんどん新しいアイデアがかたちになったサービスが登場しています。
