エディトリアル・グラフィックデザイナーがWebデザイナーになるまで

Webデザイナー/ディレクターのヤスハラタカユキです。

前回「エディトリアルデザインとはなにか」について説明しましたが、私の現在の主業務はWeb関連のお仕事です。

数年前に紙媒体からwebへとジョブチェンジしたのですが、最初はかなり？？？？？なことが多く、手探りでやってきたので、その経験をお話しします。

多分長くなるので数回に分かれちゃうと思いますが、お付き合いください。

目次

• グラフィックからのwebデザイン、どう切り替える？
• Webデザインに必要なこと
• Webデザインをどのように学ぶか
• フォトショップが地獄
• 今回のまとめ

グラフィックからWebデザインへ、どう切り替える？

私は紙媒体のデザイン、ディレクションをしていた頃から、Webデザインに興味があるかという社内の調査に、何度か「興味がある」と返事をしていました。

とはいえ何か勉強をしてたわけでもなく、あの文字の羅列（HTML/CSS）を見るだけで頭痛がするような有様。ですが、時代の流れかちょうど大きな紙の媒体がなくなったことをきっかけに、弊社Webチームに移籍しました。

↑divって何じゃろ……からのスタート

まず最初に始めたことは、HTML/CSS指南本を見ながら、ひたすらにキーボードを叩き、とにかくHTMLの知識を頭に詰め込んでいくことでした。

先生は、当時弊社にいたYちゃんという21歳の女子です。

「よ、Yちゃん…clearfixってなにかな……？」（40代男子）

40を超えたおっさんが21歳の女の子に教えてもらうという、まあまあなんだかな～という状況でしたが、ここで一つ気づいたことがありました。

若い子にはHTML/CSSの知識では勝てない！ということです。

紙芝居見て育った70～80代のおじいちゃん世代がBDレコーダーの予約ができないように、ファミコン世代の40代はデジタルネイティブではないんです。

マリオだって3Dじゃないんだから。

頭の中に入っていかないこと山の如し。生まれたときからインターネットに慣れ親しんでる若い子たちに、インターネットの言語で勝負をしたら、フルボッコされるだけなんですわ。

ここでモードを切り替えました。コーディングはその道のプロに任せればいい。こっちは紙媒体で培ったデザインとディレクションの能力で仕事をしよう、と。

とはいえHTML/CSSのことがわからない状態ではデザインも何もできたものではないので、コーダーと会話ができる程度には覚える必要がありました。

さらにJavascript（通称JS）という、webページに動きをつけてよりリッチに見せる言語のことも学ばないといけません。

ところでなぜ私がデザイナーという仕事を選んだかというと、数学が苦手で赤点製造機だったために早々に理系の道は諦め、文系をこじらせた結果がデザイナーだった訳ですが、

このJSなるものは代入、関数などの数学的要素で私を絶望のどん底へと叩き込んでくれたのです。

今はもう理解しましたが、当時は「え？かんす…う？」となって毎回思考停止してました。

Webデザインに必要なこと

紙媒体と違い、Webのデザインは見る人のデバイスによって環境が変わります。

大きな画面のデスクトップ機とノートパソコンでは表示される面積がまったく違いますが、見ているものは同じです。

パソコンとスマホのようなデバイスでも同様です。紙のようにA4、B4という使える面積の決まりもなく、長さも無限に伸ばすことができます。

つまり、表示されるデバイスによってデザインが破綻しないように考えないといけないわけです。

これはレスポンシブデザイン（同一のソースでPCとスマホの表示を切り替える）で、特に顕著になります。

決まったスペースにいかに整理整頓して情報をレイアウトするかということに長けたエディトリアルデザイナーであればあるほど、このweb独特の可変する表示領域について頭を悩ませるでしょう。

この感覚は一朝一夕には身につきません。

↑テトリス的な積み上げ感覚が必要

また、HTML/CSS/JSの知識が浅いままデザインすると、コーディングで再現ができなくなることが往々にして起こるので、21歳の女子に「ちょっとこれ無理なんですけど～」と怒られるハメになるのです。

つまりWebデザインをするにあたり必須で覚えなければいけないことは

●表示領域で可変するデザイン感覚
●HTML/CSS＝Webページを表示させるための土台となる言語。紙でいうところのレイアウトや文字サイズなどのこと
●Javascript（JS）＝HTML/CSSで作ったページにアクションをつけるための言語、めっちゃ数学チック

