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