本文へスキップ
USDC 価格:$1.0000ガス:
Arcscan

ブランド素材

Arcscan のシンボルマークとワードマーク、配布ファイル本体、そして併せて守っていただきたい規則。

ここにあるのはファイルそのもので、その見本ではありません

以下のプレビューはすべて、ダウンロードリンクと同じ URL から読み込んだ公開ファイルそのものです。表示されているものが、そのまま手に入ります。その場で描き起こしたものは一つもなく、ディスク上に存在しないファイルは掲載されません。このページで解決しない件は [email protected] までご連絡ください。

シンボルマーク

白い背景に置いた Arcscan-logo-mark.svg
黒い背景に置いた Arcscan-logo-mark.svg

マーク — ベクター

原本を無修正で公開しています。これがマスターで、このページの他のファイルはすべてここから派生しています。ベクターが使える場面では必ずこれをお使いください。

SVG · 1254 × 1254 · 3.7 KB · 背景透過

ダウンロード
白い背景に置いた Arcscan-logo-mark.png
黒い背景に置いた Arcscan-logo-mark.png

マーク — ラスター

同じ図版のピクセル版。SVG を受け付けないツール向けです。縮小はできますが、拡大はしないでください。このファイルは不透明で、円盤の外側の四隅は透明ではなくほぼ黒です。そのため明るい面に置くと暗い四角として見えます。透過が必要な場合はベクター版か白抜き版をお使いください。

PNG · 1254 × 1254 · 997.6 KB

ダウンロード
白い背景に置いた Arcscan-logo-mark-white.svg
黒い背景に置いた Arcscan-logo-mark-white.svg

マーク — 白抜き

モノグラムのみ。フラットな白、円盤なし、背景は透明です。暗いパネル、写真、単色印刷向け。白い面では完全に消えます——左側のプレビューが示しているのはまさにそれです。

SVG · 1254 × 1254 · 2.3 KB · 背景透過

ダウンロード

横組みロックアップ

白い背景に置いた Arcscan-lockup.svg
黒い背景に置いた Arcscan-lockup.svg

ロックアップ — ベクター、文字色を継承

マークとワードマークの組み合わせ。文字は currentColor 指定なので、ページに直接埋め込めばそのページの文字色を受け継ぎます。画像として読み込んだ場合は黒に落ちます(画像は置かれたページを見られないため)。その用途では下の色固定版をお使いください。

SVG · 163 × 48 · 3.1 KB · 背景透過

ダウンロード
白い背景に置いた Arcscan-lockup-light.svg
黒い背景に置いた Arcscan-lockup-light.svg

ロックアップ — ベクター、明るい背景用

濃いインクの文字とフルカラーの円盤。白および淡色の背景向け。

SVG · 163 × 48 · 3.1 KB · 背景透過

ダウンロード
白い背景に置いた Arcscan-lockup-dark.svg
黒い背景に置いた Arcscan-lockup-dark.svg

ロックアップ — ベクター、暗い背景用

白の文字と白抜きモノグラム、円盤なし。濃紺の円盤は暗い背景ではそもそも見えないため、円盤付きのまま配ることは見えないマークを配ることになります。暗い背景専用です。

SVG · 163 × 48 · 2.6 KB · 背景透過

ダウンロード
白い背景に置いた Arcscan-lockup.png
黒い背景に置いた Arcscan-lockup.png

ロックアップ — ラスター、明るい背景用

サイト自身が、サイトで使っている Roboto Medium を用いて 4 倍サイズ・背景透明で書き出したものです。書体を固定したい場合はこちらを。

PNG · 644 × 192 · 32.4 KB · 背景透過

ダウンロード
白い背景に置いた Arcscan-lockup-dark.png
黒い背景に置いた Arcscan-lockup-dark.png

ロックアップ — ラスター、暗い背景用

同じロックアップを同じサイズで、白抜き・背景透明にしたもの。

PNG · 644 × 192 · 10.2 KB · 背景透過

