Divoomディスプレイ用のピクセルアートフォントのデザイン方法

ピクセルフォントの特徴

ピクセルフォントは固定グリッド上に完全に構築された書体で、各ユニットが1つの見えるピクセルを表します。滑らかに拡大縮小できるベクターフォントとは異なり、ピクセルフォントはブロック状の特性を活かし、すべての曲線を離散的な四角形で近似します。DivoomのLEDディスプレイでは、これは制限ではなく目的そのもので、パネル上の各LEDは実際の物理的なピクセルなので、フォントデザインはハードウェアに1対1で対応します。

いくつかのタイポグラフィの概念はピクセルグリッドにも直接当てはまり、これらを知ることで推測ではなく意図的なデザイン選択ができます。

• ベースライン — ほとんどの文字が乗る水平の行。5×7グリッドでは、ベースラインは通常6行目（下から2番目）です。
• x-ハイト — a、c、e、xのような小文字の高さ。小さいフォントでは通常3〜4ピクセル、中くらいのフォントでは4〜5ピクセルです。
• 大文字の高さ — 大文字の上端で、通常はグリッドの上端かその1行下に揃えられています。
• アセンダー — b、d、h、k、lのようにx-ハイトより上に伸びる文字の部分。
• ディセンダー — g、j、p、q、yのようにベースラインの下に伸びる部分。
• 文字幅 — ほとんどのピクセルフォントは3〜5ピクセル幅の文字を使用し、各文字の間に少なくとも1ピクセルの間隔があります。

これらの用語は伝統的なタイポグラフィから来ていますが、ピクセルグリッド上では数えられる具体的な寸法になります。ピクセルアートの伝統は厳格なグリッド制約の中で作業することに由来し、初期のコンピュータディスプレイやアーケードゲーム筐体から続いています。LEDパネル向けのデザインにも同じ規律が適用されます。

Pixel Overloadでは、タイポグラフィの用語とグリッド上でピクセルフォントをデザインするための2つの実用的な方法を解説しています。

キャンバスサイズの選び方

Divoomディスプレイのピクセルグリッドがフォントの詳細度を決定します。大きなグリッドはアセンダーやディセンダー、装飾的な要素を含む文字形に十分なスペースを提供します。小さなグリッドはシンプルで太めのデザインを強いられますが、遠くからでもはっきり読めます。

ディスプレイ	Pixoo-64 64×64 LEDパネル	Times Gate 5×128×128 LCDスクリーン	Ditoo Pro 16×16 LEDフロントパネル
グリッドサイズ	64×64ピクセル	画面あたり128×128	16×16ピクセル
推奨フォントサイズ	5×7または8×8	8×8または10×14	3×5または5×7
最適用途	詳細なフォント、複数行テキスト、太字のスクロールメッセージ	専用画面での高詳細フォント、ダッシュボード風テキスト	シンプルなスクロール名、短い引用、コンパクトな魅力
テキスト表示スタイル	静止またはスクロールアニメーション	一方の画面は静止表示、もう一方はスクロール表示	スクロールアニメーション（主な方法）

初めてピクセルフォントをデザインするなら、5×7グリッドから始めましょう。これはちょうど良いサイズで、アセンダーやディセンダーのある明確な小文字を作るのに十分なスペースがあり、初心者がピクセルの選択に圧倒されることもありません。

適切なツールの選び方

ピクセルフォントをデザインするのにソフトを購入する必要はありません。いくつかの無料ツールはブラウザ上で直接動作し、ピクセルフォントに必要なグリッドベースの考え方を中心に作られています。主な選択肢の比較は以下の通りです：

Aseprite — 総合的に最良のピクセルアートエディター

Asepriteはピクセルアート制作の業界標準ツールで、フォントデザインも得意です。レイヤー、アニメーションフレーム、スプライトシートのエクスポートに対応しており、後でスクロールテキストアニメーションを作成する場合に重要です。欠点は価格で、Asepriteは有料ツール（約20ドル）ですが、技術的に詳しければソースから無料でコンパイルできます。Windows、macOS、Linuxで利用可能です。

