この授業は次のような方におすすめです。
・模写をしてWebデザインのどのようなことを学べるか知りたい方
・Webデザインの模写をする際にどんな点に気をつけたら良いか知りたい方
・最初はどういうテイストのデザインをすれば良いのかわからない方
この授業を受けたら、上のような疑問を解消することができ、優れたプロのWebデザイナーの技を自分のものにすることができますよ。
どうぞ最後までご覧になってください。
Webデザインのスキルを高めるには模写が効果的
先生
Webデザインのスキルを高めるためには、模写が効果的なんだ。
デザイニャー
お手本のデザインを見たままに自分の力だけで再現していくことで、学びを得られるんだニャン。
先生
バナーだけでなくて、Webサイトやランディングページといったものを模写することでコーディングの練習にもなるんだ。
Webデザインの練習に効果的な模写の6つの流れと注意点について解説この授業は次のような方におすすめです。 ・模写をしてWebデザインのどのようなことを学べるか知りたい方 ・Webデザイン...
Webデザインのスキルアップにどうして模写が良いのか
先生
模写をするメリットとして、まず挙げられるのは、観察力が身に付くことなんだ。
デザイニャー
模写をすることで、優れたデザイナーの知識やテクニックを見抜くことができるんだニャン。
先生
そして次に挙げられるのが、模写をしていくことで、デザインツールの操作をマスターすることができるということなんだ。
デザイニャー
お手本の作品に使われているデザインを、自分の力で再現しようとすると、今までやったことがないテクニックを使わないといけない場面も出てくるんだよニャン。
先生
自分がまだ知らないデザインツールのテクニックをググりながら作品を模写していくことで、デザインツールを操作するのにも慣れていくし、テクニックも覚えていけるんだ。
模写は、優れたデザイナーの経験や技術を、確実に自分の引き出しに入れることができて、熟練度を増していくための、良い練習方法です。
Webデザインの模写をして学べること
先生
ここでは、Webデザインの模写を通して学べることをもっと詳しく掘り下げていくね。
デザイニャー
Webデザインの模写をして学べることは次の2つだったニャン。
デザインの構成や要素
先生
まずは良いと思ったデザインの構成要素を一つ一つじっくり見ていこう。
デザイニャー
文字や写真、余白など、いろんな要素で構成されているよニャン。
先生
このように、じっくりと観察してみると、それぞれに意味があるし、ルールに基づいてデザインが作られていることがわかってくるんだ。
例えば、次のようなことが見えてきます。
・写真とコピーの高さが揃っている
・余白が均等になっている
・文字と背景色の色に差をつけて読みやすくしている。
どうしてこういうデザインになっているのかということを意識しながらじっくり観察することで、良いデザインの共通点を学ぶことができますし、良いデザインとそうでないデザインの見極めをする力が身に付きます。
先生
このようにして目を養っていきながら、自分が目指すクオリティのデザインを作れるようになるんだ。
デザインツールの技術
先生
デザインの構成要素を観察していくことで、自分がやったことがないデザインの表現を見つけることができるんだ。
例えば、
・文字にザラザラした感じのテクスチャがついている
・ボタンが立体的に飛び出て見える
・星がさりげなく散りばめられている
というように、本や動画を見ているだけでなく、実際にそのテクニックを使って作品を作ってみないとそういった表現は身につかないものです。
そして、見つけたテクニックを
・どのように表現されているか
・ツールのどの機能を使って作られているのか
ということをググって調べて実際に使ってみることで、デザインツールを使える幅がどんどん増していきます。
先生
繰り返して制作していくことで、機能の場所を覚えたり、ショートカットキーを覚えたりするなど、作業スピードがアップすることにも繋がるよ。
Webデザインをに必要なソフトとは無料版やコーディング不要のものもこの授業は次のような方に受けていただくことをおすすめします。 ・Webデザインに必要なソフトについて知りたい ・デザイン...
どんなテイストのデザインの模写をすれば良い?
デザイニャー
模写を始めたいんだけれど、最初にどういうテイストのデザインの模写をすれば良いのかを知りたいニャン。
先生
そうだね。その人のレベルにもよるけれど、初心者だったら、自分が好きなテイストや得意なデザインテイストの参考サイトを探して模写するのがおすすめだよ。
デザイニャー
自分が好きで得意なデザインスキルを伸ばしていくことで、自分のデザインの強みを作ることができるニャン。
先生
ただ、注意点は、同じようなサイトばかりを模写しないということだよ。
同じようなデザインだけでなく、異なるジャンルのサイトを模写していくことで、デザインの幅を広げていくのに効果的です。
先生
自分が好きなデザインを作ることにある程度自信がついたら、次は、苦手なデザインテイストの練習をすると良いよ。
Webデザインの模写をする注意点
・できるだけお手本のデザインに近づくようにする
・著作権に注意
できるだけお手本のデザインに近づくようにする
先生
できるだけ、お手本のWebデザインに近づくようにしないと、自分のスキルにはならないよ。
デザイニャー
画像やフォントなどは、全く同じものを用意できないということもあるかもしれないけれど、レイアウトや余白の使い方などは、妥協せずお手本のデザインに近づけるようにするニャン。
先生
よく観察しないと見落としがちな部分まで、ほんの僅かなズレも出ないように模倣することで、自分のスキルに繋がるよ。
著作権に注意
先生
模写したデザインを自分が制作したものとしてSNSなどで公表すると、著作権を侵害することになるから、注意しよう。
デザイニャー
どうしても練習記録としてSNSにアップしたい時には、模写していることを記して、出典を記載するようにするニャン。
先生
それに、就職活動の際に模写したWebデザインを実績として出すのは、あまりおすすめできないよ。
模写はスキルアップにつながりますが、あくまでも勉強の一環として取り組みましょう。
Webデザインの模写のやり方の流れ
①お手本になるデザインを探す
②Webサイトをスクリーンショットで保存する
③紙に模写するWebデザインのワイヤーフレームを書く
④お手本のデザインをよく観察する
⑤デザインツールで模写する
⑥これからの自分のデザインに取り入れる
①お手本になるデザインを探す
デザイニャー
まずは、このデザインは良いなと思うお手本を探すことから始めるニャン。
先生
お手本を探すのには、ギャラリーサイトがおすすめだよ。
先生
また、模写コーディングを初めてするのだったら、次のサイトがまた親切だよ。
あわせて読みたい
【模写コーディング】おすすめの練習サイト【入門編～上級編】
先生
そして、バナー画像だったら、次のように検索して調べるのがおすすめだよ。
先生
LPのギャラリーサイトだったら、次のものがおすすめだよ。
また、バナーやLPを一つのサイトでみるなら、Pinterestが重宝されています。
先生
まだ初心者の場合は、いきなりHPやランディングページをお手本にするのはちょっと難しいから、最初はバナーから模写していこう。
デザイニャー
バナーデザインに慣れてスピードもついてきたら、HPなどの模写にも挑戦してみるニャン。
先生
この授業ではWebサイトの模写の仕方について絞って解説していくね。
②Webサイトをスクリーンショットで保存する
先生
Webサイトを模写するのであれば、そのサイトのページ全体を保存するのだけれど、その時に、Chromeの拡張機能を使うと便利だよ。
③紙に模写するWebデザインのワイヤーフレームを書く
先生
模写するWebデザインの構成要素をざっくりとした感じでいいから、紙に書き写していこう。
先生
そう。Webページのレイアウトを決める設計図のことをワイヤーフレームというんだ。
デザイニャー
実際にお手本となるデザインの構成を紙に書き写すことで、各コンテンツの配置や大きさがわかるようになるんだニャン。
Webサイト制作に欠かせないワイヤーフレームのポイントを詳しく解説この授業は次のような方に是非受けてもらいたいです。 ・Webサイト制作のためにワイヤーフレームを作ることになった方 ・ワ...
④お手本のデザインをよく観察する
先生
ワイヤーフレームを作ったら、次はお手本のデザインを観察しよう。観察するポイントは次の通りだよ。
・デザインのレイアウト
・文字のサイズや行間
・フォント
・配色
・余白
・写真
・自分のデザインとの違い
どうしてこのデザインがいいと思ったのかということをそれぞれの要素に分解して観察していきましょう。
例えば、
・ボタンの周りに余白をおくことで押しやすくしている
・ターゲットが好みそうな配色を使っている
など、色々な工夫がされていることがわかります。
デザインのレイアウト
デザイニャー
まずレイアウトが決まらないと、どんなテクニックを使ってもデザインは引き立たないニャン。
どこに文字や写真を配置していていて、それぞれの大きさがどれくらいかを観察しましょう。
先生
その時、ノートに書いていくと、レイアウトをより良く把握できるよ。なぜこの配置なのかなど、気になったことを意識してノートに書いていこう。
【わかりやすく徹底解説】Webデザイン制作｜基本のレイアウトとは?この記事は、次のような人に向けて書きました。 ・センスのが良くて使いやすいWebサイトを作りたい ・それにはどこから手を...
文字のサイズや行間
出典：読みやすいフォントサイズ&行間とは?
先生
模写をしないとなかなか気がつかないけれど、文字のサイズや行間はとても大切な要素だよ。
デザイニャー
模写することで、細かい文字のサイズや行間の違いがわかるんだニャン。
先生
例えば、ファーストビュー、メインコンテンツ、ヘッダー、フッターでは、それぞれ文字のサイズや行間が違うし、行間が1px違うだけで印象が全然違うものになるんだ。
デザイニャー
シンプルなデザインでも、文字のサイズや行間を変えるだけで、それぞれの要素の配置が見やすくなって、内容を理解しやすくなるんだニャン。
先生
デザインスキルが優れた人ほど、文字のサイズと行間を意識しているから、良いデザインを模写してスキルを盗んで自分のものにしていこう。
フォント
先生
デザイナーはターゲットや伝えたい印象に合わせてフォントを選んでいるんだ。
デザイニャー
子供向けのPOPなサイトと高級化粧品の大人っぽいサイトでは使っているフォントが全然違うニャン。
先生
こういったように、そのデザインを見るターゲットと、伝えたい印象を意識して観察していこう。
グラフィックデザインに欠かせないフォントの特徴と選び方の3ポイントこの記事は、こんな方におすすめです。 グラフィックデザイナーになりたくて、勉強しているんだけれど、フォントの種類が多すぎて、どれに...
配色
先生
フォントと同じで、配色についてもターゲットや与えたい印象に合わせて色を選ぶ必要があるんだ。
デザイニャー
例えば、子供がいるママ向けなら、暖色のパステルカラーを作っているし、幼い子供向けのデザインなら、たくさんの原色の色を使っていたりするニャン。
ここにテキストを入力色には色が持つイメージや心理的作用があって、赤は活力や情熱のイメージがあって、採用ページに使われていることが多いですし、紫には、神秘的で上品なイメージがあるので、占いやスピリチュアルのデザインでよく使われています。
先生
そして、同系色や色のトーン、アクセントカラーの割合で、人に与える印象が変わってくるから、どうしてこの色を使っているのかを考えながら、デザインを見ていこう。
Webデザインの印象を左右!カラーの基本知識と便利な配色ツールとはこの記事は次のような方のために書きました。 ・Webデザインを制作したいだけれど、配色で迷ってしまうので知識を知りたい ...
余白
先生
Webデザインの模写を行う際に、余白にも注目してみよう。
おしゃれと言われているデザインのサイトは、余白を大きくとっていることが多くて、サイトの情報量によって余白が調節されています。
デザイニャー
実際にデザインを模写していくと、余白の需要性を実感することができるニャン。
先生
コンテンツ同士の余白だったり、今鉄内のテキストや画像の余白といった余白の大きさを変えるだけで、コンテンツの見え方がとても変わるから、模写をすることでそれを習得していこう。
写真
先生
どの写真を選ぶかということで、Webデザインの印象は大きく違ってくるんだ。
デザイニャー
美しいデザインやカッコイイデザインは、写真のクオリティが必ずといって良いほど高いニャン。
先生
そして、良いデザインを選ぶだけでなく、その写真を加工してWebサイトにピッタリと合うようにすることが大切だよ。
参考にするデザインがどんな写真を選んで、どんなトリミングをしているのかを注目して模写していきましょう。
自分のデザインとの違い
先生
模写をしていきながら、過去の自分のいまいちなデザインと比較しながら考えることも重要だよ。
デザイニャー
ここまで説明してもらった内容を踏まえて、自分のデザインとどう違うのかということを考えながら、模写するデザインを見ていかなくてはならないニャン。
先生
その違いを見つけることこそが、Webデザインを模写する、最も大きな目的なんだよ。
⑤デザインツールで模写する
デザイニャー
ワイヤーフレームを作ったら、いよいよデザインツールを使って模写を行っていくニャン。
使われている写真は、Image Downloaderなどで保存して、基本的に全部の項目をそのまま忠実に再現しましょう。
先生
ノイズや影など、しっかり観察して、1pxのズレの内容模写を行っていこう。
Webデザインの模写は妥協しようと思えば妥協できてしまいますが、そういう意識で行ってしまうと、せっかくワイヤーフレームを作って模写をしていても、自分のスキルとして身につきませんので、1pxくらい良いかという気持ちではなく、正確に模写しましょう。
⑥これからの自分のデザインに取り入れる
先生
模写が完了したら、自分のデザインとの違いなど、気がついた点を忘れないようにメモして、新しいデザインを作るときに活用していこう。
デザインの模写はインプット作業です。新しいデザインで、気づいた点を試すアウトプット作業が、デザイン上達には絶対に必要です。
デザイニャー
つまり、Webデザインの模写は、自分のデザインと何が違うのかを気がつくことがその意味で、その違うことを自分のデザインに取り入れて実践することで、初めて身につくということなんだニャン。
模写を繰り返そう
デザイニャー
模写をやり続けることは大変かもしれないけれど、スキルを定着させるためにも、模写を継続して繰り返していくことが大切だニャン。
先生
できれば毎日が理想だけれど、難しい場合は、スケジュールを組んで、少しずつでも模写をしていこう。
デザイニャー
毎日模写を続けていると、自分が上達していっているのかあまりわからないかもしれないけれど、最初の頃に作った作品と比べてみると上達しているのかが分かるはずだし、制作するスピードも速くなっているはずだよニャン。
先生
このように継続することで成長を感じるし、自信もついてくるから、継続することで、デザイン力アップすることは間違いないよ。
オリジナルの作品を作ってみよう
デザイニャー
模写を何回かして自信がついたら、そのスキルを活かしてオリジナル作品を制作してみるニャン。
オリジナル作品を作ることで、いろんなことに挑戦してみましょう。例えば、お手本のレイアウトや装飾はそのまま使って、配色を変えてみたり、違う効果をつけてみたり、フォントを変えてみても良いでしょう。
先生
お手本から良い要素だけを選んでオリジナル作品に反映させたり、いろんなことをうやってみて、元のデザインとの違いを考えてみることも良い勉強になるよ。
まとめ
先生
この授業では次の25個のことについてお話ししてきたよ。
・Webデザインのスキルを高めるには模写が効果的
・Webデザインのスキルアップにどうして模写が良いのか
・Webデザインの模写をして学べること
・デザインの構成や要素
・デザインツールの技術
・どんなテイストのデザインの模写をすれば良い?
・Webデザインの模写をする注意点
・できるだけお手本のデザインに近づくようにする
・著作権に注意
・Webデザインの模写のやり方の6つの流れ
①お手本になるデザインを探す
②Webサイトをスクリーンショットで保存する
③紙に模写するWebデザインのワイヤーフレームを書く
④お手本のデザインをよく観察する
・デザインのレイアウト
・文字のサイズや行間
・フォント
・配色
・余白
・写真
・自分のデザインとの違い
⑤デザインツールで模写する
⑥これからの自分のデザインに取り入れる
・模写を繰り返そう
・オリジナルの作品を作ってみよう
私たちは頑張るあなたを応援しています。
