FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

WEBデザイン

WEBデザインが短期間で上達した方法

投稿日:2013年2月17日 更新日:

WEBデザインが短期間に上達した方法

この記事は、Webデザインが短期間で上達した2つの方法として、新たに書き直しました。


WEBデザイナーとして10年ちょっと経過。
未だにデザイナーとして足りないものは多いですが、
どうにかクライアントにも満足してもらえる
デザインが提供できるようになったと思います。

これは、自分が新米デザイナーだった頃にやっていた、デザインの上達方法です。
「上手くデザインができない!」「上手くなるにはどうすればいいの?」など、
どうすればデザインが上達するのかわかならい人の参考になれば幸いです。

新米デザイナーの頃、ダメなデザインをして先輩からよく叱られていました。
クライアントからデザイナーを交代してくれと言われ、
激しく落ち込んだこともあります。

いまになると恥ずかしいですが、
その頃の自分には、
プロのデザイナーとして最低限の能力がなかったのです。

クライアントの満足するクオリティのデザインを
期日までに提出することができていませんでした。

まず、最低限必要だった能力が、
「求められているデザインをできるかぎり速く提供する」
でした。

この課題をクリアするために行った方法が次の2つです。

  • たくさんのサイトを見てキャプチャする
  • たくさんのサイトを模写する

サイトを沢山みてデザインの引き出しを増やし、デザインを考える時間を短縮する。
そして、模写することで、求められているクオリティを提供できる技術力を上げる。

私の場合、この方法で半年程度でクオリティとスピードが劇的に上達しました。

1.たくさんのサイトを見る。そしてキャプチャする

基本的ですが、たくさんのサイトを見ました。
素晴らしいデザインや、流行のデザインをみて
自分の中に「デザインの引き出し」を増やしていきました。

ここのデザインは印象に残ったとか、
いつかこういうデザインは参考になるかもとか、
思いながら見るようにしました。

そして、気に入ったデザインがあれば、
あとですぐに見ることができるようにキャプチャしました。
サイトのそのものだけでなく、バナーひとつでもキャプチャしておきました。

ブックマークしても、
サイトは更新されたり、リニューアルされたりして元のままのことは少ないです。
そのため、気に入ったものがあったら、すぐにキャプチャしておきました。

アイデアに困った場合や、デザインの解決策がわからない場合、
「自分の気に入ったもの」「参考になる」と思ったもののみを
キャプチャしているので探す手間が省けます。

また、キャプチャする場合はトップページだけでなく、
主要ページはもちろん、
「会社概要」「サイトマップ」「お問い合わせ」など、
どのサイトでも作ることが多いページもキャプチャしておきました。

「サイトマップ」や「お問い合わせ」などは、
シンプルで見やすさが必要なため、意外とデザインに時間がかかりますので、
キャプチャしておくと参考にするときに便利です。

キャプチャ方法

キャプチャはFireFoxのAdd onのPage Saverを使っています。

Pearl Crescent Page Saver
http://pearlcrescent.com/products/pagesaver/

オプションで、
キャプチャの保存名は、年月日時分秒ページタイトルの
「%Y%m%d%H%M%S%t」にしています。

こうしておけば、各ページ連続でキャプチャしたときに、
フォルダ内でキャプチャ順にまとまります。

2.たくさんのサイトを模写する

自分の失敗は、
サイトをみてもデザインを学ばず、
タイトルやボタンなどパーツかっこよさばかり真似して、
全体のデザインバランスの重要性にきづかず、
これならできると思い手を動かさなかったことです。

デザインは見ているだけでは、上手くなりませんでした。。。

実際、模写をしてわかったことですが、
色の強弱でサイト全体のバランスをとっていたり、
カラムの幅によって、情報の強弱をつけたり
余白によって情報をグルーピングしたり、
メインの画像が変更されても全体のバランスが崩れないデザインをしていたりと、
見ているだけではわからなかったことをいろいろ学びました。

模写の方法

選んだサイトをキャプチャし開きます。
新規に幅1200px程度でファイルを作成します。