ダウンロード
白い背景に置いた Arcscan-lockup-official.png
黒い背景に置いた Arcscan-lockup-official.png

ロックアップ — バナーより

当サイトのソーシャルバナーから切り出したもので、バナー本来の書体です。サイトのヘッダーは同じ語を Roboto で組んでいるため、綴りは同じでも字形は異なります。下の「表記」を参照。

PNG · 952 × 290 · 31.1 KB · 背景透過

ダウンロード

アイコン

白い背景に置いた favicon.svg
黒い背景に置いた favicon.svg

ファビコン — ベクター

ブラウザのタブが最初に読み込むもの。マスターの単純な縮小ではありません。マスターの細い線は 16 ピクセルでは潰れてしまうため、ここではモノグラムを太らせて描いてあります。

SVG · 1254 × 1254 · 3.7 KB · 背景透過

ダウンロード
白い背景に置いた favicon.ico
黒い背景に置いた favicon.ico

ファビコン — ICO

同じアイコンの ICO 版。ページの記述に関係なく /favicon.ico を直接取りにくる古いツールやフィードリーダーのためのものです。

ICO · 16 × 16 · 32 × 32 · 48 × 48 · 4.1 KB · 背景透過

ダウンロード
白い背景に置いた apple-touch-icon.png
黒い背景に置いた apple-touch-icon.png

Apple タッチアイコン

不透明で、透過も独自の角丸も持ちません——マスクは iOS 側が適用します。ホーム画面に追加したときに表示されるのがこれです。

PNG · 180 × 180 · 6.6 KB

ダウンロード
白い背景に置いた icon-192.png
黒い背景に置いた icon-192.png

アプリアイコン 192 px

Android のホーム画面とインストール案内で使われ、ウェブアプリマニフェストが指定します。

PNG · 192 × 192 · 8.9 KB · 背景透過

ダウンロード
白い背景に置いた icon-512.png
黒い背景に置いた icon-512.png

アプリアイコン 512 px

スプラッシュ画面とストア風の一覧表示。同じマニフェストから。

PNG · 512 × 512 · 26.4 KB · 背景透過

ダウンロード
白い背景に置いた icon-maskable-192.png
黒い背景に置いた icon-maskable-192.png

マスカブルアイコン 192 px

周囲に余白を足してあるので、プラットフォームが円・スクワークル・角丸四角のどれに切り抜いても図版本体に食い込みません。

PNG · 192 × 192 · 6.9 KB

ダウンロード
白い背景に置いた icon-maskable-512.png
黒い背景に置いた icon-maskable-512.png

マスカブルアイコン 512 px

同じもので、ランチャーが最大タイルに使うサイズ。

PNG · 512 × 512 · 19.8 KB

ダウンロード

ソーシャル・バナー素材

白い背景に置いた Arcscan-social-banner.png
黒い背景に置いた Arcscan-social-banner.png

ソーシャルバナー

当サイトのバナー素材のフル解像度版。ロックアップ、タグライン、エクスプローラーの画面が入っています。プロフィールヘッダーや記事のリード画像に。

PNG · 3000 × 1000 · 1.7 MB

ダウンロード
白い背景に置いた Arcscan-social-card.png
黒い背景に置いた Arcscan-social-card.png

リンクプレビュー画像

各 SNS やチャットクライアントがリンクプレビューを切り抜くサイズ。このサイトのリンクを共有したときに展開されるのがこの画像です。

PNG · 1200 × 630 · 33 KB

ダウンロード
白い背景に置いた Arcscan-wordmark-official.png
黒い背景に置いた Arcscan-wordmark-official.png

ワードマーク単体

バナーから文字部分だけを抜き出したもの、背景は透明。インクはバナー本来の濃紺なので明るい面専用で、暗い面では読めません。同じ面の別の場所にマークがある場合にのみお使いください。両者は入れ替え可能ではありません。

PNG · 609 × 124 · 37.2 KB · 背景透過

