- 22コース
- 216テーマ
- 482レッスン
やることは、4つだけ
どのレッスンも、同じ流れ。1回で身につける考え方は、1つだけです。
① 見くらべる
A と B、どっちが伝わる? まずは自分の目で選んでみて。
直感でOK!
② 理由を知る
「なぜ、そっちが伝わるのか」を、デザインの考え方として言葉にするよ。
ここが大事
③ 作ってみる
手順の写真を見ながら、同じものを自分の手で作ってみよう。
手を動かそう
④ たしかめる
練習エディタで作ると、その場で、できた所と、あと一歩の所が分かるよ。
あと一歩も大事

練習エディタで、すぐ手を動かせる。
ノーコードの Web 制作ツール「Studio」に似せた、練習用の画面を用意しました。ブラウザだけで、レッスンのお題をそのまま試せます。
- お手本(かんせいイメージ)を見ながら作れる
- 作ったものは、その場で自動チェック
- 本物の Studio で作ったものも、コピーして確かめられる
いつでも、どこでも学べる。
スマホ・タブレット・パソコン、どの端末でも、読む・見くらべる・練習エディタで作る、までできます。通学や休み時間にスマホで1レッスン、家ではパソコンの広い画面で。
- 復習クイズは1回6問。終えたレッスンから、忘れたころに出ます
- 分からない言葉は、273語の「用語集」ですぐ引ける。その言葉が出てくるレッスンへも、そこから行ける
- 言葉づかいと、ふりがなの あり・なしを選べる
- 色の見分けがむずかしい人のために、「できた」「あと一歩」を色だけでなく印(✓・△)でも出す「カラーユニバーサルデザイン(UD)」の表示も選べる
- 分かりにくい所や、まちがいに気づいたら、その画面からすぐ送れる(教材の見直しに使います)
日常(リアル)は、最高の教科書だ。
街で出会った“デザイン”を集めて、見る目を育てよう。
画面の中で学んだ考え方を、こんどは外で探します。お店の看板、おかしのパッケージ、駅の案内、ポスター。見つけたら撮って、「どの考え方が使われているか」を選ぶと、自分だけの図鑑にたまっていきます。
- 日がわりの「スナップクエスト」学んだばかりの考え方を、身のまわりで1つ探します。家の中でできるお題もあります。
- よい例も、おしい例も集める同じ種類のデザインを2つ撮って、自分で「見くらべ」を作れます。
- 集めた写真が、学びにもどるスナップした写真が復習クイズの問いになり、練習エディタでは、お手本にして作れます。
スナップした写真は、お使いの端末の中だけに残ります。ほかの人に公開されることはありません。
Goodeye のなかまたち
いつもそばにいるメインの3人と、コースごとの案内役がいます。どの子にも、目があります。カードを押すと、くわしい設定が開きます。性格が少しずつちがうので、お気に入りを探してみてください。
メインの3人
エーとビーは、見くらべの A と B のふたご。正解は、A のときも B のときもあります。
コースの案内役(コース0〜17)
どこでもそばにいる案内役
はじめての1歩から、公開と運営まで。
デザインの基本、文字、余白、色、写真。そのあとに、パーツ作り、スマホ対応、サイトの設計、公開へと進みます。
- 0Studio をはじめる7テーマ
- 1デザインの基本8テーマ
- 2タイポグラフィとフォント16テーマ
- 3余白とレイアウト12テーマ
- 4カラーと見た目10テーマ
- 5写真・画像・アイコン10テーマ
- 6印象をつくる8テーマ
- 7パーツをつくる13テーマ
- 8スマホ対応7テーマ
- 9動き12テーマ
- 10使う人を考える7テーマ
- 11サイトの設計と文章9テーマ
- 12更新できるサイト10テーマ
- 13フォーム6テーマ
- 14公開と運営12テーマ
- 15チームと仕事の進め方8テーマ
- 16卒業制作3テーマ
- 17パーツ工房10テーマ
デザインのコース
道具を使わずに、色や文字、余白、構図の見方を学ぶコースです。図を見て、手を動かして、くらべて確かめます。
- 色彩12テーマ
- タイポグラフィ12テーマ
- 余白とグリッド12テーマ
- 構図とレイアウト12テーマ
道具を使わずに、デザインの「見る目」を育てる。
色彩・タイポグラフィ・余白と
- 知る
図を 1枚ずつめくりながら、 しくみを 知ります。 - 体験画面の
道具を 動かして、 色や 文字、 余白が 変わると 見え方がどう 変わるかを 試します。 - 見くらべる
・小さな A と B をくらべたり、課題 自分で 選んだりして、 学んだ 見方を 使ってみます。 - 確かめの
クイズ 最後に、身についたかを クイズで 確かめます。
Studio のコース(コース0〜17)
ノーコードの Web 制作ツール「Studio」を
デザインのコース
色彩・タイポグラフィ・余白と
料金は、4つだけ
コース0〜1と、
無料
0円
まずはここから。
- コース0〜1(31レッスン)
- デザインの
コースそれぞれの 最初の 単元(8レッスン) - 復習クイズ
- 用語集・検索
月額プラン
330円/月(税込)
自分の
- 練習エディタ(Studio の
シミュレーター) - デザインスナップ・スナップマップ・見くらべ
クエスト - 無料の
範囲も、 もちろん 全部
Studio コース パック
9,800円(税込・1回だけ)
コース2〜17を、
- コース2〜17(349レッスン)
- 買い
切り。 追加の 支払いなし 記録は アカウントで 引き 継ぎ
デザインを学ぶパック
9,800円(税込・1回だけ)
色彩や
- デザインの
コース(102レッスン) - 買い
切り。 追加の 支払いなし 記録は アカウントで 引き 継ぎ
お支払いは Stripe の画面で行います(カードの情報は Goodeye に保存されません)。価格は予告なく変わることがあります。
スマホの続きを、パソコンで。
ログインすると、学んだ記録がアカウントに保存され、スマホとパソコンで同じになります。どちらで進めても、記録は足し合わされ、消えません。
保存するのは、進み具合・ポイント・復習クイズの予定だけです。デザインスナップの写真は、端末の中に残ります。SHITAJI のアカウントをお持ちの方は、同じメールアドレスとパスワードでログインできます。
はじめる前に
よくある質問です。
どんな人に向いていますか?
これから Web デザインを
登録は必要ですか?
はい。
スマホだけで学べますか?
学べます。
Studio のアカウントは要りますか?
無くても
Studio のコースと、デザインのコースは、どちらから始めればよいですか?
サイトを Studio で
「Studio コース パック」と「デザインを学ぶパック」は、何がちがいますか?
「Studio コース パック」は、
パックは、両方買わないといけませんか?
いいえ。
パックを買ったあと、返金はできますか?
購入した
Studio 社のサービスですか?
いいえ。