年末年始にWebデザインを学び直すための3つのステップ

この記事は、以下のような方を対象にしています。

  • 現在Webデザインを仕事にしていて、さらにデザイン力をつけたい方
  • 今はSEやコーダーなどデザイン以外の仕事をしていて、来年はデザインも手がけたい方

 
私は元々Webデザイナーなのですが、2010年は携帯サイトのコーディングばかりしていてデザインスキルの低下が心配になってきたので、年末年始は実家に帰らずデザインを学び直すぞ!と決意しました。
そこで自己流のWebデザイン勉強法を再び始めたのですが、もしかしたら他の方にも役立つかなと思い公開しました。

今回は、主にWebデザインの中でも「レイアウト」について書いています。

まずは「知る」こと

私がWebデザインについて基礎からきっちり勉強したいと思い、Webデザインスクールに見学に行ったり「Webデザイン」と名の付く本を片っ端から手にとって読んだ時、残念ながら多くのスクールやWebデザイン本はPhotoshopやDreamweaverなどの「ソフトの使い方」について解説したものばかりでした。

しかし私が知りたかったのはソフトの使い方ではなく、「Webデザインとはどうあるべきか」というもっと根本的なことでした。

デザインとは何かについて学ぶ

というのも、私が本格的にWebデザインの仕事をしたいと思った時、最初に就けた仕事はとある大手商社専属のWebデザインの仕事でした。

私はその仕事を続けたいと思っていたのですが、「実力不足」を理由に4ヶ月目であえなくクビになってしまいました。

その時、先輩から「今後もWebデザインの仕事がやりたいならこれだけは読んどけ」と勧められた本が7日間でマスターするレイアウト基礎講座7日間でマスターする配色基礎講座でした。

早速それらの本を買って読んでみたところ、それらはエディトリアルデザインに関する古い本でしたが、内容はまさに私が求めていた事でした。

7日間でマスターするレイアウト基礎講座

7日間でマスターするレイアウト基礎講座

この本は、10年以上前の本で、印刷は少々汚いのですが、今でも私のバイブルになっています。

内容は、ポスターや雑誌などのレイアウトの実例と、それを改変したらどのように印象が変わるかということについて詳しく触れられています。

特に「写真のジャンプ率とトリミングについて」の問題が面白かったので紹介したいのですが、中身をスキャンしてここに掲載するのはまずいと思いますので、再現した画像で例題↓を製作しました。

例題1

例題1: 写真のジャンプ率とトリミング

見開きの雑誌の紙面に、2枚の写真を入れることになった。
写真1、写真2はAとBどちらに入れるのがふさわしい?

さて、上の写真2枚を下の紙面に入れる場合、AとBどちらに入れるのがふさわしいでしょうか。
おそらく几帳面な方なら写真1(全身写真)をA、写真2(アップの写真)をBに入れるのではないでしょうか。

しかし実際に入れてみると↓どうでしょう。
あまりにも普通すぎてつまらなくありませんか?

ではAとBを逆にしてみました。
紙面に緊張感や面白さが生まれた感じがしませんか?

例題

今回は提供された写真が2枚とも右向きでしたが、全身写真の方は前向きにしたほうがより紙面のバランスが良かったかもしれません。

他に、こんな本もおすすめです。

基本はかんたんレイアウト

基本はかんたんレイアウト

上記の本と同じ作者の本です。
紙面のレイアウトの種類を

★ 見るだけでも楽しくなる「カジュアルテイスト」
★ 信頼できる情報を提供してくれる「ユースフルテイスト」
★ 化粧品のイメージ広告などに使われる「スピリチュアルテイスト」

の3つに分け解説しています。
レイアウト基礎講座を読んだあとにこちらを読むのがおすすめです。

新人デザイナーのためのデザイン・レイアウトが上手になる本

新人デザイナーのためのデザイン・レイアウトが上手になる本

美しいポスターや紙面などのレイアウトとなんだか違和感を感じるレイアウトを並べ、なぜ違和感を感じるか、どうすればもっとよく見えるかなどを解説しています。
色彩の基礎にも触れられています。

次に「描く」こと

「描く」というと、PhotoshopやFireworksでデザインしたり、あるいはWebデザイン系の本を読むとパーツの作り方の紹介などが多いですが、私はデザイン力を鍛えるにはソフトを操作するより紙に手で描いた方が力がつくと思っています。

私の場合、デザイン力を鍛えたいと思ったときはギャラリーサイト(優れたWebデザインを集めたリンク集)を見て、気に入ったものを紙に描いたりします。

例えば、最近だとローソンのサイトがアツいと思っているので、ローソンのおせちの特設ページを画面に表示してスケッチブックに描いたりしています。
描いている時は、「なぜここだけ角丸なのだろう」とか「本文はゴシック体なのに見出しだけ明朝体なのはなぜ?」とか考えています。

かなり下手で誤字脱字まであるので、あまり公開したくはないのですがちょっぴり掲載。

参考にしたキャンペーンページ
参考にしたキャンペーンページ

ちなみにこの練習をする場合は、お固い企業サイトのトップページよりも派手なキャンペーンページを描いたほうが面白いし力もつくと思っています。
あと、これは自宅に限らず、通勤中の電車の中吊りを書き写すことでも同じような練習ができます。

参考になりそうなサイト

ランディングページデザインリンク集

ランディングページデザインリンク集

国内のランディングページを集めたリンク集です。
参考になるページが沢山あります。

Wireframe Showcase

Wireframe Showcase

海外のワイヤーフレーム(Webサイトのレイアウトを考えるときに描くメモのようなもの)のギャラリーサイトです。
colissさんの記事で知りました。

最後に「作る」こと

いよいよ、PhotoshopやFireworksの出番です。
先ほど描いたページや、他に気に入ったページがあればスクリーンキャプチャしてPhotoshopなどに貼りつけ、その上を白い四角で全て覆い、その白い四角を透明度50%位に設定します。

つまりこんな感じです。

キャプチャの上に半透明の白いレイヤーを敷く

キャプチャの上に半透明の白いレイヤーを敷く

その上から、極力同じになるようにパーツを作りこんでいきます。
もしパーツの作り方がわからなかったら、ググるか解説本などを読んで調べます。
多くのWebサイトはPhotoshopかFireworksで作られていますので、それらを使えば全く同じものが作れるはずです。

言うまでもありませんが、ここで作ったものをそのまま納品したり公開しちゃダメですよw
あくまでもWebデザインの勉強のためということで。

これは私の自己流のWebデザイン勉強法ですが、みなさんはどんな風に練習とか勉強されているのでしょうか。
仕事で学ぶという方が多いのかな…?
もし良かったら、コメントやTwitter @Stocker_jp にリプライ頂けると幸いです。

このページで使われている素材

人物写真: 写真素材 足成【フリーフォト、無料写真素材サイト】
手書き風フォント: たぬき油性マジック

If you like this article click the Facebook “Like” button to share it with your friends!