こんにちは、「はいふぁい」編集部です。

Webディレクター・マーケティングなどを行っているクリーク・アンド・リバー社シニアディレクター「アベ」と、フリーランスWebデザイナー・エンジニア「ケン」が、会社じゃ話せないホンネや実体験から得られたノウハウ＆教訓をお伝えしていきます！

今回は「Webデザイナーのエンジニアリング」についてお話ししています。「企業で働く場合」と「フリーランスで働いく場合」に、使えるツールや身につくスキルに差は出るのでしょうか？是非最後までご覧ください！

そもそも何をキッカケでプログラミングをはじめたのはじめたの!？

編：まずはケンさん、色々教えてください（フリが雑）。

ケ：まずは、Webデザインから始めたんですけど、大学の時に授業で勉強しました。

ア：あれっ、ショーコさんてHTML書いたりします？

編：書くほどじゃないですけど、いじったりはします！

ケ：そうなんですね。で、要はWebサイトを制作するにあたり、デザインや機能などでもっと「ああしたい」「こうしたい」っていうことを実現するために、色んな言語とか技術とかあるんですよ。

ア：一番最初にプログラミングの必要性を感じたのは何でしたか？

ケ：HTML、CSSをまずはやらないといけないなってところで、ゴリゴリコーディングしていました。で、CSSを直書きするとものすごい時間がかかるという課題がありまして。なので、「もっと効率的にCSSを書いて、運用を楽にしたい！」ということで「Sass （「Syntactically・Awesome・StyleSheet」の略）」を使って納品スピードを上げました。
VSCodeでSASSをコンパイルする環境になりますね。そんなに難しい技術ではないのでインターネット上の情報で十分勉強できると思います！

ア：最初は自分の業務効率化のためにやっていった感じですか？

ケ：そうですね。「単純に納品スピードを爆速に上げるために、Sassをやっていた方がいい」っていうのを聞いて、「あっじゃあSaasでCSS書こう」ってなりました。
一方で「サイトに動きを持たせたい」ってなってくると、JavaScriptっていう言語が必要になってきて・・・っていう感じでした。

Webサイト制作をするのであればこの５つを網羅せよ！

ア：今の「サイトに動きを持たせたい」話になると今度はお客さんの要望が絡んでくるじゃないですか。

ケ：そうですね。Webサイトを作ったり、オウンドメディアを作るときは、今言ったHTML／CSS、Sass、jQuery、JavaScriptがあれば大体実現はできるんですね。あっ、WordPressもありましたね（笑）。
CMSシェアが高いのがWordPressで、ITやWebの知識がない方でも簡単にコンテンツを量産できます。
WordPressには「プラグイン」と呼ばれるカスタマイズするための拡張機能があります。インストールしたばかりの状態はシンプルな造りになっています。拡張機能であるプラグインをインストールすることで、好みの状態にカスタマイズすることができます。
お問い合わせ機能だったり、ニュースだったり、Webサイト作る上で「こういう機能欲しいよね」っていうWordPressがあることで大体完結できるんです。
なので、デザイン力＋①HTML／CSS、②JavaScript、③Sass、④jQuery、⑤WordPress、これらが揃っていれば、Web制作分野は網羅してくる感じです。

Web制作は憧れる人が多い一方、現実は地味な作業かつ孤独すぎて辞めていく人も...

ア：それはタイミング的には全部一緒にカバーした感じですか？

ケ：いえ、一緒じゃないですね。それはもうじわじわと。結構これって孤独で地味な作業なんですよ。耐えられなくて辞めちゃう人続出なんです。
なんで僕が今もやれているかというとクライアントからの要求に「何かをしなきゃいけないから、〇〇が必要。だから△△をできるようにならないとね」っていう方向で応えようと必死でやってきたからだと思います。
なのでSNS等で「Webデザインのお仕事したいです」っていう方達、ご自身で真面目に勉強する方が多いと思うんですが、僕の場合はお客さんにお願いされて初めてそこでやらざるを得ない環境になって「どうにかしてやらないといけない」と思って、仕事していたらいつの間にか今みたいな状態になっていました。

お客様にリクエストされた要望を解決しつつ、それが自分の肥やしにもなる

ア：それいいですよね。机上で知識として全体的に学んでいる人が多い印象で、実践になると使えないことが多いんですよ。それは「課題を解決する」という視点で勉強していないので身になってないからだと思います。
なのでケンさんみたいに「これやってよ！」と言われてキャッチアップしていくのは理想形ですよね。

