Webデザインは「模写」の練習がおすすめ！理由やコツを解説【初心者向け】

Webデザインの練習はたくさんあり、何からはじめればいいかわからないですよね。 そこでオススメなのは、「模写」という練習方法です。 模写をすれば、初心者の方でもWebデザインをいちから作れます。 本記事では模写とは何かということから、模写の進め方や注意点を解説します。 最後まで読めば模写をする意味がわかり、効率的にWebデザインを学ぶことができるので「Webデザインの練習はたくさんあってわからない」と悩んでいる方は、ぜひ参考にしてください。

Webデザインの模写とは？

模写とは、一般的に「あるものを写し取ること」を指します。 Webデザインを練習する方法として、有効的に用いられます。 参考になるWebサイトやバナーを探し、同じように作成していくことです。 「トレース」と言われることもあります。

Webデザイン初心者の練習での模写のメリット

ここからは、模写を練習するときにおすすめの方法を解説します。 具体的には以下のとおりです。

• デザインを作る感覚が身につく
• 引き出しが増やせる
• デザインの分析力がつく

それぞれ具体的にみていきましょう。

デザインを作る感覚が身につく

初心者の方にとっていちからWebデザインを作るのはむずかしいです。 教材や動画でWebデザインを学んでも、実際に活かせるスキルにはなりづらいです。 しかし、模写をすることで実際にWebデザインを作る練習ができます。 学んだ知識やスキルをアウトプットする意味として模写はいい練習方法です。

引き出しが増やせる

模写は他人が作ったWebデザインを見ながら作ります。 そのため、普段自分が使わないテクニックや知識を学べます。 他の人のデザインをインプットしておくことで、自分が作るときの参考にできるのが模写のメリットです。

デザインの分析力がつく

模写はWebサイトの作り方を考えることができます。 とくに以下の点をよく分析するのがおすすめです。

• 色や比率
• 要素の余白
• フォントの種類や大きさ
• ボタンのデザイン
• ページの構成
• 導線設計

比率や要素の余白はWebデザインの完成度に大きく影響するので、言語化できるまで分析するといいでしょう。

Webデザインを模写するやり方と具体的なコツ

Webデザインを模写するときには以下のステップで作っていくのがおすすめです。

1. モチーフにするデザインを探す
2. 全体を観察してから模写をする
3. ツールを使ってコードを読む

今回はWebサイトを模写する場合に焦点を当てていきます。 詳しくみていきましょう。

モチーフにするデザインを探す

モチーフにするデザインを探していきましょう。 デザインを探すなら、以下のサイトがオススメです。

• バナーまとめ
• Banner.com
• Pinterest

バナー画像であれば「バナーまとめ」や「Banner.com」がオススメです。 作品の数が豊富なので、使用したいデザインが見つかるでしょう。 Webサイトの模写を探す際には参考になるのではないでしょうか。

模写をする前に全体を観察する

Webデザインの全体を観察してから、模写を開始しましょう。 模写の最大の目的は、気づきを得ることだからです。 ツールを使って、ただコードをマネして書き始めても効果は薄くなってしまいます。 デベロッパーツールの情報と合わせて全体を観察することでの発見例として

• 「このデザインの幅はこのくらいだから綺麗に見えるのか」
• 「文字のサイズはこのくらいが見やすい」

などの様々な気付きが挙げられるでしょう。 そうした発見をしてから模写を開始すると、いいデザインの知識やテクニックが自分の中にストックしていくことができます。

ツールを使ってコードを読みながら模写をする

参考にするデザインを見つけたら、ツールを使ってコードを見てみてください。 HTMLやCSSがどのように使用されているかがわかります。 コードを確認するときはGoogleChromeのデベロッパーツールを使うのがおすすめです。 デベロッパーツールとは、Googleに標準搭載されている開発者向けの検証ツールです。

• Windows版ならCtrl＋Shift＋i
• Mac os版なら⌘＋option＋i

のショートカットキーで出現します。 そして一番左上のセレクトモードを選択し、情報が見たいページにカーソルを合わせるとHTMLやCSSの情報を確認できます。 模写をしているときはコードを確認するのは必須なので、デベロッパーツールの使い方は覚えておきましょう。 なぜそのコードを使用しているのか理由を考えてみると、いい模写ができます。

模写での注意点

初心者の方に模写はおすすめの練習方法です。 しかし、模写ばかりやってしまったりいきなりむずかしいサイトを選んでしまったりすると、かえって逆効果です。 ここからは、模写をするときの注意点を解説します。 ぜひ参考にしてみてください。

いきなり難しい模写はしない

いきなりむずかしい模写をするのはやめておきましょう。 コードやデザインが複雑でわからなくなってしまい、挫折してしまう可能性があるからです。 とくにランディングページやホームページの模写はおすすめしません。 コードが長かったりページの数が多かったりするので、初心者の方には難しく感じます。 グラフィックデザインを模写したい方は、簡単なバナーやアイコンのデザインをマネするところからはじめてみてください。

