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

f:id:tosssaurus:20150426233958j:plain

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

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

デザインが仕上がらず炎上
- デザインとはとても難しいのだと痛感
デザインを追求する、という覚悟を決める
- デザインと向き合い続ける
他責でなく自責で考える
- 制限があるから、デザインがより重要になる
- デザイナーが提案してもいい
良いデザインをたくさん知る
- 良いデザインを知らない人が、良いデザインをつくれるわけがない
- 業務以外の時間に見ておくことが大事
細部まで観察して、なぜ良く見えるのかを自分の頭で考える
- 良いデザインはなぜ良く見えるのか
良いデザインの完コピをして、どんどん手を動かす
自分用の素材リストを作る
- 管理が出来ているかで、スピードに差が出る
へこたれない心をつくる
- 一歩引いて、冷静に受け止める
デザインが苦手で悩んだときに読むサイト一覧
最後に
- 2200時間達成しました！▼

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

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

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

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

f:id:tosssaurus:20150426225529j:plain by xvire1969

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

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

この1件で痛感したのは、自分のデザイン力の無さと、プロのデザイナーと今の私との実力の差です。

Webもデザインも、未経験で入社して2年目。
少しずつ案件を任されるようになってきたのですが、自分の力だけではなかなか進まず、力不足を身にしみて実感しています。それと同時に今まで難なく進んでいたのは先輩やチーフのサポートがあってのこと、というのも実感しました。

1年間、のほほんと過ごしてきたツケだと思います…。

デザインができないことが、とっっっても悔しくて周りの方々に申し訳ないので、Webデザインを上達させる為にはどうすれば良いのか、を考えてみました。

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

f:id:tosssaurus:20150426231144j:plain by kohlmann.sascha

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

私は覚悟しているつもりで、していませんでした。もっと簡単に考えていたのですが、甘かったです。

というのも、今まで先輩のサポートが多分にあり、自分にデザイン力がある程度あると勘違いしてしまっていたのです。

いざ、自分の力だけでデザインしようと思うと、手が動かなかったのです。今までデザインに使ってきたアイデアのほとんどを、先輩の引き出しから拝借していたんですから、当たり前ですよね。自分の実力の無さが露呈して、とても情けなかったし、悔しかったし、自分自身に残念な気持ちになりました。

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

私はデザインが苦手です。あまり自覚していなかったのですが、なるべく避けながら、当たり障りない箇所にしか手を出さないようにしていました。逃げていては上達できるわけないですよね。

そんな私ですが、チーフから掛けて頂いた言葉がすごく身にしみましたので、ここに書き残しておきます。

「デザインというのは感覚やセンスという、"特別な能力がある人しかできない"、一般の感覚からは理解できない領域と思われがちだが、実はそうではない。

今バリバリ活躍しているデザイナーも始めは皆、未経験で初心者。
たくさん勉強して、たくさん制作して、たくさん考えて、たくさん経験してきた積み重ねがあるから、いとも簡単にデザインされたように見えるだけ。

デザインするというのは、実はロジカルな部分も多い。
"この色にこの色を合わせるとこの印象を与える"とか"この配置はこの印象を与える"とか"このターゲットにはこのレイアウト"とか、論理的に計算された上でデザインが出来ている。

勉強する領域が広いから、すぐに諦めた人にとっては"特別な能力がないとできないもの"のように感じているだけ。理解できるまで、諦めずに勉強し続ければどんな人でもデザインできるようになる。」

by チーフ

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

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

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

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

他責でなく自責で考える

「良い素材がないから」「良いキャッチコピーがもらえないから」「使える写真が少ないから」「納期が短いから」「具体的な指示がないから」「体調が悪いから」「まだ勉強中だから」……

できない理由はいくらでも探せると思います。

しかし、制限のある中でいかにクライアントの希望に沿ったものを作り出すのがデザインの真髄であり、ここでデザイン力のある、ないがダイレクトに反映されます。

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

そもそも、制限のない案件なんてあるんでしょうか。

仕事でデザインに関わる以上、お金がかかります。どんな案件でも、限られた予算内で制作する以上、制限があるのは当然のことですよね。

「良い素材がない」なら、探せばいい。探せないなら、作ればいい。

「良いキャッチコピーがもらえない」なら、コピーの扱い方を変えればいい。変えれないなら、デザインにあうコピーを書けばいい。書けないなら、コピーなしで成立するデザインを作ればいい。

制限のある中で、クライアントの希望に沿ったデザインを作れるのであれば、こちらから提案していけばいい。

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

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

ルール変更のルール - デザインのはてな

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

f:id:tosssaurus:20150426231515j:plain

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

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

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

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

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

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

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

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

RSSリーダーの効率的な使い方「RSSとは」な人に朗報！Feedlyでフィード購読のすすめ

私もずっとFeedlyを愛用しています。

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

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

参考サイトと同じ色や素材を使っていても、うまくはまらないときがあります。

なぜこのデザインはよく見えるのか。
余白の取り方？色？大きさ？シャドウのかけ方？ラインの使い方？写真の置き方？続くコンテンツとのバランス？

細部まで見るとちょっとした効果で全体のバランスを取っていたりします。

さらに効果的なのは、イマイチなデザインと比べること。

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

少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス

» お前らもっとデザインにおいて1pxの工夫の凄さを知るべき » Blog Archive ウェブ屋の備忘録

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

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案出しましょうか」くらいの気持ちでいることも結構大事です。

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

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

最後に

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

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

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

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

IT系女子ログ

Webデザイナーのエッセイ。デザイン、コーディングで気になることをあれこれ考える。