入門編 07 / 10 入門 約6分
Studioの学習ロードマップ｜何から手をつけるか
Studioを最短で使えるようにするための学習順序を4段階で示します。全機能を覚えてから作り始めるのではなく、完成させる経験を先に積む順番を解説します。
この教材で学べること
- 1本目のサイトを完成させるまでに必要な範囲
- 習得を4段階に分けたときの、それぞれのゴール
- 模写から始めるときの題材の選び方
Studioの機能をすべて覚えてから作り始める必要はありません。1ページのLPを1本完成させるまでに必要な知識は、実はかなり限られています。先に完成させる経験を積み、あとから精度を上げるほうが結果的に速く到達します。
4段階のロードマップ
この教材の章立ても、この順番に沿っています。いま自分がどの段にいるかを確認してください。
各段階のゴールと目安
「どこまでできたら次に進んでよいか」を決めておかないと、いつまでも1段目を磨き続けることになります。次の条件を満たしたら、粗くても次へ進んでください。
| 段階 | 対応する章 | 次に進んでよい条件 |
|---|---|---|
| 1. 配置できる | 第2章 基本操作編 | 見出し・文章・画像・ボタンを意図した位置に置ける |
| 2. 1本作りきる | 第2章 基本操作編 | 模写でよいので、上から下まで通したページがある |
| 3. 崩れを直せる | 第3章 レスポンシブ編 | スマホで横スクロールが出ず、文字が読める |
| 4. 運用できる | 第4章 CMS編 | お知らせを自分で追加・更新できる |
模写の題材の選び方
2段目でつまずく人の多くは、題材選びを間違えています。凝ったサイトを選ぶと、実装で詰まって完成しません。最初の1本は、次の条件で選んでください。
| 選ぶ基準 | 良い題材 | 避けたい題材 |
|---|---|---|
| ページ数 | 1ページで完結するLP | 下層が10ページある企業サイト |
| 動き | スクロールで出てくる程度 | マウス追従や3D表現があるもの |
| 構成 | 上から順に読む素直な並び | 要素が重なり合う凝ったレイアウト |
| 目的 | 自分が作りたい系統の案件に近いもの | 好きなだけで実務と結びつかないもの |
完成の定義を下げる：模写は「そっくりにする」ことがゴールではありません。上から下まで抜けなく並べきることがゴールです。細部の再現は3周目からで間に合います。
次は、この道中でつまずきやすい3つのポイントを先回りして把握します。