WEBデザインの練習「WEBデザインの模写」の正しいやり方と手順！

2019年6月2日

初心者WEBデザイナーが、WEBデザインの模写で練習したいんだけど、WEBデザインの模写ってどうやってやるのが正しいんだ！？効率の良い練習方法が知りたい！

WEBデザイン初心者のデザイン練習に欠かせないのが「WEBデザインの模写」。しかし多くの人はWEBデザインの模写のやり方を間違っているだ。

今回はこんな疑問に、私が約20年のWEBデザイン業務において学んで来たWEBデザインについて、正しいWEBデザインの模写のやり方と「具体的な模写の手順」を解説するので、効率の良いWEBデザインの練習方法を学んでいこう！

WEBデザインの練習の為の参考デザインを探す

WEBデザインの模写をする前に、模写する対象の参考デザインが必要だ。まずは効率的に参考デザインを探すために、WEBデザインのまとめサイト、いわゆる「WEBデザインギャラリーサイト」を使って探してみよう！

参考になるギャラリーサイトはこちらの記事にまとめているで、こちらの記事から探してみよう！

▶ WEBデザイナーが知らないと恥ずかしい！WEBデザイン参考ギャラリーサイト

「SANKOU!」Webデザインの参考サイト集https://sankoudesign.com/「パソコン版」「スマ…

WEBデザインの練習や勉強は2種類ある

ひと口にWEBデザインの練習や勉強といっても、大きく分けて2種類の方向性がある。

作るWEBサイトのジャンルを問わず、どうすれば「美しく・見やすく・カッコよく見えるデザイン」になるか？
作るWEBサイトのジャンルを意識して、どうすれば「使いやすく・効果的で・ターゲットに刺さるデザイン」が出来るか？

つまり「単純に見た目を追求」する勉強と「論理的にデザインを考える」勉強の２通りあるということだ。

この2つの順番としては、まず（２）を考えてから、その上で（１）を考えてデザインする。

しかし、初心者のうちは２つを切り離して別々に考えてもいいだろう。

まず最初は(1)の見た目にキレイで美しいデザイン練習をして、デザインを楽しむことから初めて、そのあと(2)の効果的なデザインについて考えながらデザインの練習をするという方法もありなのではないかと思う。

どんなデザインテイストの模写をすれば良いのか？

最初にどんなテイストのデザインの模写をはじめればよいかというと、その人のレベルにもよるが、初心者であれば、自分が好きなテイストや得意とするデザインテイストの参考サイトを探して、模写してみよう！

なにより自分が好きで得意なデザインスキルを伸ばして「自分のデザインの強みを作る」ことが先決だからだ！いわゆるストロングポイントを強化するというやつだ。

ある程度自分な得意なデザインに自信が出てきてから「苦手なデザインテイスト」の練習をするといいだろう。最初から自分が苦手なデザインテイストの練習をしても気分が乗らない上、挫折してしまうからだ。

まずはデザインすることを楽しみながら「デザインが上達する喜びを味合う」のが先決である！

WEBデザインを模写する手順

それでは実際に「模写する手順」を解説していこう！以降に説明する順番には意味があるので、意識して読み進めてみよう。

ステップ１：模写するWEBデザインの素材を準備する

まずは模写するデザインの「素材」を準備しよう。素材というのは、写真や図のやテキストの事。

模写するデザインのサイト画面を開き、必要な写真画像などを右クリックして「名前をつけて画像を保存」という感じで画像をすべてダウンロードして用意する。

どうしてもダウンロードできない場合は「画面キャプチャ」して必要な画像だけを切り抜いて用意しよう。

テキストもコピーして、テキストエディタなどに貼り付けて保存しておこう。

ステップ２：模写するWEBデザインの構成要素を紙に書き写す

模写するWEBデザインの構成要素、つまり「写真がこの位置にあって、見出しがこれくらいの大きさで…」といった感じでざっくりでいいので構成要素を紙に書き写そう。いわゆるワイヤーフレームのようなものを作るのだ。

何のために書き写すか？

なぜ紙に書き写すか結論から言うと、実際に模写する時には「模写するサイトをじっくり観察して自分の頭の中に記憶した上で、模写するサイトを閉じて、一度自分でデザインしてみる」という方法をとるからだ。

まずは正解のデザインを記憶して、それを閉じてた上で「覚えた記憶と自分の美的感性だけで」手書きで書いたワイヤーフレームのレイアウトを見ながら、Photoshopを使ってレイアウトしてみるのだ。

そして出来上がったデザインと、模写する対象の本物のデザインを見比べて、「自分の美的感性と、本物のデザインのどこが違うか？」を答え合わせするという方法なのだ。

ステップ３：模写するWEBデザインをじっくり観察して記憶する

つぎに、模写するデザインをじっくり観察しよう！前述したように、実際にデザインする際は、模写するサイトを見ずに自分でデザインするので、しっかりと観察しなければならない！

そこで、デザインを観察する際に「常に注目して意識して考えてほしい」ことがいくつかある。