ケ：そうですね。「こういうことやってよ！」って言われたことって、次にまた、他の人からも言われると思うんですよね。Webサイト作ったり、メディア作ったり大体やることは一緒なんですよ。その時自分が言われた要望を解決出来たらそれって、自分の技術資産になるんですよ。
最初は辛いけど、乗り越えられたら楽だと思います。

ア：基本的には、色んなサイト作っていくうえで、クライアントからリクエストされることを必死で実現しようと思って、それを積み重ねてきた結果が「今のケンさん」って感じですよね。

ア：そうですね。「これをやるためにはどうすればいいんだ」って壁にぶち当たって解決した数が市場での価値になっていくのかなと思います。

編：勉強することが楽しいって人もいますよね。

ア：極みに到達する人はいますよね（笑）。研究がすきみたいな。

ケ：今までの話って、「Webサイト制作」での話なんですよ。これをお客さんが利用できるようにするにはWebサーバーが必要で、その辺の知識とかファイルサーバー、メールサーバー...これらの知識があると、お客さんとのやり取りはスムーズにできるかなって感じですね。

ア：そこはねーまたデザインと全然違う領域の話だけどねー。ちなみにクライアントからの要望を実現するための情報収集の仕方、情報ソースってどこから取ってきていたんですか？

ケ：いやー、それは問題の難易度にもよるんですけど、Web制作領域だったら大体ググったらでてきますね。アプリの開発とかになったらクリエイター仲間とかに聞くかもしれないです。

「一人前のWebデザイナーさんの基準ってありますか？」

編：ケンさんにお聞きしたいんですけど、ライターとか編集者って正直「このツール使いこなせるようになったら一人前」とかそういう線引きってはっきりしてないんですよ。一方で、ケンさんの場合、クライアントさんからリクエストされたものを一生懸命打ち返しながら血肉にしていった経緯があるわけですよね？
どこまでツールやスキルを磨き上げることができれば、一人前のWebデザイナーさんになれるんですかね？何か基準とかってありますか？

ケ：そうですね。これは人によって定義が違うと思います。僕の場合は自分の作ったデザインをその通りにWeb上で再現できればいいなと思っています。それができたら一人前かなと思っています。

編：なるほど。素人目で聞いていたんですが、すごく分かりやすいです。お仕事の枠組みとして、Web制作とWeb開発があるっていうイメージですか？

ケ：そうです！そうです！あとデザインもあります。三本柱です。

編：そう考えると非常に多岐にわたっていますよね。またそこから細分化されていくっていう事ですものね。

ケ：あーそうですね。デザインといったら記事のサムネイル制作から、メディアサイトのUIまでやらせてもらっていますね。

ア：グラフィック領域も求められるし、テクニカルな部分もできないといけない、あとはユーザーさんの使い勝手のところも考える必要がある。更にその先に行くとマーケティング領域も入ってきますよね。

”領域にこだわるタイプ”と”なんでもこなせちゃうタイプ”

ケ：あとはSEOとかですかね....。最近聞いたんですけど、あんまり僕みたいな人間っていないみたいですね（笑）。

ア：少ないと思いますよ（笑）

ケ：大体みんな「ここだ！」って決めて落としどころを決めてやっているパターンが多いみたいです。

ア：フリーランスの人に多いですよね「野良デザイナー」って僕は呼んでいますがそういう方はとにかく0～100まで全部やらないと仕事にならないんで、色んな要望を聞いて自分で調べていたりすると、全部できるようになっちゃうんですよね。

ケ：会社に入ってWebデザイナーをやっている人のイメージなんですけど、「ここやってくださいね」っていう領域があってそこしかやらない印象があります。例えば「デザインやって」と言われてデザインしかやらないとか。「コード書いてください」と言われたらコードしか書かない人とか。

編：それって市場的には勿論、希少価値が高いですよね。

ケ：高いんすかねぇ〜、どうなんですかねぇ〜（笑）。

ア：ケンさんとご一緒できたことは幸運だと思っています！

ケ：ありがとうございます！（笑)　それはもう本当にこちらこそです。

編：会社じゃ話せないハナシ史上最も、ケンさんのプレゼンス力が高い回となった印象があります。本日もありがとうございました！

ア＆ケ：ありがとうございました！

・・・

ーTwitter

ークリエイターキャリア支援メディア『HIGH‐FIVE』

ーLINE

ーInstagram