はじめに
画面に日付を表示する際、どのような日付表記にすればよいかを悩むときがあります。たとえばQiitaの記事一覧では2019年05月29日と表示されていますが、なぜ2019/05/29や2019-05-29ではなく2019年05月29日と表示されているのでしょうか？
「こういうときには、この日付表記が良い」という各日付表記の使いどころを考えるために、有名なアプリではどの日付表記を採用しているか調べてみました。
日本語の日付表記のパターン
日本語の日付表記は、「年月日の区切り文字」と「月日のゼロ埋めの有無」で決まります。
- 年月日の区切りの文字
- 漢字：
2022年2月1日 - 記号（スラッシュ）：
2022/2/1 - 記号（ハイフン）：
2022-2-1 - 記号（ピリオド）：
2022.2.1
- 漢字：
- 月日のゼロ埋めの有無
- ゼロ埋めなし：
2022/2/1 - ゼロ埋めあり：
2022/02/01
- ゼロ埋めなし：
「年月日の区切りの文字」が4パターン、月日のゼロ埋めの有無が2パターンなので、日本語の日付表記は全部で8パターン（=4×2）あります。
※ 西暦の有無は、日付表記のパターンに含めていません。2022/01/01は01/01の拡張した表記、すなわち同じ日付表記として捉えることができるためです。
日付フォーマット
-
YYYY：西暦4桁 -
MM：ゼロ埋めした月（01,02,...12） -
M：ゼロ埋めしていない日（1,2,...,12） -
DD：ゼロ埋めした日（01,02,...31） -
D：ゼロ埋めしていない日（1,2,...31）
用語
説明しやすくするため、以下の用語を定義します。
- 記号区切り表記：
YYYY-MM-DD,YYYY/MM/DD,YYYY.MM.DDなど、記号1文字で年月日を区切る表記 - 漢字区切り表記：
YYYY年M月D日
調査方法
調査期間
2022/02/01～2022/02/14
調査対象アプリ：
- PC版アプリ（Webアプリを含む）
- OS：Windows11
- 日本語対応
調査しないこと
- 時間表記
- 曜日表記
各アプリの日付表記
各アプリの日付表記を記載します。
Slack（PCアプリ版 日本語表示）
メッセージ
- メッセージの区切り：
M月D日 - 日時にカーソルを当てたときに表示されるツールチップ：
M月D日
期間での検索
- 検索クエリ：
YYYY-MM-DD - 期間表示：
M月D日
期間を指定するテキストボックスは2022-02-01と表示さています。また、検索クエリも2022-01-31と表示されています。
検索クエリは直接入力するので、YYYY年M月D日形式ではなくYYYY-MM-DD形式にしたのでしょう。また、日付テキストボックスは検索クエリと連動しているため、日付テキストボックスもYYYY-MM-DD形式なのだと考えられます。
ちなみに、日付テキストボックスはスラッシュ区切りの日付にも対応していました。
検索結果
M月D日
Slack（PCアプリ版 英語表示）
調査対象ではありませんが、せっかくなので英語表示も簡単に調べました。
メッセージの区切り
日付のツールチップ
期間での検索
検索クエリ、日付テキストボックスのフォーマットは日本語表示と同じYYYY-MM-DDでした。検索クエリの構文は、表示する言語によって変えない方が良いので、ISO 8601に従ったYYYY-MM-DD形式を採用したのかもしれません。
Discord（日本語表示）
テキストチャンネル
- メッセージの区切り：
YYYY年M月D日 - メッセージの日付：
YYYY/MM/DD - メッセージの日付のツールチップ：
YYYY年M月D日
日付表記は混在していました。メッセージの日付がスラッシュ区切りなのは、できるだけスペースを使わないようにするためでしょうか。
Line（PC版）
トーク一覧
M.D
すべての一覧
M.D
Twitter（日本語表示）
タイムライン
M月D日
タイムラインの詳細
YYYY年M月D日
「時間、日付」の順番で表示されていました。
Twitter（英語表示）
タイムラインの詳細
MMM D,YYYY
英語版も「時間、日付」の順番で表示されていました。英語の場合「時間、日付」の順番で表すのが一般的のようです。
一方、英語の場合、日付の順番としては、一般に「時間」→「曜日」→「日付」→「年」の順に示します。そしてそれぞれをカンマで区切り、丸括弧は使いません。
日本語表示でも「時間、日付」の順番で表示されているのは、英語表示に引っ張られているのかもしれません。
Qiita
記事の一覧画面
YYYY年MM月DD日
記事の詳細画面
YYYY年MM月DD日
記事のコメント
YYYY-MM-DD
編集履歴
YYYY年MM月DD日
下書き保存
YYYY/MM/DD
考察
Qiitaの日付表記は、まあまあ混在していました。
編集履歴ではタイムゾーン"JST"も表示されていました。なぜ編集履歴だけタイムゾーンを表示しているのかは、分かりませんでした。
Zenn
Articles一覧画面
YYYY/MM/DD
記事詳細画面
YYYY.MM.DD
一覧画面と詳細画面で、日付表記が異なっていました。
Zaim
履歴画面（日ごとタブ）
M月D日
分析（日ごとの比較）
MM月DD日
分析（月ごとの比較）
MM/DD
入力
YYYY年M月D日
Zaimの日付テキストボックスは、ハイフン区切りやスラッシュ区切りの日付も入力できました。
最近の入力
YYYY/MM/DD
MoneyForward
ホーム画面
- 入力する日付：
YYYY/MM/DD - 最新の入出金：
YYYY/MM/DD - 収支の期間：
YYYY-MM-DD
家計画面
- 集計期間：
YYYY/MM/DD - 一覧の日付：
MM/DD - 一覧の日付テキストボックス（インライン編集）：
YYYY/MM/DD
Google Analytics（日本語表示）
ユーザサマリ
- 期間指定：
YYYY/MM/DD - グラフの横軸：
M月D日
Google Analsistics（英語表示）
期間指定
MMM D,YYYY
Windowsの設定アプリ
時刻と言語 > 日付と時刻
- 現在の日付と時刻：
YYYY年M月D日 - 現在の日付と時刻：
YYYY/MM/DD
日付表記のまとめ
10個のアプリの日付表記を調べました。各アプリで使われていた日付表記です。
| アプリ | 日付表記 |
|---|---|
| Slack(PCアプリ) | M月D日, MM-DD |
| Discord(PCアプリ) | M月D日, MM/DD |
| Line(PCアプリ) | M.D |
| M月D日 | |
| Qiita | MM月DD日, MM-DD, MM/DD |
| Zenn | MM/DD, MM.DD |
| Zaim | M月D日, MM月DD日, MM/DD |
| MoneyForward | MM/DD, MM-DD |
| Google Analytics | M月D日, MM/DD |
| Windowsの設定アプリ | M月D日, MM/DD |
※西暦の有無は日付表記のパターンに含めていないので、YYYYは省略しました
日付表記の混在
- 8/10件のアプリ（Line, Twitter以外）で、日付表記が混在していました。
- 6/8件のアプリで、漢字区切りと記号区切りの日付表記が混在していました。
- 3/8件のアプリ（Qiita, Zenn, MoneyForward）で、
MM/DDとMM-DDなど異なる記号で区切った表記が混在していました。 - 1/8件のアプリ（Zaim）で、
MM月DD日とM月D日など、同じ区切り文字でゼロ埋めの有無が混在していました。
日付表記のゼロ埋め
- 5/7件のアプリ（Qiita, Zaim以外）で、漢字区切りの日付表記は、ゼロ埋めなしでした。
- 8/9件のアプリ（Line以外）で、記号区切りの日付表記は、ゼロ埋めありでした。
考察
- 漢字区切りと記号区切りの日付表記の混在は、6/8件と多かったです。これは、レイアウトの制約や視認性、入力のしやすさを考慮した上で、あえて混在させているのかもしれません。また、今までアプリを使っていて、私は日付表記が混在していることには気づきませんでした。したがって、日付表記が混在していることはさほど気にすることはないのかもしれません。一方
MM/DDとMM-DDなど異なる記号で区切った日付表記の混在は、3/8件と少なかったです。異なる記号で区切った表記が混在していると、統一感がないように見えるからかもしれません。 - ほとんどのアプリでは、漢字区切りの日付表記ではゼロ埋めなし、記号区切りの日付表記ではゼロ埋めありでした。漢字区切りの日付表記でゼロ埋めなしなのは、漢字区切りの表記は、手書き由来の表記だからなのかもしれません。
- 一覧で日付を表示する場合は、漢字区切りより記号区切りの方が見やすいように感じました。たとえば、Zaimでは漢字区切りの日付、MoneyForwardでは記号区切りの日付の一覧が表示されています。漢字区切り表記の場合は、数字より「月」や「日」が目立っているため、記号区切り表記より日付が連続していることが分かりづらかったです。
- Twitterなどでは、「3日前」などの相対的な日付も表示されます。相対的な日付表記は、記号区切り表記より漢字区切り表記との親和性が高いと感じました。相対的な表記には漢字が含まれているため、漢字区切り表記との親和性が高いと感じるのかもしれません。
- 多言語化対応しているアプリかどうかで、日付表記の考え方が異なるように見えました。たとえばTwitterは日本語表示でも「時間、日付」の順番で表示されます。日本語表示では「日付、時間」の順番に表示するのが自然です。多言語化対応のコストを減らすため、どの言語でも「時間、日付」順番で表示しているのかもしれません。
日付表記を決める判断材料
最適な日付表記（日付フォーマット）を選ぶための、UIデザイン観点による比較検証には、日付表記を決める以下の判断材料があるとのことです。
- 視認性
- 表記の統一
- 狭いコンテンツ幅での表示のしやすさ
- 音声読み上げの安定度
- 他言語対応の方針
私はさらに、「入力のしやすさ」もあると思います。たとえば、テキストボックスでは2022年1月1日より2022/01/01の方が入力しやすいです。
ただしスラッシュ区切りだと、言語によって解釈が異なります。
言語に依らずに入力方法を統一させる場合、またはプログラム的な入力方法をにする場合は、YYYY-MM-DD表記（ISO8601拡張形式）がよいかもしれません。
日付表記のルール
各アプリの日付表記を参考にして、日付表記のルールを考えました。
- 以下の日付表記は混在させない
- 異なる記号文字での区切り表記
- 同じ区切り文字でのゼロ埋め有無
- 漢字区切り表記では、ゼロ埋めなしにする
- 記号区切り表記では、ゼロ埋めありにする
- 日付を入力させる場合は、記号区切り表記にする
- 言語に依らず入力方法を統一させる場合は、
YYYY/MM/DD表記（ISO8601拡張形式）にする。
- 言語に依らず入力方法を統一させる場合は、
- 一覧で日付を表示させる場合は、記号区切り表記にする
このルールに従って、日付表記を選択するのが良いと思います。
まとめ
「こういうときには、この日付表記が良い」という各日付表記の使いどころを知るために、各アプリの日付表記を調べました。
その結果、日付表記のルールを作ることができました。
補足
一覧での日付表記の比較
一覧での日付を表示する場合、M月D日, MM/DD, M/D のどれが見やすいかをExcelで確認してみました。
スマホアプリでの日付表記
今回はPC版アプリに絞って調査しました。スマホの場合PCと比較して、画面サイズが小さく、入力しづらいです。したがって、同じアプリの同じ画面でも、PC版とスマホ版で日付表記が変わります。
下図は、Android版Slackアプリのメッセージ画面です。メッセージの区切りには曜日が表示されていませんが、PC版アプリには曜日が表示されていました。
