Webデザインがトップレベルになるガイド
「なぜか思うようなデザインができない。」
「どこかやぼったい。」
「クライアントからのフィードバックに対応できない。」
そのうような悩みがあるデザイナーの根本的な原因は大きく２つあります。
デザインの基礎がそもそも身に付いていない。
Webデザインのトレンドを習得できていない。
デザインの基礎は余白感・フォントの選び方・カラーの配分・レイアウトのルールなどの知識とそれを実践できる身体スキルが培われている必要があります。
ただ、最初の悩みで大きな原因になっているのがいまのWebデザインのトレンドを習得できていないことです。トレンドを習得することはデザイン初級〜中級者が考えている以上に重要です。
ここでは、模写からオリジナル化を通してデザインの基礎を学びつつ、トレンドを習得するためのガイドを書いています。
トレンドを習得するためにもっとも近道なのが「模写」です。
実際に、模写からオリジナル化するフローを繰り返すことで、以下のnoteに掲載されているようなポートフォリオのクオリティまで、デザインスキルを向上できます。
なぜ模写をするのか？
大量のデッサンをしないと芸術家やアーティストになれないように、大量のWebやUIの模写をしないとWeb&UIデザイナーになるのは困難です。トップレベルのデザイナーでも、日々クオリティの高いデザインを模写・研究してます。
模写するときは
・このサイトの目的は？ターゲットは？
・なぜこのフォントを使ってりるのか？
・フォントのルールがあるのか？
・なぜこのカラーを使っているのか？
・なぜこのレイアウトなのか？
・余白にルールがあるのか？
などを考えながら模写していきましょう。
いまのトレンドに合ったクオリティの高いWebデザインを模写していくことでレイアウトの基礎を高め、デザイン表現の引き出しを増やしていくことができます。
この辺りの考え方は、日本を代表するクリエイティブディレクター 水野学氏の本を読むとより詳細に理解できます。
1. ギャラリーサイトから、好きなサイトを一つ選ぶ
クオリティの高いWebサイトを集めているギャラリーサイトから模写するサイトを選んでください。ただし、日本語サイト限定です。
最終的にオリジナル化するので、例えばカフェのサイトを作りたいならショップ系のサイトをピックアップすると良いでしょう。コンテンツの参考にもなります。
ギャラリーサイトは以下がおすすめです。
2.選んだサイトをキャプチャする
正しくキャプチャできていない初心者さんが多いので、一度下の記事を読んでからキャプチャしてみましょう。正しいキャプチャの目的は、ブラウザで見ているWebサイトと全く同じサイズと見た目を、Figmaに表示することです。
3. Figmaでグリッドシステムを調べる
Figmaに模写したいWebサイトを正しく表示できたら、グリッドシステムを調べましょう。
デザインの基本は整理整頓です。グリッドシステムのルールで統一感を出しながら、少しずらしたレイアウトをすることでメリハリのあるデザインをすることができます。
ただしコーディングでずれてしまう場合もあるのでぴったりのグリッドが見つからない場合は、近いグリッドを設定しましょう。
また、レイアウトはグリッドレイアウトとブラウザの幅に応じて変化するリキッドレイアウトの2パターンがあり、一つのWebサイトでもこの２つのレイアウトを組み合わせてデザインすることが多いです。
例えばTOPエリアで画像を横幅いっぱいに使ってインパクトを出したいのでリキッドレイアウトを使い、中のコンテンツはグリッドレイアウトにするというような使い分けです。
このようなサイトの場合は、リキッドレイアウトは無視してグリッドレイアウトのエリアを探してグリッドシステムを設定しましょう。
以下でFigmaでのグリッドの設定の仕方が詳しく書かれています。
XDでもいいですが、XDはなくなりそうなので今から学習するならFigmaに慣れておくことをオススメします。
4. Figmaで参考サイトを模写する
ここから実際に模写していきます。できる限り完璧に模写してください。何度も言いますが、デザインの基本は整理整頓です。模写する時は以下を意識してください。
丁寧に模写してください。1pxにこだわりましょう。
横に並べて模写しましょう。重ねてトレースしないように。
画像などの要素もできる限り入れましょう。参考サイトから持ってこれないなら、同じような写真をフリー素材から持ってきましょう。
フォントの文字間や行間も意識して模写しましょう。画像と文字の細やかなデザインがWebのクオリティを左右します。
コンテンツごとにレイヤーを整理しながら模写しましょう。後から、修正が楽になるため結果的に時間を節約できます。
模写の動画があるので参考にしてください。
さらに、なぜこのデザインなのか？を意識しながら模写しましょう。
余白のルール・ボタンのルール・フォントのルール・カラールールを調べてデザインガイドラインとしてまとめておきましょう。
デザインガイドラインはUIデザインだけではなく、統一性を出すためにWebデザインにも利用できます。特にルールがばらばらになりがちな初級デザイナーさんは、デザインガイドラインを作っておくこをとオススメします。
5. オリジナル化する
模写するだけでは、実際の業務で必要となる課題理解力・課題解決力のスキルが身に付きません。模写したサイトをオリジナル化することで、仮想的にですがWebサイト制作の経験ができます。
模写したサイトとまったく別のサイトを作れば、ポートフォリオに載せることもできます。模写したサイトのデザイン要素を変更しただけでは、ただのパクリなので注意してください。ルールを元に、レイアウトを含めて変更する必要があります。
サイトの概要を決める
まずは広告する商品・サービスを決めましょう。さらに、Webサイトの目的とターゲットを設定したら、サイトのコンテンツも決めておきましょう。ワイヤーフレームを作るのもいいです。
デザイン要素を変更する
タイトルやフォント・カラーなどを決めていきましょう。画像もフリーやオリジナルのものに差し替えましょう。
ロゴを作るのもいいですね。ロゴはパターンをたくさん作ると、そのままポートフォリオに掲載できます。デザインパターンをたくさん作れるか？はデザイナーの採用担当者がチェックするポイントです。
レイアウトを変更する
最後にレイアウトをオリジナル化しましょう。
ギャラリーサイトからさらに5〜10のサイトをピックアップしてください。そして、模写したサイトを元にピックアップしたサイトのレイアウトを移植します。いろいろなデザインパターンを作って見比べるのがコツです。
例えばですが、
TOP：模写したサイトレイアウトを改修
NEWS：ピックアプしたサイトのレイアウト
ABOUT：模写したサイトレイアウトを改修
WORKS：ピックアプしたサイトのレイアウト
FOTTER：模写したサイトレイアウトを改修
とすると、グリッドシステムは統一されるので違和感なく別のサイトに生まれ変わります。
といっても2年間メンターをやっていますが、初級デザイナーさんだとオリジナル化はなかなか難しいです。そのため、別のnoteでより詳しく説明しましたので参考にしてください。
Design Mentor (PRO)について
以上、1〜5のフローを何回も繰り返せばWebデザインのスキルはトップレベルに達します。ただ、やってみると思ったより難しいことが分かります。
どのサイトを模写するべきなのか？
Figmaの使い方はこれでいいのか？
グリッドシステムはこれであっているのか？
きちんと模写できているか？
オリジナル化でクオリティは下がっていないか？
そんな疑問に寄り添って、丁寧にフィードバックをすることが私がメンターとして行なっているベースになります。MENTAでデザイナーのメンターを2年前からしており、すでに100名を超えるメンティーさんを教えています。
その知見を活用して、新たに Design Mentor (PRO) をスタートしました。デザイナーに特化した、未経験者や初級デザイナー向けのメンターサービスです。手数料がないためMENTAより1,000円以上お得です。ぜひご検討ください。
これからも、デザインによって本質的な価値を提供できるデザイナーを増やしてきます。
よりDM(PRO)について詳しく知りたい方は以下をご覧ください。
追記：2023年7月
未経験・初級デザイナーさんは、以下の記事も読むことをおすすめします！
この記事が気に入ったらサポートをしてみませんか？