Webデザイナーが知っておきたい横文字04【デザインカンプ】

記事
学び
どうも!
駆け出しWebデザイナーのkumattomaです。

今回の横文字は、Web制作に欠かせない「デザインカンプ」。

「 Design  Comprehensive Layout 」の略で、デザインカンプ。

いつもカンプデザインなのかデザインカンプなのかどっちなんだと思ってましたが、基本はデザインカンプっぽいのかな?


Webページを作ってみましょう!となった時に、
コーディングに入る前の段階で必要となる、
デザイン設計図(ページデザイン)のことを指します。

基本は先にワイヤーフレームというのを作って、文言や画像の配置など大枠を決めてから、完成図とも言えるデザインカンプ作りに入って行きます。

流れ的には、

①サイトに必要な情報を集めてまとめる
②ワイヤーフレーム
(ラフデザイン)
③デザインカンプ
④コーディング
⑤公開準備へ

といった感じでしょうか。

ワイヤーフレームまでをディレクターさんやプロデューサーさんがやるか、そこからデザイナーさんがやるかは会社や状況によって色々だそうです。

デザインカンプは、PhotoshopやXD、Sketch等のツールを用いて作ります。が、いやはや簡単なようで難しい・・

まだ初心者丸出しで、余白、配置、文字サイズ、行間をああでもないこうでもないとウダウダウダウダ・・均等配置作業もやり方すぐ忘れるし、うっかりズラしちゃうから時間かかる(泣)。

プロはこういう細かな配慮を効率良く的確、そして高速に仕上げられるからプロなんだなと実感。。


このデザインカンプが重要なのは、コーディングのためだけでなく、「イメージを共有する」ことにあります。

これによって、コーディングしちゃってから大きな修正があった場合のあたふたが減るのです。百聞は一見にしかずですね。

また、ページデザインをイチから考えるのは大変です。
特にお客様のイメージが完璧でない時のご提案時にそんなことしていたら、我々のような駆け出し者は、すぐさま睡眠時間をゼロにする未来が待っております。

まずは、『SANKOU!』や『現代デザイン』、『pinterest』などのデザインまとめサイトを駆使してイメージと合うものを見つけてガンガン参考にして行きましょう٩( 'ω' )و




サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す