ここまで、デザインの基礎知識について、学んできました。しかし、実際に作ってみないことには、どう使って良いのか、実感がわかないと思います。そこで、今まで学んで来たことを意識しながら、これからご提供する参考デザインを「完璧に1pxのずれも無いように意識しながら」「色もまったく同じになるように」模写してみてください。
なぜなら、最初は適切なフォントサイズが何pxか、最適な余白の距離が何pxなのかといった、大きさや距離感の感覚が無いからです。最初にいきなりオリジナルで作ってしまうと、すべてのパーツのサイズ感が、バラバラになりがちです。自分の中に基準が無いので、余白もフォントサイズも、すべてがプロの基準とまったく異なるデザインになります。だから素人っぽくなるのです。
なので、最初にプロと同じ余白の大きさや文字のサイズなどの感覚をつかむ必要があります。それからがスタートです。ほんのわずかのズレも無いように徹底的に模写をすることで、適切な距離感やサイズ感が、つかめてくるはずです。
色も同様で、最初はどんな色を使っていいかの感覚がありません。色彩の項目で学びましたが、インプットとアウトプットでは、大きく感覚が異なります。
改めてになりますが、WEBデザインでは「余白や文字のサイズ感、そして色が、かなり重要」です。プロっぽさが現れるすべての要因は、余白と文字の大きさ、色が適切なのかどうかに大きく依存します。なので、何度も模写をすることで、サイズ感、距離感、色の感覚を掴んでください。
ただし、何も考えずに、ただ模写をしても無意味です。常に意識しながら、学びながら模写することが大切なのです。模写をする時に意識すべきポイントがいくつかあります。すべて、1つ1つ意識してみましょう。
- 文字サイズをどこで何pxにしているか。またはどんな規則性があるか。
- 余白をどこで、どれくらい開けているか。またはどんな規則性があるか。
- 色はカラーパレットにおける、どの位置を使っているか。
- デザインの4原則「近接」「整列」「強弱」「反復」の使い方。
- ジャンプ率の差はどれくらいか。
上記のポイントを意識しながら作って、どれくらいの余白をあければいいのか、どれくらいの文字サイズを使えば良いのか、4原則はどう使っているのか、その感覚をなんとなくでも身につけましょう。
今回のミッション
これからみなさんにお配りする3つのページを、完璧に模写してください。可能な限り1pxのズレもないように、時間をかけてもいいので模写を完了させましょう。ただ、なんとなく模写をするのではなく、先程お伝えした項目を意識し、学びながら、観察し、分析しながら模写してください。
では、模写の方法について、お伝えしていきます。まず、下記のURLから3つのファイルをダウンロードしてください。
■ 模写データ1 :
http://startout.work/mission/webdesign/copydesign1.zip
■ 模写データ2 :
http://startout.work/mission/webdesign/copydesign2.zip
■ 模写データ3 :
http://startout.work/mission/webdesign/copydesign3.zip
ダウンロードしたらzipファイルを解答しましょう。すると、中には2つのファイルが入っているはずです。2つのうち「image.psd」をPhotoshopで開いてください。特にレイヤーにも分かれていない1枚の画像データが開かれますので、その上からすべてを「なぞるように」模写をしましょう。先程も言いましたが「可能な限り1pxもずれがないように」です。また、フォントはすべてフリーフォントを活用していますので、検索してダウンロードしてみましょう。
- Noto Sans CJK JP
- Damion
- Alte DIN 1451 Mittelschrift
どうしてもPhotoshopでの使い方が分からない場合は、もう片方のpsdデータを開いてください。そちらに、どのようにしてWEBサイトが作られているのか確認できる、生のデザインデータが入っています。今回の目的は、フォントのサイズ感や余白の広さなど、全体的なWEBデザインの基本的な基準を習得するためのものです。いくら元データを見ても構いませんので、忠実に再現してみてください。
3ページとも模写したら、なんとなく、余白感、文字のサイズ感を把握できるはずです。次のフェーズからWEBサイト作りに入りますが、その感覚を忘れずに作ってみてください。もちろん、すべてのサイトが同じサイズや余白で固定されているわけではありませんが、全体のサイズ感を掴めていれば、デザインしやすくなるでしょう。