はじめに

本業や個人制作で
・デザイン作成（Figma）
・マークアップ（HTML / CSS9
・フロントエンド開発（React, TypeScrip）
を行なっています。

その際によく使っている便利なサイトについてまとめました。

システム開発よりも、デザイン・Web制作系が多めになります。
思い出すたびに追加していきます。（最終更新：2025/12/10）

目次

入れ子関係を忘れることがあるので、たまに使っています。

HTMLには 「コンテンツモデル（Content Model）」 という概念があり、
「どの要素の中にどのカテゴリーに属する要素を入れてよいか」というルールがあります。

例えば、以下の例はすべてルールに版しています❌

<h1>
  <p>乃木坂46</p>
</h1>

<ul>
　<div>
 　　<li>項目</li>
　</div>
 </ul>

セレクトボックスやメニューを作る際に三角形をよく使うので、ジェネレーターで生成しています。
サイトも使いやすいです。

Web制作会社にいたころはよく使ってたサルワカさんのサイトです。
使いやすくてお気に入りのサイトです。

「画像は支給されてないけど、とりあえず仮画像を置いておきたい」というときに使っています。
無難なシンプルな画像が生成されるので使いやすいです。

画像はpngのみです。
幅(width)と高さ(height)を自由に決められます。

数年前からウェブアクセシビリティの「コントラスト比」について対応を求められることがあります。
このチェッカーか、Figmaのプラグインを使って比率を調べています。
最低限「AA」はクリアするようにしています。

「この画像のカラーコードが知りたい」というときに使っています。

画像をアップロードして任意の箇所をクリックすると、カラーが表示されます。
（HEX、RGB、HSVに対応）

デフォルトのチェックボックスだと見た目がいまいちなので、多くの場合はカスタマイズします。
フォーム系のパーツは地味に面倒なので、こういうサイトをよく使っています。

入力フォームに文字数制限がある場合に使っています。

デザイン崩れが起きていないか確認するときに便利です。
一般的なモニターの横幅は1920pxですが、ワイドモニターを使っていたり、中途半端なブラウザの幅にして確認するときに使っています。

以前まではずっと別のサイト使っていたんですが、会社の人から「思想が強い」という指摘を受けたので掲載するのはやめておこうと思います。（「デバイスサイズ確認」でググると出てきます）

システム開発では使ったことはありません。
Web制作会社にいたころ、大規模なWebサイトのリニューアル時に使っていました。
スプレッドシートなどにタイトル、URLを記載したい場合に便利です。