WEBデザイン

WEBデザインの最強の学習方法である模写のやり方とは?ポイントと仕方を解説

WEBデザイン

「WEBデザインの効率的な学習方法を教えて!」

「WEBデザイン模写ってめんどくさいからやらなくてもいい?」

という方向けに、この記事ではWEBデザイナーのスキル向上に、WEBデザイン模写をおすすめする理由や、模写する際に大切なポイント、模写を行う具体的な手順を解説しています。

WEBデザイナーになるために覚えなければならないことは非常に多く、本や動画を見て学習しても、いざ実務でデザインを作成する際に、手が動かず何も覚えられていないことがよくあります。

そうならないためにも、実際に活用されているランディングページやWebサイトのデザイン模写を行ってみてください。

なるべく早くWEBデザイナーになりたい方や、実務で活かせるスキルを身につけたい方必見です!

WEBデザイナーは模写をしよう

結論、全てのWEBデザイナーの方に、模写はおすすめできます

WEBデザイナーの勉強や仕事は、学生のテストのようにカンニングを行ってはいけない決まりはなく、模写を行って、優れたWEBデザインからスキルを盗むことが大切です。

成果の出せる優れたWEBデザインは、完全にオリジナルで作成するのではなく、様々なページのデザインから良い部分を盗んで作られています。

なので、WEBデザイナーを目指している方は、基本的なデザイン知識と、WEBデザインツールの使い方を身につけたら、積極的に模写にチャレンジしていきましょう。

模写を行って、WEBデザインを完全にコピーすれば、ひとつのページを作成する大変さを知ることができ、多くの実践的なスキルを習得できるはずです。

WEBデザインを模写するメリット

WEBデザイナーの方がサイトデザイン模写を行うメリットは次の通りです。

  1. WEBデザインの基本を理解できる
  2. 優れたデザインから学べる
  3. 自分の引き出しが増える

模写を行わなくても、WEBデザインスキルを向上させることは可能ですが、模写を行った場合と比べると、スキルの向上スピードが段違いで異なります。

WEBデザインは本を読んで学習したり、動画講義を受けても、実際に手を動かしてデザインを作成しなければスキルは向上しません。

WEBデザイン模写を行えば、教材のデザインを作成するよりも実際に活用されているデザインを作ることができるので、より実践的なスキルを身につけることができます。

他にも以下のメリットがあるので、まだWEBデザイン模写を行っていない方は挑戦してみてください。

WEBデザインの基本を理解できる

WEBデザイン模写を行えば、WEBデザインの基本を理解できます。

実際にランディングページやWebサイトで活用されているデザインの模写を行うので、本などで学習したWEBデザインの基本知識が、活用されている事例を確認することができます。

デザイン基礎やWEBデザインの基本は、体系的にまとめられている本で学習するのがおすすめですが、実例を見ないと活きた知識として定着させることが難しいです。

しかし、WEBデザイン模写を行うことで、本で学習した基礎知識を実体験として身をもって理解することができます。

WEBデザインは基礎知識の理解が非常に大切で、どんな業種業界のデザインを行う場合でも、基本を元にデザインを作成して、部分的にアレンジや修正を行います。

なので、WEBデザインの基本を学習したけど、イマイチ身になっている実感がない方は、WEBデザイン模写を何サイトか行って、共通する基本的な要素を探してみることをおすすめします。

優れたデザインから学べる

WEBデザイン模写を行えば、優れたデザインから様々なテクニックを学ぶことができます。

このメリットは非常に大きく、大企業のランディングページデザインを模写する場合は、プロのWEBデザイナーの技術を盗むことができます。

どんな点が優れているか?優れたデザインにはどんな共通点があるのか?を学べば、デザインスキルを大きく向上させることが可能です。

また、WEBデザイン模写を行う手順で詳しく解説しますが、デザイン模写ではなるべく完成形と同じデザインになるように、隅々まで観察して作成します。

その過程で自然と優れたデザインの要素を発見できるので、気づいた要素は忘れないようにまとめておくことをおすすめします。

WEBデザインの学習を始めたばかりの方は、ランディングページやWebサイトを見る中で、かっこいい・おしゃれと感じるページや、実際に商品を購入したページなどをブックマークしておいて、WEBデザイン模写を行う際の材料にしましょう。

