「Webデザインスキルを身に付けたい」に対するアドバイス

「海住さん、どこのデザインスクール通ってましたか？？ 僕もテクニカルスキル(特にUXらへん)を身に着けたいなと思い学習方法を模索中です」

ある朝会社の同僚に聞かれました。
意欲が高くて素晴らしいなあと思いつつ、良い回答が瞬時に思いつかなかったので、デザインスキルの棚卸しがてらこれまでの経験を書いてみます。

👶　22歳〜24歳（2年1ヶ月）

にちゃんねるで見つけた神保町の化学メーカーに就職。プラスチックの開発支援など。
「業界冊子の広告枠（A4半分くらい）を買ったので広告作ってみて」と隣の部署のおじさんから仕事をもらった結果、目玉が飛び出るほどダサい広告をニコニコと提出し、絶句される。
この時初めて”ベクター”という概念を知る。
認識は「でっかくしてもぼけない、なんかすごいデータ。」

👦　24歳（3ヶ月）

会社をやめて無職になる。
西武新宿線沼袋駅の5万円木造アパートで一人暮らし、2時間ほど散歩してまっ昼間にガストでパフェを食べるのが日課。

化学の仕事にどうしても興味がわかず、お金より自分の好きなことを仕事にしようと思いグラフィックデザイナーを志す。
（ウェブは怖いというイメージがあった。）

グラフィックデザイナーの求人はどれも「Illustratorが使えること」が必須条件だったので、「Illustratorで作れるロゴ」の本を買ってひとつずつ作ってみる。
『アピアランス』『複合パス』など出てくる用語が難しすぎて、１日に3つくらいしか作れない。
毎日カーテンを閉めた暗い部屋で、訳も分からずロゴを黙々と作る日々。

スキルアップした感覚はなかった。

次に「実案件の方がアピール材料になる」と思いクラウドアウトソーシングのデザインコンペに応募する。
お題は「サイトに載せるフロー図を分かりやすくデザインしてください」という案件で、PhotoshopElementsで作って提出したところ「こんなの私でもできます」と憤慨される。

コンペなのでその時点ではお金はもらっていなかったが、顔も知らないクライアントから怒られたことにビックリして、「今晩作り直します」と徹夜で作り直し半泣きで2案目を提出。

私の案はスルーだったが、「とても良い案がきたので締め切ります」クライアントが機嫌を取り戻していたのでホッとする。
その”とても良い案”は、色がまだついていないモノクロで作成されており、「なるほどプロはこういう風にするのか」と学ぶ。

👦　24歳（3ヶ月）

応募していた職業訓練に受かったので東中野の職業訓練校に10時ー17時で通う。
本当はグラフィックデザインを希望していたが募集が「Webクリエイターコース」のみだったので、まあいいかと思いHTMLやCSS、fireworksの授業を受ける。

🖥　コーディング
コーディングと言ってもコードを書くのではなく、DreamweaverのGUI機能でポチポチとクリックしてマージンをつけていた。
ウェブサイトはクリックで作るものだと思っていた。
「z-indexはとりあえず999」という先生の教えをその後3年くらい忠実に守る。
横に並べたい時はfloatとネガティブマージンを使うのが主流な頃。clearfixも忘れずに。

コーディングの成績は高得点をもらえていたし、好きだった。
高校生の頃ガラケーでコードをコピペしながら自分のHPをデコっていたので、自分はコーディングが得意なのだと勘違いする。

🖌　デザイン
PhotoshopとIllsutratorを身に付けたくて受講した職業訓練だが、授業で利用したツールはFireworksという初めて聞くもの。
※fireworksは現在サービス終了済

同じ職業訓練生の中には元々グラフィックデザインや映像制作、イラストレーターをやっていた女性たちがいて、彼女たちのデザインは群を抜いて綺麗だった。

3ヶ月後の授業終了時、私の成績表にはデザインだけ△マークがつけられていたが、自分のデザインがダサいとは思っていなかったので、「？」と思った。

👻　Flash、フォーム構築
授業にはコーディングやデザイン以外に、Flashやバックエンドなんてものも。しかしご存知の通りFlashはその直後に終焉を迎え、バックエンドも用意されたコードを追加してフォームを作る、（しかしその”用意されたコード”の中身は理解していない）てな感じでその後の実務には特に使えず。

👑　実際の企業のウェブサイトを丸々作る
3ヶ月間平日10-17時で通った授業。
最初の1.5ヶ月は上記のような授業を受け、後半は実際の企業のウェブサイトをコンペ形式で作るグループワークに突入。

