LoginSignup
TrendQuestionOfficial EventOfficial ColumnOpportunitiesOrganization
5
3
@yuji38kwmt(有限会社来栖川電算)

posted at

updated at

Organization

PC版アプリ（Webアプリを含む）の日付表記を調査しました

UI,日付

はじめに

画面に日付を表示する際、どのような日付表記にすればよいかを悩むときがあります。たとえばQiitaの記事一覧では2019年05月29日と表示されていますが、なぜ2019/05/29や2019-05-29ではなく2019年05月29日と表示されているのでしょうか？
image.png

「こういうときには、この日付表記が良い」という各日付表記の使いどころを考えるために、有名なアプリではどの日付表記を採用しているか調べてみました。

日本語の日付表記のパターン

日本語の日付表記は、「年月日の区切り文字」と「月日のゼロ埋めの有無」で決まります。

  • 年月日の区切りの文字
    • 漢字：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日

image.png

期間での検索

  • 検索クエリ：YYYY-MM-DD
  • 期間表示：M月D日

image.png

image.png

期間を指定するテキストボックスは2022-02-01と表示さています。また、検索クエリも2022-01-31と表示されています。

検索クエリは直接入力するので、YYYY年M月D日形式ではなくYYYY-MM-DD形式にしたのでしょう。また、日付テキストボックスは検索クエリと連動しているため、日付テキストボックスもYYYY-MM-DD形式なのだと考えられます。

ちなみに、日付テキストボックスはスラッシュ区切りの日付にも対応していました。
slack-日付入力.gif

検索結果

M月D日
image.png

Slack（PCアプリ版 英語表示）

調査対象ではありませんが、せっかくなので英語表示も簡単に調べました。

メッセージの区切り

image.png

日付のツールチップ

image.png

期間での検索

image.png
image.png

検索クエリ、日付テキストボックスのフォーマットは日本語表示と同じYYYY-MM-DDでした。検索クエリの構文は、表示する言語によって変えない方が良いので、ISO 8601に従ったYYYY-MM-DD形式を採用したのかもしれません。

Discord（日本語表示）

テキストチャンネル

  • メッセージの区切り：YYYY年M月D日
  • メッセージの日付：YYYY/MM/DD
  • メッセージの日付のツールチップ：YYYY年M月D日
    image.png

日付表記は混在していました。メッセージの日付がスラッシュ区切りなのは、できるだけスペースを使わないようにするためでしょうか。

Line（PC版）

トーク一覧

M.D
image.png

すべての一覧

M.D
image.png

Twitter（日本語表示）

タイムライン

M月D日

image.png

タイムラインの詳細

YYYY年M月D日
image.png

「時間、日付」の順番で表示されていました。

Twitter（英語表示）

タイムラインの詳細

MMM D,YYYY
image.png

英語版も「時間、日付」の順番で表示されていました。英語の場合「時間、日付」の順番で表すのが一般的のようです。

一方、英語の場合、日付の順番としては、一般に「時間」→「曜日」→「日付」→「年」の順に示します。そしてそれぞれをカンマで区切り、丸括弧は使いません。

日本語表示でも「時間、日付」の順番で表示されているのは、英語表示に引っ張られているのかもしれません。

Qiita

記事の一覧画面

YYYY年MM月DD日

image.png

記事の詳細画面

YYYY年MM月DD日
image.png

記事のコメント

YYYY-MM-DD

image.png

編集履歴

YYYY年MM月DD日
image.png

下書き保存

YYYY/MM/DD
image.png

考察

Qiitaの日付表記は、まあまあ混在していました。
編集履歴ではタイムゾーン"JST"も表示されていました。なぜ編集履歴だけタイムゾーンを表示しているのかは、分かりませんでした。

Zenn

Articles一覧画面

YYYY/MM/DD
image.png

記事詳細画面

YYYY.MM.DD
image.png

一覧画面と詳細画面で、日付表記が異なっていました。

Zaim

履歴画面（日ごとタブ）

M月D日
image.png

分析（日ごとの比較）

MM月DD日
image.png

分析（月ごとの比較）

MM/DD
image.png

入力

YYYY年M月D日
zaim-input.gif

Zaimの日付テキストボックスは、ハイフン区切りやスラッシュ区切りの日付も入力できました。

最近の入力

YYYY/MM/DD
image.png

MoneyForward

ホーム画面

  • 入力する日付：YYYY/MM/DD
  • 最新の入出金：YYYY/MM/DD
  • 収支の期間：YYYY-MM-DD
    image.png

家計画面

  • 集計期間：YYYY/MM/DD
  • 一覧の日付：MM/DD
  • 一覧の日付テキストボックス（インライン編集）：YYYY/MM/DD

image.png

Google Analytics（日本語表示）

ユーザサマリ

  • 期間指定：YYYY/MM/DD
  • グラフの横軸：M月D日
    image.png

Google Analsistics（英語表示）

期間指定

MMM D,YYYY
image.png

Windowsの設定アプリ

時刻と言語 > 日付と時刻

  • 現在の日付と時刻：YYYY年M月D日
  • 現在の日付と時刻：YYYY/MM/DD
    image.png

日付表記のまとめ

10個のアプリの日付表記を調べました。各アプリで使われていた日付表記です。

アプリ 日付表記
Slack(PCアプリ) M月D日, MM-DD
Discord(PCアプリ) M月D日, MM/DD
Line(PCアプリ) M.D
Twitter 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版アプリには曜日が表示されていました。

image.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
Sign upLogin
5
3