WEBデザインの勉強をしてみたいけど、そもそも何から勉強したら良いのかわからない！という方は多いでしょう。
そんな方のためにオススメするのは、WEBデザインの模写です。
WEBデザインの模写とは、参考にしたデザインと同じものを練習として作ってみることを言います。
今回はバナー作成の練習方法とサイトデザインの練習方法をまとめてみました。デザイン模写をする上で、意識するとぐっとスキルがアップするポイントをまとめてみました。
模写するサイトやデザインを探しましょう
まずは、模写してみたいサイトやデザインを探しましょう。
あくまでも目標はWebデザインのスキルアップなので、完全に作り終わることを目標に選ばなくても大丈夫です。
初心者にオススメ：バナー
完全に作り終わることを目標にしなくてもいい！とはお伝えしましたが、そうは言っても最初は勉強している達成感も味わいたいもの。
そんな方にオススメなのは、模写するデザインとしてバナーを選ぶことです。
余談になりますが、実際の現場でバナー制作を行う！となった場合、圧倒的に300×250というサイズを制作することが多いです。
ですので、まずは300×250というサイズで模写するデザインを選ぶことをおすすめします！
また、模写ですので、必要な写真や素材はバナーの中から切り取って使用したり、他の素材で代用しましょう。
中級者～上級者にオススメ：LP（ランディングページ）のファーストビューやカートの部分
バナーの模写に慣れてきた方に次におすすめしたいのは、LP（ランディングページ）のファーストビューとよばれる部分（一番最初に出てくる部分）や、カートの部分です。
なぜLP（ランディングページ）のファーストビューや、カートの部分が大事なのか？というと、サイト内の画像を作る上で気をつけるべきことがたくさん含まれているからです。
これについては、次の段階で説明いたします！
中級者～上級者にオススメ：通常のサイトまるまる1ページ
LP（ランディングページ）のファーストビューやカートの部分に慣れてきた方は、サイトのまるまる1ページ模写をしてみましょう！
この時点で、画像制作をするスキルは格段に上がっているはずなので、サイト全体のデザインができるようにさらにスキルアップさせるためです。
上級者にオススメ：チラシをスキャンして、WEB用に模写
サイトの模写にだいぶ慣れてきた！という方は、チラシをスキャンして、WEB用に模写してみるということをやってみましょう。
ここまでくると模写というより、WEB用に作り直すという言い方のほうが近いかもしれません。
しろまるなんでここにきて、チラシなんて紙のものをWEB用に･･･って考える必要があるの？ここにテキストを入力
紙のデザインをWEB用に作り直す、ということは、紙のデザインでは不要だったものを考える練習にもなるからです。
例えば、WEB用にすることでお問い合わせのボタンをつけてみる、とかパソコンやスマホに合わせた大きさを考える、といったことは紙のデザインでは不要ですがWEBデザインでは考える必要があります。
なので、よく入っているピザのチラシやお寿司のチラシでも十分材料になりますので、試してみてくださいね。
模写するサイトのデザインをよく見て、ポイントを考えましょう
模写するためのサイトやデザインが決まったら、いきなりデザインツールを動かして作ってみる･･･！というわけではありません。
まずは、その選んだデザインを自分なりに分析するんです。
例ですが、私が以前にこのブログ用に作ったバナーで考えてみましょう。
このバナー1つとっても、まず分析してみるとこんな風に見ることができます。
また、このバナーそのものだけではなく、こんな考えもめぐらすことができます。
- このバナーは、新しいお客さんを獲得する目的のコピーなのかな？
- もともとこの会社のお客さんに対しての新しい商品紹介なのかな？
- オイルをただの調味料って思っているということは、30代以上女性むけ？
- でも、新規会員募集中って書いてある･･･
このようなことを考えながらデザインを見ていくことによって、自分がデザインを新しく作る際のプレゼンするスキルもアップするのです。
ちなみに、このバナーはサンプルとして作ったものですが、こちらの記事に、どんな方に向けて作ってみたか？が書かれているので、ぜひ読んでみてください(*´ω｀*)
いきなりデザインするのではなく、ワイヤーフレームを作ってみましょう
模写するデザインのポイントをつかめたら、やっと作ってみる･･･！の前に、ワイヤーフレームを作ってみましょう。
ワイヤーフレームというものに正確な定義はありませんが、WEBデザインをするための設計図のようなものと考えていただければOKです。
ワイヤーフレームと言ってツールに作り出す方もいますが、どれが正しい！ということはありませんので、今回はアナログですが手描きでワイヤーフレームを考えてみます。
手描き派の方：落書き帳に描いてみる
こちらは、私が食べるコーヒーのサイトを元に書き出してみたワイヤーフレームです。
WEBだと一番目がいくところにロゴ、メニューが続いています。
一番伝えたいこと（コピー）を左に配置し、右にそのコピーをイメージしやすくするビジュアルを配置しているのだな･･･とワイヤーを書きながら想像することができます。
ワイヤーフレームを書いていくと、次にデザインツールを使い始めるときに配置がとっても楽になるんです♪
iPad やSurfaceで直接でもOK
今回は一番アナログな方法として手描きで描いてみましたが、もちろんiPad やSurfaceでワイヤーフレームを描いてみてもOKです。
今はそのまま描き込むということもできますし、スキルが身につけばワイヤーを描きながら自分なりの工夫も思いつくかもしれません(*´ω｀*)
ここで始めて、デザインツールを使って実際にデザインを始めます
ポイントをおさえて、ワイヤーフレームまで終わったら、デザインツールを使って実際にデザインを始めます。
正確にデザインすることはツールの操作を覚える上で大事なことです。
しかし、それと同時に、なぜこういうデザインなのか？とこれまで考えたことを忘れないようにしてくださいね！
デザインツールとしてよく使われるのはPhotoshopです。
ロゴなどはIllustratorで作ることが多いので、合わせて模写してみるのもいいかもしれませんね！
（もちろん、なぜこんなロゴなのか？という意味も考えながら）
模写したあとは、より良くなるところを考えてみましょう
模写が完成したあとは、あと一段階スキルアップのためにより良くなるところはないか？を考えてみましょう。
例えばボタンの色はこのままで押しやすいボタンといえるのか？色は変えなくて良いのか？などを自分で考えてみるのです。
さらにより良くする方法を考えていくことで、もはやツールを動かせるスキルだけではなく、新たなアイディアを生み出す力もついてきますよ！
最後に、模写したWEBデザインはどう扱うべきか？
最後になりますが、模写したデザインについて1つ注意してほしいことがあります。
それは、絶対に自分が作ったものとして公開しないことです。
模写したものとして、こんなふうに分析して、考えて模写しました！ということでしたら良いかもしれません（あくまで可能性）。
しかし、自分が作ったものとして公開した場合は著作権を侵害することになりますので気をつけましょう。
以上のことに気をつけながら模写をして、どんどんスキルアップしてみてください(*´ω｀*)
