Yahoo! ID連携

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アイコン周囲にはクリアスペースを確保してください。

クリアスペースの基準として、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 IDログインボタンのテキストは、「ログイン」または「Yahoo! JAPAN IDでログイン」の表記を推奨しています。

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

よくある間違い
  • ×「Yahoo!でログイン」
  • ×「Yahoo! IDでログイン」
  • ×「Yahoo! JAPANでログイン」

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

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