03. デザインの基本フロー
デザインって、いきなり作り始めるんじゃなくて、ちゃんとした 順番と考え方 があるんだよ！
✴️ 共通のデザイン制作フロー
| フェーズ | 内容 |
|---|---|
| ヒアリング | クライアントや目的の確認。「誰に」「何を」「なぜ伝えたいのか」を聞く |
| 企画書・構成案の作成 | 要望をもとに、企画や掲載内容の骨組みを作成する |
| ラフ案の作成 | 手描きや簡易な図で、構成やレイアウトのイメージを示す |
| ワイヤーフレーム | 実際の配置（画像・文字・ボタンなど）を線画で明確にする |
| デザインカンプ | 本番とほぼ同じ見た目のデザインをPhotoshopやFigmaなどで作成 |
| 修正・調整・納品 | クライアントの確認を経て、最終調整して納品 |
🖼 バナー作成の例
| フェーズ | 内容 |
|---|---|
| ヒアリング | 広告の目的（キャンペーン、期間限定、商品告知など）を確認 |
| 企画 | キャッチコピーの提案、訴求ポイントを明確化 |
| ラフ | 簡単なスケッチ（画像位置・文字量の検討） |
| デザインカンプ | Photoshopなどでサイズ、色、フォントを整えたバナーを作成 |
| 納品 | jpg/pngで書き出し。場合によっては複数サイズで納品 |
📰 チラシ作成の例
| フェーズ | 内容 |
|---|---|
| ヒアリング | ターゲット（地域・年齢層）、配布方法、サイズ（A4など）を確認 |
| 構成案 | 伝えたいことの優先順位と紙面の構成を作成 |
| ラフ | 手書きでレイアウトを描く。画像／見出し／本文の配置を検討 |
| デザインカンプ | Illustratorなどで制作。文字組み、色、写真を反映 |
| 納品 | 入稿用PDFに変換し、印刷業者へ渡す |
🌐 Webサイトデザインの例
| フェーズ | 内容 |
|---|---|
| ヒアリング | サイトの目的（集客、商品販売、採用など）、必要ページを確認 |
| 企画書 | サイトマップ（ページ構成）や機能要件を明記 |
| ワイヤーフレーム | 各ページの構成（ナビ、本文、CTAなど）を明確にする |
| デザインカンプ | FigmaやXDでレスポンシブ対応のデザインを作成 |
| 納品 | カンプまたはHTML/CSSに変換して開発チームへ渡す |
作り始める前に、ちゃんと考えて順番に進めることが大事なんだね〜！
そうそう、デザインは「見た目を作る作業」じゃなくて「伝える手段を設計するプロセス」なんだよ！