プログラミング・コーディングツール
HTML・CSSクイックリファレンス
HTMLやCSSの基本
codic
英語の変数名や関数名に日本語から変換してくれます。
プログラミングやコーディングに必要なネームに迷ったら、codicで変換してみましょう。
Sublime や ATOM のプラグインもあるので、エディタから直接読み出せます。
https://codic.jp/plugins
正規表現チェッカー
PHP及びJavaScriptコーディング中に正規表現を記述する際の動作チェック等にご利用ください。
正規表現と対象文字列を入力し、[チェック！]ボタンをクリックすると、フィードバックが表示されます。
http://okumocchi.jp/php/re.php
SEOチェック
PageSpeed Insights
Googleが提供しているページの読み込みスピードをチェックできるツール
https://developers.google.com/speed/pagespeed/insights/?hl=ja-JP
GTmetrix
ページスピードについて詳しく見ることができる。
読み込み順序も見ることができる。
モバイルフレンドリーテスト
https://search.google.com/test/mobile-friendly
モバイルに適しているかを視覚的にだけではなく、ツール上で確認できる。
構造化データテストツール
https://search.google.com/structured-data/testing-tool/u/0/
どのような構造化データが使われているかもリスト化してくれます。エラーチェックや警告などがないかを素早く確認できます。
HTML5チェッカー
HTML5マークアップに間違った点やタグなどの閉じ忘れ、公文のチェックが自動でできます。
サイト上だけでなく、ローカル環境での構文チェックもかのです。
HTML 5 Outliner
https://gsnedders.html5.org/outliner/
ページのアウトライン構造チェック
SEOチェキ
メタディスクリプション、メタキーワードの出力内容やインデックス数、キーワードなどのチェックもできます。
関連キーワード取得ツール
http://www.related-keywords.com/
タイトルを決めるときなどにサジェストや関連用語を出力できます。
Lighthouse（ライトハウス）
https://developers.google.com/web/tools/lighthouse/?hl=ja
Lighthouseを使うと、ページのパフォーマンスやアクセシビリティ、PWAの対応状況などを検証できる。またSEOの項目チェックも行える。
レスポンシブチェック
Sizzy
Responsinator
Multi Screen Resolution Test
http://whatismyscreenresolution.net/multi-screen-test
Responsive Checker
Androidのデバイスに強いが、最新機種が少なめ。
Apple製品の殆どに対応。Appleのデバイスがそのまま表示されるので、確認しやすいです。
配色・カラーリスト
WEB色見本 原色大辞典
昔からお世話になっているサイト
Coolors
カラーパレットを自動で作ってくれるサイト。
共有なども簡単にできる。
colorhexa
配色パターンが作れるサイト。微妙な違いを比べて、印象のあるサイト制作に使える。
Khroma
AIによって好みをパーソナライズしてくれるカラーピッカーツール
Colormind
http://colormind.io/bootstrap/
ディープラーニング技術を用いたAIによる配色ツール