ピクセルアートとフォントの両方を作成する予定がある場合、またはワークフローにアニメーションサポートを組み込みたい場合は、Asepriteを選んでください。

Piskel — 無料のブラウザベースのピクセルエディター

Piskelはブラウザ上で完全に動作し、インストール不要です。グリッドスナップ、アニメーションタイムライン、PNGやGIFのエクスポート機能を備えたシンプルなインターフェースを提供します。Asepriteより簡単ですが、そのシンプルさが学習時の利点です。各文字を別々のフレームでデザインし、個別のPNGやスプライトシートとしてエクスポートできます。

セットアップ不要でどのタブでも開けるツールが欲しいならPiskelを選びましょう。

FontStruct — グリッドフォント作成に特化

FontStructは異なるアプローチを取ります。ピクセルアートを描く代わりに、グリッド上に「ブリック」を配置して各グリフを構築し、そのデザインを実際のTrueTypeフォントファイル（.ttf）としてエクスポートできます。無料でブラウザベース、グリッド制約のあるタイプデザインに特化しています。

ピクセルアート画像に加えて本物のインストール可能なフォントが欲しい場合や、自由描画よりドラッグ＆ドロップの作業が好みならFontStructを選びましょう。

Divoomアプリ — 内蔵ピクセルエディター

無料のDivoomスマートアプリ（iOSとAndroidで利用可能）には基本的なピクセルエディターが含まれています。簡単なテキストデザインを描いて、エクスポートやインポートなしで直接デバイスに送信できます。フルアルファベットのデザインには制限がありますが、短いメッセージやフォントのコンセプトを実際のディスプレイで試すのに最適です。

フルアルファベットをデザインする前に、まずは自分の名前や短いフレーズから始めましょう。5文字の単語なら、26文字と句読点を作る前に間隔、読みやすさ、スタイルを試せます。

最初の文字をデザインする3つの方法

ピクセルグリッド上で文字形を作る一般的な方法は3つあります。それぞれ異なる視覚的特徴を持ち、最適な選択はグリッドサイズや求めるスタイルによって異なります。

線法

手書きに似た方法で、グリッド上に各文字を線ごとに描きますが、線は水平、垂直、45度のストロークに制限されます。これにより、細くてきれいな文字形が生まれ、正確でモダンな印象を与えます。5×7サイズ以上でよく機能します。主な注意点は、線法フォントは軽やかな見た目になりやすく、非常に小さいサイズでは細い線が明るいLED背景に対して読みづらくなることです。

ボックス法

まず各文字を塗りつぶした長方形で作り、そこからネガティブスペースを削って文字を定義します。これにより、3×5サイズでも読みやすい太く重みのある文字形状が得られます。ボックス法は、Ditoo Proの16×16パネルのような小さなグリッドで作業する初心者に最も寛容な方法です。

ピクセル単位での作成

ピクセルを一つずつ配置し、文字を一から作り上げます。最も正確ですが最も時間がかかる方法です。8×8以上のグリッドで微妙なディテール（Sのわずかな曲線、Tの尖ったセリフ、Bの丸みのあるボウル）を加えるのに適しています。64×64グリッドのPixoo-64では、ピクセル単位で各文字を細かく調整できます。

フォントの読みやすさを高める

ピクセルフォントは読みやすさが命です。LEDディスプレイではピクセルが物理的な光点なので、小さな読みづらさがモニターより目立ちます。読みやすさを一貫して向上させるいくつかのルール：

