【2026年最新】LINE公式カラーコードの真実|緑色のHEX値とデザイン規約

目次
【2026年最新】LINE公式カラーコードの真実|緑色のHEX値とデザイン規約
【2026年最新】LINE公式カラーコードの真実|緑色のHEX値とデザイン規約
@ creator • Click to Play Video Inline
🎵 【2026年最新】LINE公式カラーコードの真実|緑色のHEX値とデザイン規約

Webサイト制作やLP制作、バナーデザインにおいて「LINEで友だち追加」ボタンや導線を作成する際、緑色の指定で迷った経験はないでしょうか。ネット上の古いブログ記事をそのままコピーしてしまい、微妙に異なるトーンのグリーンを使ってしまうトラブルが制作現場で後を絶ちません。

LINEヤフー株式会社が提示する公式ガイドラインでは、ロゴやアイコンのカラー規定が極めて厳格に定められています。本稿では、2026年現在適用されている正確なLINE公式カラーコードから、RGB・CMYK規格、過去のカラー刷新の背景、実装時に守るべきレギュレーションまで、デザイン実務に直結する情報を網羅して徹底解説します。

📌 【この記事の重要ポイントまとめ】
  • 要点1:LINE公式の緑色HEXコードは「#06C755」(RGB:6, 199, 85)が正式な最新規格である。
  • 要点2:旧カラー「#00B900」や「#00C300」は過去のブランド刷新前の色であり、現在はガイドライン違反となる。
  • 要点3:印刷物用CMYK値の選定ミスや視認性を損なう独自改変は審査落ちやブランド侵害のリスクを招くため正しい規約遵守が不可欠。

【公式スペック】LINE公式カラーコード一覧とRGB・CMYK完全対照表

LINEのデザインシステムで指定されている公式カラーは、デジタル画面向け(RGB/HEX)と紙媒体向け(CMYK/Pantone)で厳密に数値が定義されています。Web制作やアプリ開発、DTP制作時に参照すべき公式データを整理しました。

用途・規格カラーコード(数値データ)旧規格・過去データ編集部の見解・実務上の注意点
LINEグリーン(HEX)#06C755#00C300 / #00B900Web制作(CSS/SVG)では必ずこのHEX値を基本指定とする。
RGB規格R:6 / G:199 / B:85R:0 / G:195 / B:0FigmaやPhotoshopのデジタルアセット作成時に設定。
印刷用CMYKC:76% / M:0% / Y:88% / K:0%C:70% / M:0% / Y:95% / K:0%チラシやPOPなど紙媒体出力時の濁りを防ぐ公式配合。
Pantone指定Pantone 7481 CPantone 368 C特色印刷が必要なノベルティや大型印刷物向けの厳密指定。
LINEブラック(文字等)#1E1E1E(R:30 G:30 B:30)#111111コントラスト比を確保しつつ過度なギラつきを抑えた設計。
LINEホワイト(背景等)#FFFFFF(R:255 G:255 B:255)#FFFFFF吹き出しアイコン内部やロゴのベース色として利用。

特に注意すべきは、LINE緑HEXコードとして広く出回っていた「#00B900」や「#00C300」との混同です。これらはブランドリニューアル前の古いトーンであり、現在これらを使用すると他社の公式アセットと並んだ際に不自然な違和感を生む原因になります。

LINEロゴ色変更の歴史|なぜ「#06C755」へアップデートされたのか?

LINEのブランドカラーが現在の明るく鮮やかなエメラルドグリーン基調へと進化した背景には、スマートフォンディスプレイの進化とアクセシビリティ基準のグローバル化があります。

サービス初期(2011年〜)のLINEグリーンは、より濃い純粋な緑に近い「#00B900」でした。しかし、OLED(有機EL)ディスプレイの普及に伴い、黒背景(ダークモード)や多様なUI背景において沈んで見えてしまう課題が浮上しました。そこで行われたブランドリニューアルにより、彩度と明度のバランスが再計算され、より視認性の高い「#06C755」へと刷新された経緯があります。

この変更によって、スマートフォンの屋外利用時でも白抜き文字のコントラスト比が向上し、国際的なWebアクセシビリティ指標(WCAG 2.1)に準拠したデザイン品質が確保されました。単なる「見た目の変更」ではなく、デジタルインフラとしての実用性を追求した構造的改善といえます。

【実態検証】デザイン現場で起きているトラブルと落とし穴

現場のデザイナーやフロントエンドエンジニアの間で頻発しているのが、LINEブランドガイドラインに抵触したことによる納品直前の差し戻しやクライアントからのクレームです。

Web制作の実務検証において、特に問題視されている事例をいくつか挙げます。

