KOTOBA ATELIER / DESIGN SYSTEM
想いが届く、
視覚のルール。
人物と大きな見出しで関心をつくり、青・黄・赤で情報の役割を分ける講座LPのデザインシステム。
01 / カラー
Brand blue
#125B9F
#125B9F
Highlight
#F3FA3C
#F3FA3C
Action red
#D83C2F
#D83C2F
Surface
#E6F1FA
#E6F1FA
制作のために設定した色です。参照画像のピクセル実測値ではありません。
02 / 文字と余白
日本語ゴシック。見出しは太く、本文はゆったり。PC本文16px、見出し最大74px、コンテンツ幅1120px。スマートフォンは幅に合わせて再配置します。
伝えたい想いを、
届く言葉に。
大切な見出しと内容は画像に埋め込まず、読み上げ・選択できるHTMLテキストで表示。
03 / 部品と状態
講座案内を見る →赤いボタン：主要行動。hoverは180msで浮き上がり、focusは黄色のアウトライン。動きを減らす設定では遷移を停止。
FAQの開閉サンプル
ネイティブのdetails / summaryを使い、キーボードで開閉できます。
04 / 構成のレシピ
| 役割 | レシピ |
|---|---|
| 人物と訴求 | Hero / SplitImage |
| 3つの学習ステップ | FeatureGrid / Asymmetric |
| 繰り返す行動案内 | CTA / Centered |
05 / 参照と変更
参照：xs228645.xsrv.jp/lptk/（2026年9月16日取得）。PC・タブレット・モバイルで確認。青い帯、黄色の強調、人物配置、CTAの反復を解釈し、講座用に再構成。
元の人物・写真・本文は使用していません。講師・講座は架空、人物画像はAI生成。参照元の固定幅による横あふれを修正しました。外部フォーム内部など、参照レビューには未確認範囲があります。