企業の社員さんが学校に来て、要件を話す。それを聞いた生徒が5人くらいのグループに別れてそれぞれウェブサイトを作り、プレゼン。選ばれたサイトは実際の企業サイトとして採用される。
（※2020年8月現在、5年ぶりにその企業のサイトを見てみましたが当時採用されたものがまだ使われていた…すごい）

これがなかなか大変で、ケンカしながら作った覚えがあります。チームでサイトを作るのって大変なんだなーと実感。
私のチームは惜しくも勝てなかったけど、選ばれたチームのサイトは元映像制作の女性がデザインしたスタイリッシュ！なサイト。デザインスキルの重要性を思い知る。

以上が3ヶ月の職業訓練で学んだ内容。
デザインについては、ツール（それもFireworks）の使い方以上の概念は全く触れられず。
ここではとにかく「ウェブサイトの作り方をなんとなく理解できたこと」が収穫だった。独学でやるよりは、苦労する時間が短かったかなと。
ただし何度でも言いますがここでいう作り方とはDreamweaverで”クリック”しながら作る方法で、実務でやってる人からすると話にならない素人さ…苦笑

実は職業訓練校を選ぶ際、この東中野の学校以外にもう1校、高田馬場の学校にも見学に行った。
その2校から東中野を選んだ理由は「設備の綺麗さ・新しさ」だったが、今振り返るとそんなことより「授業の内容／講師の実績・経験」を細かく調べて吟味した方がいい。

所詮学校で習うことなんて「補助輪つきの自転車に乗る経験」でしかないので、補助輪を外したあといかに速く・長く自走するかは自分次第。
それでも、経験豊富でモダンな現場で活躍する講師からは、最新の技術はもちろん、現場で役立つ考え方なども吸収できると思うので。

👦　24歳（2ヶ月）

学校を卒業したあと、2ヶ月の就職活動期間を経て大阪のウェブ制作会社に内定。
内定から入社まで少し時間があったので、趣味のブログを通じて知り合ったインターネットの友人たちとキャラクターグッズやサイトを作って遊ぶ。
このキャラクターグッズを作るにあたり、自動的にillustratorを触る必要が出てくる。ここで無心にベジェ曲線やパスを結合し続けた時間は、前述の本を見ながらロゴを作った時間に比べて圧倒的に身になった。
スキルの習得は目的ありきじゃないと身体が覚えないと実感。

👧　24歳〜26才（1年4ヶ月）

ウェブ制作会社に契約社員として入社。
採用試験は、面接の他にその場でコーディング試験があった。
ここでも「コーディング＝マウスをクリックして行う」と信じてやまない私はクリックでぽちぽちマージン等をつけ、無事合格！

会社の制作メンバーは、自分以外にコーダー2名・デザイナー2名の少数体制。私はそこで、先輩が作ったサイトにバナーをつけたり、下層ページを作ったりと運用をメインに行なう。

当初のデザインスキルはひどいもので、入社早々「サイトのメインビジュアルにワッペン状の訴求デザインを追加する」という案件を納品したところ、営業の先輩より「こんなのお客さんに出せません！！！！」と超お怒りのメールが来る。
（ちなみにこの時も自分のデザインを客観的に見れず、「？」と思っていた。）

この会社では一番下っぱだった私だが、1日に4-5回かかってくる電話受けとたまのお茶出し以外は脇目もふらずデザイン・コーディング・サーバーアップ…を淡々と繰り返す日々。
無駄なことを考える暇もなく、毎日訪れる締め切りに案件を間に合わせることが精一杯で、とにかく量をやれた経験が本当に良かった。

そして先輩が作った素敵なデザインデータを覗き見できることも楽しみの一つ。
どうやって作られているのか分からない装飾は自分のファイルにこっそりコピーして家でひとつひとつレイヤーを確認し、作り方を分析。
仕事の為にやっていたというよりは、美しすぎて自分も同じデザインが作れるようになりたかった。

最初はデザインができず怒られ続けていた私でしたが、1年も経つと仕事に慣れ、あまり苦もなく納品ができるようになっていた。

一方で、神の手を持つ先輩と比べると、今後いくら修行を積んでも追いつけるとは思えなかった。
そのくらいプロのデザイナーが作るデザインはすごい。

契約期間満了に伴い次のステージを見つけることになるが、この1年4ヶ月という短い時間でとにかくテクニカルスキルの習得に没頭できたことは本当に有難かった。
ここで得た経験は、貯金として次のステージでも長く役立った。


