Yahoo! JAPAN IDログインボタン デザインガイドライン

Yahoo! JAPAN IDログインボタンを使用する際には、本デザインガイドラインに従ってください。

Yahoo! JAPAN IDログインボタンは、下記の2つの要素で構成されています。

• Yahoo! JAPANアイコン
• ログインボタンテキスト

また、ボタン形式ではなくテキストリンク形式で使用することも可能です。

他にも、ソーシャルサービスのアカウントを用いてログインすることが伝わるテキストがあれば、Yahoo! JAPANアイコンのみでログインボタンとして使うことも可能です。

JavaScript SDKを使用すれば、ログインボタンをカスタマイズして生成することもできます。

素材

ログインボタン内のYahoo! JAPANアイコンを利用するには、「Yahoo! JAPAN IDログインボタンの注意事項」を読み、内容に同意する必要があります。画像をダウンロードすることにより、ガイドラインに同意したものとみなされます。

ダウンロード

フォント

ログインボタンテキストのフォントはゴシック体を使用してください。

また、文字の大きさは判読可能な大きさにしてください。

色

Yahoo! JAPAN IDログインボタンの配色は、下記を推奨します。

• 基本色：#ff0033
• 文字色：#ffffff

また、Yahoo! JAPANアイコンの背部に色を用いる場合は、基本色のみ使うことが可能です。

Yahoo! JAPANアイコンの色は赤（#ff0033）か白（#ffffff）のみ使用可能です。

クリアスペース

ログインボタン内のYahoo! JAPANアイコン周囲にはクリアスペースを確保してください。

クリアスペースの基準として、Yahoo! JAPANアイコンの高さをH、幅をWとします。

Yahoo! JAPANアイコンの上下のクリアスペースは、Yahoo! JAPANアイコンの高さHの3分の1のサイズ以上の領域を確保してください。

左右のクリアスペースは、Yahoo! JAPANアイコンの幅Wの3分の1のサイズ以上の領域を確保してください。

ログインボタンテキスト上下のクリアスペースも同様に、Yahoo! JAPANアイコンの高さHと幅Wの3分の1のサイズ以上の領域を確保してください。

ログインボタンの周囲には、上下左右それぞれ10px以上のクリアスペースを確保してください。

Yahoo! JAPANアイコン禁止事項

Yahoo! JAPAN IDログインボタン内のYahoo! JAPANアイコンについて、下記の事項を禁止します。

• 色を変更すること
• 斜め配置、縦配置、左右反転配置、上下反転配置すること
• 変形・加工すること
• 文中で利用すること
• 縁取りすること
• 重ねて配置すること
• アイコンの視認性を損なう背景色を用いること

テキスト

Yahoo! JAPAN IDログインボタンのテキストは、「ログイン」または「Yahoo! JAPAN IDでログイン」の表記を推奨しています。

ログインボタンテキスト内に「Yahoo! JAPAN ID」を含める場合は、下記の間違った表記に気をつけてください。

推奨する表記以外に独自のログインボタンテキストを使用する場合は、下記のガイドラインに従ってください。

• Yahoo! JAPAN IDでサービスやアプリにログインすることが、ユーザーにはっきりと伝わる
• テキストを改行しない

2022年12月23日改定