本文へ移動

メニュー

ランゲージセレクター概要

スクリーンショット:ランゲージセレクターの3つのパターン。

使い方

配置

フルデスクトップビューでは、ランゲージセレクターを上隅 (左または右) に配置します。

また、デスクトップの超スリム版やモバイルビューなど、バーガーメニューのあるレイアウトではランゲージセレクターをハンバーガーメニュー内のリスト項目として配置します。

ヘッダーエリアでの配置例

スクリーンショット:ランゲージセレクターがヘッダーのユーティリティエリアの右端に配置されている。

言語表示

スクリーンショット:横方向に4つの展開されたランゲージセレクターが並んでおり、左からそれぞれ「日本語」、英字で「English」、簡体字で「简体中文」、繁体字で「繁体中文」が選択状態で表現されている。

選択された表示言語に関わらずランゲージセレクターの表記は常に英語で「Language」を表示します。

また、ドロップダウン内の言語リストはそれぞれの言語で表記します。

デザインスタイルのバリエーション

必要な場合はサイトやアプリケーションのデザインスタイルに合わせて角の形状やカラーを調整し、全体としてのデザインの一貫性を常に保つよう心掛けてください。

スクリーンショット:スタイルの異なる3つのランゲージセレクター並んでいる。左は選択中が薄青の背景色、真ん中は選択中が薄緑の背景色。右は選択中が薄灰の背景色で表現されている。いずれも、選択中の項目は太字のテキストを持ち、チェックマークのアイコンが付与されている。

角の形状の参考例/カラー使用の参考例