読者です 読者をやめる 読者になる 読者になる

IT系女子ログ

3年目 Webデザイナーが、最近気になるアレコレ

Webデザインを上達させるために大切なこと。デザインが苦手なあなたや私へ。

Web Design Work Knowledg

f:id:tosssaurus:20150426233958j:plain

Webデザイナーとして参加していた案件が炎上してしまい、デザイン業務をすることがとても怖くなってしまいました…。
そんなデザイン恐怖症を克服するため、デザインをもっともっと上達させよう!と決めました。

 

私の個人的な意見で恐縮ですが、同じようにデザインで悩める方が、デザインを前向きに捉えるきっかけのひとつにでもなれればと思い、上達するために大切だと思うことを書き出しました。

デザインが仕上がらず炎上   

私は未経験でWebデザイナーとして入社して2年目です。

先日、新規サイトの案件に、メインデザイナーとして参加させていただきました。本来ならば2日で提案デザインを出すところを、「不慣れだから」ということで3日のお時間をいただきました。

ところが2日たってもチーフデザイナーからのOKが頂けず、3日目の午後になってもOKが頂けない…。チーフには「このクオリティでは今日中にクライアントに出せない」と…。
しかし、クライアントからは「何時になっても良いから今日中に出して」との声があり、必死でやるも、やはりクオリティが上がらず、仕上がらないデザインをチーフに引き継いで、泣く泣く終電で帰りました。

f:id:tosssaurus:20150426225529j:plainby xvire1969

出社すると、とても綺麗なデザインが出来ていました。なんとチーフは3時間で仕上げたとのこと。
 

デザインとはとても難しいのだと痛感

この1件で痛感したのは、自分のデザイン力の無さと、プロのデザイナーと今の私との実力の差です。
 
Webもデザインも、未経験で入社して2年目。
少しずつ案件を任されるようになってきたのですが、自分の力だけではなかなか進まず、力不足を身にしみて実感しています。それと同時に今まで難なく進んでいたのは先輩やチーフのサポートがあってのこと、というのも実感しました。
 
1年間、のほほんと過ごしてきたツケだと思います…。
デザインができないことが、とっっっても悔しくて周りの方々に申し訳ないので、Webデザインを上達させる為にはどうすれば良いのか、を考えてみました。
 

デザインを追求する、という覚悟を決める

f:id:tosssaurus:20150426231144j:plainby kohlmann.sascha

これが、プロになるために一番必要なことです。

私は覚悟しているつもりで、していませんでした。もっと簡単に考えていたのですが、甘かったです。
というのも、今まで先輩のサポートが多分にあり、自分にデザイン力がある程度あると勘違いしてしまっていたのです。いざ、自分の力だけでデザインしようと思うと、手が動かなかったのです。今までデザインに使ってきたアイデアのほとんどを、先輩の引き出しから拝借していたんですから、当たり前ですよね。自分の実力の無さが露呈して、とても情けなかったし、悔しかったし、自分自身に残念な気持ちになりました。
 

デザインと向き合い続ける

私はデザインが苦手です。あまり自覚していなかったのですが、なるべく避けながら、当たり障りない箇所にしか手を出さないようにしていました。逃げていては上達できるわけないですよね。
そんな私ですが、チーフから掛けて頂いた言葉がすごく身にしみましたので、ここに書き残しておきます。 
 
「デザインというのは感覚やセンスという、"特別な能力がある人しかできない"、一般の感覚からは理解できない領域と思われがちだが、実はそうではない。
今バリバリ活躍しているデザイナーも始めは皆、未経験で初心者。
たくさん勉強して、たくさん制作して、たくさん考えて、たくさん経験してきた積み重ねがあるから、いとも簡単にデザインされたように見えるだけ。
 
デザインするというのは、実はロジカルな部分も多い。
"この色にこの色を合わせるとこの印象を与える"とか"この配置はこの印象を与える"とか"このターゲットにはこのレイアウト"とか、論理的に計算された上でデザインが出来ている。
勉強する領域が広いから、すぐに諦めた人にとっては"特別な能力がないとできないもの"のように感じているだけ。理解できるまで、諦めずに勉強し続ければどんな人でもデザインできるようになる。」