●イラストレータとフォトショップ＝これはデザインするために必要なツール

この4つが扱えること、理解していることが必須になります。

デザイン感覚は仕事をこなして養っていくしかないし、イラストレータとフォトショップはまぁデザイナーなら誰でも扱えるのでとりあえず置いといて、HTML/CSS/JSをどうしばき倒すか、これがジョブチェンジするにあたり最大の難関になります。

Webデザインをどのように学ぶか

結局私がどうやって学んだかというと

●ひたすらにイケてるサイトを見まくった

とにかくいい感じのサイトを検索で探しまくり、片っ端からブックマークしていきました。仕事なのかサボってんのか、はたから見ると分かりにくい。

なおgoogle先生が色んなサイトを教えてくれます。

●参考書で学んだ

巷に売っている参考書をひたすら読んで勉強。どんな本がいいかすら分からないので○マゾンで評判良さげな本を3冊ばかり購入、会社で自宅で実際に手を動かしながら勉強しました。

なお、分からないことはgoogle先生に聞くのが一番手っ取り早い。

●学習系のサイトで学んだ

Progateというサイトがあります。これはカリキュラムどおりに進めていくとかなり勉強になるのでこれはおすすめです。

無料である程度までは利用できますが、実務には到底使えない程度までしか学べないので、サブスクリプションでより深く学んだほうがいいでしょう。

なお、分からないことはgoogle先生に聞くのが一番手っ取り早い。

●Yちゃんに学んだ

ありがとうYちゃん、我が師よ。パダワン以下の弟子でごめん。

なお、分からないことはYちゃんもgoogle先生に聞いてた。

●スクールで学ばなかった

まあ、働きながらだと難しいですよね。時間に余裕の有る人は通ってみるのもいいのでは。

ひとつ確実に言えることは、「google先生はすべてを教えてくれるが、いい質問じゃないと答えを出してくれない」ということです。

googleを使った検索能力が低い人は、正直向いていないです。

別の仕事で頑張ろう。

↑この先生がいないとwebのお仕事は成り立たないのではないだろうか。

フォトショップが地獄

このようにしてHTML/CSS/JSを学びつつ、日々入ってくるお仕事（紙やちょっとしたWebサイトの改修など）をこなしつつ、知識を蓄えていきました。

ところでWeb業界のデフォルトのデザインアプリは、問答無用でAdobeのフォトショップ。これが紙媒体のデザインに使われるインデザインやイラストレータと比較して、とっっっっっても使いにくいのです。

最初からフォトショップでデザインを始めたWebデザイナーなら簡単にできるようなことも、よりデザイン・レイアウトに使いやすいアプリを使って自由に作っていた人間からすると、不合理のかたまりのようでとてもじゃないが受け付けられません。おいAdobeナメてんのか？となるのです。実際は自分が悪いんだけどな……。

かといってイラストレータ（当時CS6を使用）は、Webデザイン独特のピクセル単位での作業にちょっとした不具合が頻発して、デザイン以外のことにものすごく気を使って作らないといけないのがストレスです。

フォトショップを使ったりイラストレータを使ったり組み合わせてみたりと、色々やってみたもののなかなかしっくりこない日々。

そんなとき、Yちゃん情報で「海外だとsketchっていうアプリがけっこう使われているみたいですよ」とのこと。

↑オランダの会社が開発したアプリケーション。イラストレータっぽい操作感に加え、プロトタイプも作れるのでとっても便利。

早速お試しダウンロードをしてみたところ、最高に使いやすいかったので、これをメインのデザインアプリとしてやっていくことにしました。

当時買い切りで1万円弱だったsketchですが、数年前にサブスクリプションに切り替わり、今は年で1万円ほどになりました。

ここらへんの使用アプリの変遷や困ったことなどは、また別の機会にお話します。

今回のまとめ

やっぱり文章が長くなりました。

この先のことは次回に続くとして、今回の話をまとめると、

• WebデザインをするにはHTML/CSS/JSがわからないとお話にならない
• しかしおっさんは若い子には絶対にHTML/CSS/JSでは勝てない
• 本や学習サイトで学ぶことはできる
• 最後に頼れるのはgoogleで確実に欲しい答えを見つける検索能力
• フォトショップが地獄
• Yちゃんありがとう

ということでした。

次回はUX/UIのこと、文字回りの不自由さについて書いてみようかななんて思ってます。

ではまたお会いしましょ～。