ウェブインターフェイス向けの国旗
アクセシブルなグローバルウェブサイト向け国旗SVGダウンロード
ウェブサイト、アプリ、ダッシュボード、地域セレクター、サーバーリスト、ローカライズUI向けに、256種類の国旗をSVG形式で提供する本番対応セットをダウンロードできます。ファイルは軽量でスケーラブル、キャッシュに適しており、明確なテキストラベルと組み合わせて使うよう設計されています。
概要
国旗は言語のショートカットではなく地域のシグナルとして使用する
国旗は国、地域、市場、配送ゾーン、通貨、オフィス所在地、サーバー所在地の選択に最適です。ローカライズを補助できますが、言語名の代わりに使うべきではありません。なぜなら、1つの言語が複数の国にまたがり、1つの国に複数の言語が存在するためです。
適合確認
国旗と言語セレクターは異なるUX課題を解決する
国旗は地理的な強い視覚的手がかりです。一方、言語セレクターは読みやすさとアクセシビリティの判断です。最も洗練されたインターフェイスは、国旗だけに頼らず、母国語のラベルや地域名、国名と組み合わせて表示します。
地域の文脈として国旗を使用する
- 表示ラベルが国や市場名を示す国・地域選択ツール。
- サーバー所在地リスト、配送ゾーン、オフィス所在地、通貨選択、地域別価格表。
- URL、テキスト、メタデータ、国旗が同じ地域を示すローカライズされたランディングページ。
- 小さな視覚的手がかりでユーザーが国別行を素早く確認できるコンパクトなダッシュボード。
国旗だけを言語ラベルとして使わない
- Deutsch、English、Espanolなどの言語名なしで国旗だけを表示する言語切替。
- 1つの国に複数の公用語がある、または1つの言語が複数の国にまたがる市場。
- ユーザーの判断を助けずネットワークリクエストだけ増やす装飾的な国旗の集合。
- 画像が意味を持つ場合に、国名を説明せず「DE」や「flag」「icon」だけのaltテキスト。
目次
国旗セット
国コードのワークフローを変えずに複数の形状を提供するコレクション
各セットには256種類のSVG国旗が含まれています。密集したレイアウトには長方形、コンパクトなセレクターには円形や正方形、視覚的強調には波形、バッジやプレミアム呼び出しには楕円形を使用してください。国コードが安定した入力なので実装はシンプルに保てます。
長方形の国旗
国リスト、価格表、サーバー所在地、国旗をきれいに行揃えするUIにはクラシックなアスペクト比を使いましょう。
円形および正方形の国旗
プロフィール選択、言語ドロワー、モバイルナビゲーション、テーブルチップ、小さなステータスコントロールにはコンパクトな形状を使います。
波形の国旗
ヒーローセクション、国のハイライト、注目地域パネルなど、ページをエディトリアルに見せたい場合は波形の国旗を使います。
楕円形の国旗
柔らかい印象のバッジ、市場ラベル、製品の呼び出し、角が鋭すぎると感じるレイアウトには楕円形の国旗を使います。
アクセシビリティ
アクセシブルな国旗UIにはテキスト、ラベル、正確な意味が必要
国旗は選択肢の装飾に使えますが、アクセシブル名は選択内容を説明すべきです。情報を伝える画像には「Flag of Germany」などのaltテキストを使い、装飾的な国旗には空のaltテキストを設定し、重要なコントロールの隣には見える言語名や国名を表示してください。
情報を伝える国旗の説明
国情報を伝える国旗には明確なaltテキストを使い、同じ国名が隣に表示されている場合は装飾的にしても構いません。
国旗だけに頼らない
コントロールは国名、地域名、言語名をテキストで示すべきです。これによりスクリーンリーダーや翻訳ツール、国旗を認識しないユーザーを助けます。
画像だけでなくコントロールのサイズも調整
SVGファイルは小さくて問題ありませんが、クリック可能な領域はモバイルで操作しやすく、フォームやメニューでキーボードフォーカス可能であるべきです。
パフォーマンス
配信経路が単純な場合、SVG国旗は鮮明で低コストで配信可能
国旗にはSVGが最適です。どのサイズでもエッジが鮮明で、ファイルサイズも小さいためです。マークアップは最適化し、ファイルは積極的にキャッシュし、1ページに数百のインラインSVGを埋め込むのは避け、ユーザーが見たりすぐに必要な国旗だけを読み込みましょう。
鮮明なエッジのためにSVGを使う
国旗は鋭い形状とフラットカラーを持つため、SVGは複数のラスタ画像よりも小さくてきれいに保てます。
ファイルパスでキャッシュ
国旗のURLは安定させ、静的ファイルのキャッシュに繰り返し訪問時の処理を任せましょう。
大量のインライン埋め込みを避ける
インラインSVGは少数のアイコンには有効ですが、数百の国旗をインラインで埋め込むと解析が重くなります。
レイアウトスペースを確保
マークアップやCSSで幅と高さを設定し、国旗読み込み時のレイアウトのジャンプを防ぎましょう。
実装
国旗を美しくする前にマークアップをセマンティックに保つ
実際のリンクやボタンから始め、テキストラベルを含め、CSSで国旗のサイズを設定し、SVGファイルはキャッシュ可能なパスから読み込みます。これにより検索エンジンや支援技術に有用な文脈を提供しつつ、デザイナーは素早い視覚的手がかりを得られます。
アクセシブルな国選択マークアップ
このパターンは地域選択、国フィルター、ローカライズされたストアリンクに適しています。表示されるテキストが実際の意味を伝えるためです。
<a class="country-option" href="/de-de/" hreflang="de-DE">
<img class="country-option__flag"
src="/svg/flages/4x3/de.svg"
width="24"
height="18"
alt="Flag of Germany" />
<span>Deutsch - Germany</span>
</a>安定した国旗サイズ
固定サイズを設定することでレイアウトのズレを防ぎ、異なる形状の国旗も見やすくなります。
.country-option {
display: inline-flex;
min-height: 44px;
align-items: center;
gap: 10px;
padding: 8px 12px;
}
.country-option__flag {
width: 24px;
height: 18px;
flex: 0 0 auto;
object-fit: cover;
border-radius: 4px;
}SEOとUX
国旗は周囲のページが地域を説明している場合のみSEOに役立つ
検索エンジンは国旗があるだけでページを評価しません。URL、見出し、hreflangタグ、メタデータ、リンクテキスト、表示テキストが同じ地域やローカライズの意図を明確に示すときに国旗が役立ちます。
国旗とカルチャー対応リンクを一致させる
ローカライズされたURLやhreflangタグは画像より強いSEO効果があります。国旗はそれらのシグナルを補助し、置き換えるものではありません。
タイトル、H1、説明は明確に区別する
焦点を絞ったタイトル、自然なH1、国旗セットのレビューやダウンロードを促すメタディスクリプションを使いましょう。
意味のあるファイル名とaltテキストを使う
de.svgのようなファイル名はコード用に問題ありませんが、表示内容やアクセシブルラベルは「Germany」など該当国名を示すべきです。
負担軽減に役立つ場所で国旗を使う
国旗でユーザーが迷うなら外すか、より明確なテキストを追加しましょう。良いローカライズUIは凡例なしでも直感的です。
はじめる
無料サンプルから始めて、インターフェースに必要な形状を選択する
まず実際のセレクター、テーブル、メニュー、ダッシュボードでサンプルを試してください。間隔やラベルが適切なら、フルセットを購入し、国コードベースの実装をそのまま使い続けましょう。
よくある質問
言語選択に国旗を使うべき？
国旗はあくまで補助的な視覚手がかりとして使いましょう。言語セレクターには言語名も表示すべきです。1つの言語が複数国で話され、1つの国に複数言語があるためです。
なぜSVG国旗はPNGより優れているの？
SVG国旗はどのサイズでも鮮明で、通常ファイルサイズが非常に小さく、レスポンシブレイアウトに適しています。PNGはレガシーシステムで有用ですが、固定サイズが必要です。
国旗のaltテキストはどう書く？
国旗が意味を持つ場合は「Flag of Germany」などのテキストを使います。国名がすでに表示されていて画像が装飾的なら空のaltテキストにしてスクリーンリーダーの重複を避けましょう。
国旗だけでSEOは向上する？
いいえ。国旗はページに明確な地域テキスト、カルチャー対応URL、hreflangタグ、有用なメタデータ、アクセシブルラベルがある場合にのみSEOを補助します。
セットには何種類の国旗が含まれる？
各セットには256種類のSVG国旗が含まれています。レイアウトに応じて長方形、正方形、円形、波形、楕円形を使い分けられます。
多くの国旗があるページを高速に保つには？
国旗はキャッシュ可能なパスから最適化されたSVGファイルで配信し、表示サイズを確保し、通常の画像ファイルで十分な場合は数百のインラインSVGのレンダリングを避けましょう。