<p>ニュース記事なら「これって今日の情報？」と鮮度が気になり、技術ブログなら「この記事古くないかな？」と日付を確認しに行く。</p><p>その一方で、サービス紹介ページだと日付がなくてもさほど気にならなかったり……。</p><p>自分の中で無意識のうちに、コンテンツに合わせて「日付」に求める役割を変えながら見ているなと。</p>

<p>サイト制作においても、この情報における日付の重要度や役割が意図して配置されているのか、それとも「必要だから」となんとなく置かれているだけなのか、ケースバイケースだと思います。</p><pre><code>2026年2月18日　2026.02.18　2026/02/18</code></pre><p>実際にいくつかのサイトを改めて眺めてみると、日付の重要度が高いコンテンツほど、見せ方やフォーマットが丁寧に設計されているのが見えてきておもしろい😊</p><p>というわけで、サイトのタイプによって日付の扱いにどのような傾向があるのか、自分なりにゆるくまとめてみました。</p><p><span class="txt-small">※本記事ではデザイン的な文字組、アクセシビリティ、読み上げについては記載していません。</span></p><h2 id="h6e9fb593de">コーポレート</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>日付表示</p></th><td colspan="1" rowspan="1"><p>2025年12月05日　　　　　　<br>2025年12月1日<br>2025.04.05</p></td></tr><tr><th colspan="1" rowspan="1"><p>フォーマット</p></th><td colspan="1" rowspan="1"><p>Y年m月d日<br>Y年n月j日<br>Y.ｍ.d</p></td></tr></tbody></table><p><span class="txt-small">参考：トヨタ、三菱商事、SONY、セブン＆アイ、大林組</span></p><p>日本の大手企業では漢字や全角記号を用いた、「正式な文書」としての重みを重視した表記の傾向がある。</p><h3 id="h9269780210">信頼性・正確性 ⭐⭐⭐⭐⭐</h3><p>公式な記録としての正確さが最優先。</p><h3 id="hc7918bcd5e">リアルタイム性 ⭐</h3><p>「いつ」出たかという記録が大事で、速報性は低め。</p><h3 id="h9c6cdc8c9f">一覧性・コンパクトさ ⭐⭐</h3><p>丁寧な表記にするため、文字数は長くなりがち。</p><h3 id="h6ae796d3fc">年月日表記の0埋め</h3><p>12月05日　2026年01月05日</p><p>個人的には年月日の表記に0が埋まっていると、見た目的には縦ラインが揃うから気持ちが良いかもしれないですが、少し違和感があります。</p><p></p><h2 id="h0bcd098fee">ニュース系（国内）</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>日付表示</p></th><td colspan="1" rowspan="1"><p>05:00<br>4日<br>2025年12月5日 15:00　　　<br>2025/12/04 17:36<br>12/5(金) 15:18更新</p></td></tr><tr><th colspan="1" rowspan="1"><p>フォーマット</p></th><td colspan="1" rowspan="1"><p>H:i<br>j日<br>Y年n月j日 H:i<br>Y/m/d H:i<br>n/j(D) H:i更新</p></td></tr></tbody></table><p><span class="txt-small">参考：読売新聞、日本経済新聞、Yahoo!ニュース</span></p><p>「今日のことか、昨日のことか」が重要。<br>日経新聞のように、時間の経過（当日、当月、前年以前）に合わせてフォーマットを動的に変化させる設計が多い傾向に。</p><p>一覧はサイトによって表示形式が異なりますが、記事の詳細ページでは年月日日時とフル表記が多く、公開した日時と更新した日時の両方掲載されいています。</p><h3 id="h6ba873d014">信頼性・正確性 ⭐⭐⭐⭐</h3><p>正確な日時は必須だが、秒までは求められない。</p><h3 id="h7b2f588380">リアルタイム性 ⭐⭐⭐⭐⭐</h3><p>更新時間が重要。分単位の鮮度が価値になる。</p><h3 id="he70941b479">情報の変化度 ⭐⭐⭐⭐⭐</h3><p>経過時間によって表記を最適化する工夫が強い。</p><h3 id="he4441fe9de">日本らしさが表れたn/j(D)</h3><p>圧倒的に文字幅を食わないので、スマホの狭い一覧画面でも他のテキスト（タイトルなど）を邪魔しないけど、<code>12/5(金)</code>と削ぎ落とされたフォーマット。</p><h2 id="h3eeba16402">ニュース系（通信社/海外）</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>日付表示</p></th><td colspan="1" rowspan="1"><p>2025.12.04 07:00　　　　　<br>Dec. 5, 2025<br>27 November 2025<br>53m ago<br>20h ago</p></td></tr><tr><th colspan="1" rowspan="1"><p>フォーマット</p></th><td colspan="1" rowspan="1"><p>Y.m.d H:i<br>M. j, Y<br>j F Y</p></td></tr></tbody></table><p><span class="txt-small">参考：共同通信、The New York Times、BBC</span></p><p>英語圏や通信社では「今から何分前か」という相対表記の傾向が見られる。</p><p>国内ニュースよりも「今」を基準にしたスピード感を大事にしている印象です。</p><h3 id="hd11cd32198">速報性の演出 ⭐⭐⭐⭐⭐</h3><p>「〇〇 ago」により新しさを強調。</p><h3 id="h630f78f035">グローバル対応 ⭐⭐⭐⭐⭐</h3><p>言語や地域に依存しにくいフォーマットを採用。</p><h3 id="h2536ea8110">直感的な理解 ⭐⭐⭐⭐</h3><p>計算不要で「ついさっき」だと理解できる。</p><h2 id="hecc9a99282">不動産・情報メディア</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>日付表示</p></th><td colspan="1" rowspan="1"><p>情報更新日 2025/05/05　 　<br>19日前 公開<br>18時間前 更新</p></td></tr><tr><th colspan="1" rowspan="1"><p>フォーマット</p></th><td colspan="1" rowspan="1"><p>Y/m/d</p></td></tr></tbody></table><p><span class="txt-small">参考：SUMO、Home&apos;s</span></p><p>単なる日付ではなく、「いつ公開されたか」と「いつ最新情報に更新されたか」の区別を徹底されている印象。</p><p>ユーザーがその情報を信じていいか判断するのに、何より大事なポイントがしっかり押さえられている。こういう細かい配慮がサイトの信頼度を底上げしているんだな、と納得です。</p><h3 id="h58bc90410a">情報の透明性 ⭐⭐⭐⭐</h3><p>公開と更新のラベルを使い分け、ユーザーが知りたい情報に対して配慮された設計。</p><h3 id="hf184d7e6c1">検索・ソート性 ⭐⭐⭐⭐</h3><p>日付順での比較がしやすくなっている。</p><h3 id="h5cf28f52b6">正確性 ⭐⭐⭐⭐</h3><p>情報の有効期限に関わるため、誤認を防ぐ設計。</p><h2 id="hc2632b679d">SNS・コミュニケーションツール</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>日付表示</p></th><td colspan="1" rowspan="1"><p>3秒<br>5分<br>5時間前<br>9:05<br>5月5日<br>2024年5月5日　　　　　　　</p></td></tr><tr><th colspan="1" rowspan="1"><p>フォーマット</p></th><td colspan="1" rowspan="1"><p>g:i<br>n月j日<br>Y年n月j日</p></td></tr></tbody></table><p><span class="txt-small">参考：X, Instagram,Gmail, Slack</span></p><p>GmailやSlackのように、一覧ではシンプルに。</p><p>一覧では「5分前」とシンプルに見せておいて、ホバーするとツールチップで秒単位までしっかり表示される。「表示場所」や「時間の経過」に合わせて情報の細かさを変えているUIが、合理的で面白い。</p><h3 id="h7b2f588380">リアルタイム性 ⭐⭐⭐⭐⭐</h3><p>1秒の差が会話の文脈に影響するため。</p><h3 id="he50750aa71">情報の階層化 ⭐⭐⭐⭐⭐</h3><p>必要に応じて情報の詳細度を使い分けるUI設計。</p><h3 id="h29538735a5">親近感・ライトさ ⭐⭐⭐⭐</h3><p>「今日」「昨日」など日常会話に近い表記。</p><h2 id="h4e9b5f9dcc">EC・購買</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>日付表示</p></th><td colspan="1" rowspan="1"><p>注文日 2025年1月9日<br>返品期間：2025年2月12日まで<br>2025年6月10日時点の価格<br>2025/12/6 00:00 JST</p></td></tr><tr><th colspan="1" rowspan="1"><p>フォーマット</p></th><td colspan="1" rowspan="1"><p>Y年n月j日<br>Y/n/j H:i</p></td></tr></tbody></table><p><span class="txt-small">参考：Amazon、UNIQLO、ZOZO TOWN</span></p><p>タイムセールや返品期限など、ユーザーの行動を促すための表記がとても多いのが特徴的でした。</p><p>単に日付が置かれているというより、その前後や近くに必ず「〜まで」「〜時点」といった言葉がセットになっていて、日付とラベルがセットで一つの「期限」や「状態」を作っている傾向にあります。</p><h3 id="h643c7bb124">行動喚起（UX）⭐⭐⭐⭐⭐</h3><p>期限を明示することで、ユーザーの判断を助ける。</p><h3 id="hd25c2e3a96">厳密さ ⭐⭐⭐⭐</h3><p>標準時（JST）を表記するなど、契約上の誤解を排除。</p><h3 id="h32387ea2d7">自分事化 ⭐⭐⭐⭐</h3><p>注文履歴など、個人のアクションと結びついた設計。</p>

