Web制作・SNSのツール

カラーコード・メタタグ・SNS の文字数など、Web 担当者向けのツール。

box-shadow の作成影のずれ・ぼかし・広がり・色・透明度を指定して、CSS の box-shadow を作成します。ふんわりした影のプリセット付き。 CSS clamp() の計算（レスポンシブな文字サイズ）画面幅に応じて文字サイズなどを滑らかに変える CSS の clamp() を、最小・最大のサイズと画面幅から計算します。 HTML の表（table タグ）の作成 Excel からコピーした表や CSV を、HTML の table タグに変換します。1行目を見出し（th）にできます。 HTML メールのプレビュー・チェック HTML メールのソースを貼り付けると、PC・スマホ幅でプレビューし、メールソフトで崩れやすい書き方を指摘します。 Instagram の改行・空行の保持 Instagram で改行や空行が消えないように、空行に見えない文字を入れて投稿用の文章を整えます。 mailto リンクの作成宛先・CC・件名・本文を指定して、クリックするとメールソフトが開く mailto リンク（URL と a タグ）を作成します。 px ⇔ rem・em の換算ルートの文字サイズ（16px）を基準に、px と rem・em・%・pt を相互に換算します。 robots.txt の作成クロールを許可・拒否するパス、AI 学習用クローラーの拒否、サイトマップの場所を選んで robots.txt を作成します。 sitemap.xml の作成 URL の一覧から XML サイトマップ（sitemap.xml）を作成します。更新日・更新頻度・優先度も指定できます。 SNS の文字数制限チェック X・Instagram・Threads・TikTok・YouTube・LINE などの投稿・プロフィールの文字数の上限と、入力した文章の長さを一覧で比べます。 SVG の最適化（軽量化） SVG からコメント・エディタのメタデータ・不要な空白を取り除き、数値の桁数を減らしてファイルを軽くします。 URL の一括リンク化（a タグ）文章中の URL を <a href> のリンクに変換します。新しいタブで開く（target="_blank"）や rel 属性も付けられます。 UTM パラメータ付き URL の作成 URL に utm_source・utm_medium・utm_campaign などのパラメータを付けて、アクセス解析用のリンクを作ります。 X（Twitter）の文字数カウント・スレッド分割 X（旧Twitter）の文字数ルール（全角は2・URL は23）で投稿の長さを数え、長い文章を140字（280）ごとのスレッドに分けます。 YouTube チャプター（タイムスタンプ）の作成「時間タイトル」のメモから、YouTube の概要欄に貼るチャプター一覧を作ります。0:00 始まりなどのルールもチェックします。 YouTube の再生位置を指定した URL YouTube の動画 URL と時間（1:23 など）から、その位置から再生が始まる共有用 URL を作ります。カラーコードの変換（HEX・RGB・HSL）カラーコード（#1d4ed8）・RGB・HSL・色名を相互に変換し、色見本と、明るく・暗くした色も表示します。キーワード出現率のチェック記事の中で指定したキーワードが何回・どれくらいの割合で出てくるかを数えます。SEO の文章チェックに。コントラスト比のチェック（WCAG）文字色と背景色のコントラスト比を計算し、WCAG 2.x の AA・AAA 基準を満たすかを判定します。読みやすい配色の確認に。タイトル・説明文の文字数チェックページのタイトルとメタディスクリプションの文字数を数え、検索結果で省略されずに表示される長さの目安と比べます。ハッシュタグの整形キーワードの一覧を「#タグ」の形に整え、重複を除いて SNS に貼り付けやすい形にします。数の上限チェック付き。フォントのプレビュー（端末のフォント）入力した文章を、パソコンやスマホに入っているフォントで並べて表示し、見た目を比べられます。CSS の font-family もコピーできます。ブレークポイントの確認（Tailwind・Bootstrap）画面の幅を入れると、Tailwind CSS・Bootstrap などのどのブレークポイントに当たるかを一覧で表示します。メタタグ・OGP タグの作成ページのタイトル・説明文・URL・画像から、title・description・OGP（Facebook・X）のメタタグをまとめて作成します。リダイレクト設定の作成（.htaccess・nginx）「旧URL 新URL」の一覧から、301 リダイレクトの設定を .htaccess（Apache）と nginx の形式で作成します。レスポンシブな埋め込みコードの作成 YouTube や Google マップなどの iframe を、画面幅に合わせて縦横比を保つ埋め込みコードに変換します。画像の alt 属性チェック HTML を貼り付けると、img タグの alt 属性の有無と内容を一覧にし、alt がない画像を見つけます。アクセシビリティ・SEO の確認に。画面サイズ・デバイス情報の表示今見ているブラウザの画面サイズ・表示領域・デバイスピクセル比・ブラウザ情報を表示します。表示確認や問い合わせ対応に。角丸（border-radius）の作成四隅の角丸の大きさを指定して、CSS の border-radius を作成します。楕円や片側だけの角丸にも対応。検索結果・SNS での表示プレビュータイトル・説明文・URL が Google の検索結果や X・Facebook のカードでどう表示されるか（どこで省略されるか）を確認します。見出し構造のチェック（h1〜h6） HTML を貼り付けると、見出し（h1〜h6）の構造を一覧にし、h1 が複数ある・階層が飛んでいるなどの問題を指摘します。構造化データ（JSON-LD）の作成会社情報（Organization）・パンくず・FAQ・記事などの構造化データ（JSON-LD）を、入力した内容から作成します。色覚シミュレーション（色の見え方）指定した色が、P型・D型・T型の色覚の人や白黒印刷でどのように見えるかを色見本で表示します。配色の確認に。装飾文字（太字・筆記体の英字）英数字を 𝐁𝐨𝐥𝐝・𝓢𝓬𝓻𝓲𝓹𝓽・Ⓒⓘⓡⓒⓛⓔ などの装飾文字（Unicode）に変換します。SNS のプロフィールや投稿の装飾に。台本の文字数から動画・スピーチの時間台本の文字数（または文章）から、話す速さに応じた動画・ナレーション・スピーチの長さを計算します。目標の時間から必要な文字数も分かります。