FEVDES BLOG

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

WEBデザイン

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

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

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

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

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

SPONSORED LINK

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

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

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

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

この課題をクリアするために行った方法が次の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サイトほど模写させると、
その後、オリジナルのデザインをさせても、
一定のクオリティをだせるようになるようです。

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

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

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

まとめ

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

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

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

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

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

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

PR

PR

-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. すずきななみ より:

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

comment

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

関連記事

パターンがたくさんありテンプレート準備の参考になる「Summer UI Kit Free」

Summer UI Kit Free 明るい配色で海外のリゾートっぽい「Summer UI Kit Free」。 コーディングする前に、テンプレートであらゆるコンテンツに対応できるパターンをつくると思 …

バナーをデザインする時に役立つまとめ・記事10選

新人がデザインの業務で頼まれることが多いのばバナー。 小さいので簡単と思われるけど、実はかなり難しく意外と制作に時間がかかるのがバナー。 小さいけど、奥が深いのがバナー。 そんなバナーを作るコツがわか …

スマホ・タブレット・PCの各端末の画面サイズが一目でわかる「Screen Sizes」

スマホが主流になり、画面のサイズが多様になり、調べるのが大変になっています。 以前、海外向けのサイトを制作する時に、 アクセスログから想定機種を指定され、 事前に多くの機種に対応する必要がありました。 …

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

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

PhotoShopでよく使うフォントを素早く変更する方法

PhotoShopでフォントを変更するのは面倒です。 特に欧文だと、最初からインストールされているフォントが多くて選択するだけで時間がかかってしまいます。 私の場合は、フォントをアクションに登録してお …

PR




人気の記事

プロフィール

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