Web Tool Gallery

世界のAIに関するツールを検索できるサービス。チャットボットでサイト内検索も可能。

Webアクセシビリティに対応したサイトを紹介しているギャラリーサイト。

JavaScriptを綺麗に書くためのTips。引用：JavaScriptで可読性が良く、再利用でき、リファクタリング可能なソフトウェアを提供するためのガイドです。

ボタン、チェックボックス、ローディング、トグルボタンなど様々なUIパーツのギャラリーサイト。全てのパーツはHTMLとCSSのみで表現できる。

GoogleFontやAdobeFontからイメージにあったフォントを検索できるサイトです。有料or無料など、様々な条件での絞り込みが可能！

トラハックさんのTypeScript講座。全11回あり、基本的な型定義から丁寧に解説されているので初めてTypeScriptを触る方も安心して学べます！

HTML Living Standardに準じたコンテンツモデルのチートシートです。調べたい要素をクリックすると、親子にどんなタグを指定できるかを視覚的に教えてくれます。

片方の要素がコンテンツ幅から画面いっぱいにはみ出しているレイアウトを実現するためのCSS

ブラウザ上で画像の背景を削除してくれるツール。

「Web Content Accessibility Guidelines (WCAG) 2.0」に基づいたコントラストチェッカー。コントラスト比やWCAGが定める基準に達しているかどうかを数値化してくれます。

文字色と背景色のコントラストをリアルタイムでチェックできるツール。

Webデザインからコーディングをはじめ、Web制作に関する仕事内容や転職のコツなど幅広い知識を学べるサービス。

グローバルな情報を学べる企業のオウンドメディア。テクノロジー、サービス、スタートアップなどのカテゴリーがある。

clip-pathで様々な図形を作成するためのコードを生成してくれるツール。三角形や丸の他にも、自分で自由にパスを動かすこともできる。

【総数4620件】おしゃれなバナーだけを集めたギャラリーサイト。

YouTubeのサムネイル専門のギャラリーサイト。

バナーの質と量なら一番のバナー専門ギャラリーサイト。

広告ブロック機能がデフォルトで搭載された次世代のWebブラウザ。YouTube広告やGoogle広告をブロックできる。ビットフライヤーと連携すれば仮想通貨を稼ぐこともできる。

Googleが提供するサイトパフォーマンスを計測するツール。コアウェブバイタルに関する指標もチェックできるので、コーディング完了後はこのツールで確認するようにしましょう！

ガントチャート、タスク管理表、ドキュメント、マニュアルなど作りたいものを作れる万能ドキュメント管理サービス。

ブラウザ上で複数人同時編集ができるExcel。工数見積もりやガントチャートなどもスプレッドシートで簡単に作成できる。

OpenAIのテキスト生成AIプラットフォーム。つまり、質問を入力するとAIが答えてくれるサービス。一般的な質問からコードに関する質問まで答えてくれるので是非一度使ってみて驚いてほしい。

日本初のヘッドレスCMSのひとつで当サイトでも利用している。無料プランでもAPIモデルを複数作れるのがとても助かる。

日本初のヘッドレスCMS。一番の強みはチュートリアルや参考記事の豊富さ。実装に困ってもググれば比較的楽に解決できる。

静的サイトをホスティングできるサービス。Next.jsなどモダンな開発でよく使われる。当サイトでも利用している。

ソースコードをバージョン管理するツール。実装者は最低限扱えるようになったほうがいい。

サイトの自由度が高くテンプレートも豊富で誰でも扱いやすいノーコードツール。

個人的におすすめのレンタルサーバー。併せてドメインはムームードメインを使うのがおすすめ（どちらもGMOが運営している）。使いやすさはダントツ！

制作物がどのようにして完成していくかを体験できるデザイン参考書。論理的なデザイン思考を学べる一冊。フィードバック内容もロジカルでとてもためになった。

消費者の心理や思考をWebデザインと結びつけて解説している書籍。マジカルナンバー、アンカリンク、ジャムの法則など様々な心理学を「実例」と共に解説しているので読んですぐ実案件に取り入れられた。

2つのデザイン案どちらの効果が高かったのかを実例で解説している書籍。デザインの引き出しが増えるのはもちろん、アンチパターンも学べるのでスキルアップ間違いないの一冊。

Reactを0から学べる書籍。JavaScriptの基礎も同時に学べて、サンプルファイルもダウンロードできるのでReact入門におすすめの一冊。図解やサンプルコードが多くとても分かりやすかった。

Next.jsの学習本でサンプルコードもダウンロード可能。ブログを作りながらNextを学んでいくスタイルなのでイメージが湧きやすくとても分かりやすかった。

Sassを全体的に手っ取り早く学びたい方はこれ一択！細かい機能やテクニックなどを包括して学べます。同じ系列の緑の表紙のCSS設計の教科書もおすすめ。

AWSの基礎を学べる書籍。これを一通り読んでからは周りのエンジニア達の会話をある程度理解できるようになった。

Laravelを勉強するなら動画やブログよりこの本が圧倒的におすすめです（経験談）。DBって何？の状態からでもちゃんと実務で通用するレベルまで理解することができた。

少し前のバージョンなので注意が必要ですが、もしかしたら最新バージョンに対応している第3版が出るかも??

URLを入力すれば何年も前の状態のサイトを見ることができるサービス。

開いている全てのタブのURLをコピーする / クリップボードにコピーした複数のURLを一気に開く

サイト上の単語をドラッグして選択すると即翻訳してくれる拡張機能

サイト上に画像を重ねてデザインデータとズレが無いか確認できる拡張機能

スクリーンショットを撮って誰でもアクセスできるようにURLを作成する

ページ全体のスクリーンショットを撮って画像で保存できるようにする

Google検索の結果にサイトのプレビューを表示してくれる拡張機能

任意のサイトやドメインに対して自由にCSSを設定できる

任意のサイトやドメインに対してJavaScriptを自由に設定できる

ページ内の画像を一括でダウンロードできる（任意の画像のみダウンロードも可能）

チャットワーク専用の拡張機能。装飾タグボタンを入力エリアの近くに表示されるようになる

「SEO対策のために、正しいHTML（タグ）でコーディングしましょう」という考え方は間違っているので一度は読んでみてほしい記事です。