アプリアイコン
Tinyrack の形状から作られた Tinest、Dotweave、Proxer、TinyAuth の承認済みアプリアイコンと、配布用の SVG・PNG ファイルです。
提供されたファイルを完成した原本として使います。最初に形式と表示サイズを決め、次にプロダクトマークを選んでください。プレビューから形状を作り直したり、Tinyrack のワードマークと組み合わせたりしません。
形式とピクセルサイズを選ぶ
表示先が対応する場合は SVG を選んでください。PNG が必要な場合は表示サイズと同じファイルを使い、小さい画像を拡大しません。長い表は狭い画面でもページ全体ではなく表の内側だけを横スクロールできます。
| ファイル | 用途 | 指針 |
|---|---|---|
| SVG | ウェブ画面と拡大縮小する素材 | 標準の選択です。64×64 のベクターグリッドを使います。 |
| 16px PNG | ブラウザのファビコン | SVG ファビコンが使えない場合に選びます。 |
| 32px PNG | 高密度ファビコンと小さな一覧 | 32px、または 2 倍密度画面で 16px として表示します。 |
| 48px PNG | 小さな一覧とショートカット | 元の 48px サイズで使います。 |
| 128px PNG | サービスアバターと大きな一覧 | ラスター画像が必要なサーフェスで使います。 |
| 512px PNG | 大きなウェブ用アートワーク | インストールするアプリには、以下のランチャー専用ファイルを使います。 |
ランチャー原本を選ぶ
インストールするアプリのアイコンには、ファビコンや画面用アートワークより広い余白が必要です。完成済みのアイコンには launcher-icon ファイルを使ってください。64×64 のキャンバス内にタイル全体を保ち、四辺に 8px の透明な余白を含みます。Android の adaptive icon には、同じプロダクトの adaptive-foreground を #0a0a0a の背景上で使ってください。前景ファイルはタイルを除き、Android の 108×108 レイヤーグリッド中央にある 54×54 の範囲内へグリフを配置します。
ファビコン、サービスアバター、ウェブ画面には既存の app-icon ファイルを引き続き使います。ランチャー画像のアルファチャンネルを許可しないプラットフォームでは、原本を手作業で切り抜いたり合成したりせず、プラットフォームのアイコン生成ツールで必要な不透明背景を適用してください。
画面用アートワーク
ランチャー用アートワーク
プロダクトマーク
実寸プレビュー
表示されている 4 つの PNG を、元の 16px、32px、48px、128px で確認してください。ダウンロードできる 512px ファイルは実寸ではプレビューしていません。
Tinest
16
32
48
128Dotweave
16
32
48
128Proxer
16
32
48
128TinyAuth
16
32
48
128周囲のサーフェス
黒いタイルはアートワークの一部なので、同じアセットを明るいインターフェースと暗いインターフェースの両方で使えます。丸みのあるタイルの輪郭が見えるよう、周囲に十分な余白を確保してください。
共通構成
Tinyrack と 4 つのプロダクトマークは、64×64 グリッド上で同じ 3 段の構成を共有します。各段は高さ 8 で、上端は 14.666667、28、41.333333、左右の境界は 14.666667 と 49.333333 です。
使用ルール
ダウンロード
各プロダクトには、正規の SVG を 1 つと、5 種類のサイズで生成した PNG があります。すべてのラスター画像は、この SVG を基準に生成しています。
アイコン一式は @tinyrack/ui にも収録しています。SVG の原本や生成済みの PNG は、ネストされた brand/apps サブパスから読み込んでください。
import tinestIconUrl from '@tinyrack/ui/brand/apps/tinest-app-icon.svg';
import dotweaveIconUrl from '@tinyrack/ui/brand/apps/dotweave-app-icon.svg';
import proxerIconUrl from '@tinyrack/ui/brand/apps/proxer-app-icon.svg';
import tinyAuthIconUrl from '@tinyrack/ui/brand/apps/tinyauth-app-icon-512.png';
