Awesome Inspire

Inspireを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

構想

レイアウトの選択肢やスタイルの方向性について、全体像をつかむのに適したサイトです。

• Awwwards - さまざまなスタイルの優れたサイトを多数掲載。
• CodeMyUI - 優れた UI を作る洗練された CSS/JavaScript コードスニペット集。
• CodePen - ユーザーが投稿したコードの構想やスニペットを集める中心的なリポジトリ。実験に最適です。
• Codrops - 最新のウェブ動向について記事やチュートリアルを公開するウェブデザイン・開発ブログ。
• CodyHouse - 優れた UI 要素のチュートリアルとショーケース。
• CSS Winner - レビュー済みの優れたウェブサイト一覧。
• Designer News - インターネット上の優れたデザイン・開発リンク。
• Dribbble - 才能ある人々によるアイコン、落書き、サイトなどのスナップ。
• Httpster - インターネット上の優れたサイトを厳選したリスト。
• Landings - 好みに応じて、デザインの参考になる最適なランディングページを検索。
• OnePageLove - 1ページサイトや一般的なウェブサイトデザインの優れた着想源。
• SaaS Pages - 着想を届けるため特別に作られた Netlify ページの分析。
• Siiimple - よりシンプルなサイトを集めた別のリスト。
• SiteInspire - 着想を得られます。
• TheBestDesigns - ウェブ全体から手作業で選んだサイトの総合リスト。

制作

サイトの基本的な枠組みを構築するのに適したサイトです。

• 色 🎨
  • ColorsWall - カラーパレットを保存する場所。
  • Coolors - 非常に高速な配色生成器。
  • Kuler - サイト向けの独自カラースウォッチを簡単に作成・閲覧。
  • uiGradients - 美しいグラデーション生成器。
  • Spectral - 最小限のカラースウォッチ作成ツール。
• フォント
  • Google Fonts - 無料で使いやすいウェブフォントを多数提供。
• フレームワーク
  • Bootstrap - 現代的なウェブサイトやウェブアプリの構築に広く使われるフレームワーク。
    • Bootswatch - Bootstrap 向け無料テーマの一覧。
• アイコン
  • Icon Scout - 高品質なアイコン、イラスト、ストック写真を一か所で入手。
  • Iconmonstr - 無料でシンプルなアイコンのコレクション。
  • Ionicons - 無料アイコンのもう一つの優れたコレクション。
• 画像
  • AllTheFreeStock - 無料のストック画像、動画、音声、アイコンを一か所に集約。
  • TheStocks.im - 優れたストック写真サイトのコレクション。
  • Unsplash - 無料で高品質なストック写真。
• リソース
  • CSS3 Animation Cheat Sheet - CSS3 アニメーションスニペット集。
  • MDN - HTML、CSS、JavaScript などのドキュメント
  • User Inter Faces - ユーザー画像向けのダミー画像を取得。
  • YMNNJQ - jQuery の関数を素の JavaScript で確認。ライブラリ不要。

ツール

すべての画家には筆が必要です。まあ……大半の画家には。

• デザインツール
  • Figma - ウェブベースのベクターグラフィックスエディター
  • Sketch［macOS 専用］- プロ向けベクターグラフィックスエディター
• IDE
  • DevSession - ローカルディレクトリから共同作業用オンライン IDE を開きます。
• FileZilla - ターミナルでの FTP が不安な人向け
• Hyper - 美しく拡張可能なコマンドラインインターフェース
• Taskade［macOS 専用］- 美しいタスクリストとアウトラインを作成。
• テキストエディター
  • Atom - 21世紀向けの改造可能なテキストエディター。
  • Brackets - ライブプレビューを備えた現代的なオープンソースエディター。
  • Nova［macOS 専用］- 美しいネイティブテキストエディター。
  • Sublime Text - 開発者に広く使われるテキストエディター。
    • テーマ
      • Flatron - フラットで紫色、非常に魅力的。
      • Predawn - 美しいダークインターフェースと構文テーマ。
  • VSCode - 無料のテキストエディター
• WinSCP - MEAN スタックや VPS サーバーへファイルをアップロード。

共同作業

チームで作業しますか？ これらのリンクが役立ちます。

• Cloud9 - クラウド上で他の人と共同作業する優れた落ち着いた方法。
• Gist - コードとテキストをすばやく共有。小さなリポジトリのように使えます。
• Invoice Ninja - オープンソースの請求書作成プラットフォーム。
• Red Pen - デザインを共有し、途切れなくフィードバックを取得。
• Scratchpad - ウェブサイトのコーディングとプレビューを行うシンプルなリアルタイム共同作業ツール。

バックエンド

優れたウェブアプリには優れたバックエンドが必要です。

• Auth0 - 認証を代行。
• DigitalOcean - 安価で高品質な VPS ホスティング企業。
• Firebase - サイト向けのリアルタイム・フロントエンドデータベース。
• Hasura - アプリのバックエンドを高速に構築・デプロイするプラットフォーム。
• Heroku - 非常に簡単に拡張できるクラウドアプリケーションプラットフォーム。

テスト

公開前に、サイトが成功する準備を整えたか確認するための優れたツールです。

• Browserling - ウェブサイトをクロスブラウザーでテスト。
• Checkbot - ウェブサイトが50以上の SEO、速度、セキュリティのベストプラクティスに従っているかテストするブラウザー拡張機能。
• CodePen - ブラウザー上で使う無料のウェブエディター。
• Hurl.it - ブラウザーで HTTP リクエストを実行。
• Localtunnel - localhost のポートを外部へ公開。
• Placehold - 任意サイズの独自プレースホルダー画像を生成。
• Postman - HTTP リクエスト、モックサーバー生成、API ドキュメント作成を行うツール。
• WooRank - SEO 要素、W3 検証、その他多数の変数をレビューするツール。基本サービスは無料。
• Yslow - サイト読み込みを遅くする複数の原因を分析し、修正方法を見つけるツール。

おすすめの記事

空き時間に読むものが必要ですか？

• 1stWebDesign - ウェブ開発とデザインに関する良質で分かりやすいブログ。
• A List Apart - コーディングからビジネス慣行まで、ゲスト投稿と書籍全文を掲載。
• Codrops - 現代のウェブ開発者とデザイナー向けデザイン技法の優れたコレクション。
• CSS-Tricks - CSS に関するあらゆる内容を扱う優れたブログ
• GoodUI - 少なくとも悪くはありません。
• Insert HTML - ウェブ開発者向けの現在と将来の技法・技術を扱うブログ。
• Mentor - 他のデザイナーや開発者からランダムな助言を取得。
• Smashing Magazine - デジタルデザイン全般を扱う雑誌。

ライセンス

法律で認められる範囲において、Noah Buscher はこの作品に関するすべての著作権および関連する権利、隣接権を放棄しています。