#8｜ワイヤーフレームでレイアウトを決める
⚠️ preproからのお願い
このチャンネルは「修行の場」です。「コピペは原則禁止」。
自分の指でコードを打ち込み、エラーと向き合い、身体で技術を身につけていく。
一見タイパが悪いように見えて、それがジェネラリストへの一番の近道です！
〜デザインからプログラミングまで一人で開発できるジェネラリストへ〜
ICTの技術をトータルで学ぶYouTubeチャンネル「prepro -プリプロ-」へようこそ！
講師の東郷です。
Step1の「爆弾ゲーム」を経て、いよいよ今回からStep2『推し図鑑を作ろう』がスタートします。
Step1は「Web開発の流れを体感する」目的でさっと実装しましたが、Step2からは、より実践的なWebアプリケーション開発のステップへ進みます。
まずは第一歩として、アプリの「見た目（UI）」の骨組みを考えるために「ワイヤーフレーム」というものをFigmaで作成しましょう！
【この動画で学べること】
- 推し図鑑の完成イメージと設計の考え方
- 基本的なFigmaの使い方
- ワイヤーフレームの作成方法
【preproのカリキュラム方針】
preproでは、特定の言語に特化せず、Webアプリ開発の全体像を学びたい方をターゲットにしています。
本編： 15分でサクサク進むメイン講義
0.5回シリーズ： 習熟度の格差を埋め、しっかり学びたい人のための深掘り講義
この「レベル別階層構造」で、初心者から経験者まで自分のペースで学習を進めることができます。
もっと詳しく知りたい人のための
0.5回シリーズ
今回の8.5回目は、本編の間を埋める「深掘り回」。
8回目で作成したワイヤーフレームで説明した「余白は16pxにする」という考えを論理的に説明します。
紙とWebのデザインの大きな違いを理解し、Webならではのデザインにするための8pt Grid Systemを学び、「なんとなく配置する」デザインから卒業し、エンジニア視点でも実装しやすい「構造的なデザイン」の作り方をマスターしましょう。
【この動画で学べること】
- 8pt Grid Systemについて
- RBGとピクセル（px）
- ディスプレイ解像度