Webデザイン備忘録スマートフォン用の表示で見るWebデザイン備忘録5年目Webデザイナーのデザインメモ2017-04-30デザインカンプができるまでWebデザインデザインカンプを作るまでの工程はデザイナーさんそれぞれで違うと思うのですが、直近の案件で師匠のやり方を教えていただき、同じように作成してみたところはかどったので、そのやり方をば書きたいと思います。構成要素の書き出し、精査ワイヤーフレームの作成イメージの近い参考サイトやパーツ探し参考パーツで組み立てたカンプもどきを作成デザインカンプの作成うーん文字に起こすと当たり前なことばかりだ...私は今まで「5」をしておらず、これがあることでとってもイメージがわきやすくカンプの作成がいつもよりスムーズに行えたと思いました。情報が0からデザインすることなんてものすごい天才しかできないのでは...クライアントとユーザーに気に入ってもらえるデザインを作るにはヒントが必要なので、そのヒントを自分で作ってゆく作業です。何を推しているのか、ターゲットの年齢層やロゴの雰囲気から連想してコンセプトを決定していき、サイトのデザインイメージをもわもわと脳内でつくります。構成要素の書き出し、精査トップページ、下層ページに何があるかグーグルさんのスプレッドシートとかに書き出して、これはいるかな、これはいらんだろ、というのを精査していきます。サイト全体の構成要素と、作るページの構成要素を書き出しておけばワイヤー作る時に便利。ワイヤーフレームの作成WEBデザインの教本やサイトなどでは、ソフトを使って綺麗なワイヤーを作られていることが多いため、最初は私も製図のように作成していましたが、最近はもっぱら手書きになりました。ソフトを使ってその通りカンプが進めばよいですが、いざ画像やデザインしたテキストを入れた時に「思ってたんとチガウ...」ってなるので、絶対になるので、ワイヤーの時点で気合いを入れなくてよいと考えています。下層ページやパーツをデザインする時、イメージをかためるためにメモ帳にぐちゃぐちゃと書いててハッと、これってワイヤーと同じ役割じゃんて思いました。ワイヤーだって手書きのなぐり書きでいーじゃん!その方が早いじゃーん!と。参考サイトやパーツ探し&カンプもどきの作成イメージの参考になるサイトを見まくる&参考になるパーツがあったらキャプチャをストックして、イラレのアートボードの枠外にベタベタと貼り付けていきます。悩んだ時にすぐ参考にできる!べんり!その参考集からパーツを切り出し、ワイヤーどうりにペタペタはっていき、カンプもどきを作成。パクリになってはいけないのでそのままデザイン盗むなんてことはないですが、参考があるのとないのでは作成スピードが全然違うと思いました。本番や!私の作り方としては、大まかな位置を四角でマークアップして、ここにはこれが入るよーというのをざざっとメモがわりに置いていき、全体ができあがったところでパーツを作って配置していきます。そこからブラッシュアップして洗練、ひたすら洗練...そんなかんじでございます。カンプ作成の時にエリアをマークアップしていくのはもうワイヤーの役目を果たしてるので手書きワイヤーすっとばしてカンプ作成時のアートボード上でやってしまえばいいのかも、とかワイヤー組むのとカンプもどき作るのどっちが先の方がスムーズにいくのかとかはたまたもっとやりやすい方法があるのか、まだまだ自分のやり方は模索中です...とりあえずカンプもどきつくるとはかどったよの話でした。はてなブログPro5年目Webデザイナーのデザインメモ帳。人に教えることが難しいお話WEBデザイナー3年目の反省と4年目の目標が難しいお話WEBデザイナ2年目の反省と3年目の目標スマホデザインのモックアップ月別アーカイブ参加グループデザインはてなブログをはじめよう!ayarpyyyさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。