第一に、「独自グラデーションの適用」です。ボタンを目立たせようと、#06C755から濃い緑へとグラデーションをかけたり、立体感を出すために過度なドロップシャドウを配置するケースが見られます。公式ガイドラインでは、ロゴやブランドカラーのグラデーション化、変形、色の反転は原則として固く禁じられています。

第二に、「LINE公式アカウントリッチメニュー色とのミスマッチ」です。LINE公式アカウントのリッチメニューを内製する際、カラーコードを「#06C755」に固定せず、適当なカラーピッカーで拾った緑を指定してしまい、アプリ自体のヘッダーやボタン色と不揃いになってしまう事故が多発しています。LINEのUIパーツと調和させるためには、正確なLINEグリーン色見本数値をデザインツールにパレット登録しておく必要があります。

【Web制作現場向け】LINEボタンのCSS実装と正しいアイコン指定

Webサイトに「LINEで送る」ボタンや「友だち追加」ボタンを設置する際、CSSでコーディングを行う場合の推奨記述とレギュレーションのポイントを解説します。

以下は、公式規定に準拠したフラットデザインのLINEボタンスタイル例です。

.line-button { display: inline-flex; align-items: center; justify-content: center; background-color: #06C755; /* LINE公式カラーコード2026年最新 / color: #FFFFFF; font-weight: bold; padding: 12px 24px; border-radius: 6px; text-decoration: none; transition: background-color 0.2s ease; } .line-button:hover { background-color: #05B34C; / ホバー時はわずかに明度を落とす調整が推奨 */ } 

LINEアイコンカラー指定を行う際は、公式配布のSVGアセットをダウンロードして利用することが鉄則です。Font Awesomeなどの外部アイコンフォントを利用する場合でも、アイコン自体の形状改変を行わず、背景色とのコントラスト比(最低4.5:1以上)が担保されているかを確認してください。

一般に知られていない盲点とネットの誤解

ネット上のQ&Aサイトや制作系フォーラムで散見される代表的な誤解を是正します。

誤解1:「緑色ならだいたいのトーンで問題ない?」
完全に誤りです。LINEヤフー株式会社はブランド資産の保護を徹底しており、公式パートナー審査や代理店審査の際、指定カラーコードから外れたボタンやバナーは修正対象になります。

誤解2:「白背景のロゴを勝手に透明化して使って良い?」
LINEの吹き出しアイコンは、緑地に白文字、または白地に緑文字の指定が厳密に定められています。吹き出しの内側を透過させて背景色を透けさせるような改変(アイソレーション違反)はガイドライン違反に該当します。

【プロの結論】公式コードを即座に導入すべき人・注意が必要なケース

直ちに「#06C755」へ統一すべきケース:

  • 企業のLP(ランディングページ)でLINE友だち追加導線を運用しているWebマスター
  • 自社のLINE公式アカウントのリッチメニューやリッチメッセージを制作しているインハウスデザイナー
  • 印刷物(店舗POP、チラシ)で友だち追加QRコードを掲載する制作担当者

別トーンでの運用を検討すべきケース:

  • サイト全体のデザインがモノトーンで統一されており、公式が認める「モノクローム(白黒)ロゴ」の規約に則ってグレー系(#1E1E1E等)を使用する場合(※公式のモノクロガイドラインに沿う必要があります)。

【line カラー コード】に関するよくある質問(FAQ)

Q1:2026年現在、LINEの緑色の正式なHEXコードは何番ですか?
A1:正式なHEXコードは「#06C755」です。RGB指定では(6, 199, 85)となります。過去に使用されていた「#00C300」や「#00B900」ではありません。

Q2:チラシやパンフレットなど印刷物で使う場合のCMYK値は?
A2:公式ガイドラインが定めるCMYK値は「C:76% / M:0% / Y:88% / K:0%」です。特色印刷の場合は「Pantone 7481 C」を指定します。

Q3:公式のロゴマークやアイコン素材はどこから入手できますか?
A3:LINEヤフー株式会社が運営する「LINEヤフー B2Bブランドガイドライン」または公式デベロッパーサイトのアセットダウンロードページから最新のベクターデータ(SVG/AI/PNG)を直接入手してください。

まとめ:正確なカラー指定がブランド価値とCVRを高める

LINEの導線ボタンやバナーは、ユーザーにとって「見慣れた安心感」を提供する極めて重要なUIパーツです。わずかな色味のズレであっても、ユーザーの無意識下に「偽サイトではないか」「怪しい導線ではないか」という不信感を生み、クリック率やコンバージョン率(CVR)の低下を招きかねません。

Web制作やクリエイティブ制作に関わるすべてのクリエイターは、旧コードのキャッシュをクリアし、「#06C755」という最新のLINE公式カラーコードを正しく運用してください。 (出典: line カラー コード(Yahoo!ニュース))

line カラー コード
line カラー コード
line カラー コード