デザインカンプ制作について

  • デザイン

ホームページ制作では、まずデザインを作成してクライアントに確認・承認をもらい、その後コーディング作業に進むという流れが一般的です。デザインカンプと呼びますが、カ「カンプ(Comprehensive Layout)」は、Webサイトの完成イメージを視覚的に表現した設計図のようなもので、クライアントとの認識をすり合わせるために重要な工程です。他にも、モックアップ (Mockup)、ビジュアル (Visual)、デザインラフと呼ぶこともあります。

デザインカンプの制作は以下のツールを使います。

1.Photoshop(フォトショップ)

画像編集や写真加工に使われる代表的なソフトで、ビットマップ形式のため、拡大するとジャギー(ギザギザ)が目立ちます。Webデザインやバナー制作など、幅広い用途で使用されます。デザインカンプの作成にもよく使われます。

2.Illustrator(イラストレーター)

主に印刷物やロゴ、イラストの作成に使われるベクター形式のソフトで、拡大しても画像が劣化しません。Web用のアイコンや図形の作成にも最適で、SVG形式での書き出しに向いています。カンプ作成にも使われることがあります。

3.Adobe XD(エックスディー)

アプリのUI作成に使用されますが、ホームページのカンプにも使用できます。チームで共有ができたり、実際サイトが動いている部分まで再現するプレビュー機能も備えてます。

4.Figma

XDと同様にUIデザインに特化したツールで、Webブラウザ上で動作し、複数人で同時編集が可能です。プレビュー機能やコメント機能も充実しており、近年では日本語対応が進み、Adobe製品に代わる人気ツールとなりつつあります。