<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>チェックボックス「すべて選択」機能があるサイトの有効・無効動作とタップエリアについて、いくつかサイトを調べてみました。</p><h2 id="hb629a8fc9d">どんなケースで「すべて選択」機能があるか</h2><p>一括で同じ動作をする場合とに「すべて選択」といった機能がついている傾向にある。 ※個人的に調べた結果</p><p><strong>一括で同じ動作をするケース</strong></p><ul><li>まとめて記事を削除する</li><li>まとめてお気に入りに登録する</li><li>まとめて資料請求する</li></ul><p><strong>似たような選択肢をまとめて選択するケース</strong></p><ul><li>沿線沿いの駅をまとめて選択する</li><li>職種の小・中分類に属する選択肢をまとめて選択する</li></ul><p>など</p><h2 id="hc8b6cdf8b8">「すべて選択」の有効・無効の切り替えの動作パターン</h2><h3 id="h10422867da">01 何も選択していない状態から「すべて選択」</h3><p>「すべて選択」を有効にすると「すべて選択」とすべての選択肢が有効になる</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e4fd1c34e92f41c494fc45de1f4debec/check_all01.png?w=332&amp;h=74" alt="" width="332" height="74"></figure><h3 id="h552e44218b">02 すべて選択が有効な状態から「すべて選択」無効</h3><p>「すべて選択」を無効にすると「すべて選択」とすべての選択肢が無効になる</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e4fa9efc557741e9ad137922e11254ae/check_all02.png?w=332&amp;h=74" alt="" width="332" height="74"></figure><h3 id="hd56333a796">03 すべて選択が有効な状態から一部選択肢を無効</h3><p>一部選択肢を無効にすると「すべて選択」が無効になる</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/5eba20b963ac489e90dfb0af0449471a/check_all03.png?w=332&amp;h=74" alt="" width="332" height="74"></figure><h3 id="hd9b0b45367">04 一部選択有効な状態からすべて選択を有効</h3><p>「すべて選択」以外の選択肢がすべて有効になると「すべて選択」が有効になる</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/1c88cc0550b8483890f6a8026b247f64/check_all04.png?w=332&amp;h=74" alt="" width="332" height="74"></figure><h2 id="heb84ddeb7d">番外編</h2><p>調べたサイトでは「すべて選択」自体がチェックボックスになっているケースが多かったですが、中にはテキストリンクで有効・無効にするケースもありました。</p><p><strong>Amazonのショッピングカートページ</strong></p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/ca7188bb1e2f4b3d887997b7613fc300/checkbox_amazon.png" alt="" width="1016" height="240"></figure>

<h2 id="h59f599a5a9">クリック・タップエリアも調べてみました💡</h2><h3 id="hef1cc3126d">⚙ ダッシュボード</h3><p><strong>WordPress</strong></p><ul><li>ホバーしたときにクリックエリアの背景色が変わる</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/36cc36aa7ae84b0ca92b2e0ce2455e4a/checkbox_wp.png?w=332&amp;h=156" alt="" width="332" height="156"></figure><p><strong>STUDIO</strong></p><ul><li>特にクリックエリアは拡大されてない</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/9f2fbd04b2554bd6abda07e047dce3b7/checkbox_studio.png?w=332&amp;h=156" alt="" width="332" height="156"></figure><h3 id="hf4bdfdb6f0">🏠 賃貸・物件検索サイト</h3><p><strong>SUUMO</strong></p><ul><li>チェックボックスより幅広くテキストの一部も含んでいるのでタップしやすい</li><li>アコーディオン機能とチェックボックスがあるところはチェックボックスよりタップエリアが拡大されている</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/858323e540ca4b6eb035a483ad4fe501/checkbox_suumo.png" alt="" width="1017" height="240"></figure><p><strong>アットホーム</strong></p><ul><li>一行全体がタップエリア</li><li>リンクエリアとの境目にラインがあるのでチェックボックスエリアとリンクエリアを認識しやすい</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/1b257901205f4fde8bcaf6b44813f9a8/checkbox_athome.png" alt="" width="1016" height="240"></figure>

<h3 id="h7e77abcf62">🏢 施設・店舗検索サイト</h3><p><strong>ホットペッパービューティー</strong></p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/539c5e6809304040a8422f00ae9c6f01/checkbox_hotpepper.png" alt="" width="1016" height="240"></figure><p><strong>一休.com</strong></p><ul><li>背景色がついているのでタップエリアが明確</li><li>地域は都道府県名の横に選択中の数が表示される</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4aeb0dd1041647a38f03e0af10fa0f52/checkbox_ikyu.png" alt="" width="1016" height="300"></figure><p><strong>楽天トラベル</strong></p><ul><li>チェックボックスとテキストまでタップエリア</li><li>よく検索される条件だけピックアップされたエリアにボタンのようなチェックボックス</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e951d474818b4659b11e3e33b09c72a6/checkbox_rakuten.png" alt="" width="1016" height="220"></figure><h3 id="hec4ab7c7de">👚 ファッションEC</h3><p><strong>ZOZOTOWN</strong></p><ul><li>タップエリア広め</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/c7708a85c4ea4ccf9ba74133b8937915/checkbox_zozo.png" alt="" width="1016" height="240"></figure><p><strong>SHOPLIST</strong></p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/1a14bd5b45354c28a2f1dd8f640a83ba/checkbox_shoplist.png" alt="" width="1016" height="240"></figure>

<h3 id="hb029aebaf1">🏃 求人検索サイト</h3><p><strong>バイトル</strong></p><ul><li>選択中の親要素のテキスト色も変化する</li><li>項目によって選択しやすいデザインになっている（１行にすべての選択肢が収まっている）</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/57b2968819894b2dac1806f205edfdaf/checkbox_baitoru.png" alt="" width="1016" height="240"></figure><p><strong>エンゲージ</strong></p><ul><li>１行にアコーディオンとチェックボックスの両方がある場合、チェックボックスのタップエリアが広め</li><li>アコーディオンの開閉ボタン領域が明確</li><li>選択中のアイコンが表示される</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/ddee7f51f7944aa590fa322c87dace49/checkbox_en-gage.png" alt="" width="1016" height="300"></figure>

<h2 id="ha214098e44">まとめ</h2><p>今回調べたサイトでは「すべて選択」の挙動は同じ結果に。たくさん選択肢があるという理由だけで「すべて選択」の機能を付けるよりも、項目の内容や検索条件によって「すべて選択」するケースがあるのかを検討する必要がある。</p><p>リンクエリアの中にあるチェックボックス、アコーディオンと一体になったチェックボックスの場合、どこまでがチェックボックスに対するタップエリアか明確だと誤操作による意図しないページ遷移が防げる。</p>