Webデザイナーとして参加していた案件が炎上してしまい、デザイン業務をすることがとても怖くなってしまいました…。
そんなデザイン恐怖症を克服するため、デザインをもっともっと上達させよう!と決めました。
私の個人的な意見で恐縮ですが、同じようにデザインで悩める方が、デザインを前向きに捉えるきっかけのひとつにでもなれればと思い、自分なりに大切だと思うことを書き出しました。
関連記事
デザインは2年でどのくらい向上するものなのか。(ビジュアルはウソつかない) - IT系女子ログ
Webデザイナー2年目を、まるっと棚卸し[デザイン編] - IT系女子ログ
- デザインが仕上がらず炎上
- デザインを追求する、という覚悟を決める
- 他責でなく自責で考える
- 良いデザインをたくさん知る
- 細部まで観察して、なぜ良く見えるのかを自分の頭で考える
- 良いデザインの完コピをして、どんどん手を動かす
- 自分用の素材リストを作る
- へこたれない心をつくる
- デザインが苦手で悩んだときに読むサイト一覧
- 最後に
デザインが仕上がらず炎上
私は未経験でWebデザイナーとして入社して2年目です。
ところが2日たってもチーフデザイナーからのOKが頂けず、3日目の午後になってもOKが頂けない…。チーフには「このクオリティでは今日中にクライアントに出せない」と…。
しかし、クライアントからは「何時になっても良いから今日中に出して」との声があり、必死でやるも、やはりクオリティが上がらず、仕上がらないデザインをチーフに引き継いで、泣く泣く終電で帰りました。
by xvire1969
デザインとはとても難しいのだと痛感
少しずつ案件を任されるようになってきたのですが、自分の力だけではなかなか進まず、力不足を身にしみて実感しています。それと同時に今まで難なく進んでいたのは先輩やチーフのサポートがあってのこと、というのも実感しました。
デザインを追求する、という覚悟を決める
by kohlmann.sascha
これが、プロになるために一番必要なことです。
デザインと向き合い続ける
「デザインというのは感覚やセンスという、"特別な能力がある人しかできない"、一般の感覚からは理解できない領域と思われがちだが、実はそうではない。今バリバリ活躍しているデザイナーも始めは皆、未経験で初心者。
たくさん勉強して、たくさん制作して、たくさん考えて、たくさん経験してきた積み重ねがあるから、いとも簡単にデザインされたように見えるだけ。デザインするというのは、実はロジカルな部分も多い。
"この色にこの色を合わせるとこの印象を与える"とか"この配置はこの印象を与える"とか"このターゲットにはこのレイアウト"とか、論理的に計算された上でデザインが出来ている。勉強する領域が広いから、すぐに諦めた人にとっては"特別な能力がないとできないもの"のように感じているだけ。理解できるまで、諦めずに勉強し続ければどんな人でもデザインできるようになる。」by チーフ
他責でなく自責で考える
制限があるから、デザインがより重要になる
デザイナーが提案してもいい
良いデザインをたくさん知る
良いデザインを知らない人が、良いデザインをつくれるわけがない
何も参考にせず、自力で制作していませんか?
チーフ曰く、「何も見ずに自力で制作できるのは、それまでに何百サイトも作ってる人。何百サイトも作ってる人は、自力で作らず、まず参考サイトを探す。」
つまり、色んな制作経験があるデザイナーでも、制作に入る前にはその都度参考サイトを探すのに、経験の浅いデザイナーが何も見ずに制作に取り掛かっても、いいデザインが出来るわけがない。ということです。
何も見ずに制作するということは、自分の引き出しだけでデザインするということ。そんなにたくさん、デザインの引き出しがありますか?
制作経験が浅く、限られた引き出しの中で何とかデザインしようとするから、何回修正してもクオリティが上がらないんです。
業務以外の時間に見ておくことが大事
参考サイトを探すべきなのですが、いざ業務の限られた時間内で探そうとすると、見つからないことも多いです。
ですので、普段からWebサイト集をチェックしたり、制作ブログを読んだりして、良いデザインを知っておくことが大切です。Webサイト集のサイトも、ありがたいことに色んなサイトがあります。大手企業のサイトが多いところ、フラットデザインの多いところ、レスポンシブデザインの多いところなどなど…。カテゴリ分けの仕方も様々です。
普段チェックするときに、どのサイトがどんなデザインが多いか見ておくことで、より早く参考サイトを探せるようになります。
まずは色んなサイトをブックマークしたりRSS登録してみてはいかがでしょうか。
Googleリーダーの代替RSSリーダーまとめ【決定版】 - NAVER まとめ
細部まで観察して、なぜ良く見えるのかを自分の頭で考える
良いデザインはなぜ良く見えるのか
余白の取り方?色?大きさ?シャドウのかけ方?ラインの使い方?写真の置き方?続くコンテンツとのバランス?
なぜよく見えるのか、なぜイマイチに見えるのかも同時に考えると、イマイチなデザインをしなくなるそうです。
少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス
» お前らもっとデザインにおいて1pxの工夫の凄さを知るべき » Blog Archive ウェブ屋の備忘録
良いデザインの完コピをして、どんどん手を動かす
潔く完コピして、学ばせていただく
良いデザインをたくさん知るでも書きましたが、自分の引き出しをたくさん作らないことには色んなデザインに対応できず、なかなか上達しません。
一番良い勉強法は、公開されている良いWebデザインを完全にコピーすること。
私は、これを始めに聞いたときにかなり抵抗がありました。「パクるなんてダメ!」と思っていたのですが、パクるというより模写するという考えです。もちろん、丸パクリのものを業務で提出すると怒られますが、勉強するには完コピすることが一番効率的なんだそうです。
なぜ効率的かというと、完成度の高いデザインと同じように実際に自分の手を動かして作っていくことで、経験を積んでいけるからです。
私の実践するトレース方法
できることなら、横に置きながら進めていきたいのですが、私のような初心者は時間がかかり過ぎてしまいます。始めは下に見本を置いてトレースしてもいいです。トレースしながら、完全に同じものを作る為にはどうすればいいかを考えながら手を動かします。"よく見ると1pxの線があった"とか、"シャドウのかけ方が凝っている"とか"フォントの選び方"とか、大変勉強になります。
ロゴはトレースしなくてもいいですが、写真素材も自分で近いものを探すのも勉強のうちだそうです。意外と探し出すのが難しいことに気づきます。
部分的にトレースするだけでも勉強になりますが、できればヘッダーからフッターまでまるっと1ページ完コピしましょう。フッターでどのようにバランスを取っているかも大事だからです。
キャプチャーのススメ
普段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デザイナー)の注意書き
へこたれない心をつくる
これもデザインを上達させるために必要なことです。
「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ポイント – しばやんすたいる
デザインが優れている人には愛情と思いやりがあるという話|資料やメールも全てがデザイン*ホームページを作る人のネタ帳
これさえ押さえればOK!ゼロから1年で一人前のWebデザイナーになれる5つのポイント | 全研オフィシャルブログ
向いている人とそうでない人とは | 30代から始めるWebデザイナー初心者ガイド
新人Webデザイナーが誰でもぶつかる壁。そんな壁は壊しちゃえ。 | ポケットラボ
独学で苦しまない、5つのコツ - ウェブデザイナーになるには
刺激を受けるデザイン
WEBデザインとは何か?迷った人に読んでほしい言葉 80+ | Webロケッツマガジン
たった1枚に込められたクリエイティブすぎる17個の広告 | creive【クリーブ】
思考力の刺激になる!時間を割いてでも見るべきウェブに関する3つのTED動画 | クリエイター | エンジニア・Webデザイナー向けのウェブマガジン scrmble
創作意欲が刺激されるほどクリエイティブなウェブデザインをまとめていく - Literally
インスピレーションを刺激する!世界のWebデザインアワード厳選5サイト | 株式会社LIG
最後に
この記事が少しでも、私と同じようにデザインが苦手な方へのお力になれれば幸いです。
以前、省エネ脳についての話をしたことがあります。
プロとアマの脳の使い方には違いがあって、プロのように脳を省エネ化するには、英語学習で考えると約2200時間の勉強で実現できる、ということでした。
2200時間勉強したらどのくらいのレベルになるのかを検証したく、勉強する分野を考えていたのですが、"Webデザイン"と決めました。
Webデザインの勉強は多分野で検証しづらいのですが、なるべく記録を取っていきたいと思います。
2200時間達成しました!▼