<h2 id="h8d78e14043">感想</h2><p>色々なパターンを見て気づいたのは、使いやすい・情報を探しやすいサイトほど、ユーザーに日付を探させない、計算させない設計になっているということ。</p><p>「これいつだっけ？」と迷う前に、今知りたい情報が「5分前」という言葉だったり、正確な「更新日」のラベルだったりと、最適な形で置かれているのでスッと目に入ってきます。</p><p>探すストレスをなくすための配慮が、あの日付フォーマットに凝縮されているんだな、と。</p><p>ただの「日付」として扱っているのか、それともその情報における日付の位置づけをどこまで意識して配置しているのか。 そんな作り手の意図が、一行のフォーマットから伝わってくる気がします。</p>

無意識に探してしまう日付。サイトタイプ別・日付の表示パターンをゆるくまとめてみた

<p>自動テストについて調べてみたなかで手始めに「<a href="https://playwright.dev/" target="_blank" rel="noopener noreferrer nofollow"><u>Playwright</u></a>」を触ってみることに。</p><p>まずは簡単なところから、<strong>URLのリストをもとにスクリーンショットを取得する</strong>処理を試しました。</p><h2 id="h9f510f3156">やりたいこと</h2><ul><li>複数のURLに対して、順番にアクセスしながらスクリーンショットを取得</li><li>URLリストはJSONファイルで管理</li></ul><h3 id="h009dfaed07">番外</h3><ul><li>Basic認証がある場合も対応</li><li>特定の要素を非表示にしてからキャプチャを取得</li><li>モバイルサイズ・PCサイズなど、デバイスごとにサイズ指定</li><li>JPEGで保存する場合は画質を調整</li></ul>

