デザインの練習方法

【WEBデザインの練習方法】ただ真似するだけじゃもったいない!自分のモノになる、デザイン模写のポイント

投稿日:

WEBデザインの模写をしてスキルアップを目指そう!




WEBデザインがもっとできるようになりたいけど、何から勉強したら良いのかわからない!という方は多いでしょう。

そんな方のためにオススメするのは、WEBデザインの模写です。

WEBデザインの模写とは、参考にしたデザインと同じものを練習として作ってみることを言います。

 

しろまる
でも、ただ同じもの作ってみるだけじゃ、何が勉強になるのかわからないよね~。

そんな方のために、今回はデザイン模写をする上で、意識するとぐっとスキルがアップするポイントをまとめてみました。

それではどうぞ(*´ω`*)

スポンサーリンク

 

模写するサイトやデザインを探しましょう

まずは、模写するサイトやデザインを探しましょう。

あくまでも目標はWEBデザインのスキルアップなので、完全に作り終わることを目標に選ばなくても大丈夫です。

 

初心者にオススメ:バナー

完全に作り終わることを目標にしなくてもいい!とはお伝えしましたが、そうは言っても最初は勉強している達成感も味わいたいもの。

そんな方にオススメなのは、模写するデザインとしてバナーを選ぶことです。

 

参考までに、バナーがまとめられているサイトを見てみましょう

バナーまとめサイト:Retrobanner

 

余談になりますが、実際の現場でバナー制作を行う!となった場合、圧倒的に300x250というサイズを制作することが多いです。

ですので、まずは300x250というサイズで模写するデザインを選ぶことをおすすめします!

また、模写ですので、必要な写真や素材はバナーの中から切り取って使用したり、他の素材で代用しましょう。

 

中級者~上級者にオススメ:LP(ランディングページ)のファーストビューやカートの部分

バナーの模写に慣れてきた方に次におすすめしたいのは、LP(ランディングページ)のファーストビューとよばれる部分(一番最初に出てくる部分)や、カートの部分です。

なぜLP(ランディングページ)のファーストビューや、カートの部分が大事なのか?というと、サイト内の画像を作る上で気をつけるべきことがたくさん含まれているからです。

これについては、次の段階で説明いたします!

 

参考までに、LPがまとめられているサイトを見てみましょう

LPアーカイブサイト:LP ARCHIVE

 

中級者~上級者にオススメ:通常のサイトまるまる1ページ

LP(ランディングページ)のファーストビューやカートの部分に慣れてきた方は、サイトのまるまる1ページ模写をしてみましょう!

この時点で、画像制作をするスキルは格段に上がっているはずなので、サイト全体のデザインができるようにさらにスキルアップさせるためです。

 

参考までに、たくさんのデザインがまとめられているサイトを見てみましょう

Bookma!

WebDesignClip

 

上級者にオススメ:チラシをスキャンして、WEB用に模写

サイトの模写にだいぶ慣れてきた!という方は、チラシをスキャンして、WEB用に模写してみるということをやってみましょう。

ここまでくると模写というより、WEB用に作り直すという言い方のほうが近いかもしれません 笑

 

しろまる
なんでここにきて、チラシなんて紙のものをWEB用に・・・って考える必要があるの?

紙のデザインをWEB用に作り直す、ということは、紙のデザインでは不要だったものを考える練習にもなるからです。

例えば、WEB用にすることでお問い合わせのボタンをつけてみる、とかパソコンやスマホに合わせた大きさを考える、といったことは紙のデザインでは不要ですがWEBデザインでは考える必要があります。

 

なので、よく入っているピザのチラシやお寿司のチラシでも十分材料になりますので、試してみてくださいね。

 

模写するサイトのデザインをよく見て、ポイントを考えましょう

模写するためのサイトやデザインが決まったら、いきなりデザインツールを動かして作ってみる・・・!というわけではありません。

まずは、その選んだデザインを自分なりに分析するんです。

 

例ですが、私が以前にこのブログ用に作ったバナーで考えてみましょう。

このバナー1つとっても、まず分析してみるとこんな風に見ることができます。

 

また、このバナーそのものだけではなく、こんな考えもめぐらすことができます。

  • このバナーは、新しいお客さんを獲得する目的のコピーなのかな?
  • もともとこの会社のお客さんに対しての新しい商品紹介なのかな?
  • オイルをただの調味料って思っているということは、30代以上女性むけ?
  • でも、新規会員募集中って書いてある・・・

このようなことを考えながらデザインを見ていくことによって、自分がデザインを新しく作る際のプレゼンするスキルもアップするのです。

 

ちなみに、このバナーはサンプルとして作ったものですが、こちらの記事に、どんな方に向けて作ってみたか?が書かれているので、ぜひ読んでみてください(*´ω`*)