自分の引き出しが増える

最後のメリットは、自分の引き出しを増やせることです。

WEBデザイナーとして仕事を行う中で、大きな武器になるのは高いWEBデザイン作成スキルではなく、引き出しの多さです。

引き出しの多いWEBデザイナーの方は、クライアントに魅力的な提案を行うことができ、成果の出せるデザインを作成できたり、ABテストを効果的に行うことができます。

WEBデザイン模写を行えば、他の方が作成したデザインの作成方法を学ぶことができるので、作れるデザインの引き出しを増やすことが可能です。

なので、WEBデザイン模写は初心者の方だけでなく、すでに実務経験のある方にも、引き出しを増やすためにおすすめです。

WEBデザイン模写で大切なポイント

ではWEBデザイン模写を行う具体的な手順を解説する前に、模写を行う前に知っておくべき大切なポイントを紹介します。

  • 余白
  • フォントサイズや行間
  • 配色

模写を行う際は、この3つの要素を特に確認して、再現できるように作成することが大切です。

余白

WEBデザイン模写を行う際は、各要素に注目することも大切ですが、同時に余白にも注目しましょう。

一般的におしゃれといわれるデザインのサイトは、余白を大きく取っていることが多く、サイトの情報量によって余白を調節しています。

余白の取り方はWEBデザイン基礎で学習したと思いますが、模写で実際にデザインを真似して作成すると、余白の重要性をより実感すると思います。

コンテンツ同士の余白や、コンテンツ内の画像やテキストの余白など、余白の大きさを変更するだけで、コンテンツの見え方が大きく変わるので、模写で習得していきましょう。

フォントサイズや行間

WEBデザイン模写を行わなければ、あまり気が付かないポイントですが、フォントサイズや行間はWEBデザインの非常に大切な要素です。

模写を行うことで、細かいフォントサイズや行間の違いを知ることができ、実務で活用できるスキルを向上できます。

例えば、ファーストビューやメインコンテンツ、ヘッダー、フッターではフォントサイズや行間が異なり、行間は1px異なるだけで印象がガラッと変わったりします。

シンプルなデザインでも、フォントサイズや行間を変えるだけで、各要素の配置が見やすく、内容を理解しやすくなります。

デザインスキルの高い人ほど、フォントサイズと行間を意識しているので、優れたデザインを模写してスキルを盗めるようにしましょう。

配色

WEBデザイン模写を行って、配色も忠実に再現することで、優れたデザインのサイトではどんな配色が使われているのかを理解できます。

初心者の方と上級者の方の違いは、配色として大きく表れて、初心者の方は好ましくない配色でデザインを作成してしまったり、カラーが持つ心理的な意味を理解せずに適当に配色を選んでしまったりします。

なので、複数ジャンルのWEBデザイン模写を行って、ターゲットユーザーや商品・ブランドイメージによって配色をどのように使い分けているのかを学びましょう。

WEBデザイン模写を行う手順

最後に、WEBデザイン模写を行う具体的な手順を解説します。

解説したWEBデザイン模写のポイントを意識しながら、以下の手順で模写を行ってみてください。

  • 模写するサイトを探す
  • WEBサイトのスクリーンショットを保存する
  • デザインのポイントを把握する
  • ワイヤーフレームを作成する
  • WEBデザインツールで模写する
  • デザインをカスタマイズする

模写するサイトを探す

まずは模写するサイトを探します。

勉強にならないサイトを選んでも時間を無駄にしてしまうので、日頃から参考になると思うデザインをブックマークして保存しておいたり、WEBデザインのギャラリーサイトを参考にしてください。

なるべく実務で作成する可能性の高い業種業界のデザインを探して、複数ページのWebサイトよりも、1ページ完結型のランディングページのデザイン模写から始めることをおすすめします。

ランディングページのWebデザインギャラリーが豊富にまとめられていて参考になるサイトは次の通りです。

この中から、あまり珍しい商品やサービスではなく、有名であなたも知っているページを作成するのが勉強になるでしょう。

WEBサイトのスクリーンショットを保存する

模写するページを決定したら、ページ全体のスクリーンショットを保存します。