ダウンロード

最小サイズ

下限は 24 ピクセル、安全圏は 32 ピクセルです。24 px を下回ると二つのことが同時に起こります。推測ではなく実測です。A の内側にある三角形のカウンターが白で埋まり、そこを横切る細い線が 512 ピクセルの基準に対してコントラストを 3 分の 1 から半分ほど失います。残るのは濃い円盤の上の淡いにじみであって、文字ではありません。32 px では何も失われません。24 px より小さく使う必要がある場合はファビコンをお使いください。まさにこの理由で太らせて描いた、同じモノグラムです。

16 ピクセルで描画したマーク16
20 ピクセルで描画したマーク20
24 ピクセルで描画したマーク24
32 ピクセルで描画したマーク32
48 ピクセルで描画したマーク48
64 ピクセルで描画したマーク64

同じファイルを各サイズで拡大なしに描画したもの。A を横切る線が灰色の筋になり、内側の三角形が塞がって見えるなら、そのサイズは小さすぎます。

使用規則

カラー

#01122F

円盤。マークのファイルから直接読み取った放射グラデーションで、中心がもっとも明るく、縁がもっとも暗くなります。単色しか置けない場合は中間のストップ #01122F を。グラデーション全体の明度差はおよそ半段しかないので、読者が実際に目にするどのサイズでも、円盤の色はこれです。

#011538
円盤グラデーション、中心のストップ。
#01122F
円盤グラデーション、中間のストップ。唯一の単色ネイビー。
#020E27
円盤グラデーション、外周のストップ。

モノグラム。こちらもグラデーションで、単なる白ではありません。左上から右下へごくわずかに冷たくなります。画面ではほとんど分かりませんが、大きな印刷面ではそうはいきません。再現できるなら再現し、できないなら #FFFFFF をお使いください。

#FFFFFF
モノグラムのグラデーション、始点。純白。
#F8FBFF
モノグラムのグラデーション、中間点。
#EDF3FB
モノグラムのグラデーション、終点。もっとも冷たい点。

インターフェースのパレット。本サイトの CSS トークンで、隣に並ぶページを作る方のために公開しています。#0784C3 はインターフェースのブルー——リンク、フォーカス、アクティブ状態に使います。ブランドカラーではなく、マークには一切現れません。

#0784C3--arc-primary
インターフェースのブルー。リンク、フォーカス、アクティブ状態——マークの色ではありません。
#066A9C--arc-link-hover
リンクのホバーと押下時のブランド状態。
#081D35--arc-text-ink
インク。暗い UI テキストとヒーローバンド。
#212529--arc-text
明るい面の本文テキスト。
#6C757D--arc-text-dim
副次的・抑えたテキスト。
#E9ECEF--arc-border
ヘアラインの罫線と区切り。
#F8F9FA--arc-bg-subtle
控えめな塗り:フッター、コードブロック、チップ。
#111A2E--arc-bg-page
ダークテーマのページ面。
#00A186--arc-success
成功、および Arc におけるファイナリティ。
#DC3545--arc-danger
失敗。
#FFC107--arc-warning
注意、テストネットのバナー。
#2775CA--arc-usdc
ネイティブ資産のアクセント。ブランドカラーとしては使いません。
#6F42C1--arc-system
システムエンティティとプリコンパイル。

ベクターのロックアップは文字を生きたテキストで組んでいます

3 つの SVG ロックアップは、サイトのヘッダーと同じく、文字を SVG のテキスト要素として Roboto(システムフォントへのフォールバック付き)で組んでいます。画像として読み込まれた SVG はページのフォントを借りられないため、Roboto が入っていない読者には、この字形ではなく各自の環境のサンセリフが表示されます。書体を固定する必要がある場合は PNG のロックアップを、あるいはマークだけを取り、文字はお手元で使っている書体で組んでください。置き換わった書体よりそのほうが良く見えます。

表記

ブランド・報道関係のお問い合わせ