この記事は、以下のような方を対象にしています。
- 現在Webデザインを仕事にしていて、さらにデザイン力をつけたい方
- 今はプログラマー、ディレクター、コーダーなどデザイン以外の仕事をしていて、来年はデザインも手がけたい方
※この記事は、2010年末に公開したものを、文章と参考サイトなどのリンク先を修正し、2019年末に再公開したものです。
私は元々Webデザイナーなのですが、デザイン以外の仕事が連続したときなどデザインスキルの低下が心配になってくるので、年末年始など時間があるときは自己流のWebデザイン勉強法をしています。
もしかしたら他の方にも役立つかなと思い、公開しました。
今回は、主にWebデザインの中でも「レイアウト」について書いています。
まずは「知る」こと
私がWebデザインについて基礎からきっちり勉強したいと思い、Webデザインスクールに見学に行ったり「Webデザイン」と名の付く本を片っ端から手にとって読んだ時、残念ながら多くのスクールやWebデザイン本はPhotoshopやDreamweaverなどの「ソフトの使い方」について解説したものばかりでした。
しかし私が知りたかったのはソフトの使い方ではなく、「デザインとはどうあるべきか」というもっと根本的なことでした。
というのも、私が本格的にWebデザインの仕事をしたいと思った時、最初に就けた仕事はとある大手商社専属のWebデザインの仕事でした。
私はその仕事を続けたいと思っていたのですが、実力不足であまり活躍することができませんでした。
その時、先輩から「今後もWebデザインの仕事がやりたいならこれだけは読んどけ」と勧められた本が7日間でマスターするレイアウト基礎講座と7日間でマスターする配色基礎講座でした。
早速それらの本を買って読んでみたところ、それらはエディトリアルデザイン、つまり書籍のデザインに関する古い本でしたが、内容はまさに私が求めていた事でした。
7日間でマスターするレイアウト基礎講座
この本は、10年以上前の本で、印刷は少々汚いのですが、今でも私のバイブルになっています。
内容は、ポスターや雑誌などのレイアウトの実例と、それを改変したらどのように印象が変わるかということについて詳しく触れられています。
特に「写真のジャンプ率とトリミングについて」の問題が面白かったので紹介したいのですが、中身をスキャンしてここに掲載するのはまずいと思いますので、再現した画像で例題↓を製作しました。
例題1: 写真のジャンプ率とトリミング
見開きの雑誌の紙面に、2枚の写真を入れることになった。
写真1、写真2はAとBどちらに入れるのがふさわしい？
さて、上の写真2枚を下の紙面に入れる場合、AとBどちらに入れるのがふさわしいでしょうか。
おそらく几帳面な方なら写真1（全身写真）をA、写真2（アップの写真）をBに入れるのではないでしょうか。
しかし実際に入れてみると↓どうでしょう。
あまりにも普通すぎてつまらなくありませんか？
ではAとBを逆にしてみました。
紙面に緊張感や面白さが生まれた感じがしませんか？
今回は提供された写真が2枚とも右向きでしたが、全身写真の方は前向きにしたほうがより紙面のバランスが良かったかもしれません。
他に、こんな本もおすすめです。
基本はかんたんレイアウト
上記の本と同じ作者の本です。
紙面のレイアウトの種類を
・ 見るだけでも楽しくなる「カジュアルテイスト」
・ 信頼できる情報を提供してくれる「ユースフルテイスト」
・ 化粧品のイメージ広告などに使われる「スピリチュアルテイスト」
の3つに分け解説しています。
レイアウト基礎講座を読んだあとにこちらを読むのがおすすめです。
新人デザイナーのためのデザイン・レイアウトが上手になる本
美しいポスターや紙面などのレイアウトとなんだか違和感を感じるレイアウトを並べ、なぜ違和感を感じるか、どうすればもっとよく見えるかなどを解説しています。
色彩の基礎にも触れられています。
次に「描く」こと
「描く」というと、PhotoshopやAdobe XDでデザインしたり、あるいはWebデザイン系の本を読むとパーツの作り方の紹介などが多いですが、私はデザイン力を鍛えるにはソフトを操作するより紙に手で描いた方が力がつくと思っています。
私の場合、デザイン力を鍛えたいと思ったときはギャラリーサイト（優れたWebデザインを集めたリンク集）を見て、気に入ったものを紙に描いたりします。
例えば、最近だとローソンのサイトがアツいと思っているので、ローソンのおせちの特設ページを画面に表示してスケッチブックに描いたりしています。
描いている時は、「なぜここだけ角丸なのだろう」とか「本文はゴシック体なのに見出しだけ明朝体なのはなぜ？」とか考えています。
かなり下手で誤字脱字まであるので、あまり公開したくはないのですがちょっぴり掲載。
↓
ちなみにこの練習をする場合は、お固い企業サイトのトップページよりも派手なキャンペーンページを描いたほうが面白いし力もつくと思っています。
あと、これは自宅に限らず、通勤中の電車の中吊りを書き写すことでも同じような練習ができます。
参考になりそうなサイト
国内のランディングページを集めたリンク集です。
参考になるページが沢山あります。
海外のワイヤーフレーム（Webサイトのレイアウトを考えるときに描くメモのようなもの）のギャラリーサイトです。
最後に「作る」こと
いよいよ、PhotoshopやAdobe XDのようなアプリの出番です。
先ほど描いたページや、他に気に入ったページがあればスクリーンキャプチャしてPhotoshopなどに貼りつけ、その上を白い四角で全て覆い、その白い四角を透明度50%位に設定します。
つまりこんな感じです。
その上から、極力同じになるようにパーツを作りこんでいきます。
もしパーツの作り方がわからなかったら、ググるか解説本などを読んで調べます。
多くのWebサイトはPhotoshopで作ることが可能なので、理論上は全く同じものが作れるはずです。
言うまでもありませんが、ここで作ったものをそのまま納品したり公開してはいけません。
あくまでもWebデザインの勉強のため、ご自分のPC内のみでご利用ください。
このページで使われている素材
人物写真: 写真素材 足成【フリーフォト、無料写真素材サイト】
手書き風フォント: たぬき油性マジック