上にのせてトレースすると何も考えずに作ることになりがちなので、
並べて作るなどした方がいいです。

模写の目的は、どのようにデザインされているかを知るためで、
同じものを作ることが目的ではないからです。

幅や高さを測りながら、同じものつくって行きます。
メインの写真やロゴ等は同じものをつくる必要はないかとおもいます。
テキストはダミーでもいいですが、おなじ文言をいれるのではなく、
リアルな文言を入れた方がリアルな雰囲気がでるので、
できあがりがわかりやすいです。

この時、ただ漫然と模写するのではなくて下記のことを確認していきました。

  • デザインテイストを決めている要素
    (写真・色・パーツの作り・フォントだったり、それらが複雑にからみ合っています)
  • 情報の強弱・グルーピング
    (大きさや余白、色によって意味が違ってきます)
  • レイアウトの幅
    (全体の大きさや例えば2カラムの場合の左右のカラムの大きさ。少しの幅の違いでバランスがかわります)

模写するサイトの種類

模写するサイトの種類ですが、
その会社によって求められるデザインがあるでしょうが、
私の場合、テイスト・色・レイアウトの違いなど、
いろんなパターンのデザインを模写するようにしていました。

例えば、

  • コーポレートや学校など固めのサイト(明る色使いのサイトと暗い色使いサイト)
  • ポータルサイトや就職サイトなど、テキストが主体のサイト(明る色使いのサイトと暗い色使いサイト)
  • パーツの作りこみが多いサイト
  • ショッピングサイト(2カラムと3カラム)
  • ナビゲーションが上部のサイト・横のサイト

ブルー系の固いテイストは得意だったのですが、
自分は明るいテイストが苦手でした。

あまり得意でないデザインテイストや、
好みではないデザインもやっておいた方が、
自分の引き出しを増やすためには有効でした。

新人にも、大体10サイトほど模写させると、
その後、オリジナルのデザインをさせても、
一定のクオリティをだせるようになるようです。

まずは、模写の数をこなして、
デザインの引き出しを増やすことで、
クオリティとスピードが大きく上昇しました。

ある程度上記の方法をこなしたら、
自分が今まで作ったデザインを、
再度ゼロからデザインしました。

要素や規定は同じでも、
新たな視点や切り口でデザインすることができるようになりましたし、
できあがったものが、以前よりクオリティが上がったのが実感できました。

まとめ

予定内に一定のクオリティでデザインを提出することで、
社内はもとより、クライアントからも喜ばれることが多くなりました。

評価が上がった理由としては

  • デザインがスピードアップすることで、社内もクライアントもスケジュールに余裕ができた
  • クライアントとっても、期限とクオリティの正確な予測ができ依頼しやすくなった
  • クオリティがアップしたことで、コストパフォーマンスが改善した

などが上げられますが、プロとして当然なことがひとまずできるようになっただけともいえます。

自分の経験が、
デザインが上達するにはどうしたらいいかわからない人の参考になれば幸いです。

最後にデザインの上達するために一番大事なのは、
すぐに諦めないことです。

-WEBデザイン