【例あり】「この人に頼んでよかった!」と思われるWEBデザイナーになるために、最低限気を付ける5つのポイント

こんにちは、ガテン系WEBデザイナーしろまるです。 せっかくWEBデザイナーの端くれなので、お仕事をもらうために最低限気を付けることを5つのポイントとしてみました。会社に属している人も、フリーランスの ...

続きを見る

 



いきなりデザインするのではなく、ワイヤーフレームを作ってみましょう

模写するデザインのポイントをつかめたら、やっと作ってみる・・・!の前に、ワイヤーフレームを作ってみましょう。

ワイヤーフレームというものに正確な定義はありませんが、WEBデザインをするための設計図のようなものと考えていただければOKです。

 

ワイヤーフレームと言ってツールに作り出す方もいますが、どれが正しい!ということはありませんので、今回はアナログですが手描きでワイヤーフレームを考えてみます。

 

手描き派の方:落書き帳に描いてみる

こちらは、私が食べるコーヒーのサイトを元に書き出してみたワイヤーフレームです。

コーヒーピクセル

WEBだと一番目がいくところにロゴ、メニューが続いています。

一番伝えたいこと(コピー)を左に配置し、右にそのコピーをイメージしやすくするビジュアルを配置しているのだな・・・とワイヤーを書きながら想像することができます。

ワイヤーフレームを書いていくと、次にデザインツールを使い始めるときに配置がとっても楽になるんです♪

 

iPad やSurfaceで直接でもOK

今回は一番アナログな方法として手描きで描いてみましたが、もちろんiPad やSurfaceでワイヤーフレームを描いてみてもOKです。

今はそのまま描き込むということもできますし、スキルが身につけばワイヤーを描きながら自分なりの工夫も思いつくかもしれません(*´ω`*)

 

ここで始めて、デザインツールを使って実際にデザインを始めます

ポイントをおさえて、ワイヤーフレームまで終わったら、デザインツールを使って実際にデザインを始めます。

 

正確にデザインすることはツールの操作を覚える上で大事なことです。

しかし、それと同時に、なぜこういうデザインなのか?とこれまで考えたことを忘れないようにしてくださいね!

 

デザインツールとしてよく使われるのはPhotoshopです。

ロゴなどはIllustratorで作ることが多いので、合わせて模写してみるのもいいかもしれませんね!

(もちろん、なぜこんなロゴなのか?という意味も考えながら)

 



模写したあとは、より良くなるところを考えてみましょう

模写が完成したあとは、あと一段階スキルアップのためにより良くなるところはないか?を考えてみましょう。

例えばボタンの色はこのままで押しやすいボタンといえるのか?色は変えなくて良いのか?などを自分で考えてみるのです。

 

さらにより良くする方法を考えていくことで、もはやツールを動かせるスキルだけではなく、新たなアイディアを生み出す力もついてきますよ!

 

最後に、模写したWEBデザインはどう扱うべきか?

最後になりますが、模写したデザインについて1つ注意してほしいことがあります。

それは、絶対に自分が作ったものとして公開しないことです。

 

模写したものとして、こんなふうに分析して、考えて模写しました!ということでしたら良いかもしれません(あくまで可能性)。

しかし、自分が作ったものとして公開した場合は著作権を侵害することになりますので気をつけましょう。

 

以上のことに気をつけながら模写をして、どんどんスキルアップしてみてください(*´ω`*)







  • この記事を書いた人
akitashiromaru_A7RKcJhZpnPE

あきた しろまる

20代前半までは教職を目指し中高の数学免許を取得するも、「もっと世の中知ってみたい」という気持ちから、世界一周の船旅へ。帰ってからは派遣社員しながらお金をためて、WEBの勉強をし、WEBデザイナーへ。20代後半からでもWEBデザイナーは目指せる!楽しい!ってことを伝えたい、という気持ちで記事を書いています。

おすすめ記事はこちら

WordPressプラグイン 「WP CSV Exporter」 1

前回、スプレッドシートを使った方法で、ブログが30記事を超えたところで、現状把握・改善点メモを行うと、リライトすべきポイントがわかってきた!というブログを書かせていただきましたが、記事の一覧を出力でき ...

-デザインの練習方法

Copyright© しろまるカフェ , 2018 All Rights Reserved.