コピーをするだけではもったいない

モチーフとなるWebデザインをただマネするだけでは価値のある模写になりません。 模写をするときに「なぜそうしたのか」を考えることで、自分の知識が深まります。 ボタンの配置やサイトの色などを「なぜそうしたのか」を考える習慣がデザインスキルを伸ばします。 模写をしながら参考になる部分をメモしたり、なぜそうなっているかわからない部分は調べたりしてみましょう。 コードをマネするだけで作るのはおすすめしません！

模写のサイトが正解だと思わない

コードやデザインに正解はありません。 模写をしているWebデザインが正解だと思ってしまうと、自分が作るときの作品の視野が狭まってしまいます。 模写をしているデザインが正解だとは思わずに参考にするくらいな気持ちでいて、自分で作品を作るときのひとつの判断材料にしましょう。

模写以外にWebデザインが上達する練習は？

「模写以外でWebデザインが上達する方法を知りたい」と考えている方もいるでしょう。 ここからは、模写以外でWebデザインのスキルや知識が上がる方法を解説します。 模写をやってきたけど他の練習方法も試してみたいと考えている方は、ぜひ参考にしてみてください。

デザインの情報を常にインプット

デザインの情報を常にインプットしておくと、アウトプットをするときにイメージが湧きやすくなります。 例として下記に挙げてみました。

• 気になる雑誌の一部分や電車の広告を見つけたら写真を撮って残しておく
• 書籍や教材から常にインプットしておく
• 専門学校に通って学ぶ直すことでスキルをブラッシュアップする

Webデザインの世界はトレンドがあるので、学び続けておくことで最新の情報をいち早くキャッチできます。 気になったデザインや目にとまったデザインはとにかくインプットしておくことがおすすめです。

デザインの意図を考える

デザインの意図を考えるようにすると、上達が早くなります。 Webデザインを見て「なぜこのようなデザインにしたのだろう」と考えてみると、そのデザインの本質を見抜けるからです。 「ボタンをあの色にしたのはユーザーの目にとまりやすいから」や「メニューバーをあの位置だから見やすい」などとパーツごとで深掘りするといいでしょう。 本質がわかると、自分が制作するときにもすぐに流用しやすくなります。 またそこに自分のオリジナリティを加えることで、新しいデザインが生まれることもあります。 なぜその色なのか、なぜそこにボタンを設置したのかなどを深く考えてみてください。

デザイン会社に就職する

Webデザインのスキルを高めるには、デザイン会社に勤めるのも手段のひとつです。 小さな制作会社の場合、コーディングからグラフィックデザインまで任せられることもあるので、幅広いスキルを身につけられるでしょう。 HTMLやCSSのようなコーディングだけでなく、PhotoshopやIllustratorといったグラフィックデザインを学べます。 また会社では、常に上司やクライアントからフィードバックをもらえます。 指摘を受けることで自分には見えていなかった点に気づき、スキルや知識をブラッシュアップしていけます。

模写コーティングにおすすめの練習サイト【レベル別】

模写コーティングをする際におすすめなサイトは多くあります。 「どのサイトから挑戦すればいいか分からない…」という方に、難易度別におすすめなサイトをご紹介していきます。 ぜひ、参考にしてみてください。

【初心者向け】簡単なHTMLとCSSの模写サイト

初心者でもHTML構成を考えやすいようになっています。

• ポートフォリオサイト／LP
• ストアサイト（和菓子）／縦書きレイアウト
• PAS-POL
• ECサイト／商品ページ

シンプルさが特徴であり、繰り返し使われる要素も多いため、コーティングに費やす時間の短縮にもなるものが多いです。

【中級者向け】実務を想定した模写サイト

余白を多く使われていることが特徴のものが多いです。 ECサイトとしては商品とサイトの印象を繋ぐものになるため、「柔らかい雰囲気」を作り出すための工夫が詰まっています。

• ブログサイト／2カラム
• ストアサイト（インテリア）／グリッドレイアウト
• KieKa/ドライフラワーECサイト
• wonde/フレグランスECサイト

シンプルな作りであるが、ボタンのホバー時や画像に動きがあるなど、作りこまれているものがあるため、中級者向けと言えるでしょう。

【上級者】jQueryを使った模写サイト

今時のデザインになっており、複雑な配置や動きを取り入れるためにflexboxやoverflowプロパティを使用しています。

• テックキャンプ/大手プログラミングスクール
• ISARA
• O-DRIVE/教育内容発信メディア

ボリューム感がたっぷりなため、初心者には手の出しにくいものになっていますが、実績として公開可能なものもあります。

Webデザインのスキルを高めるには効果的な模写をしよう

模写をすれば初心者の方でもWebデザインの作り方や、テクニックを学ぶことができます。 しかし、模写をするだけでは上達しません。 模写をする目的やデザインの意図を汲み取りながら、練習するとスキルが上がっていくでしょう。 ぜひ、参考にしてみてください。