Webデザインがトップレベルになるガイド

「なぜか思うようなデザインができない。」
「どこかやぼったい。」
「クライアントからのフィードバックに対応できない。」

そのうような悩みがあるデザイナーの根本的な原因は大きく２つあります。

• デザインの基礎がそもそも身に付いていない。

• Webデザインのトレンドを習得できていない。

デザインの基礎は余白感・フォントの選び方・カラーの配分・レイアウトのルールなどの知識と、それを実践できる身体スキルが必要です。

ただ、最初の悩みで大きな原因になっているのがいまのWebデザインのトレンドを習得できていないことです。トレンドを習得することはデザイン初級〜中級者が考えている以上に重要です。

ここでは、模写からオリジナル化を通してデザインの基礎を学びつつ、トレンドを習得するためのガイドを書いています。
トレンドを習得するためにもっとも近道なのが「模写」です。

実際に、模写からオリジナル化するフローを繰り返すことで、以下のnoteに掲載されているようなポートフォリオのクオリティまで、デザインスキルを向上できます。

こちらの記事では実際に何をやるのかをイメージできる、実例を紹介しています。また、メンティーさんが感想を書いてくたので、ぜひ読んでみてください。

自己紹介はこちら。

なぜ模写をするのか？

大量のデッサンをしないと芸術家やアーティストになれないように、大量のWebやUIの模写をしないとWeb&UIデザイナーになるのは困難です。トップレベルのデザイナーでも、日々クオリティの高いデザインを模写・研究してます。

模写するときは
・このサイトの目的は？ターゲットは？
・なぜこのフォントを使ってりるのか？
・フォントのルールがあるのか？
・なぜこのカラーを使っているのか？
・なぜこのレイアウトなのか？
・余白にルールがあるのか？
などを考えながら模写していきます。

いまのトレンドに合ったクオリティの高いWebデザインを模写していくことでレイアウトの基礎を高め、デザイン表現の引き出しを増やしていくことができます。

この辺りの考え方は、日本を代表するクリエイティブディレクター 水野学氏の本を読むとより詳細に理解できます。

どのくらいの期間が必要か？

Webサイトの模写からオリジナル化まで、だいたい平均して3ヶ月程度かかります。
しかし、慣れると1ヶ月程度でデザインできる様になります。

ポートフォリオは最低でも5作品は合った方がいいので、1からポートフォリオを作りたいのであれば最低でも8〜12ヶ月は必要になります。

デザインは丁寧で地道な鍛錬の連続です。
デザインスキルを上げるには時間がかかることを認識しておいてください。

1. ギャラリーサイトから、シンプルなサイトを一つ選ぶ

クオリティの高いWebサイトを集めているギャラリーサイトから模写するサイトを選んでください。ただし、日本語サイト限定です。

最初は難しいので、アニメーションが少なめである程度コンテンツがあるシンプルなサイトを選びましょう。

ギャラリーサイトは以下は以下の2つを利用してください。
ギャラリーサイトはたくさんありますが、クオリティの低いサイトを掲載している場合があります。
以下のギャラリーサイトは現役のAD・デザイナーがセレクトしているので信頼できます。

2.選んだサイトをキャプチャする

Webに表示されているまま、完璧にキャプチャは難しいです。

一度下の記事を読んでからキャプチャしてみましょう。
正しいキャプチャとは、ブラウザで見ているWebサイトと全く同じサイズと見た目を、Figmaに表示することです。

3. Figmaでレイアウトグリッドを設定する

Figmaに模写したいWebサイトを正しく表示できたら、レイアウトグリッドを設定しましょう。

いま主流のレスポンシブWebデザインはグリッドレイアウトやブラウザの幅に応じて変化するリキッドレイアウトなど、さまざまな種類があります。

また、TOPエリアで画像を横幅いっぱいに使ってインパクトを出したいのでリキッドレイアウトを使い、中のコンテンツはグリッドブレイアウトにするというような組み合わせも可能です。

このようなサイトの場合は、いっったんコンテンツエリアを探してレイアウトグリッドを設定しましょう。以下の記事で、Figmaでのレイアウトグリッドの設定の仕方が詳しく書いています。

4. Figmaで参考サイトを模写する

ここから実際に模写していきます。できる限り完璧に模写してください。何度も言いますが、デザインの基本は整理整頓です。模写する時は以下を意識してください。

• 丁寧に模写してください。1pxにこだわりましょう。

• 横に並べて模写しましょう。重ねてトレースしないように。

• 画像などの要素もできる限り入れましょう。参考サイトから持ってこれないなら、同じような写真をフリー素材から持ってきましょう。

• フォントの文字間や行間も意識して模写しましょう。文字の細やかなデザインがWebのクオリティを左右します。

• セクションごとにレイヤーを整理しながら模写しましょう。後から、修正が楽になるため結果的に時間を節約できます。

模写の動画があるので参考にしてください。

さらに、なぜこのデザインなのか？を意識しながら模写しましょう。
余白のルール・ボタンのルール・フォントのルール・カラールールを調べてデザインガイドラインとしてまとめておきましょう。

デザインガイドラインはUIデザインだけではなく、統一性を出すためにWebデザインにも利用できます。

5. オリジナル化する

模写するだけでは、実際の業務で必要となる課題理解力・課題解決力のスキルが身に付きません。模写したサイトをオリジナル化することで、仮想的にですがWebサイト制作の経験ができます。

模写したサイトとまったく別のサイトを作れば、ポートフォリオに載せることもできます。模写したサイトのデザイン要素を変更しただけでは、ただのパクリなので注意してください。ルールを元に、レイアウトを含めて変更する必要があります。

サイトの概要を決める

まずは広告する商品・サービスを決めましょう。さらに、Webサイトの目的とターゲットを設定したら、サイトのコンテンツも決めておきましょう。ワイヤーフレームを作るのもいいです。

デザイン要素を変更する

タイトルやフォント・カラーなどを決めていきましょう。画像もフリーやオリジナルのものに差し替えましょう。

レイアウトを変更する

最後にレイアウトをオリジナル化しましょう。
FVやAboutなど各セクションごとにギャラリーサイトからさらに5〜10のサイトをピックアップして、移植したいセクションだけをまた模写しましょう。そして、最初に模写したサイトに移植します。移植する時に、グリッドを合わせるのがコツです。

そうすると、グリッドシステムは統一されるので違和感なく別のサイトに生まれ変わります。

といっても3年間メンターをやっていますが、最初はオリジナル化はなかなか難しいです。そのため、別のnoteでより詳しく説明しましたので参考にしてください。

Design Mentor (PRO)について

以上、1〜5のフローを何回も繰り返せばWebデザインのスキルはトップレベルに達します。ただ、やってみると思ったより難しいことが分かります。

どのサイトを模写するべきなのか？
Figmaの使い方はこれでいいのか？
グリッドシステムはこれであっているのか？
きちんと模写できているか？
オリジナル化でクオリティは下がっていないか？

そんな疑問に寄り添って、丁寧にフィードバックをすることが私がメンターとして行なっているベースになります。MENTAでデザイナーのメンターを3年前からしており、すでに200名を超えるメンティーさん契約いただいています。

その知見を活用して、新たに Design Mentor (PRO) をスタートしました。デザイナーに特化した、未経験者や初級デザイナー向けのメンターサービスです。これからも、デザインによって本質的な価値を提供できるデザイナーを増やしてきます。

DM(PRO)について詳しく知りたい方は以下をご覧ください。

追記

未経験・ジュニアデザイナーさんは、以下の記事も読むことをおすすめします！