ワイヤーフレーム
〇ワイヤーフレーム（設計図を考える）→手書き/excel/photoshop/illustratorなど
ワイヤーは「線」、フレームは「枠」のこと
Webページ全体の構成や配置がどのようになるかが分かることが重要
- 制作が始まる前の設計確認
- プロジェクトメンバー間でのイメージ共有
- デザイナーへの指示
- 開発者へのコーディング指示
【２日目の実習】ワイヤーフレームを作成する
- １．情報のリストアップ
- ２．レイアウトを決める
- ３．ツールなどを使って清書する
１．情報のリストアップ
制作するページの情報を決めます
商品ページであれば商品名・キャッチコピー・商品写真・セールスポイント
２．レイアウトを決める
〇基本の大きさ
- PC:1920px×1080px
- スマホ:768px×1024px(390px×844px)
ブレークポイント：PC1,280px以上、タブレット1,280～768px、スマホ768px以下
ブレークポイントはレスポンシブサイトなどではCSS、JavaScript、PHPなどを使い自動的に切り替えるように制作します。
☆今回の実習ではPCがメインです。
〇レイアウトには
- シングルカラム
- マルチカラム
- グリッドレイアウト
- フルスクリーンレイアウト
などがあるので、どの表示にするのか決める
シングルカラム
マルチカラム
グリッドレイアウト
フルスクリーンレイアウト
写真を何枚使用するのかと説明文の表示レイアウトを決める
情報がまとまったらデザインカンプが出来るように考えをまとめる
３．ツールを使って清書する
excel/photoshop/illustrator/Xdなど制作は自分の使えるツールを使って作成する（手書きでもOK）
〇参考例1
〇参考例2
