--- title: "ログインボタンのデザイン" slug: "sso-button-design-guide" tags: ["Ncloud Single Sign-On"] updated: 2026-09-17T09:28:51Z published: 2026-09-17T09:28:51Z canonical: "guide.ncloud-docs.com/sso-button-design-guide" --- > ## Documentation Index > Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt > Use this file to discover all available pages before exploring further. # ログインボタンのデザイン Classic/VPC環境で利用できます。 ユーザーの Applicationに NAVERクラウドプラットフォームアカウントのログイン機能を適用する時のログインボタンとそのデザインについて説明します。ユーザーの Applicationに合わせてログインボタンのデザインを変更できますが、デザイン時に NAVERクラウドプラットフォームのアイデンティティを維持するように、次のガイドをできるだけ維持することを推奨します。 - [Symbol](/docs/ja/sso-button-design-guide#Symbol) - [Color](/docs/ja/sso-button-design-guide#Color) - [Label](/docs/ja/sso-button-design-guide#Label) - [正しくないログインボタンのデザイン例](/docs/ja/sso-button-design-guide#%EC%9E%98%EB%AA%BB%EB%90%9C%EB%A1%9C%EA%B7%B8%EC%9D%B8%EB%B2%84%ED%8A%BC%EB%94%94%EC%9E%90%EC%9D%B8%EC%98%88%EC%8B%9C) 本ガイドで示す項目をすべて適用したログインボタンを以下でダウンロードできます。 - ログインボタンのダウンロード: [NAVER Cloud Platform_Signin_Button.zip](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/NAVER%20Cloud%20Platform_Signin_Button.zip?sv=2026-02-06&spr=https&st=2026-10-30T21%3A37%3A36Z&se=2026-10-30T22%3A37%3A36Z&sr=c&sp=r&sig=jtDHLMN5xtYNKgjoLVXqqkg%2BKAKjtx2aDZ7I6GWz%2BF0%3D) 参考 独自のデザインガイドがない場合、NAVERクラウドプラットフォームで提供するマークアップを活用し、ログインボタンを配置できます。詳細は、[Ncloud Single Sign-Onログインボタンマークアップガイド](/docs/ja/sso-markup-guide)をご参照ください。 ## Symbol NAVERクラウドプラットフォームのログインボタン内に使用される NAVERクラウドプラットフォームのシンボルは、3つのカラーのうち、一つを適用します。 ![sso-button-design-guide_symbol_color_guide](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/sso-button-design-guide_symbol_color_guide.png?sv=2026-02-06&spr=https&st=2026-10-30T21%3A37%3A36Z&se=2026-10-30T22%3A37%3A36Z&sr=c&sp=r&sig=jtDHLMN5xtYNKgjoLVXqqkg%2BKAKjtx2aDZ7I6GWz%2BF0%3D) - ホワイトまたはグレー: ログインボタンが黒いカラーの場合に適用 - ブラック: ログインボタンがホワイトまたはグレーのように明るいカラーの場合に適用 - NAVERクラウドプラットフォームのカラー: NAVERクラウドプラットフォームの公式カラーで、ボタンが明るいカラーである場合に適用 参考 NAVERクラウドプラットフォームのシンボルは自社のガイドに従ってサイズを調整できますが、縦横の比率は維持し、形を変えたり、他の形と組み合わせたりしません。 ## Color NAVERクラウドプラットフォームのログインボタンカラーは、Basic Lineタイプと NAVERクラウドプラットフォーム Color Gradationタイプから選択できます。自社のログインページの構成時は、他社のログインオプションと比較し、同等の可読性のために適切に適用します。 ![sso-button-design-guide_button_color_guide](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/sso-button-design-guide_button_color_guide.png?sv=2026-02-06&spr=https&st=2026-10-30T21%3A37%3A36Z&se=2026-10-30T22%3A37%3A36Z&sr=c&sp=r&sig=jtDHLMN5xtYNKgjoLVXqqkg%2BKAKjtx2aDZ7I6GWz%2BF0%3D) - Basic Lineタイプのカラー構成 - Background/HEX: #F9F9F9, RGB: 249/249/249 - Border/HEX: #AAAAAA, RGB: 170/170/170 - NAVERクラウドプラットフォーム Color Gradationタイプのカラー構成 - Green HEX: #03C75A, RGB: 3/199/90 - Cyan HEX: #00C3C8, RGB: 0/195/200 次は、ログインボタンのカラーガイドを適用した例です。 ![sso-button-desgin-guide_login_jp](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/sso-button-desgin-guide_login_jp.png?sv=2026-02-06&spr=https&st=2026-10-30T21%3A37%3A36Z&se=2026-10-30T22%3A37%3A36Z&sr=c&sp=r&sig=jtDHLMN5xtYNKgjoLVXqqkg%2BKAKjtx2aDZ7I6GWz%2BF0%3D) ## 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 ## 正しくないログインボタンのデザイン例 正しくないログインボタンのデザイン例は次の通りです。 - ログインボタンのバックグラウンドに有彩色を適用後、NAVER Cloud Platformと同じカラーのシンボルを適用する場合 ![sso-button-desgin-guide_button1_jp](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/sso-button-desgin-guide_button1_jp.png?sv=2026-02-06&spr=https&st=2026-10-30T21%3A37%3A36Z&se=2026-10-30T22%3A37%3A36Z&sr=c&sp=r&sig=jtDHLMN5xtYNKgjoLVXqqkg%2BKAKjtx2aDZ7I6GWz%2BF0%3D) - シンボルの可読性が確保されていない場合 ![sso-button-desgin-guide_button2_jp](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/sso-button-desgin-guide_button2_jp.png?sv=2026-02-06&spr=https&st=2026-10-30T21%3A37%3A36Z&se=2026-10-30T22%3A37%3A36Z&sr=c&sp=r&sig=jtDHLMN5xtYNKgjoLVXqqkg%2BKAKjtx2aDZ7I6GWz%2BF0%3D) - ガイドで示すカラー以外をシンボルに適用した場合 ![sso-button-desgin-guide_button3_jp](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/sso-button-desgin-guide_button3_jp.png?sv=2026-02-06&spr=https&st=2026-10-30T21%3A37%3A36Z&se=2026-10-30T22%3A37%3A36Z&sr=c&sp=r&sig=jtDHLMN5xtYNKgjoLVXqqkg%2BKAKjtx2aDZ7I6GWz%2BF0%3D) - 狭いエリアに無理に長いラベルを使用した場合 ![sso-button-desgin-guide_button4_jp](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/sso-button-desgin-guide_button4_jp.png?sv=2026-02-06&spr=https&st=2026-10-30T21%3A37%3A36Z&se=2026-10-30T22%3A37%3A36Z&sr=c&sp=r&sig=jtDHLMN5xtYNKgjoLVXqqkg%2BKAKjtx2aDZ7I6GWz%2BF0%3D)