デザインを観察しながら意識すべき事！

色の組み合わせ
文字の大きさや行間
フォントの種類や効果的なフォント選び
要素と要素の余白
写真の選定やどんな写真が美しいか
レイアウト（配置）
自分のデザインと何が違うか

これらの要素について、ひとつずつ触れていこう！

色の組み合わせ

デザインを模写する時に見てほしいのが、どんな色を使って、どんな色の組み合わせが美しいのかを、自分のあたまで考えて覚えるという事だ。

また、WEBサイトの内容や、そのサイトを訪れるユーザーの年齢層や性別によっても色を使い分ける必要があるので、ユーザーをしっかり意識しよう！

文字の大きさや行間

どのくらいの文字の大きさが見やすいのか、どのくらいの行間を空けると美しく見えるのか？を自分が選んだ参考サイトを意識して見てみよう！文字の大きさや行間も、固定した正解があるわけではない。

文字が大見出しなのか、小見出しなのか、本文なのかによっても変わってくれば、文章の長さや、WEBサイトの種類や、ユーザーの年齢などによっても変わってくる。

フォントの種類や効果的なフォント選び

参考サイトに使われているフォントはどんなフォントか？どんなフォントを使えばキレイに見えるか？を意識しよう！

カワイく見えるフォントや、かっこいいフォント、日本語向けのフォントや、英語向けのフォントなど、フォントの選定で、デザインの印象が大きく変わるのは間違いない！

要素と要素の余白

デザインをする上で「要素同士の余白」を意識する事は、かなり重要である！

余白を空ける事で、その要素を目立たせる事もできれば、余計な装飾を省く事もできる。究極を言えば、余計な装飾は一切なくして、余白だけで美しいデザインができてしまうのだ。

どのくらい余白をあければキレイに見えるかを、意識しながらデザインの模写をしよう！

写真の選定やどんな写真が美しいか

写真の選定はWEBデザインの印象をもっとも変える要素といっても過言ではない！かっこいいデザインや美しいデザインは、必ずといっていいほど、写真のクオリティが高い！

そして単純に良い写真を選定するだけなく、その写真をさらに加工して、そのWEBにぴったり合うようにしなければならない。

参考となるデザインがどんな写真をどんなトリミング（切り取り方）の仕方で使っているかに注目して模写しよう！

こちらの記事がそのあたりを深掘りした内容もあるので、一度読んでみよう

▶ WEBデザインで「カッコいいキービジュアル」の作り方

WEBデザインがなかなかいい感じにデザインできない！まずは一番目立つキービジュアルを、カッコ良く作る方法が知りたい！キ…

無料の写真素材

高品質な写真素材が必要な場合は、無料の写真素材サイトから探さなければならないので、オススメのサイトを紹介しておこう！会員登録不要で、商用利用OKの「写真・イラスト・アイコン」の３つのジャンルでピックアップした無料素材サイトのオススメ記事をどうぞ↓

▶ 【2023年】無料・商用利用可｢写真・イラスト・アイコン｣素材おすすめサイト

WEBデザインに使える、「商用利用できて無料な」素材サイトを沢山知りたい！WEBデザイナーに不可欠な「素材データ」。有…

レイアウト（配置）

WEBデザインのレイアウトで意識する事は、どの位置に何が置かれているか。シンプルなレイアウトもあれば、大胆なレイアウトもある。

自分が選んだ参考デザインの「要素の配置」がどういう意図でそこに置かれているのか、どんな大きさで置かれているのかを意識してみよう。

目立たせる必要があるものや、あえて必要以上に大きくしているものなど、デザイナーの意図が見えてくれば成長した証といえるだろう！

自分のデザインと何が違うか？

自分の過去のイケてないデザインと比較して考える事も重要な事だ。

これまで触れた内容について、常に「自分のデザインと何が違うか？」という目線で、参考サイトを見ていかなければならない。

その「違いを見つける事」がWEBデザインを模写する「最大の目的」なのだ！

ステップ４：模写するデザインを閉じて、記憶と自分の感性だけでデザインする

これまでに準備した、写真素材・テキスト素材・手書きのワイヤーフレーム、そしてじっくり観察した記憶と自分の感性をフル動員して、同じデザインを作ってみよう！

タイトル文字はどれくらいの大きさだったか？テキストの行間はどれくらいだったか？写真と文字の余白はどれくらい空いていたか？この背景はどんな色だったか？など記憶を元に、覚えていない部分は、自分の美的感性を入れながら調整してみよう！

ステップ５：正解のデザインと自分のデザインを比べて違いを分析する

ここが一番重要なステップ！自分のデザインと、正解のデザインがどこが違うか？なぜ自分のデザインより、正解のデザインの方が綺麗に見えるかを分析するのだ！

この分析こそが、あなたのデザインの財産となり、引き出しとなるのだ。

もちろん初心者の場合は、本物のデザインと随分かけ離れたデザインになるかもしれない。でもそこが重要であり、正解のデザインと何が違うかを知る事が、財産となるのだから。

今後のデザインに取り入れてみる

