デジタル時計画像とは？

デジタル時計は、目盛り盤の針ではなく、目覚まし時計や電子レンジ、スコアボードのように数字で時刻を表示します。このツールでは、独自に描画したフォントではなく、ブラウザーにすでにインストールされている実際のフォントを使って、その表示をダウンロード可能な画像として生成します。そのため、数字は鮮明に保たれ、画面上で見えるものと一貫した表示になります。

ツールの説明

時・分・秒を設定するか、ワンクリックで現在時刻を取得します。次に、12時間形式または24時間形式、秒を表示するかどうかを選択できます。フォントとフォントサイズを選び、LED風のグロー効果をオンまたはオフにして強度を調整します。さらに、オプションで背景色と数字の色を設定して、結果をPNGまたはJPGとしてダウンロードできます。

特徴

  • 時・分・秒を自由に設定、または現在時刻を即座に入力
  • AM/PMラベル付きの12時間形式、または24時間形式
  • 秒の表示をオンまたはオフに切り替え
  • 等幅フォントやシステムフォントから選択でき、プレビューとダウンロード結果が常に一致
  • 強度を調整できるオプションのグロー効果で、リアルなLEDや目覚まし時計の表示を再現
  • 背景をオプションにでき、透明な背景に数字だけを書き出し可能
  • 背景色、数字の色、フォントサイズをカスタマイズ可能
  • PNGまたはJPGとしてダウンロード、または最大3倍の解像度で印刷

仕組み

時刻は、選択したフォントでプレーンテキストとして描画され、すべての数字が同じ幅になるようにプロポーショナル幅を持たない数字（tabular figures）が使用されます。フォントごとに、グリフのベースラインやサイドベアリングに対する配置が異なるため、このツールではCanvasのTextMetrics APIを使って各フォントで実際に描画された領域を測定し、どのフォントを選択してもテキストがパネルの中央に表示されるよう位置を微調整します。グロー効果は数字の背後に配置するtext-shadowで、実際のLEDディスプレイの光が筐体ににじむ様子を再現しています。オフにすると、フラットですっきりした表示になります。表示は埋め込みのカスタムフォントではなく、ブラウザーにすでにインストールされているフォントで構成されるため、ダウンロードした画像は常にプレビューとまったく同じ見た目になります。

ヒント

  • 暗い背景に赤または緑の数字色を組み合わせてグローをオンにすると、リアルな目覚まし時計やスコアボードの表示になります。
  • 背景をオフにすると、別のデザインに重ねて使える透明なPNGを作成できます。
  • 「秒を表示」をオフにすると、壁掛け時計のグラフィックやサムネイルなど、よりすっきりした2部分構成の時刻表示になります。
  • 大きなバナー風の画像にはフォントサイズを大きくし、アイコンやfaviconの素材には小さくします。