• 文字間は最低1ピクセルの間隔を空けましょう。文字が接触すると塊になりやすく、特にLEDパネルでは隣接ピクセル間で光がにじむため注意が必要です。
• 文字幅は一貫性を保ちましょう。Aが5ピクセル幅なら、他の大文字もほとんどが4～5ピクセル幅にするべきです。幅のばらつきが大きいとスクロール時にテキストが不均一に見えます。
• 実際の表示サイズで早めにテストしましょう。各ピクセルがデバイスのLEDの大きさに近くなるまでズームアウトしてください。文字が判別できなくなったら再設計が必要です。
• 紛らわしい文字の組み合わせに注意しましょう。大文字のIと小文字のl、大文字のOと数字の0、小文字のrnと文字のmなど、小さなピクセルサイズでは意図的な違いを設計しない限り同じ形に見えてしまいます。
• 5×7未満のサイズではセリフを省略しましょう。セリフは文字本体に必要なピクセルを消費します。3×5サイズでは、クリーンなサンセリフデザインが常にセリフ付きより優れています。

デザインからDivoomディスプレイへ

フォントのデザインが完成したら、最後のステップはそれをデバイスに取り込むことです。静的テキストかアニメーションスクロールかによってワークフローが異なります。

静的テキスト

1. デザインツールで、カスタムフォントの文字を使って完全なメッセージを作成してください。
2. 結果をディスプレイの正確なピクセル寸法（例：Pixoo-64なら64×64）で単一のPNGとしてエクスポートします。
3. Divoomアプリを開き、デバイスを選択してPNGをカスタムピクセルアートとしてアップロードします。
4. ディスプレイに送信し、明るさを好みに合わせて調整します。

スクロールまたはアニメーションテキスト

1. 各文字を別々のタイルまたはフレームとしてデザインします。
2. テキストが1〜2ピクセルずつ左に移動するアニメーションシーケンスを作成します。
3. アニメーションをGIFとしてエクスポートします — DivoomアプリはGIFのアップロードと再生に対応しています。
4. アプリを通じてGIFをアップロードし、ループ速度を設定し、表示モードを選択します。

Times Gateでスクロールテキストを表示する場合、5つの画面のうち1つをカスタムアニメーションに割り当て、他の画面は時計、天気、データウィジェットを表示し続けることができます。これにより、ライブ情報と並んでパーソナライズされたスクロールテキストを表示でき、コミュニティギャラリーのテンプレートでは再現できない組み合わせが可能です。

どのDivoomディスプレイがフォントを最も美しく表示するか

各Divoomディスプレイはカスタムタイポグラフィに異なる特徴を持っています。適切な選択は、フォントの詳細度とディスプレイの設置場所によります。

Pixoo-64はフォント作業に最適なキャンバスです。64×64ピクセルで複数行のテキストを収めたり、装飾的なフレアを加えた大きな一行メッセージを表示したり、滑らかな動きのアニメーションスクロールバナーを作成したりできます。フォントデザインがピクセルディスプレイ購入の主な理由なら、自然な選択肢です。デュアルバンドWiFi接続により、カスタムアニメーションが常時表示で安定して接続されます。最新の価格と在庫状況はPixoo-64製品ページをご覧ください。

Times Gateはテキスト愛好家にとってユニークな利点を提供します：5つの独立した128×128の画面です。1つの画面をカスタムフォントのショーケースに、別の画面をスクロールメッセージに割り当て、残りの3つは時計、天気、データウィジェットに使えます。画面ごとの128×128解像度は、Divoomラインナップで最高のフォントディテールをサポートします。カスタムタイポグラフィを要素の一つに含むデスクトップダッシュボードが欲しいなら、Times Gateが最も柔軟性を提供します。

Ditoo Proは異なるアプローチを取っています。16×16のフロントパネルは小さいですが、その制約が創造的な利点になることもあります。シンプルなスクロールネームや短い引用文、ミニマルなピクセルメッセージは、このレトロスタイルのスピーカーで特別な魅力を持ちます。メカニカルキーボードのキーとジョイスティックは、他のディスプレイにはない触覚的な操作を提供します。音楽を再生し、カスタムテキストを表示するコンパクトなデスクコンパニオンが欲しいなら、Ditoo Proがあなたの個性を演出します。

デバイスのセットアップ手順やペアリングの詳細については、Divoom製品マニュアルページで3つのディスプレイすべてのWiFiおよびBluetooth接続手順を確認できます。

よくある質問