設計を見る力
完成デザインだけを見るのではなく、Webページをヘッダー・セクション・カード・フッターなどの構造として捉えます。
DESIGN TO CODE COURSE
Design to Code
デザインを「見る」から、コードで「作る」へ。
Figmaのワイヤーフレームをもとに、HTMLで構造を作り、CSSでレイアウトを整え、最後はデザインカンプをコードで再現します。「考える → 設計する → コーディングする」というWeb制作の流れを、5つのSTEPで体験する実践講座です。
HTML/CSSの基本を学習したあと、「実際のデザインをどうコードにすればよいのか」を練習したい方におすすめです。
PROJECT
この講座で作るもの
カフェサイト「Espresso Lane」を題材に、ワイヤーフレームからHTML/CSSによる完成ページまで制作します。各STEPで少しずつ完成形へ近づけていきます。
5 STEP LEARNING PATH
5STEPでデザインからコーディングまで進めよう
1つのWebサイトを題材に、設計から実装まで順番に進めます。前のSTEPで作成した内容を次のSTEPでも使用するため、基本的には01から順番に進めてください。
-
STEP 01
ワイヤーフレームを観察・再現する
Webページの情報構造やレイアウトを確認し、Figmaでワイヤーフレームを作成します。
STEPへ進む -
STEP 02
HTMLで構造をマークアップする
ワイヤーフレームを見ながら、見た目だけではなく意味のあるHTML構造を考えてマークアップします。
STEPへ進む -
STEP 03
CSSでワイヤーフレームを再現する
HTMLにCSSを追加し、ワイヤーフレームのレイアウト・余白・文字サイズなどをブラウザ上で再現します。
-
STEP 04
デザインカンプを作成する
コンセプトを確認しながら、Figmaで色・写真・文字・レイアウトを整え、完成イメージとなるデザインカンプを作成します。
STEPへ進む -
STEP 05
デザインをHTML/CSSで再現する
完成したFigmaのデザインカンプを見ながらCSSを追加・調整し、実際のWebページとして完成させます。
STEPへ進む
WHAT YOU WILL LEARN
この講座で身につくこと
完成した画面だけを見るのではなく、設計とコードを行き来しながら、Web制作全体を組み立てる考え方を身につけます。
HTMLで構造化する力
ワイヤーフレームから必要なHTML要素を考え、セマンティックなマークアップにつなげます。
CSSで再現する力
余白、文字、画像、Flex/Gridなどを使って、デザインをブラウザ上に再現します。
デザインとコードを往復する力
Figmaとブラウザを見比べながら調整し、「デザインをコードに変える」実践力を身につけます。
PRACTICAL TRAINING
基礎学習の次に挑戦する実践トレーニング
Design to Codeは、HTML・CSS・Figmaの基礎を学んだあとに取り組む実践教材です。HTMLだけ、CSSだけ、Figmaだけを個別に練習するのではなく、それぞれの知識を1つのWebサイト制作の中で組み合わせます。
RECOMMENDED FOR
こんな方におすすめ
- HTML/CSSの基礎学習を終えた方
- Figmaでワイヤーフレームを作ったことがある方
- デザインを見ながらコーディングする練習をしたい方
- 「何を書けばよいか」ではなく「どう組み立てるか」を考える練習をしたい方
- Web制作の一連の流れを体験したい方