フロントエンド開発者としての生産性を向上させたいと考えています。

学習リソース、生産性向上のためのツール、または厳選されたディレクトリを探している場合でも、よりスマートに作業し、フロントエンドスキルをレベルアップするのに役立つおすすめの情報がここにあります。したがって、このリストを保存して、役立つと思われる他の人と共有することを忘れないでください :)

それでは、始めましょう

1. PureRef

インスピレーション管理ボード

Essential tools and resources for Frontend developers

PureRef は、すべての視覚的なインスピレーションを 1 か所に集めて整理できるリファレンス管理ツールです。無限のキャンバスを使用すると、Web またはファイルから直接画像をドラッグアンドドロップし、自由に配置して個人的なムードボードやデザインリファレンスを作成できます。

デザイナーと開発者の両方にとって必須です。 Mac、Linux、Windows で利用可能

⭐️ Pure Ref を入手

2.フォントテスター

Web 開発者向けのタイポグラフィ拡張機能

テキストは UI の 80% を占めます。適切なフォントは情報を表示するだけではなく、認識を形成します。

Font Tester は、Web サイトのフォントを選択するのに役立つ強力な拡張機能です。あらゆる Web サイトで 1,000 個のフォントをテストおよびプレビューするのに役立ち、より優れたタイポグラフィを通じてブランドについての強力な認識を作成するのに役立ちます。

Web サイトに適したフォントを選ぶのが苦手な方は、ぜひこれをチェックしてください。

⭐️フォントテスターを入手

3. GSAP

人気の Web アニメーションライブラリ

GSAP は、Web 上でスムーズで高性能なアニメーションを簡単に作成できるようにする人気の JavaScript ライブラリです。開発者にとって非常に直感的な API があり、このライブラリを利用して単純なアニメーションから非常に複雑なアニメーションまで簡単に作成できます。

⭐️ GSAP を取得

4. SVG リポジトリ

SVG ベクターとアイコンを見つける場所

SVG リポジトリは、SVG ベクターを検索して使用するための人気のある無料サイトで、500,000 を超えるアイコンとベクターのコレクションから選択できます。すべてのアイコンは個人プロジェクトでも商用プロジェクトでも無料で利用できます。

⭐️ SVG リポジトリにアクセス

5.カラーハント

厳選されたカラーパレット

Color Hunt は、新鮮な色の組み合わせを求める Web デザイナーに最適な、厳選されたカラーパレットのコレクションを提供します。各パレットは慎重に作られ、コミュニティによって承認されているため、推測に頼らずに自分の美学に合った配色を見つけることができます。

⭐️ カラーハントにアクセスしてください

6. CSS グラデーション

グラデーションジェネレーター

CSS Gradient は、CSS でカスタムグラデーションを作成するためのシンプルかつ強力な Web サイトです。色の選択、角度の設定、ストップの調整のための直感的なインターフェイスを提供し、すぐにプロジェクトに統合できる CSS コードを生成します。

⭐️ CSS グラデーションにアクセス

7.賞品

インスピレーションと最高評価のデザイン

Awwwards は、デザイン、創造性、使いやすさの卓越性を強調する、トップクラスの Web サイトを紹介する Web サイトショーケースプラットフォームです。これは、Web 開発者やデザイナーが新しいトレンドを探索し、インスピレーションを見つけ、最高の Web サイトがどのように作成されるかを確認するための優れたリソースです。

⭐️ Awwwards にアクセスしてください

8.ランドブック

インスピレーションと最高評価のデザイン

LandBook は、美しく効果的なランディングページの厳選されたギャラリーです。さまざまな業界にわたるランディングページデザインの実例を紹介しており、開発者やデザイナーにとって素晴らしいインスピレーションの源です。

⭐️ランドブックにアクセス

9.スクリーンティ

画面録画と製品録画

Screenity は強力な画面録画 Chrome 拡張機能で、録画中の注釈付け、カメラとマイクの入力のキャプチャ、さまざまな形式での録画のエクスポートなどの機能を提供します。チュートリアル、バグレポート、ウォークスルーの作成に最適で、開発者、教育者、リモートチームにとって優れた生産性ツールとなります。

⭐️ スクリーンを手に入れましょう

10. HTML リビジョン

学習リソースとテンプレート

HTML Rev は、HTML、Bootstrap、Tailwind、React、Vue、Laravel などを含む 1,500 を超える無料テンプレートの広範なコレクションです。これは、貴重な学習リソースと既製のテンプレートのライブラリの両方として機能するため、毎回最初から始める必要はありません。

⭐️ HTML Rev にアクセスしてください

11.エクスカリドロー

ブレインストーミング

Excalidraw は、図やレイアウトをスケッチするためのオープンソースのオンラインホワイトボードです。手書きスタイルと直感的なツールにより、ブレインストーミング、フローチャート作成、または Web プロジェクトのアイデアを素早く計画するのに最適です。

⭐️ Excalidraw にアクセスしてください

12.コデペン

オンラインエディタ

CodePen は、HTML、CSS、JavaScript 用のオンラインコードエディターであり、開発者がフロントエンドプロジェクトを作成、共有、探索できるようにします。リアルタイムのプレビューと、フィードバックやインスピレーションのための強力なコミュニティを提供します。プロトタイピングや学習に最適です。

⭐️ CodePen にアクセスしてください

13.ブラウザスタック

クロスブラウザテストツール

BrowserStack は人気のあるブラウザテストツールです。実際のデバイス上でクロスブラウザテストを行うことができ、開発者がさまざまなブラウザやオペレーティングシステム間で Web サイトの互換性をテストする必要がなくなります。物理実験室用。一貫したユーザーエクスペリエンスを確保するための頼りになるツールです。

⭐️ BrowserStack にアクセスしてください