160 views

【イラレ・フォトショでカンプ作成】WEBの表面をデザインすることも学べます【youtuber養成学校のサイトを作る?!】

今日から平日夜は夕飯食べない宣言!ミライザップのラスト2週間やったるで!!!どうも上田です

さて

チセではWEBサイトの制作などをしていますが

お客様(クライアント)の要望を見やすくまとめた「デザインカンプ」というものを作っています

 

デザインカンプとは、簡単にいえば「デザインの完成見本図」のことです。
クライアントと制作者との間で、色やフォントなどのイメージをすり合わせるために作成されます。

今日は、デザインカンプの定義と役割を説明していきます。
なぜデザインカンプを作ることが大切なのか、どんな風に作られるのか

 

この記事でやっちゃいたいと思います

まずはクライアントとの打ち合わせ!

打ち合わせではヒヤリングが大事になってきますが、今日は置いといて

無事打ち合わせが終了した!

 

要望点をまとめると・・・

ベースカラーは赤っぽく

見本のサイトは下記のようなサイトが希望

そして、サイト名は

上田youtuber養成スクール

このサイトにお客さんを集めたい!とのことでした

ただね、これだけの情報で

制作側がサイトを作っちゃって

「やっぱりこんなんじゃないよー、もっと違うのにして」

ってなっても大変ですよね

コーディングだとか色々ありますから

 

なので「デザインの完成見本」であるデザインカンプが必要になってくるんです

今日はあくまでデザインカンプの話です

 

で?デザインカンプってどう作るの?

 

先述した通り、デザインカンプは制作物の完成イメージを共有するために作られます。

Web制作に限らず、デザイン作成の前には必ず発注側の要望や意見のヒアリングがあります。
しかし、言葉だけではどうしても齟齬が生じたり、当たり前だという思い込みから大事な要望を伝え忘れてしまったりすることがあります。

デザインカンプを実際に作成すると、そういった見落としが可視化されます。
「ポップなイメージと聞いていたので明るい配色にしたが、クライアントは少し落ち着いた色味を望んでいた」「シャープなイメージ」など、視覚情報を得ることによってさまざまな要望が出てくるはずです。

細かい点までイメージのすり合わせができていると、制作側も安心して作業に取り掛かれます。

はい

 

ということで実際にここで作っていきましょう

 

今日はイラストレーターとフォトショップでカンプ作っていきたいと思います

 

まずはイラレで幅を960pxにして長さは適当に3000pxくらいでアートボードを制作します

 

作成したアートボードに先ほどのミライクのサイトをレイヤーにひきます

レイヤーにスクリーンショットを貼り付けたら

縦横すべての要素にガイドを引きます

青い線がガイドですよ

はい、ここでいったんミライクのサイト画像は目隠しして引っ込んでもらいましょう

ここでメイン画像に先日作成した画像を貼り付けますよ

さぁ、一気にいろいろな要素を貼り付けていきましょう

 

ずいぶんデザインカンプが出来てきましたね

 

ここでクライアントの要望する

ミライクのようなデザインで赤っぽいサイト

に近づいたのではないでしょうか

 

このへんで

 

カンプの初稿が出来たのですが、チェックお願いします

 

といってクライアントさんに御伺いを立てましょう!

 

 

どうでしょうか?

 

デザインカンプができるまでを高速でまとめてみました

 

WEBデザインもYoutuberも両方学べるのはミライク・チセですよ!

ということで今日はこの辺で

 

youtuberコースもWEBデザインコースも!
ご希望の方、是非お待ちしています。
⇒ご見学・ご体験お申込みはコチラ!

就労継続支援B型事業所 「ミライク・チセ」
〒065-0021 札幌市東区北21条東8丁目1-5 エイト21ビル2F
TEL:011-214-0225

 

 

 

 

\新コース!ミライク・チセで一緒にYouTuberに挑戦しない?
ミライクチセYOUTUBERコース
 

\ミライク・チセってこんなトコロです♪徹底解剖しちゃうゾ!/
ミライクチセバナー
 

最初のコメントをしよう

必須