WEBデザインは、どうやって練習すればいいのか、迷う人も多いと思います。
色の理論を学んだり。
模写を続けてみたり。
そのうち、何が良いデザインなのか分からなくなったり。
仕事で作ってみても、良い反応をもらえなかったり。
毎回、膨大な修正を求められたりして、自信を失う方も多くいらっしゃいます。
もっとも、WEBデザインの良し悪しで言えば、相手次第と言わざるをえません。
クライアントやユーザー、その時々に納得させるべき相手がいて、求めている以上のものを返すこと。
だから、良いも悪いも基準は自分ではなく、相手にあると言っても良いでしょう。
では、相手を満足させるWEBデザインをするには、どう練習すればいいのか。
何通りも試した中で、今回は、最も効果のあった方法をお伝えします。
デザインが上手くなりたい方は、ぜひ一度試してみてください。
レイアウトを作りましょう
ひとまず、レイアウトの設計が無いことには、はじまりません。
自分自身で、作りたいサイトの設計図を描きましょう。
レイアウトだけ描かれた設計図のことを、ワイヤーフレームと呼びます。
例えば、このような感じです。
上記は途中までですが、このようにグレーの箱と文字だけで、レイアウトを作ります。
通常は、作りたいサイトの全ページ分のレイアウトを作成します。
データはPhotoshopで作りましたが、XDやIllustratorでも、問題ありません。
またPhotoshopでワイヤーを作る時は、WEBサイトの実寸台で作りましょう。
キャンパスを下記の手順で開いてみてください。
- 横幅1024pxで開く(他の設定はこちらの最初の項目と同じ)
- 開いたら「ガイド」をキャンパスの左右にピッタリ合わせて引く
- ガイドを引いたら「イメージ」>カンバスサイズで横幅を1224pxにする。
これは、実際にWEBデザインを作る時も同じです。
大体、現時点でWEBサイト(PC)のサイズは横幅1024px〜1260px前後です。
あとから自由にカンパスの高さや幅を変えることも出来ます。
また、コンテンツそのものは引いたガイドの中に収めるようにしましょう。
ガイドの外にはみ出すのは、基本、永遠と横に繰り返される「背景」のデザインだけです。
もしくは、横幅が可変しても、同じ比率で拡大していくようなデザインです。
最初は難しいのでコンテンツはガイドの内側に収めるようにしましょう。
なお、フォントのサイズ感に気をつけてください。
基本的に「読ませる文章のフォント」は12px〜18pxが基本です。
タイトルなどは、20px以上でデザインに合わせて変えましょう。
フォントサイズのサイズ感が合えば、WEBサイトのバランスがよくなります。
ワイヤーフレーム(レイアウト)が出来たら、次のステップにすすみます。
類似のデザインを見つけて組み合わせる
ワイヤーフレームやサイトマップを作ったら、さっそくデザインの練習に入っていきましょう。
基本的には模写なのですが、少しだけ、模写するまでの方法が異なります。
誰かの作ったWEBサイトを、そのまま模写するわけではありません。
WEB上には「WEBデザインのリンク集」という便利なサイトがあります。
クオリティの高いWEBデザインばかりを集めたリンク集サイトです。
その中のデザインを見ながら、作ったレイアウトに似たデザインパーツを見つけ出します。
デザインパーツと言っても、ボタンや画像のような細かい範囲ではありません。
大まかに言えば、横一列、セクション別に似ているサイトを見つけましょう。
WEBサイトには、ニュースエリアやメインビジュアル、コンセプトなど、様々なセクションに分かれます。
そのセクションごとに似ているエリアを探してくるのです。
ちなみに僕は、下記の2つのリンク集をよく使っています。
では、実際にやってみましょう。
先程作ったワイヤーフレームに沿って、参考サイトのデザインを貼り付けていきます。
この段階では、文字や画像はそのままで、キャプチャ(スクリーンショット)を貼り付けるだけで大丈夫です。
例えばこんな感じになります( 下記は3つのサイトを組み合わせています )。
いかがでしょうか。
どのように作ったかに関しては、下記の動画を参考にしてみてください。
このように、各セクションに沿ったデザインの画面キャプチャをPhotoshopで貼り付けていきます
画面キャプチャを撮影する場合、動画はmacでしたのでcommand+shift+4でキャプチャしました。
Windows場合、Google Chromeのアドオンである、Awesome Screenshotがおすすめです。
macでも広い範囲のキャプチャを取りたい時は、アドオンが使えます。
Awesome Screenshotを使うと、サイトのページをまるごとキャプチャを撮影することができます。
まず、実際にインストールして、キャプチャしてみてください。
その後、Photoshopでキャプチャしたデータを開き、該当箇所を選択ツールでコピーし、貼り付けましょう。
今回は、下記のウェブサイトを参考にさせていただきました。
どのパーツがどこから使われているか、確認してみましょう。
模写を基本にデザインする
間隔やテイストを整えながら、Photoshopで模写していきましょう。
最初はなるべく真似ると良いです。
真似ることで、フォントサイズや余白の空け方など理解できます。
ただ、どこを、どのように真似るかは、ご自身の判断が必要になります。
途中までですが、作業風景を撮ってみましたので、参考にしてみてください。
文字等の内容はワイヤーフレームに合わせるようにしてください。
画像素材もなるべく参考サイトとテイストをあわせた上で、使うようにしましょう。
可能な限り、継ぎ接ぎで作ったデザインに合わせてください。
無理にアレンジしようとすると、バランスが崩れてダサいサイトになりかねません。
結果的に、何がプロのデザインなのか、分からないまま終わってしまいます。
動画では若干アレンジしていますが、慣れないうちはアレンジしなくてOKです。
本当にそのままそっくり、少しも違わないように模写しましょう。
模写が完了してから、少しずつ整えたり、アレンジをしていきます。
ただ、ばらばらにサイトを組み合わせますので、余白などは調整の必要があります。
フォントサイズなども、バランスを合わせてください。
他のサイトを参考にしながら、余白やフォントサイズを調整しましょう。
大切なのは規則性を持たせることです。
文章やコピーなどの文字数は、出来れば、デザインにあわせて書き直してみてください。
文字の長さや行間などが狂えば、それだけでバランスが崩れ違和感を感じるようになります。
何をすれば素晴らしいデザインになるのか、把握しづらくなります。
また、デザインの表現やレイアウトなど、お気に入りをストックしておきましょう。
良いデザイナーは、頭の中にたくさんの引き出しをもっています。
たくさん引き出しがあるからこそ、効率よく良いデザインができるのです。
常に、デザイン表現のネタをストックし続ける癖をつけましょう。
- アレンジはあまり加えず可能な限りそのまま模写する。
- 文字や画像はワイヤーフレームのものに差し替える。
- 余白等は都度調整する。
- 大きなアレンジは一通り作った後で。
- 文字に関してはデザインに合わせるよう文字数を調整する。
- デザインの表現やレイアウトなどを常にストックする。
上記の方法で、WEBサイトのプロトタイプを作り、模写する練習を繰り返してみてください。
何度もやっているうちに、プロのデザインを習得できるはずです。