npm init -y
npm install -D @playwright/test
npx playwright install

import { test } from "@playwright/test";
import fs from "fs";

const urls: string[] = JSON.parse(fs.readFileSync("./pages.json", "utf-8"));

for (const url of urls) {
  test(`screenshot for ${url}`, async ({ page }) => {
    await page.setViewportSize({
      width: 1280,
      height: 800,
    });
    await page.goto(url, { waitUntil: "networkidle" });

    // 特定の要素を非表示にする
    await page.locator(".クラス名").evaluateAll((els) => {
      els.forEach((el) => (el.style.display = "none"));
    });

    const u = new URL(url);

    // パス末尾の / を削除し、先頭の / を除き、/ を _ に変換
    const cleanPath = u.pathname
      .replace(/\/$/, "")
      .slice(1)
      .replace(/\//g, "_");

    // ホスト名（localhost や example.com）とパスを組み合わせてファイル名を生成
    const pathname = `${u.hostname}${cleanPath ? `_${cleanPath}` : ""}`;

    // 最終的なファイル名（screenshots/example.com_about_team.jpg など）
    const filename = `screenshots/${pathname}.jpg`;

    // 保存先ディレクトリ作成
    fs.mkdirSync("screenshots", { recursive: true });

    // スクリーンショット取得
    await page.screenshot({ path: filename, fullPage: true, quality: 80 });
  });
}


[
  "ページURL１",
  "ページURL２",
  "ページURL３"
]

<h3 id="h251ac368fd">実行して取得したスクリーンショット</h3><p>Chrome拡張機能などで取得したスクリーンショットほどスッキリ・クリアな感じの画像ではないけど、確認程度なら十分な画質。</p><p>qualityを100にしても変わらずでした。</p>

<h2 id="h5ca22457fd">特定の要素を非表示にする</h2>

await page.locator(".クラス名").evaluateAll((els) => {
  els.forEach((el) => (el.style.display = "none"));
});

<p>クラス名を指定して<code>display:none</code>にしています。</p><p>↓は、左側がもとの状態で右側がクラス名を指定してサイドバーを非表示にして取得したスクショです。</p>

<h2 id="h92d2633638">Basic認証を事前設定する</h2><p><code>httpCredentials</code>を指定するだけなので簡単に設定できます。</p>

const config = {
  use: {
    trace: 'on-first-retry',
    httpCredentials: {
      username: 'Basic認証ユーザ名',
      password: 'Basic認証パスワード',
    },
  },
};
export default config;

<h2 id="h4ae7f02243">今後やりたいこと</h2><p>今回は静的なページを対象にしたスクショ取得を試しましたが、次は<strong>フォームのテストや動的操作の自動化</strong>も試してみたいと思っています。</p><p>Playwright、おもしろい。</p>

<p>📝参考</p><ul><li><a href="https://testomat.io/blog/how-to-capture-screenshots-videos-playwright-js-tutorial/" target="_blank" rel="noopener noreferrer nofollow">How To Capture Screenshots &amp; Videos — Playwright JS Tutorial</a></li><li><a href="https://zenn.dev/frontendflat/articles/b2c98a68ff9687" target="_blank" rel="noopener noreferrer nofollow">Playwrightでサイトマップに記載されたページのスクリーンショットを保存する</a></li><li><a href="https://scrapeops.io/playwright-web-scraping-playbook/nodejs-playwright-take-screenshots/" target="_blank" rel="noopener noreferrer nofollow">Playwright Guide: How To Take Screenshots</a></li></ul>

Playwrightで自動スクリーンショット取得

<p>サイトがダウンしたときに通知してくれるサービスって何かいいのあるかな？と思い、監視サービスをいくつか調べてみました。</p><p>UptimeRobotを紹介している記事をいくつか読んでみて、無料で手軽に使えそうだったので、試してみることにしました。</p><p><span class="txt-small">※この記事ではアカウントの作成は省きます</span></p><h2 id="hc94cb75731">実際に設定してみた</h2><h3 id="h0d2764bff0">ページごとに監視できる</h3><p>試しにこのサイトとBasic認証を設定している別のサイトのそれぞれトップページを登録してみました。</p><p>管理画面がシンプルで、URLを入力するだけで設定完了。</p><p>簡単👀</p><h3 id="h3b51c5eaf3">5分間隔でチェック</h3><p>無料プランだと最短5分間隔。有料にすればもっと短く設定ができ、すぐに検知できますが、お試しなので5分でも十分です。</p><h2 id="hbe03623815">監視：稼働中</h2><p>Current status Upと表示されました。正常にアクセスできています。</p>

<h2 id="h1c721b3b0c">Basic認証を設定しているサイトの監視</h2><p>次にBasic認証を設定しているサイトへの監視する場合です。</p><p>設定画面にて認証情報を登録すると、Basic認証を通過して監視してくれます。</p><h3 id="hb29a6f5be1">認証情報が未登録の場合</h3><p>通過できず401が返ってきます。</p><p>Current status Downと判定された場合、フリープランではメール通知をしてくれます。復旧したときにも通知してくれるので、問題の始まりから終わりまでわかり安心です。</p>

<h3 id="h0d509e4764">認証情報の登録</h3><p>Auth.typeはBasic認証とDigest認証に対応しています。</p>

<h2 id="h24b523d27b">レポート</h2><p>シンプルなダッシュボードなので、瞬時に判断できるところもいいなと思います。一覧では、設定したURLページの状態がまとめて確認できます。</p>

<h2 id="hf6625118dc">使ってみた感想</h2><p>とにかくシンプル・直感的に操作できるのが良かったです🎉</p><p>50ページ分登録できるし5分間隔での監視なので、個人サイトなら十分だなと思います。</p>

UptimeRobot（Freeプラン）でサイトの稼働状況を監視してみる

<p>windowsの7-zipでは問題ない<br>windowsのコンテキストから解凍で文字化け<br>mac環境がないので↓で試す</p><ul><li><strong>✅7-Zip で解凍テストする</strong><ul><li>7-Zip は macOS の Finder に比べて UTF-8 に強いため、<strong>Windows のエクスプローラーで文字化けしても 7-Zip では正しく表示される</strong> 可能性がある。</li><li><strong>7-Zip で解凍して文字化けしないなら macOS でも問題ない</strong> 可能性が高い。</li><li><strong>逆に 7-Zip で文字化けするなら macOS でも文字化けする可能性大。</strong></li></ul></li><li><strong>✅Windows 上の WSL (Ubuntu) でテスト</strong><ul><li><strong>WSL (Windows Subsystem for Linux) に Ubuntu をインストールし、</strong><code>unzip</code> コマンドで解凍テスト</li><li>WSL の Linux 環境は macOS の Finder に近い挙動を示すため、<strong>正しく解凍されるか確認できる</strong>。</li></ul></li><li><strong>手順</strong><ol><li>WSL (Ubuntu) をインストール</li><li><code>unzip</code> コマンドをインストール (<code>sudo apt update &amp;&amp; sudo apt install unzip</code>)</li><li><code>unzip sample.zip -d test_folder/</code> で解凍してファイル名を確認</li></ol></li><li><strong>✅Mac 風の解凍ツールを試す</strong><ul><li>Windows で UTF-8 の解凍を適切に行うツールを使う</li></ul></li><li><strong>「Explzh（エクスプローラ風アーカイバ）」</strong> は Windows 上で macOS の UTF-8 に近い解凍挙動を持つ<ul><li><strong>Explzh</strong> → <a href="https://www.ponsoftware.com/" target="_blank" rel="noopener noreferrer">公式サイト</a></li><li><strong>「WinRAR」</strong> も試す価値あり。</li></ul></li><li><strong>✅オンラインの解凍ツールを使う</strong><ul><li>macOS の Finder での解凍と似た挙動のオンラインツールを使う</li><li>例: unzip-online.com</li></ul></li><li><strong>試してない｜仮想環境で macOS を動かす</strong><ul><li>最も確実なのは macOS の仮想環境を作る方法</li></ul></li><li>Windows で macOS を仮想マシンで動かせるツール：<ul><li><strong>「macOS-Simple-KVM」</strong> (Linux の KVM 上で macOS を動かす)</li><li><strong>「VMware Workstation」</strong>（macOS の ISO イメージが必要）</li></ul></li></ul><pre><code>        const blob = await zip.generateAsync({
          type: "blob",
          compression: "STORE",</code></pre><p>DEFLATEにしたら透過部分が透過だけど黒はいって圧縮かかってしまったので、STOREに変更<br>jszipのオプションです　STORE<br><a href="https://stuk.github.io/jszip/documentation/api_jszip/generate_async.html#compression-and-compressionoptions-options" target="_blank" rel="noopener noreferrer">https://stuk.github.io/jszip/documentation/api_jszip/generate_async.html#compression-and-compressionoptions-options</a></p>

<p>作成したFigmaプラグインで画像をZIP形式でエクスポートした際、日本語ファイル名が文字化けする問題に遭遇しました。</p><p>制作環境はWindowsで複数のツールで解凍を試すとツールによって文字化けしたりしなかったり...</p><p>またMac環境がないために完全な動作検証ができない状況でした。</p><p>そこで、Windows環境でできる限りの検証方法を試し、どのツールなら正しく解凍できるのか、またMacでの解凍結果を推測できる方法を探してみました。</p><h2 id="hd2325f5250">ZIP解凍時の文字化けとは？</h2><p>ZIPファイルは圧縮時の文字エンコーディングが環境によって異なるため、特に日本語ファイル名を含むZIPを異なるOSで解凍すると文字化けが発生することがあります。</p><p>Windowsの標準エクスプローラーはShift-JISベースの処理を行うため、UTF-8でエンコードされたZIPファイルを正しく扱えない場合があります。逆に、macOSのFinderはUTF-8を標準としているため、Windowsで作成したZIPを解凍すると文字化けすることがあります。</p><h2 id="h154d2be008">Windows環境でMacの解凍結果を予測する方法</h2><p>Mac環境が手元になくても、以下の方法でZIP解凍時の文字化けを事前に確認できます。</p><h3 id="h239ad9fe75">1. 7-Zip で解凍テストする</h3><p>7-ZipはWindowsのエクスプローラーよりもUTF-8に強いため、文字化けしにくいツールです。</p><ul><li>もし7-Zipで正常に解凍できれば、Macでも問題なく解凍できる可能性が高い。</li><li>逆に7-Zipで文字化けする場合、Macでも同様に文字化けする可能性が高い。</li></ul><h3 id="h3eaee0324b">2. Windows 上の WSL (Ubuntu) でテスト</h3><p>Windows Subsystem for Linux (WSL) のUbuntu環境で解凍テストを行うと、macOSに近い動作を確認できます。</p><h4 id="hf8bcafd588">手順：</h4><ol><li>WSL (Ubuntu) をインストール</li><li>unzip コマンドをインストール<pre><code>sudo apt update &amp;&amp; sudo apt install unzip</code></pre></li><li>ZIPを解凍してファイル名を確認<pre><code>unzip sample.zip -d test_folder/</code></pre></li></ol><p>WSLのLinux環境はmacOSのFinderと近い挙動を示すため、この方法で解凍結果を確認できます。</p><h3 id="hef414b6b17">3. Mac風の解凍ツールを試す</h3><p>Windows上でUTF-8の解凍を適切に行うツールを試します。</p><ul><li><strong>Explzh（エクスプローラ風アーカイバ）</strong><ul><li>WindowsでmacOSのUTF-8に近い挙動を持つ解凍ツール。</li></ul></li><li><strong>WinRAR</strong><ul><li>ZIPのエンコーディング処理が異なるため、文字化けを回避できる可能性あり。</li></ul></li></ul><h3 id="h2edf506c9e">4. オンラインの解凍ツールを使う</h3><p>オンラインのZIP解凍ツールを使うことで、macOSのFinderで解凍した時と似た挙動を再現できます。</p><p><strong>例:</strong></p><ul><li><a href="https://www.unzip-online.com/" target="_blank" rel="noopener noreferrer nofollow">unzip-online.com</a></li></ul><h3 id="h4f32634529">5. 仮想環境でmacOSを動かす（未検証）</h3><p>最も確実な方法はmacOSの仮想環境を作ることですが、セットアップの手間がかかるため今回は試していません。</p><ul><li><strong>macOS-Simple-KVM</strong> (LinuxのKVM上でmacOSを動かす)</li><li><strong>VMware Workstation</strong>（macOSのISOイメージが必要）</li></ul><h2 id="hd01752ae03">FigmaのZIPエクスポート時の文字化け対策</h2><p>作成したFigmaプラグインはJSZipを使ってZIPファイルを生成しました。</p>

const blob = await zip.generateAsync({
  type: "blob",
  compression: "STORE",
});

<h3 id="h3264c1197c">圧縮方式の違い</h3><ul><li><strong>DEFLATE（デフォルト）</strong><ul><li>圧縮率が高いが、透過画像の一部が黒くなる問題が発生した。</li></ul></li><li><strong>STORE（非圧縮）</strong><ul><li>圧縮はされないが、透過部分の問題が解決。</li></ul></li></ul><p>そのため、<strong>今回は「STORE」オプションを使用してZIPを作成</strong>しました。</p><h2 id="ha214098e44">まとめ</h2><ul><li>ZIP解凍時の文字化けは、OSごとのエンコーディング処理の違いが原因。</li><li>Mac環境がなくても、<strong>7-Zip・WSL・Explzh・オンラインツールを使って動作確認</strong>できる。</li><li>FigmaのJSZipエクスポート時に「STORE」オプションを使うことで、透過画像の問題を回避。</li></ul><p>WindowsユーザーでもMac環境なしで検証できる方法を知っておくと、ZIPの互換性問題に対応しやすくなります。</p>

WindowsでZIPの文字化けを検証・Mac環境なしで試せる解凍方法まとめ

<p>ヘッドレスCMSやJamstack構成でよく使われるフレームワークで制作されたWebサイトでは、どのようなフォームが利用されているのか調査してみました。</p><p>調査対象は以下の2種類です。</p><ol><li>Webサイトギャラリー81-web.comの<a href="https://81-web.com/tag/astro" target="_blank" rel="noopener noreferrer nofollow">Astro</a>/<a href="https://81-web.com/tag/next" target="_blank" rel="noopener noreferrer nofollow">Next.js</a>/<a href="https://81-web.com/tag/nuxt" target="_blank" rel="noopener noreferrer nofollow">Nuxt.js</a>のカテゴリに属するWebサイトのお問い合わせフォーム（84サイト）</li><li>microCMSの<a href="https://microcms.io/partners/" target="_blank" rel="noopener noreferrer nofollow">パートナー企業</a>のWebサイトのお問い合わせフォーム（56サイト）</li></ol><p><span class="txt-small">※2025.1.26時点の掲載サイトから確認</span><br><span class="txt-small">※「フォームがないサイト」の数はグラフから除外</span></p>

<h2 id="hae492bb6b2">1. Webサイトギャラリー81-web.com</h2>

<h2 id="h7a5ff87729">2. microCMSのパートナー企業</h2>

<h2 id="h7e984ac5d3">👀見えてきたこと</h2><h3 id="h98b4be6866">Next.jsやNuxt.jsなどのサイトでは外部サービスの利用か判断がむつかしい</h3><p>Next.jsやNuxt.jsで構築されたサイトでは、フォームが外部のサービスを利用しているのか、独自に実装されているのか判断ができませんでした。多くのケースでは、フォームの送信先や処理方法が公開されていないためです。</p><h3 id="h77aa70f29a">Googleフォームの利用は少数ながら一定数存在</h3><p>Googleフォームは比較的簡単に設置できるため、一部のサイトでは利用されていました。特に、ヘッダー画像を設定すれば、デザイン的にも違和感が少なくなるため、簡易的なフォームとしては十分な印象を受けました。</p><h3 id="he2e1521221">HubSpotの利用が一定数存在</h3><p>企業向けのマーケティングツールであるHubSpotをフォームとして利用しているサイトが一定数見られました。特にmicroCMSのパートナー企業のサイトでは9件と、比較的高い採用率を示しています。</p><h3 id="h09cccba78a">フォームが存在しないサイトも多い</h3><p>Webサイトによっては、お問い合わせフォームを設置せず、メールアドレスのみを記載しているケースや、そもそも問い合わせ手段を設けていないサイトも一定数ありました。特にWebリンク集サイトに掲載されているサイトでは、メールアドレスの記載が10件と、フォームを設置しない選択をしているサイトも少なくありませんでした。</p><h2 id="ha214098e44">まとめ</h2><p>Jamstack構成のWebサイトにおけるフォームの利用状況を調査した結果、Next.jsやNuxt.jsを利用したフォームが多く見られましたが、外部サービスを利用しているかどうかの判断が難しいケースもありました。</p><p>Googleフォームの利用は少数派ながらも一定の需要があり、HubSpotのようなマーケティングツールを活用したフォームの導入も見られました。一方で、フォーム自体を設置しないサイトも少なくなく、サイトの目的に応じて異なる選択肢が取られていることがわかりました。</p><p>今後、Jamstackサイトにおけるフォーム実装のトレンドを追いながら、より効果的な導入方法を検討していくのも興味深いテーマになりそうです。</p>

841-biborokuWebフロントエンドの備忘録

その他