パソコンの既存のスクリーンショット機能で保存もできますが、ページ全体の保存は行えないので、Chromeの拡張機能をインストールして活用しましょう。

おすすめは「Full Page Screen Capture」です。

デザインのポイントを把握する

WEBサイトのスクリーンショットを保存したら、すぐにデザイン模写に入る前に、デザインのポイントを把握することが大切です。

この工程で「このページにはヘッダーがあり、ファーストビューがあり、フッターがあり」とデザインのポイントを大まかに把握しておきましょう。

そうすることで、デザイン模写を効率良く行えるようになり、自分のデザインスキルを向上させることにも繋がります。

また、1ページ完結型のランディングページの場合は、ファーストビューからフッターまでどんな流れでユーザーに情報を伝えて、どうやって誘導しているのかも分析してください。

コンバージョンボタンの配置や配色、大きさ、マイクロコピーの文言など、あらゆる要素が成果の出るページに関係しているので、細かくチェックしましょう。

ワイヤーフレームを作成する

ワイヤーフレームはサイトの骨格のことで、スクリーンショットで保存した内容を元に、同じ配置のワイヤーフレームを作成します。

いきなりデザインの作成に入るのではなく、ワイヤーフレームを作成することで、各コンテンツの配置パターンや大きさなどを理解できるようになります。

例えばコンバージョンボタン周辺には余白を作って、クリックしやすくしていたり、ヘッダーメニューは左側からクリックしてもらいたい要素を設置しているなどです。

一概には言えませんが、デザイン模写を行ってワイヤーフレームを作成することで、各コンテンツの配置を俯瞰して見ることができます。

WEBデザインツールで模写する

ワイヤーフレームを作成したらいよいよWEBデザインツールを活用して、模写を行います。

スクリーンショットで保存した画像と自分のキャンバスサイズを並べて見比べながら作成するのがおすすめです。

使用されている写真はサイトから保存して使用しても構いませんが、基本的に全ての項目を忠実に再現します。

影やノイズなど、しっかり注目しなければ気が付かない部分まで注意して観察し、1pxもズレることなく模写を行いましょう。

WEBデザイン模写は実務ではないので、妥協しようと思えばいくらでも妥協できてしまいます。

しかし「1pxくらい良いか」という気持ちで行ってしまうと、せっかくワイヤーフレームまで作成して模写を行っても自分のスキルとして定着しないので、諦めずに最後まで作成しましょう。

デザインをカスタマイズする

模写が完成したら、更なるスキルアップのために、デザインを自分なりにカスタマイズしてみましょう。

例えばデザインの配色を変更してみたり、レイアウトを部分的に変更するなどです。

思いきって別商品かつ全く別のターゲットユーザーを想定して、デザインをカスタマイズしてみると良いでしょう。

一度模写したデザインをカスタマイズするのは躊躇するかもしれませんが、自分なりに考えて変更を加えることで実践的なスキルが向上するので、模写の完成まで行えた方は挑戦してみてください。

まとめ

今回はWEBデザイナーの方のスキルアップに、WEBデザイン模写をおすすめする理由と、模写する際に知っておくべき大切なポイント、実際に模写する具体的な手順を解説しました。

WEBデザイナーは模写をすることで、実践的なスキルを高めることができ、デザインの引き出しを増やすことができます。

現在WEBデザイナーを目指して勉強を行っている方も、早く仕事を行えるようになるためには、実際に手を動かしてWEBデザインを作成する模写を行うのが最も効率的です。

この記事で解説した、大切なポイントと手順を参考にして、WEBデザイン模写に挑戦してみてください。

ABOUT ME
小山温
「未経験から2週間でWEBデザイナーへ」 がモットーの“週末WEBデザイナー”。 未経験からフリーランスのデザイナーになり、 現在も現役のデザイナーとして 企業や本著者、投資家、士業、スクール、 有名Youtuber関連のWEB、紙のデザインに携わる。 デザイナーとして活動を始めて7年、 クライアントからのリピート率は高く、 5年ほど新規集客なし、 紹介とリピートだけでビジネスを成立。 また、自由を確保するために効率化しつつも、 社員ゼロで毎年8桁の売上を作っている。
【無料LINE講座】週末WEBデザイナー