いくつかデザインカンプを作成しています。
デザインカンプは、Webサイトのデザインをつくっていく意味です。
Design Comprehensive Layoutというのがもともとの言葉です。
デザインの完成見本図を意味します。
デザインカンプレヘンシブレイアウトの一部から、デザインカンプとなっていると。
「カンプ」という音は還付か乾布くらいでしょうから、耳慣れないですね。
感覚的につくっていったラフ図(いわゆるワイヤーフレーム)から、しっかりと数字の関係性を持った図に収めていきます。
このときの1px単位をそろえることは、意外と楽しいです。
感覚をpxに落とし込む面白さ7つ
デザインカンプをpx単位で落とし込む楽しさは以下の7つにまとめられるかなと。
数字になってはっきりしていく
ひとつひとつの要素の関係性が、はっきりしていく楽しさがあります。
例えば、ヘッダーと本文の間のサイズはいくらで、どちらが中央寄せになっているなど、見た目でなんとなく捉えている内容を数字でみることができます。
「少し多めに空ける」のではなく、2つの要素の間は「180pxだ」のように、書くことではっきりしていきます。
ワイヤーフレームからすぐにコーディングをして要素の間のスペースを決めていくことも可能です。
ただ、初心者のうちは、デザインカンプを書いた方が、それぞれの関係性がはっきりして、気持ちがいいです。
論理的に構成してつくり上げられる
デザインカンプをつくっていくことで、感覚で仕上げていたものに論理性を与えられます。
たとえば、ヘッダーとh2要素の間はスマホが目では150px離す、それらの要素と次の要素との間は150px離す、など。
自分でつくったルールに従っていくことで、次のスペースもそろえる必要性を感じます。
だから、同じ要素、似た要素は同じサイズや似たサイズをスペースとして持っていると考え、同じスペース指定をcssに書いていくことになります。
なんとなくで最初から決めていく過程において、スペースが少しずつはっきりしていき、論理的に次のページをつくっていくことができるようになります。
コーディングの前提を確認できる
自分でデザインカンプをつくれば、コーディングの前提を確認できます。
他の人が書いたデザインカンプであっても、そこにはすべてが明瞭に記載されていれば、問題なく読み取ってきれいにつくることができます。
でも、読み取りは慣れるまでうまくできないことも。
デザインカンプをつくった人の意図を最後まで読みきれないからです。
逆に、自分でデザインカンプをつくったものを自分でコーディングするのなら、その読み取りはいりません。
自分ですでに要素間のサイズやフォントの種類、色合いやスペースの同一性についてクループ分けして理解しているのです。
プログラミングする上での確認がとても楽になります。
構成からデザインしたものを、構成にフィードバックできる
デザインカンプをつくっていくことで、必要な最低サイズを確認し、全体の構成にフィードバックできます。
特にスマホ版のサイズが気になります。
ボタンは指のサイズを考慮すれば、最低でも48px x 48px以上はほしいとされます。
このスペースを確保できなければ、間の不要な項目を削除したり、構成そのものを変える必要が出てきます。
デザインカンプはあくまでデザイン。
でも、画面上に求める全てを入れられないのなら、構成にフィードバックして構成を減らす必要性ができます。
こういった、前後の関係でやり方を変えることについて、デザインカンプをしていて気づけるので、楽しさがあります。
不鮮明な点がはっきりする
なんとなく想像していることが人にはあります。
デザインカンプをつくることで、あいまいにしか想像していなかった内容を明確にすることができます。
デザインカンプをつくっていると、最初のページはとても新しいことの塊です。
でも、2枚目以降のページになれば、なんとなくでしか考えていないことも出てきます。
こういった不鮮明なところをあぶり出して、ちゃんと形にしていくことに、とてもおもしろみを感じます。
頭の中身から意見を求められる
ワイヤーフレームの状態では、誰かに意見を求めてもうまくくみとってもらえません。
できるなら、なんとなく完成に近いワイヤーフレームを作成した上で、デザインカンプまで仕上げてから、他の人に意見を求めたいです。
Webの内容は、あいまいに捉えている人もいるので、意見について当てにならないことも想像できます。
でも、なんとなく頭の中にあるものを説明しながら意見を求めることと、実際につくったものに基づいて意見を求めるため、新しい気付きが得やすいです。
産みの苦しみはありますが、いいデザインをつくれるととても楽しいです。
他のサイトのデザインを見る目が変わる
デザインカンプをして特に変わったのは、必要なサイトの書体や文字の大きさ、構成について感じ取れるようになったことです。
その分、寄り道をしてどういうもので作られているのかを調べますが。
調べることで早く経験ができます。
斬新さよりも、ちゃんと馴染むかを考えてつくるのであれば、既存のいいものの組み合わせでも大丈夫なはずです。；
他の人がつくったサイトに対する目線が変わるのはとても新鮮な体験です。
試しにつくってみる手軽さ
Web制作をしていて、Web制作のいいところは、お試しが手軽なことです。
人件費は出さないといけないにせよ、試しにやってみるとおいしいものにもありつけます。
違うと感じたらすぐに後で研究して、悪いと言われる見た目を変えていくことできます。
コロコロ変わるからWebは信用できないということもいえますが、簡単に変更できる利点があります。