Guidelines
見やすい表現の
見やすい表現の
ガイドライン
教室の魅力が正しく伝わるように、アクセシビリティと読みやすさを意識したページ作りを心がけましょう。
カラーテーマを選択
なぜ「見やすさ」が大切なのか
ウェブサイトには、高齢者や視覚に障害がある方、小さな画面で見る方など、多様な状況のユーザーが訪れます。
「誰にとっても使いやすい」ことが、信頼感と安心感につながります。
Accessibility
アクセシビリティ
基本ルール：文字と余白
フォントサイズ
本文は大きめに設定し、スマホでも読みやすく。最小16px以上を推奨します。
Example:
これは16pxの本文です。読みやすいサイズです。
小さすぎると読みにくくなります
文章の区切り
一文を短くし、適度に改行や箇条書きを使いましょう。句読点の位置も意識します。
- 短い一文
- 箇条書きの活用
色彩設計：コントラストと色数
コントラストの重要性
背景色と文字色の差が小さいと、読みにくくなります。特に薄いグレーの背景に白い文字などは避けましょう。
見やすい
見にくい
3色ルール
ベース、メイン、アクセントの3色を基本にするとまとまりが出ます。
画像・アイコン：適切な配置
alt属性（代替テキスト）
画像が表示されない場合や読み上げソフトを使用している方のために、画像の内容を説明するテキストを設定しましょう。
<img src="..." alt="ピアノを弾く子供"
/>
装飾としてのアイコン
テキストだけの並びよりも、アイコンを添えることで直感的に内容が把握しやすくなります。