by チーフ

 

分からなくても諦めず、デザインと正面から向き合うことに決めました。
センスは知識からはじまる

センスは知識からはじまる

  • 作者: 水野学
  • 出版社/メーカー: 朝日新聞出版
  • 発売日: 2014/04/18
 

"センスは作っていけるもの"と教えて頂いた、とてもオススメの本です。 

 

他責でなく自責で考える

「良い素材がないから」「良いキャッチコピーがもらえないから」「使える写真が少ないから」「納期が短いから」「具体的な指示がないから」「体調が悪いから」「まだ勉強中だから」……
できない理由はいくらでも探せると思います。
しかし、制限のある中でいかにクライアントの希望に沿ったものを作り出すのがデザインの真髄であり、ここでデザイン力のある、ないがダイレクトに反映されます。
 

制限があるから、デザインがより重要になる

そもそも、制限のない案件なんてあるんでしょうか。
仕事でデザインに関わる以上、お金がかかります。どんな案件でも、限られた予算内で制作する以上、制限があるのは当然のことですよね。
 
「良い素材がない」なら、探せばいい。探せないなら、作ればいい。
「良いキャッチコピーがもらえない」なら、コピーの扱い方を変えればいい。変えれないなら、デザインにあうコピーを書けばいい。書けないなら、コピーなしで成立するデザインを作ればいい。
制限のある中で、クライアントの希望に沿ったデザインを作れるのであれば、こちらから提案していけばいい。
 

デザイナーが提案してもいい 

クライアントやディレクターより、Webデザインに詳しいのはもちろん私たちWebデザイナーです。こちらからより良いデザインにするためにはどうすれば良いかを伝えていくことで、よりクオリティの高いデザインにできると思います。
 
 

良いデザインをたくさん知る

f:id:tosssaurus:20150426231515j:plain

良いデザインを知らない人が、良いデザインをつくれるわけがない

何も参考にせず、自力で制作していませんか?
チーフ曰く、「何も見ずに自力で制作できるのは、それまでに何百サイトも作ってる人。何百サイトも作ってる人は、自力で作らず、まず参考サイトを探す。」
つまり、色んな制作経験があるデザイナーでも、制作に入る前にはその都度参考サイトを探すのに、経験の浅いデザイナーが何も見ずに制作に取り掛かっても、いいデザインが出来るわけがない。ということです。

何も見ずに制作するということは、自分の引き出しだけでデザインするということ。そんなにたくさん、デザインの引き出しがありますか?

制作経験が浅く、限られた引き出しの中で何とかデザインしようとするから、何回修正してもクオリティが上がらないんです。 

業務以外の時間に見ておくことが大事

参考サイトを探すべきなのですが、いざ業務の限られた時間内で探そうとすると、見つからないことも多いです。
ですので、普段からWebサイト集をチェックしたり、制作ブログを読んだりして、良いデザインを知っておくことが大切です。Webサイト集のサイトも、ありがたいことに色んなサイトがあります。大手企業のサイトが多いところ、フラットデザインの多いところ、レスポンシブデザインの多いところなどなど…。カテゴリ分けの仕方も様々です。

普段チェックするときに、どのサイトがどんなデザインが多いか見ておくことで、より早く参考サイトを探せるようになります。
まずは色んなサイトをブックマークしたりRSS登録してみてはいかがでしょうか。

 

Googleリーダーの代替RSSリーダーまとめ【決定版】 - NAVER まとめ

細部まで観察して、なぜ良く見えるのかを自分の頭で考える

良いデザインはなぜ良く見えるのか

参考サイトと同じ色や素材を使っていても、うまくはまらないときがあります。
なぜこのデザインはよく見えるのか。
余白の取り方?色?大きさ?シャドウのかけ方?ラインの使い方?写真の置き方?続くコンテンツとのバランス?
細部まで見るとちょっとした効果で全体のバランスを取っていたりします。
さらに効果的なのは、イマイチなデザインと比べること。

なぜよく見えるのか、なぜイマイチに見えるのかも同時に考えると、イマイチなデザインをしなくなるそうです。
 

良いデザインの完コピをして、どんどん手を動かす

