UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。
日時を指定するUIで、午前と午後が分かれているとかなり迷ってしまう場合があります。
日本のサービスならまだマシですが、英語圏のサービスだと余計に迷います。
年月日のフォーマットが日本と異なる場合も多く、想定と違う挙動をした経験が多いからです。
WordPressの事例
CMSとして有名なWordPressには、ブロックエディタという編集画面が用意されています。
ここでは記事の編集や、公開日時の設定ができます。
しかし、公開日時を設定しようとすると、時刻入力の横に「AM」か「PM」を選択する場所があります。

- 12:00 AMにすると昼の12時になるんだろうか?
- 「12:00 AM」と「0:00 PM」は同じ?
- じゃあ12:00 PMにすると夜の0時?
最初に見たときは上記のような疑問が生まれました。
しかも厄介なのが、実際にその時間を設定してその時間にならないと挙動が分かりません。
ちなみに、「12:00 PM」はお昼の12時を表します。
現在はアップデートされて、24時間表記で入力できるようになっていますが、少し前までは「AM」か「PM」を選択する必要があり、24時間表記での入力はできませんでした。
私の場合はWordPressのドキュメントを見て判断できますが、ユーザーの多くはそうではないでしょう。
ましてや、意図した時間と別の時間に公開されてしまう可能性があるのはよくありません。
間違えようのない設定ができるようにする
24時間表記であれば、このような迷いは生まれません。
もしくは、最新のWordPressのように、24時間表記を入力すると自動的にAMとPMが再設定されるような作りが分かりやすいかもしれません。
日時の取り決めは慎重にすり合わせる
少し話は逸れますが、公開日時は認識をしっかり合わせておかないと、齟齬が生まれる可能性が非常に高いです。
例えば、「このコンテンツは5/31まで公開で、そのあとは非公開にしてください」と指示されたとき、下記2つのどちらなのかをしっかりすり合わせておく必要があります。
- 5/31の0時00分の日付が変わって31日になった瞬間に非公開
- 5/31の間(23:59まで)は表示できて、6/1に日付が変わった瞬間に非公開
「〜まで公開」の場合、その日は入る認識なので後者の方が正しいのですが、指示を出している側も混乱して分かっていない場合もあります。
日付関連は間違えないように、しっかり認識を合わせておきたいですね。
UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週1出社(それ以外はリモートワーク)できる「デザイナー」「エンジニア」を募集しています。
興味のある方は、カジュアル面談しますので気軽にお問い合わせください!









