モックアップ(デザインカンプ)の作成手順
1.ツールの選定
Adobe Photoshop、Sketch、Figmaなどのデザインツールを選ぶ
自分は基本的にFigmaを使用するようにしています
(共同作業にたけており、コスト面や機能面が優れているため)
2.新規ファイルの作成
制作物が表示される環境に合わせて最適化するために、設定を行う
画面サイズ
デスクトップ向け:一般的なサイズ: 1920x1080ピクセル
モバイル向け:一般的なサイズ: 375x667ピクセル
3.デザインコンセプトの決定
以下を行い、全体的なデザインコンセプトを決定する
カラースキームの選択
タイポグラフィの決定
全体的な雰囲気やスタイルの設定
4.ビジュアル要素の追加
ワイヤーフレームに基づいて、以下のようなビジュアル要素を追加していく
色彩
画像やイラスト
アイコン
ロゴ
詳細なテキスト
5.インタラクションの検討
静的なデザインだけでなく、ボタンやリンクのホバー効果、スクロール時のアニメーションなど、基本的なインタラクションについても検討する
6.レスポンシブデザインの考慮
デスクトップだけでなく、タブレットやスマートフォンなど、異なるデバイスでの表示も考慮してモックアップを作成する
この記事が気に入ったらサポートをしてみませんか?