デザインシステム スタイルガイド

このページは、当Webサイトで使用される主要なタイポグラフィ、カラー、コンポーネント、およびその他のスタイル要素の概要を示すためのものです。これにより、一貫したユーザーエクスペリエンスとブランドアイデンティティを維持したいです。

1. タイポグラフィ

ウェブサイト全体で、読みやすくアクセスしやすいタイポグラフィを採用しています。

見出し (Headings)

H1 見出し - メインタイトル

H2 見出し - セクションタイトル

H3 見出し - サブセクション

H4 見出し

H5 見出し

H6 見出し

段落 (Paragraphs)

これは標準的な段落テキストです。読みやすさを最優先に考え、適切な行の高さと文字間隔を設定しています。テキストは視覚的にバランスが取れており、長文でも快適に読めるように設計されています。

斜体のテキスト や太字のテキスト。
組み合わせることもできます。

脚注を作ることができます。¹

<br />で改行


ができます。

2. リスト (Lists)

情報を整理するために、様々なリスト形式を使用します。

順序なしリスト (Unordered List)

• アイテム1
• アイテム2
  • ネストされたアイテム2.1
  • ネストされたアイテム2.2
• アイテム3

順序ありリスト (Ordered List)

1. ステップ1
   1. ネストされたステップ1.1
   2. ネストされたステップ1.2
2. ステップ2

3. 引用 (Blockquotes)

引用は、コンテンツ内で強調したい言葉や外部からの引用を表示するために使用します。

「優れたデザインは、ユーザーエクスペリエンスを向上させるための鍵である。」 ― デザイン思考の原則

4. インラインテキスト要素(Inline Text Elements)

a 要素の例
abbr 要素とabbr要素（タイトル付き）の例
b 要素の例 (太字テキスト)
cite 要素の例 (作品のタイトル)
code 要素の例 (インラインコード)
del 要素の例 (削除されたテキスト)
dfn 要素とdfn 要素（タイトル付き）の例 (定義語)
em要素 の例 (強調テキスト)
i 要素 の例 (イタリック体や専門用語など)
ins 要素の例 (挿入されたテキスト)
kbd 要素の例 (キーボード入力)
mark 要素の例 (ハイライトされたテキスト)
q 要素の内側にあるq 要素の例 (短い引用)
s 要素の例 (もはや正確でないテキスト)
samp 要素の例 (プログラムの出力例)
small 要素の例 (免責事項や著作権表示など)
span 要素の例 (汎用インラインコンテナ)
strong 要素の例 (強い重要性を持つテキスト)
_{sub 要素}の例 (下付き文字)
^{sup 要素}の例 (上付き文字)
var 要素の例 (変数を表すテキスト)
u 要素の例 (下線付きテキスト)

5. コードブロック (Code Blocks)

コードや技術的な記述は、読みやすい形式で表示されます。

インラインコード

console.log('Hello, World!'); はJavaScriptの典型的な例です。

コードブロック

// これはJavaScriptのコードブロックの例です
function greet(name) {
  console.log(`Hello, ${name}!`);
}
 
greet('Style Guide');

// これはGoのコードブロックの例です
package main
 
import "fmt"
 
func main() {
  fmt.Println("Hello, world!")
}

6. テーブル(Tables)

7. 画像(Images)

コンテンツに視覚的な要素を追加するために画像を使用します。画像はレスポンシブに対応し、様々なサイズで表示できます。

大きい画像 (Big Image)

詳細を表示するために、比較的大型で高解像度の画像。

小さい画像 (Small Image)

テキストフローの中に埋め込んだり、アイコン的に使用する画像。