f:id:tosssaurus:20150426231831j:plain

潔く完コピして、学ばせていただく

良いデザインをたくさん知るでも書きましたが、自分の引き出しをたくさん作らないことには色んなデザインに対応できず、なかなか上達しません。
一番良い勉強法は、公開されている良いWebデザインを完全にコピーすること

私は、これを始めに聞いたときにかなり抵抗がありました。「パクるなんてダメ!」と思っていたのですが、パクるというより模写するという考えです。もちろん、丸パクリのものを業務で提出すると怒られますが、勉強するには完コピすることが一番効率的なんだそうです。

なぜ効率的かというと、完成度の高いデザインと同じように実際に自分の手を動かして作っていくことで、経験を積んでいけるからです。

私の実践するトレース方法

できることなら、横に置きながら進めていきたいのですが、私のような初心者は時間がかかり過ぎてしまいます。始めは下に見本を置いてトレースしてもいいです。トレースしながら、完全に同じものを作る為にはどうすればいいかを考えながら手を動かします。"よく見ると1pxの線があった"とか、"シャドウのかけ方が凝っている"とか"フォントの選び方"とか、大変勉強になります。

ロゴはトレースしなくてもいいですが、写真素材も自分で近いものを探すのも勉強のうちだそうです。意外と探し出すのが難しいことに気づきます。
部分的にトレースするだけでも勉強になりますが、できればヘッダーからフッターまでまるっと1ページ完コピしましょう。フッターでどのようにバランスを取っているかも大事だからです。

f:id:tosssaurus:20150426234217j:plain

キャプチャーのススメ

普段Webデザイン集をチェックしているときに、トレースしたいサイトのキャプチャーを取っておくと良いでしょう。Webなので、日が経つとリンクが切れていたりするからです。

私はTopページと下層ページの2枚ずつキャプチャーを取っています。

 

WEBサイト全体を丸ごとキャプチャできるブラウザアドオン4選

Clipularを使ってお気に入りのWebデザインをコレクションしよう! | 株式会社LIG

私はAwesome Screenshotを愛用していますが、セキュリティ上心配な記事を見つけたので他の者を探そうかと思っています。


Awesome Screenshot が閲覧したサイトのURLを収集している疑い | 秋元@サイボウズラボ・プログラマー・ブログ

スマホ用はこちら
スマホサイト全体のキャプチャを一度で撮って効率化!WebCollectorを使ってみた | 株式会社LIG

 

自分用の素材リストを作る

素材をイチから作るのも良いのですが、その都度作っていてはとても時間がかかります。できることならその時間を他に使いたいですよね。
普段から無料素材を見つけたりしたら、自分用の素材リストを作っておくことで、いざという時かなり効率よく探せます。
あとは制作しているデザインに合うよう少し調整をしてあげればいいので、イチから作るよりもかなりの時間短縮になるのではないでしょうか。

管理が出来ているかで、スピードに差が出る

ただ、素材は膨大な数になっていくと、探し出すのも一苦労になっていきます。
自分が探すときにどの手順で絞り込んでいくのが分かりやすいか考えた上での分類をしておくこともとても大切です。

私は今はローカルフォルダに素材を保存していて、フォルダ分けで管理しているのですが、Evernoteで管理していこうかな、と考えています。

 

デザイナー向けEvernote活用術5選 | ごりゅご.com

【Webデザイナー見習い必見】使える素材サイトまとめ - 2014/11/07 [schoo]

デザインの基礎力をワンランクアップしたい私(Webデザイナー)の注意書き

 

へこたれない心をつくる

f:id:tosssaurus:20150426225359j:plain

これもデザインを上達させるために必要なことです。
「120%の力でデザインした、これ以上いいデザインは考えられない」という出来でも、見る人によって様々な意見があるのは当然です。

修正はつきものだし、もしかするとクライアントの意向が変わって全替えなんてこともザラにあります。
その度に落ち込んだり、悲しんだりしていては、とてもじゃないですが心が持ちません。
いちいち落ち込んでいると、指摘を受けることが嫌になってきます。指摘を素直に受けることもデザインが上達する方法のひとつなのですが、指摘を受けることを避けてしまいます。

