デザインカンプを作るときに意識したいこと

デザインカンプを作るときに意識したい3つのことを紹介します。これらを意識することで、デザインはもちろん、その後の工程もスムーズに進められるでしょう。

目的やコンセプトを意識する

デザインカンプを作るときは、常に目的やコンセプトを意識しましょう。これらが曖昧だったりデザイン性ばかりに目が向いたりすると、Webサイト・ページのコンセプトとできあがったデザインが乖離してしまいます。

オリジナリティよりもユーザビリティ

デザインカンプを作るときは、オリジナリティよりもユーザビリティを大切にしましょう。デザインカンプで作るのはWebサイトやWebページのデザインであり、ユーザーがタップやクリック、スクロールなどをして直接触れる部分です。

オリジナリティにばかり目が向いてしまうと、どこに何があるのかわからない、ユーザーにとって不親切なWebサイト・ページになってしまいます。

デザインからコーディングまでを考える

デザインカンプを作るときは、デザインだけでなく、コーディングのことまで考えましょう。Webデザインの完成見本であるデザインカンプは、その後、WebサイトやWebページに実装することになります。

デザインカンプの段階からコーディングを意識できていれば、その後の作業がスムーズに進むでしょう。これは自分とは別にコーディング担当がいる場合、特に重要なことです。

デザインカンプ作成に使えるツール5選

デザインカンプの作成に使えるツールを5つ紹介します。普段使っているツールやチームで導入しているツールを踏まえ、メンバーにとって使いやすいものを選びましょう。

Adobe Photoshop

Adobe Photoshopは多くのデザイナーから支持を集めているツールです。利用率が非常に高いツールであるため、これが使いこなせないと何かと困ることも出てくるでしょう。写真の編集や加工に強いツールですが、Photoshop出デザインカンプも作れるようにしておきたいです。

Adobe Illustrator

Adobe Illustratorも、Photoshopと同じくデザイン制作の現場でよく使われるツールです。ロゴやアイコン、イラストなどの作成に強いツールで、デザインカンプに配置する各種素材の制作にも使えます。

Illustratorで素材を作り、Photoshopでデザインカンプを作成するというデザイナーが多いです。

Adobe XD

Adobe XDはPhotoshopやIllustratorなどのベンダーとして知られるAdobe社の、比較的新しいツールです。2023年1月で単体プランは終了しましたが、Webサイト向けのUI・UXデザインに強いツールとして知られ、モバイル向けの制作にもよく使われています。

Figma

Figmaはブラウザから使えるデザインツールです。ブラウザ上でデザインができるため時間や場所を問わずに使えること、直感的な操作性などに強みがあります。作成したデザインカンプをブラウザ上で確認することもでき、クライアントやメンバーとの共有もしやすいです。

GIMP

GIMPはオープンソース（ソースコードが公開されたシステム。コードの改変も可能）の画像編集・ペイントツールです。無料で使えること、無料でありながら高機能であることが特徴で、プラグインにより機能を追加することもできます。