- 大まかなサイトの伝えたい内容を決定する
- コンテンツ（文章、表、図）
- 自動化方法：メディアサイトとフォームを使う
- コンテンツ構造
- サイトマップを作成する
- ページリスト
- 自動化方法：チェックリストを作成、親子関係を明確化する、導線を決める
- ページごとのセクションリストを作成する
- セクションリスト
- 自動化方法：チェックリストを作成、並べ替える
- セクションの内容とコンテンツを鑑みてワイヤーフレームを作成する
- ビジュアルエディタ
- セクションパターンライブラリ（WIREFRAMES）
- デザインテイストを作成する
- 画像、イラスト、素材
- 自動化方法：素材サイトをあつめる、検索する、モチーフを決めておく
- メディア
- PhotoshopVip
- https://photoshopvip.net/96863
- 写真
- Pixabay
- Unsplash
- イラスト
- undraw
- https://www.linustock.com/
- デザインテイスト（参考サイトURL）
- 自動化方法：Pinterestから抽出する、参考サイトをあつめる、雰囲気テイストワードクラウドをつくる
- #ポップ/#ゴージャス/#クール/#子供向け
- フォント
- 自動化方法：フォントの見た目ライブラリを作成する、Pinterestから抽出する
- AdobeFont
- GoogleFont
- WhatIsFont & Pinterest
- 配色
- 自動化方法：パターンライブラリにタグ付けをする、Pinterestから抽出する、画像から抽出する、Adobe Color CC、重ね色目
- AdobeColorCC
- メイン・サブ・アクセント・背景・テキスト・リンク
- マテリアル・スキン
- 自動化方法：パターンライブラリにタグ付けをする、Pinterestから抽出する、テクスチャ素材を使う
- テクスチャ素材サイト
- ワイヤーフレーム＆デザインテイストを元にデザインする
6-0. コンテンツを流し込む（写真、イラスト、テキスト）
6-1. フォントをワイヤーフレームに適用する
6-2. マテリアル・スキンをワイヤーフレームに適用する
6-3. 配色をワイヤーフレームに適用する
6-4. サイズ、余白、ずらしを加える。（transform、margin、padding） - デザインデータを元にdiv構造を作成する
- 画像、アイコンを書き出す
- レスポンシブデザインを実装する
- アニメーションを実装する
- インタラクティブ要素を追加する
- タグをセマンティックにする