デザインにおいて、「手を動かして作ること」よりさらに上流概念の設計・戦略は重要。
一方で、身につける順序としてはまず「自分の手の延長のようにツールを使いこなせること」「パッと見ダサくないデザインを作れること」「HTML・CSSでマークアップができること」を最初の目標にすべきとも思う。

👴　26歳〜今（3年2ヶ月）

事業会社にインハウスデザイナーとして入社。
面接中には「デザインスキルを身につけたいなら制作会社の方がいいよ」とアドバイスをいただくものの、デザイン以外に様々な経験を積みたいと主張し内定をもらう。

この会社に入って最初に衝撃を受けた事件は、依頼を受けて追加したバナーに対し「そもそもこのバナーってどういう意味があるの？どんな動線でたどり着くの？このページに貼ることが正解なの？」とデザインの目的を問われたこと。

「当たり前じゃね？」と思われた方は、ある程度UX思考が染み付いていると言って良いと思う。なぜなら私は前述の制作会社にいた時、そんなこと１ミリも考えたことがなかったから（笑）。
制作会社時代は、とにかく締め切りまでにお客さんがYESというデザインを納品することにいっぱいいっぱいで、その先のユーザーの気持ちを考えたことが無かった。

これまでの自分がいかに無思考でデザインを作っていたか、先の言葉で気づいた私はあまりの衝撃と恥ずかしさに帰り道こっそり泣く。

そして直後に始めた、数百万PV規模のサイトのABテスト。わずかなデザインでユーザーの行動が変わる。その事実をこの目で確認できた経験は、その後どんなUIを考える際にも土台になった。

また、ここで先輩デザイナーに教えてもらった「自分のデザインを説明できることが大切」という言葉。
当時は「デザインを実際に使うエンドユーザーには説明なんて届かないのに、どうして？」と完全に腹落ちできなかった。

3年経った今思うのは、「説明できること」は「無数の引き出しの中から意思を持って最良のデザインを選択していること」の表れだから、ということ。

パッと見てかっこいい見た目にすること、は極論デザインの目的を聞かずとも可能。
一方で、目的達成のためのデザインは「目的・優先順位の把握」「デザインの引き出しの多さ」「デザインの効果の理解」をそれぞれ満たすべき必要がある。

制作会社時代にテクニカルスキルを、事業会社時代にUX思考を。それぞれ異なる、でもどちらも大事な経験を積めたことはとてもラッキーだった。

👵　では、何をすれば？

これまで述べたことのまとめに入ります。

以下が、デザインスキルの習得にあたり重要だと感じたこと。

・ただ作るのではなく誰かの依頼など目的ありきで行う
・学校は「補助輪つきの自転車」
・量は裏切らない
・第三者から客観的なフィードバックをもらう
・ツールを身体の延長のように使えるようにする
・人が作ったデザインデータを見る
・数多くの引き出しから目的に沿ったデザインを選ぶ

具体的な一歩としては、
「バナーやアイキャッチの依頼を受けて作ってみる」
とか良いのではないかと思います。

依頼してくれる人がいない…という方は、
インターネットでブログやサロンをやっている人のバナーやアイキャッチを勝手に作って渡してみる、とかどうでしょうか。
（私は好きな著名人の方のアイキャッチを勝手に作ったことあります。採用してもらえました）

そのデザインがお眼鏡に叶えば相手は喜んでくれると思いますし、イマイチだったら反応はもらえません。

それは恥ずかしい…という方は、デザインのお題を出してくれる下記のようなサイトもありますよ！

このバナーお題の良いところは、「#バナーお題」でTwitter検索すると他の方が作ったバナーもみれることです。
また、お題のジャンルが複数あるので様々なトンマナのデザインに挑戦できるところですね。
（私は不動産系の制作会社から全くトンマナの違う事業会社に移って、結構苦労しました…）
「どんなジャンルのデザインも作れる」ってうまい人の特徴だと思います。

バナーって、限られた面積の中で優先順位をつけてデザインすることの訓練になるので意外と侮れません。
いまだにだいぶ苦労します！

👵　最後に

今の自分からもっと成長するために、学びたい・勉強したい。

そう思う気持ち自体、素晴らしいですよね。
最初の質問を彼にもらった時、偉そうに答えを考える一方で、もうすぐ30になる自分は何を勉強し続けられているだろう？と反省しました。

人生はいつも、今が一番若いです。

私も負けないくらい、たくさん勉強し続ける日々でいたいです。