模写が終わったら、自分のデザインとの違いについて、気づいた点を忘れないようにメモした上で、新たなデザインを作る際に、実際に取り入れてみよう！

デザインの模写は、あくまでインプット作業なので、「新しいデザインで、そのきいた気づいた点を試すアウトプット作業」が絶対に必要なのだ。

つまりWEBデザインの模写の意味とは、模写をしながら「自分のデザインと何が違うかに気づく事」であり、それを違うデザインで実践して初めて身につくのである！

模写しながら自分の作品を作りポートフォリオを完成させよう！

WEBデザイン学習中の方は、模写しながら自分のデザイン技術を上げていきつつ、腕試しに架空のサイトを作りながら自分のポートフォリオを作成していこう！

ポートフォリオとは作品集の事を指し、WEBデザイナーとして就職したりフリーランスとして仕事をゲットするのであれば、かならず自分の「ポートフォリオ」が必要になる！

ポートフォリオをどのように作れば良いか確認しておきたい人はこちらの記事を参考にしておこう！

▶ WEBデザイナーの「超」効果的なポートフォリオの作り方！

WEBデザイナーの効果的なポートフォリオの作り方や掲載すべき内容知りたい！フリーランスWEBデザイナーの「作品や過去の…

最短でWEBデザイナーになる為の勉強方法

もしまだ「WEBデザイナーの仕事」に就いていないという人は、まずは基本の勉強から初めよう。

独学で勉強したい人

ある程度時間に余裕がある人は独学で勉強を初めるのもアリだろう。ただ闇雲に独学してもWEBデザイナーになるのは難しい。効率的に、最短の方法でWEBデザイナーになりたいという人は、こちらの記事あわせて読んでみてほしい。

▶ 独学でWEBデザインの効率的勉強方法！初心者は何からやるべき？

WEBデザイナーになりたいけど、何から勉強すればいいの？できるだけ効率よく勉強したいんだけど…。WEBデザイナーは手…

独学ではなくスクールで学びたい人

独学でのWEBデザイン学習は「時間がかかって効率が悪い！」というデメリットもある。

確かに、自分ひとりで調べて学習をすすめるのは、効率も悪く間違った情報で学んでしまったり、疑問点がわからず挫折してしまう人も多い。そんな方には手っ取り早くWEBデザインスクールで学習するのが、正直1番効率が良く長い目で見るとコスパも良い。

WEBデザインの最適なスクールは「人によって違う！」

「オススメはどのスクール？」と良く聞かれるのだが、実際に良いスクールはいくつかあるのだが、たった１つのおすすめスクールというのがあるのではなく、その人によって最適なスクールが違うという事。

スクール選びで重要なポイントは４つあり

スクール選びのポイント

学習スタイルが自分に合っている
挫折しにくい工夫のあるサービス
お手頃な学習料金
講師に質問しやすい環境

これらの要素を含んだ本当に良いスクールは限られているので、僕が実際に受講してわかった事やプロならでは目線で取材してまとめた記事があるので、自分に合ったスクールを選びたい方は参考にしてみてほしい↓

▶ 現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実…

「WEBデザインの模写」の正しいやり方とコツのまとめ

デザインの模写で気づいた「自分のデザインとの違い」を意識して、自分のデザインの引き出しに入れる。

引き出しに入れるだけでは忘れてしまうので、アウトプットとして、新しいデザインでその内容を試す！というのが、WEBデザインの正しいやり方でありコツなのだ。

※当記事の掲載内容は執筆現在の個人の見解・調査によるもので、動作・サービス等を保証するものではありません。最新情報は各公式サイトでご確認頂き、購入・契約・データ作成等はご自身の判断・責任でお願いします。免責事項

インスタグラムのデザインを勝手にリニューアルしてみた。

WEBデザインの練習・勉強をしながら「お金までもらえる」超おすすめの学習方法！

｢バナーデザインのコツ｣を作りながら解説！LIGさんと対決！？

WEBディレクター様、ワイヤーフレーム上でデザインをしないで下さい！

WEBデザインツールの比較！初心者におすすめは？Figma Photoshop Xd Illustrator

【現役プロ取材】SHElikes(シーライクス)評判･料金･無料体験の内容は？

WEBデザインの「高品質な写真素材」の集め方と著作権について

ワンランク上の「シンプルでカッコいいWEBデザイン」の作り方！

WEBデザインを「ネットで一人」で学習するメリットとデメリット

独学でWEBデザインの効率的勉強方法！初心者は何からやるべき？

デイトラの評判は？詳細内容とメリット・デメリットを解説

【2023年】無料・商用利用可｢写真・イラスト・アイコン｣素材おすすめサイト

この記事を書いた人

WEBデザイン・グラフィックデザイン歴：約18年、HTMLコーディング、jquery、wordpress、イラストなど本業とし、WEBデザインコンサル・プログラミング・ライティング等にも勤しんでいます

プロフィールはこちら

WEBデザイン作品集はこちら

Twitter @stand_4u_ をフォロー

サイト内検索

[ー]