モックアップ（デザインカンプ）の作成手順

1.ツールの選定

Adobe Photoshop、Sketch、Figmaなどのデザインツールを選ぶ

自分は基本的にFigmaを使用するようにしています
（共同作業にたけており、コスト面や機能面が優れているため）

2.新規ファイルの作成

制作物が表示される環境に合わせて最適化するために、設定を行う

画面サイズ

デスクトップ向け：一般的なサイズ: 1920x1080ピクセル 
モバイル向け：一般的なサイズ: 375x667ピクセル

3.デザインコンセプトの決定

以下を行い、全体的なデザインコンセプトを決定する

• カラースキームの選択

• タイポグラフィの決定

• 全体的な雰囲気やスタイルの設定

4.ビジュアル要素の追加

ワイヤーフレームに基づいて、以下のようなビジュアル要素を追加していく

• 色彩

• 画像やイラスト

• アイコン

• ロゴ

• 詳細なテキスト

5.インタラクションの検討

静的なデザインだけでなく、ボタンやリンクのホバー効果、スクロール時のアニメーションなど、基本的なインタラクションについても検討する

6.レスポンシブデザインの考慮

デスクトップだけでなく、タブレットやスマートフォンなど、異なるデバイスでの表示も考慮してモックアップを作成する