Life on LINE

コミュニケーションアプリ LINE のデザインシステムプレビュー。DESIGN.md から抽出したカラー、タイポグラフィ、コンポーネントの全値を可視化。

無料ダウンロード DESIGN.md を読む
01 / Colors

カラーパレット

Brand
LINE Green
#06c755
ブランドカラー・CTA
LINE Green Dark
#05b34c
ホバー・プレス
Text
Text Primary
#000000
本文テキスト
Text Secondary
#666666
補足テキスト
Text Disabled
#999999
無効状態
Semantic
Success
#06c755
成功・完了
Danger
#d93025
エラー・削除
Warning
#f9ab00
警告・注意
Surface & Border
Background
#ffffff
ページ背景
Surface
#f7f8f9
カード・セクション背景
Border
#e5e5e5
区切り線・枠
02 / Typography

タイポグラフィ階層

Life on LINE
70px / 700 / line-height: normal / letter-spacing: normal英語ヒーロー
コミュニケーションアプリ
60px / 700 / line-height: 80.04px (x1.334) / letter-spacing: normalh2 見出し
LINEのサービス一覧
60px / 700 / line-height: 76.2px (x1.27) / letter-spacing: normalh2 見出し
本文テキスト — body font-size が 20px と非常に大きい設定。メッセンジャーアプリのランディングページにふさわしい、読みやすく親しみやすい印象を与えます。SFPro + Noto Sans JP のフォントスタック。
20px / 400 / line-height: normal / letter-spacing: normal / palt: normal本文
補足テキスト — Small (14px)
14px / 400 / line-height: normal / color: Text Secondary
03 / Chat — メッセンジャーUI

チャットバブル

こんにちは！今日のミーティングは何時からですか？
14:30
15時からです。会議室Aで待ってますね
14:31
了解です！資料を準備して向かいます
14:31
ありがとうございます。よろしくお願いします！
14:32
04 / Buttons

ボタンバリエーション

友だち追加
Primary CTA
詳しく見る
Outline
ブロック
Danger
サービス一覧
Ghost
05 / Cards

サービスカード

💬

トーク

テキスト、スタンプ、写真、動画、ファイルを送受信。グループトークで複数人のコミュニケーションも。

もっと見る
📞

音声・ビデオ通話

無料の音声通話とビデオ通話。高品質な通信で、いつでもどこでも顔を見ながら話せます。

もっと見る
📰

LINE NEWS

最新ニュースをLINEアプリ内で閲覧。パーソナライズされた記事でトレンドをキャッチ。

もっと見る
06 / Forms

フォーム要素

デフォルト — border: #e5e5e5, radius: 8px
フォーカス — border: #06c755 (LINE Green)
エラー — border: #d93025 (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ
Level 1
0 2px 8px rgba(0,0,0,0.08)
Level 2
0 4px 16px rgba(0,0,0,0.12)
Level 3
0 8px 24px rgba(0,0,0,0.16)
Focus Ring
#06c755 (LINE Green)
08 / Spacing

スペーシングスケール

4px
8px
16px
24px
40px
64px