Math Gardenは「数学の学びを、やさしく。」をテーマにした個人制作のWeb教材サイトです。
ここでは、タイトル画像のデザインから教材制作まで、どのように形にしているかをまとめました。
① コンセプト設計：やさしさと安心感を中心に
数学は「難しい」「怖い」というイメージを持たれがちですが、
学びは本来もっと自由で、もっとやさしいものだと思っています。
そのため、
- 桜
- パステル調
- 柔らかい余白
- ゆっくり読めるタイポグラフィ
を使い、学習者が安心して取り組める世界観を設計しました。
② タイトル画像制作：世界観を視覚化する工程
タイトル画像はすべて自作です。
- 桜の写真をパステル調に加工
- 紫系フォントでブランドカラーを統一
- 「数学の学びを、やさしく。」のコピーを配置
- PC版／モバイル版／SNS版でレイアウトを最適化
Math Gardenの世界観を一枚で伝えることを意識しました。
③ 教材制作：HTML/CSS・JavaScript・MathMLを活用
教材部分はすべて手作りで構築しています。
- ランダム問題生成（JavaScript）
- 数式表示（MathML）
- UIの改善（CSS・デザイン調整）
- 計算過程の可視化
- 学習者が迷わない導線設計
“やさしい数学”を体験として届けるため、
機能よりも「使いやすさ」を優先しています。
④ SEO・運用改善：検索で見つけてもらうために
公開後は、
- タイトル設計
- キーワード選定
- ページ構造の最適化
などを行い、
「ポケドリ 数学」で検索すると上位に表示されるようになりました。
教材サイトは“見つけてもらうこと”も大切なので、
運用面も継続して改善しています。
⑤ 世界観の統一：Math Gardenブランドとして育てる
Math Gardenは単なる教材ではなく、
「学びの庭を育てる」ブランドとして成長させています。
- タイトル画像
- ロゴ
- 教材ページ
- SNS画像
- 紹介ページ
すべて同じ世界観で統一し、
学習者がどこにいても“Math Gardenらしさ”を感じられるようにしています。
🌼 まとめ
Math Gardenは、
コンセプト設計 → デザイン → 教材制作 → SEO → 世界観統一
まで、すべて個人で制作しているWeb教材プロジェクトです。
「やさしい数学」を届けるために、
これからも少しずつ育てていきます。