一歩引いて、冷静に受け止める

デザインには正解がなく、クライアント目線では「好きか嫌いか」が判断材料だったりするので、"絶対"はあり得ないのです。
ですので、「修正されるもの」と80%くらいの気持ちで、自分のデザインとの距離を少し取る。「どんどん修正しますよ」「もう1案出しましょうか」くらいの気持ちでいることも結構大事です。

へこたれて、上達する前に辞めてしまっては意味がありません。
難しいことですが、へこたれない心をつくることもデザイン上達には不可欠です。

 

デザインが苦手で悩んだときに読むサイト一覧

デザイン上達法

独学Webデザイナーの独自なWebデザイン学習法 | ニシザワのブログ

教えて先輩!「誰もがぶつかるデザインの壁」の乗り越え方! | Web制作ならWebNAUT

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

新人デザイナー必見!先輩デザイナーに聞いた「誰もがぶつかるデザインの壁」 | Web制作ならWebNAUT

向いている人とそうでない人とは | 30代から始めるWebデザイナー初心者ガイド

どや!?すぐにはじめられるWebデザイン勉強法!女子大学院生がWebデザインについて語るブログ「Web-DAYsign」が面白い。 | デザインどや!?

WEB担当者のデザイン力を高めるための3つの基本ポイント | インバウンドサイトを作るときに知っておきたいこと | インバウンドサイトのエムハンド

Web制作会社に飛び込んだ新入社員にとりあえず読ませたいスライド - W3Q

新人Webデザイナーが必ず勉強になる最強記事30選! - NAVER まとめ

Webサイト模写

Webデザインのスキルを磨こう!Webサイト模写のススメ | Webクリエイターボックス

模写して学ぼう!駆け出しデザイナーのためのデザイン上達法 | 株式会社LIG

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

Webデザイン完コピのススメ!ゼロから始める初心者は、まず沢山のページを模写し真似して作るべし! | WEB-LABO

Webデザイン力をアップさせる4つのアクション | 株式会社アクトゼロ|ソーシャルメディアマーケティング・訪日インバウンド施策

模写で学ぶWebデザイン!「東急電鉄」編 | Webデザイン | 4kaku design

デザインするときの考え方

【Webデザイナーを目指すあなたへ】デザイナー1年目におさえるべき13ポイント – しばやんすたいる

デザインの仕事がイケてない時にありがちな5つの事

デザインが優れている人には愛情と思いやりがあるという話|資料やメールも全てがデザイン*ホームページを作る人のネタ帳

これさえ押さえればOK!ゼロから1年で一人前のWebデザイナーになれる5つのポイント | 全研オフィシャルブログ

向いている人とそうでない人とは | 30代から始めるWebデザイナー初心者ガイド

新人Webデザイナーが誰でもぶつかる壁。そんな壁は壊しちゃえ。 | ポケットラボ

あなたのデザインを説明しよう | design door

独学で苦しまない、5つのコツ - ウェブデザイナーになるには

刺激を受けるデザイン

WEBデザインとは何か?迷った人に読んでほしい言葉 80+ | Webロケッツマガジン

たった1枚に込められたクリエイティブすぎる17個の広告 | creive【クリーブ】

思考力の刺激になる!時間を割いてでも見るべきウェブに関する3つのTED動画 | クリエイター | エンジニア・Webデザイナー向けのウェブマガジン scrmble

創作意欲が刺激されるほどクリエイティブなウェブデザインをまとめていく - Literally

インスピレーションを刺激する!世界のWebデザインアワード厳選5サイト | 株式会社LIG

 

最後に

この記事が少しでも、私と同じようにデザインが苦手な方へのお力になれれば幸いです。

以前、省エネ脳についての話をしたことがあります。

itkeijyoshilog.hatenablog.com

プロとアマの脳の使い方には違いがあって、プロのように脳を省エネ化するには、英語学習で考えると約2200時間の勉強で実現できる、ということでした。

2200時間勉強したらどのくらいのレベルになるのかを検証したく、勉強する分野を考えていたのですが、"Webデザイン"と決めました。
Webデザインの勉強は多分野で検証しづらいのですが、なるべく記録を取っていきたいと思います。