ログインボタンのデザイン

印刷する
共有
PDF

Article Summary

Share feedback

Thanks for sharing your feedback!

Classic/VPC環境で利用できます。

ユーザーの Applicationに NAVERクラウドプラットフォームアカウントのログイン機能を適用する時のログインボタンとそのデザインについて説明します。ユーザーの Applicationに合わせてログインボタンのデザインを変更できますが、デザイン時に NAVERクラウドプラットフォームのアイデンティティを維持するように、次のガイドをできるだけ維持することを推奨します。

Symbol
Color
Label
正しくないログインボタンのデザイン例

本ガイドで示す項目をすべて適用したログインボタンを以下でダウンロードできます。

ログインボタンのダウンロード: NAVER Cloud Platform_Signin_Button.zip

参考

独自のデザインガイドがない場合、NAVERクラウドプラットフォームで提供するマークアップを活用し、ログインボタンを配置できます。詳細は、Ncloud Single Sign-Onログインボタンマークアップガイドをご参照ください。

Symbol

NAVERクラウドプラットフォームのログインボタン内に使用される NAVERクラウドプラットフォームのシンボルは、3つのカラーのうち、一つを適用します。

ホワイトまたはグレー: ログインボタンが黒いカラーの場合に適用
ブラック: ログインボタンがホワイトまたはグレーのように明るいカラーの場合に適用
NAVERクラウドプラットフォームのカラー: NAVERクラウドプラットフォームの公式カラーで、ボタンが明るいカラーである場合に適用

参考

NAVERクラウドプラットフォームのシンボルは自社のガイドに従ってサイズを調整できますが、縦横の比率は維持し、形を変えたり、他の形と組み合わせたりしません。

Color

NAVERクラウドプラットフォームのログインボタンカラーは、Basic Lineタイプと NAVERクラウドプラットフォーム Color Gradationタイプから選択できます。自社のログインページの構成時は、他社のログインオプションと比較し、同等の可読性のために適切に適用します。

Basic Lineタイプのカラー構成
- Background/HEX: #F9F9F9, RGB: 249/249/249
- Border/HEX: #AAAAAA, RGB: 170/170/170
NAVERクラウドプラットフォーム Color Gradationタイプのカラー構成
- Green HEX: #00C3C8, RGB: 3/199/90
- Cyan HEX: #03C75A, RGB: 0/195/200

次は、ログインボタンのカラーガイドを適用した例です。

Label

画面にきちんと収まるようにラベルを入れます。ログインボタンの大きさによるラベルは、基本型と縮約型から選択して適用できます。

タイプ	韓国語	英語	日本語
基本型	NAVERクラウドプラットフォームにログイン	NAVER Cloud Platform Login	NAVERクラウドプラットフォームにログイン
短縮型	Ncloudログイン	Ncloud Login	Ncloudでログイン

また、ユーザーのデザインガイドに従って以下のようにラベルを修正して適用できます。

タイプ	韓国語	英語	日本語
基本型	NAVERクラウドプラットフォームでログイン	Log in with NAVER Cloud Platform	NAVERクラウドプラットフォームでログイン
短縮型	Ncloud IDでログイン	Log in with Ncloud ID	Ncloud IDでログイン

参考

ラベル内の「NAVERクラウドプラットフォーム」と「Ncloud」は、NAVERクラウドプラットフォームを象徴するラベルですので、任意に変更できません。例) nCloud、Ncloud