WordPress構築に便利だったツール

プログラミング・コーディングツール

HTML・CSSクイックリファレンス

HTMLやCSSの基本

codic

英語の変数名や関数名に日本語から変換してくれます。

プログラミングやコーディングに必要なネームに迷ったら、codicで変換してみましょう。

Sublime や ATOM のプラグインもあるので、エディタから直接読み出せます。
https://codic.jp/plugins

正規表現チェッカー

PHP及びJavaScriptコーディング中に正規表現を記述する際の動作チェック等にご利用ください。
正規表現と対象文字列を入力し、[チェック!]ボタンをクリックすると、フィードバックが表示されます。

SEOチェック

PageSpeed Insights

Googleが提供しているページの読み込みスピードをチェックできるツール

GTmetrix

ページスピードについて詳しく見ることができる。
読み込み順序も見ることができる。

モバイルフレンドリーテスト

モバイルに適しているかを視覚的にだけではなく、ツール上で確認できる。

構造化データテストツール

どのような構造化データが使われているかもリスト化してくれます。エラーチェックや警告などがないかを素早く確認できます。

HTML5チェッカー

HTML5マークアップに間違った点やタグなどの閉じ忘れ、公文のチェックが自動でできます。
サイト上だけでなく、ローカル環境での構文チェックもかのです。

HTML 5 Outliner

ページのアウトライン構造チェック

SEOチェキ

メタディスクリプション、メタキーワードの出力内容やインデックス数、キーワードなどのチェックもできます。

関連キーワード取得ツール

タイトルを決めるときなどにサジェストや関連用語を出力できます。

Lighthouse(ライトハウス)

Lighthouseを使うと、ページのパフォーマンスやアクセシビリティ、PWAの対応状況などを検証できる。またSEOの項目チェックも行える。

レスポンシブチェック

Sizzy

Responsinator

Multi Screen Resolution Test

Responsive Checker

Androidのデバイスに強いが、最新機種が少なめ。

Apple製品の殆どに対応。Appleのデバイスがそのまま表示されるので、確認しやすいです。

配色・カラーリスト

WEB色見本 原色大辞典

昔からお世話になっているサイト

Coolors

カラーパレットを自動で作ってくれるサイト。
共有なども簡単にできる。

colorhexa

配色パターンが作れるサイト。微妙な違いを比べて、印象のあるサイト制作に使える。

Khroma

AIによって好みをパーソナライズしてくれるカラーピッカーツール

Colormind

ディープラーニング技術を用いたAIによる配色ツール