Manabi no Digital Kobo
シニア向けスマホ・パソコン教室のWebサイト
スマホやパソコンが苦手な人に向けた、架空の教室のWebサイトです。学校の課題として、デザインからコーディングまで一人で制作しました。
- 制作の経緯
- 学校の課題（架空の教室）
- 体制
- 個人制作
- 担当
- デザイン／コーディング
- 制作期間
- 2ヶ月
- 使用技術
- HTML / CSS / jQuery
- 対応環境
- PC
- 公開URL
- manabi-no-digitalkobo.pages.dev別タブで開きます
- コード
- github.com/TeradaRyoya/Manabi-no-DigitalKoboGitHub（別タブで開きます）
コンセプト
「難しそう」を、
「やってみたい」に。
教室の情報を伝えるだけでなく、不安をひとつずつ取り除き、体験レッスンへ背中を押す。
ターゲットは、スマホやパソコンに苦手意識がある50代前後の人です。この人たちがパソコン教室に感じるハードルは、「ついていけるか不安」「専門用語が分からない」「自分には場違いかもしれない」といった気持ちの問題だと考えました。
そこで、写真アルバムやWebサイトなど「つくる楽しさ」を前に出し、難しい言葉を使わずに、安心できる材料をページの中に順番に置いていく構成にしました。
課題で決まっていたのは「パソコン教室のサイト」ということだけで、ターゲットは自由でした。シニア向けにしたのは自分で決めたことです。初心者でも安心できるよう、コースごとのレベル表示と、年齢入りの受講生の声をあえて用意しました。文字も、うるさくならない程度に大きくしています。
画面ごとの工夫
1
-
話し言葉に近いコピー
「“つくる”楽しさ」のように、専門用語を使わない言葉で教室の雰囲気を伝えました。
1
2
-
コースごとにレベルを表示
「初心者向け」から「上級者向け」までのラベルで、自分に合うコースを迷わず選べるようにしました。
-
年齢入りの受講生の声
50代の受講生の感想を添え、「苦手でもできた」という安心感を補いました。
配色と書体
やさしく、明るく、迷わない
- メイン#AFC32B
- サブ#AECF92
- 背景#FFFEE1
- ボタン#2C75BA
- 強調#BC291C
学びの前向きさを感じる緑をメインに、クリーム色の背景でやわらかい印象にしました。押せるものは青、強調は赤と役割を固定し、色の意味を覚えなくても使えるようにしています。
趣味を彩るスマホ・パソコン教室
Zen Kaku Gothic New — 見出し・本文
まなびのデジタル工房
Sawarabi Mincho — アクセント
実装
目的に合わせてライブラリを選ぶ
使うライブラリは自分で選びました。動きは「楽しさを演出しつつ、操作の邪魔をしない」ことを基準にしています。
slick（お知らせのカルーセル）
限られたスペースでも、多くのお知らせを見せられるようにしました。
Modaal（地図のモーダル）
「GoogleMapでみる」から、ページを離れずに地図を確認できるようにしました。
Headroom.js（ヘッダーの出し入れ）
読んでいる間は画面を広く使い、上に戻るとすぐにヘッダーが表示されるようにしました。
AOS（スクロールの動き）
速さを控えめにして、読みにくくならないように調整しました。
ページ全体
枠の中をスクロールすると、ページ全体を見られます。
振り返り
自分とは年代の違う人を想定したことで、「自分が良いと思うデザイン」と「相手にとって使いやすいデザイン」の違いを強く意識した制作でした。
苦労したのは色の使い方です。いろいろな色を使うと賑やかになりすぎて、大事なところが分かりにくくなり、シニアの人が感じる安心感から離れてしまいます。今なら、色を増やすのではなく、ワンポイントのアイコンを全体に添えて、もう少し楽しい雰囲気にしたいです。
