Webデザインスキル上達には模写がおすすめ！初心者向けのやり方を解説
「Webデザインの学習として模写が有効な理由は？」
「具体的な模写のやり方を知りたい」
Webデザインスキルの上達には模写がおすすめだ、という話を聞いたものの、その理由がよくわからなかったり、実際どのように模写をすればいいのかわからなかったりする方も多いでしょう。
そこでこの記事では、なぜ模写をすることでWebデザインスキルが上がるのかについてや、具体的な模写のやり方、模写をする際の注意点などについて、初心者の方向けにわかりやすく解説していきます。
目次
Webデザインにおける模写とは？
Webデザインにおける模写とは、その名の通り、参考とするサイトを真似て写すことです。
「ただ真似をして写すだけで勉強になるのか」と疑問を感じる方もいるでしょう。
もちろん、何も考えずに手だけを動かして模写をしたのでは、効果が低くなってしまいます。
詳細については後述しますが、模写の際には、配色やレイアウトなどの意味を考えながら手を動かすことで、より高い学習効果を得ることができるのです。
Webデザインスキルを上げるために模写がおすすめな理由
Webデザインの勉強方法として模写がおすすめな理由には、以下のようなものがあります。
- 様々なWebデザインを知ることができる
- Webデザインをアウトプットできる
- 優れたWebデザインの共通点を把握できる
- デザインツールの使い方が身に付く
様々なWebデザインを知ることができる
模写をするためには、まず参考となる練習用サイトを探す必要があります。
なお、練習サイトを探す過程で、以下のような様々なサイトと出会うことでしょう。
- 高級感のあるデザイン
- UIの優れたデザイン
- トレンドになっているデザイン
このように、タイプの違ったあらゆるWebデザインを知ることで、「こんなこともできるのか」という発見や、「この部分はどうやって作成しているのだろう」という興味などが生まれるはずです。
Webデザイナーを目指す上で、このような機会を得ることは大変重要だと言えます。
いろいろなサイトを知ることで、Webデザインで具体的にどんなことが実現できるのかがわかり、学習モチベーションの向上につながるでしょう。
Webデザインをアウトプットできる
Webデザインに限らないことですが、学習は「インプット」のみで進めるべきではありません。
参考書やネットの記事などを読んで身に付けた知識だけでは不十分で、得た知識を活かした「アウトプット」の時間も必要です。
そういった意味でも、模写は最適だと言えるでしょう。
特に初心者の場合、ある程度までWebデザインに関する学習を進めても、いきなりゼロの状態からデザイン制作を行うことは決して簡単ではありません。
しかし、他サイトの模写ならば、基本的には「写すこと」がメインとなるため、ハードルも低くなるはずです。
参考サイトを見ながら実際に手を動かして模写を行うことで、「プロが制作するWebデザイン」を肌で感じることができるのも、模写がおすすめな理由の一つです。
優れたWebデザインの共通点を把握できる
自分の中で「優れている」「こんなサイトを作れるようになりたい」と感じるサイトの模写を継続していくと、良いWebデザインには共通点があるということが見えてくるはずです。
模写をすることによって、
- 配色
- レイアウト
- ボタンの配置
- フォントの選び方
- 余白の使い方
- 導線の設計
・・・などなど、プロが共通して行っていることがわかったり、Webデザインの引き出しが増えたりするでしょう。
こういったメリットがあることからも、模写は大変おすすめです。
デザインツールの使い方が身に付く
Webデザインの制作は、基本的にデザインツールを使って行われます。
例えば、以下のようなツールです。
- Illustrator
- Photoshop
- XD
- Figma
こうしたデザインツールを使ってWebデザインの模写を繰り返していくうちに、自然とツールの使い方についても詳しくなっていくでしょう。
【初心者向け】Webデザインの模写のやり方
初心者がWebデザインの模写をする際は、以下のステップで進めていきましょう。
- 模写すべき練習用のWebサイトを探す
- 模写するサイトを観察・分析する
- デザインツールを使って模写する
模写すべき練習用のWebサイトを探す
まずは、模写の練習用サイトを探しましょう。
一番最初の練習サイトは、「自分の好み」で選んでみてはいかがでしょうか。
技術的なことよりも、「こういうWebサイトを作ってみたい」という視点で練習サイトを探した方が、モチベーションにもなるはずです。
なお、練習サイトを探す際は「ギャラリーサイト」の活用がおすすめです。
ギャラリーサイトとは、各種Webサイトを収集して展示しているサイトのことで、Webデザインを模写するための練習サイトを探す際に大変役立ちます。
以下に、有名なギャラリーサイトをいくつか紹介しますので、参考にしてください。
| 模写の練習サイト探しに役立つギャラリーサイト | 特徴 |
| MUUUUU.ORG | プロのWebデザイナーが運営していることから、Webデザイン重視でサイトが収集されている。更新頻度も高く、5,000以上ものサイトの中から練習サイトを選べる。 |
| 81-web.com | Webデザインが優れている日本国内のサイトを多数掲載している。海外サイトを除外し、日本向けの良質なサイトのみを探したい時に最適。（冒頭の「81」は日本の国際電話番号を意味する） |
| 1GUU（イチグウ） | Webデザイナーの参考になるような、デザインのクオリティが高いサイトが収集されている。サムネイル画像で動きも確認できるため、求めているサイトを探しやすい。 |
| Web Design Clip | 日本国内のデザインはもちろん、海外、LP、スマホ版デザインといった各種デザインをタブで切り替えて確認できる。登録されているサイト数も多い。 |
| マネるデザイン研究所 | 「学ぶはまねぶ（真似ぶ）」をモットーに、Webデザインの参考になるサイトをピックアップし、参考にできる点や応用場面、懸念点についてまとめられている。 |
上記のようなギャラリーサイトに掲載されている中から、自分好みのサイトや、将来的に自分が作ってみたいと思えるようなデザインのサイトを探すとよいでしょう。
そして、模写の回数を重ねるごとに、好みではなく「質」を重視して練習サイトを選ぶようにしていくのがおすすめです。
模写するサイトを観察・分析する
模写する際は、ただ写しているだけでは学べる内容が薄まってしまいます。
そうではなく、模写の対象として選んだ練習サイトについて十分に観察し、「このWebサイトのどういった点が素晴らしいか」「参考にすべき部分はどのあたりか」といったことを意識しながら模写するようにしてください。
「配色がサイトの雰囲気とマッチしている」
「導線がわかりやすく自然とCTAに目が行く」
「文字サイズの使い分けが絶妙」
このように、分析すればするほど、多くの気づきを得ることができるでしょう。
デザインツールを使って模写する
練習サイトが決まり、分析も終わったら、いよいよ模写の開始です。
模写する際は、デザインツールを使用するようにしましょう。
ほとんどの現場において、何らかのデザインツールを使ってWebデザイン制作を行っているのが現状ですので、前述したような「Illustrator」や「XD」などのツールで模写を実践してください。
具体的な手順としては、まず練習サイトのスクリーンショットを撮り、デザインツールに取り込みます。
それから、取り込んだ画像を参考にしながら、分析した内容を意識しつつ模写していきましょう。
なお、一旦始めた模写は、最後までやり遂げるべきです。
途中で「やっぱりこのサイトは面倒くさいな」などの理由で模写をやめてしまうような中途半端なことをしてしまうともったいないのでご注意ください。
Webデザインの模写に最適な練習サイトを選ぶコツ
この項目では、「初心者」「中級者以上」に分けて、Webデザインの模写に使う練習サイトの選び方について解説していきます。
Webデザイン初心者が模写する場合
Webデザインに関する基本的な知識を習得し、いざ模写に入るという時は、自分好みであり、かつ難易度の低そうなサイトを練習用に選ぶことをおすすめします。
プロが制作したWebデザインを模写することは、決して簡単ではありません。
したがって、いきなりクオリティ重視で難しい練習サイトを選んでしまうと、途中で挫折してしまう要因になってしまいます。
学習は継続することが大事ですので、いきなりモチベーションが下がることのないよう、気軽に取り組めそうなサイトから入るのがよいでしょう。
特に、1ページ完結のランディングページは構成がシンプルであるケースが多いので、初心者が練習するには最適です。
Webデザイン中級者以上が模写する場合
ある程度模写を繰り返してきた中級者以上の方の場合は、徐々に模写の難易度を上げていくべきです。
ギャラリーサイトで難しそうなサイトを選ぶのもよいですが、大企業が提供するサービスサイトやブランドサイトに挑戦するのも有効です。
資本力のある大企業は、ホームページ制作にも多額の費用をかけられるため、それだけクオリティの高いデザインになっている可能性が高いでしょう。
初心者がWebデザインを模写する際の注意点
初心者がWebデザインの模写を行う時は、以下のような点に気を付けてください。
- いきなり難しいWebサイトに挑戦しない
- ただ模写するのではなく意味を考える
- オリジナルのデザインも追加してみる
- 著作権侵害に気を付ける
いきなり難しいWebサイトに挑戦しない
まず注意すべき点は、初心者の段階でいきなり難易度の高そうなサイトの模写に挑まない、ということです。
「難しいものに挑戦した方がスキルが上がるのではないか」
このように考える方もいるでしょう。
しかし、現段階の実力に見合わない練習サイトを選んでしまうと、内容が高度過ぎて理解できなかったり、難しすぎて途中で挫折したり、といったリスクが生まれます。
模写は、最後までやり切ることも重要ですので、初心者のうちは、「今の自分のスキルで対応できそうなサイト」を選ぶようにしてください。
ただ模写するのではなく意味を考える
Webデザインの模写は効果のある学習方法ですが、何も考えずにただ写しているだけでは学習効果が弱まります。
- 何を意図してこの色味にしているのか
- キャッチコピーの配置には何か理由があるのか
- 最初にユーザーの目に入れたい部分はどこなのか
上記のような観察・分析をしながら、デザインの意味を考えつつ模写することで、
上達スピードが早くなることでしょう。
オリジナルのデザインも追加してみる
模写が終わった後に「こうすればもっと良いデザインになるのでは？」といった自分なりのアイデアを出し、デザインの改良も試みるようにすると、さらに高い学習効果が得られるでしょう。
模写のみでも、実際に手を動かしているということでWebデザインのスキルアップには繋がるのですが、そこから一歩進み、自分なりの独自性を加えられるようになれば、発想力も鍛えられます。
学習効果を最大化させるためにも、写すだけで終わらせず、デザインの改良も行うようにしてください。
著作権侵害に気を付ける
どんなサイトであっても、「私的利用の範囲」でのみ模写をするのならば著作権的に問題ありません。
しかし、模写したサイトをWeb上に公開してしまうと、著作権侵害となる可能性が高いです。
「苦労して模写したサイトを誰かに見て欲しい」という一心から、軽い気持ちでSNSにアップロードしてしまうというケースもあるかもしれませんが、危険ですので絶対にやめましょう。
一旦模写したサイトのデザインを大きく変更した場合は、著作権侵害には当たらない場合もありますが、どこまで変更すれば問題ないのかについての線引きが曖昧なので、念のため模写サイトの公開は控えるべきです。
模写したサイトはポートフォリオに使える？
質の高いサイトの模写をした場合、ポートフォリオとして活用したくなる方もいるでしょう。
しかし、基本的に模写サイトをポートフォリオとして使うのは避けた方がよいです。
まず、ただ模写しただけのサイトではポートフォリオとして評価されることは考えにくいです。
たとえ自分なりの変更を加えたとしても、オリジナルなデザインでない以上、面接担当者から否定的に捉えられてしまうリスクもあるでしょう。
模写サイトもポートフォリオとして認めてくれる企業や面接担当者もいるかもしれませんが、賭けになってしまうため、ポートフォリオはオリジナルデザインのみで構成する方が安全です。
Webデザインの模写には「pochily」がおすすめ
Webデザインの模写には、様々なデザインパーツが必要になります。
初心者の段階では、練習のためにパーツを自作していくのも有効かもしれません。
しかし、すべてのパーツを自作していては時間効率が悪くなってしまうため、実務では既存のテンプレートやパーツをもとにして作成する、ということも多いです。
そこで、模写の際にも、徐々に既存の素材を活用するという方法も試してみることをおすすめします。
弊社では、IllustratorやPhotoshopで編集できるデザインパーツを豊富に用意した「pochily」というサービスを提供しております。
「pochily」を使うことで、Webデザインをゼロから作る必要がなくなるため、効率的に作業できるようになるでしょう。
まとめ
以上、Webデザインスキルを上達させるための模写のやり方や、模写がおすすめな理由、模写する際の注意点などについて解説してきました。
これまで紹介してきた通り、模写は立派な学習法の一つですので、基本スキルを身に付けた後には是非チャレンジしてみてはいかがでしょうか。
その際は、ただ写すだけでなく、練習サイトに対して「なぜこういうデザインになっているのか考える」「自分なりにデザイン変更を加えてみる」ということも忘れないでください。