執筆者:


  1. […] 2013-02-18 14:19:00WEBデザインが短期間に上達した方法 | FEVDES BLOG教育 […]

  2. Sota より:

    デザインを勉強している学生です。
    どうやったらデザインがうまくなるのかを考え自分なりにPinterestとかでかっこいいサイトを見つけて
    それを真似したりしています。この方法で本当にうまくなるのか不安だったのですが、この記事を見て改めて
    今やっていることを続けようと思いました。

    Pinteretでいろいろなサイトを集めているので、もし良ければ見てください!
    http://pinterest.com/DesignILike/web-layout/

    • admin より:

      >Sotaさん

      ありがとうございます!参考になれば幸いです!
      Pinteret観ました。
      海外のサイトは、
      探すのがなかなか大変なので参考にさせてもらいます!

  3. […] 1. Webデザイン:WEBデザインが短期間に上達した方法 […]

  4. 初めまして!Webデザインを勉強している20歳です。記事を読ませていただいて、とても参考になりました!中学生の頃から勉強を始めたのですが、やっぱり見よう見まねで作っていくのが一番上達すると思いました。この記事に書かれているような便利なツールを知らなかったので、昔はスクリーンショットを保存したり、名前をつけて保存でページごと保存したり、プリントして部屋に貼ったりしていました(笑)見るだけでなく、それを参考に作っていくことが大事だなとこの記事を見て改めて実感しました。今は便利なツールがたくさんあるので、収集も簡単に出来ますし、Webは常に発展し続けていますね。取り残されないように、引き続き勉強を頑張りたいと思いました!

    • admin より:

      ありがとうございます!
      デザイナーはいろいろ覚えることがありますが、
      一生楽しめる仕事だと思います。
      がんばってください!

  5. […] 3. WEBデザインが短期間に上達した方法 | FEVDES BLOG  -勉強になりますね。 […]

  6. […] CSSド素人がWordPressの独自テーマをレスポンシブ化してみた話 WEBデザインが短期間で上達した方法 【ディレクター向け】 […]

  7. […]  FEVDES BLOG-”WEBデザインが短期間で上達した方法”より  […]

  8. たかし より:

    はじめまして。今、私が知りたい内容が全て詰まっており目から鱗でした!ありがとうございます。1点質問なのですが、模写するサイトの全ページを模写されましたでしょうか?それとも重要そうなページだけに絞りましたでしょうか?大変お手数ですが教えていただければ幸いです。よろしくお願いいたします。

    • admin より:

      お役にたてたなら嬉しいです!
      模写は、重要そうなページのみしていました。
      特にサブナビやタイトルがあるページをかならずしていました。
      意外とサブナビやタイトルのデザインに手間取ることが多かったからです。

  9. […] WEBデザインが短期間で上達した方法 […]

  10. カナモリ より:

    はじめまして。

    WEBサイト制作の勉強を始めて約1年になります。コーディングの理解はできるのですが、デザインは得意ではありません。

    本などを見て勉強していたのですが、あまり上達しないと実感していました。

    「見るだけではなく手を動かす!」、ぜひ実践したいと思います。

    貴重な情報を教えていただき、ありがとうございます。

  11. […] を詳しく書いてあるサイトがあるので ご紹介します。 >>「WEBデザインが短期間で上達した方法」 […]

  12. […] WEBデザインが短期間に上達した方法 | FEVDES BLOG はてブ:780 まずは一読すべき記事です。 […]

  13. すずきななみ より:

    こんにちは!
    このブログとても参考になります、ありがとうございます!

  14. […] 「WEBデザインが短期間で上達した方法」がバズって、他の有名サイトでも同じような記事が書かれたのはいい思いです。 […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

デザイン力を鍛える!Webデザインのフロー別セオリーと知識まとめ

以前、「WEBデザインが短期間で上達した方法」では、 上達する近道として模写を紹介しましたが、 それ以外にも基本的なセオリーや知識を知っているだけで、 デザインをする力が格段にアップします。 4月から …

意外と知らない!?Photoshopで表示レイヤーを結合するときに便利な方法

普通に結合すれば一枚になるレイヤーを、元のレイヤーを残しつつ新規レイヤーに結合するショートカットです。

私のWebデザインする場合の制作環境

私の自宅での制作環境を紹介します。 私は、Webデザインのみで、印刷物のデザインはしません。今のところ、この制作環境で問題は感じていません。 自宅で勉強する場合にどのくらいのスペックマシンを購入すれば …

暗記しておく!イラレでギザギザの丸(円)を作る方法

よく使うこのギザギザの丸(円)。 今まで何度も使ってきましたし、使い映えするので、 絶対に暗記しておきたいです。

私が新人の頃やっていたWebデザインの要望・修正指示の対応方法

新人デザイナーのころ、出勤したら、デザインの修正記事が机に置いてあると、そのまま帰りたくなっていました。 新人デザイナーにとって、デザインの修正指示は、寿命が縮む思いです。 新人デザイナー向けに、私が …

プロフィール

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。