サイト制作の達人・沖良矢さんに「技術」と「学び」の心得について訊いてみた

連載

Webデザインの新しい参考書【達人に学ぼう】

こんにちは！ Webデザイナーのさくらです。

Webデザインには、幅広いスキルが必要です。成果の出るWebサイトをデザインするには、むやみに価値観を固定せず、自分とは異なるスタイルで仕事する人からも常に学ぶことが大切、と考えています。

この連載では、『ふところがより深いWebデザイナーになるためのヒント』をテーマに、くれまとさくらが選びぬいた話題をお届けします。

第4回はWebサイトの「実装の心得」を考える

くれま：

2017年も、そろそろセーターが欠かせない季節になってまいりましたが、ますます「動きが伴うWebサイト」が増えてきましたね。

さくら：

今回は、やけに季節感のある導入ですね。確かに、hoverなどのちょっとした効果でしたら、CSSでも簡単に実装できるようになってきましたよね。でもその一方で、どうやって作ってるのかな？って思うサイトも増えてきて自分の技術力のなさに凹みます。

くれま：

さくらさんはたとえばどんなサイトが気になってますか？

さくら：

私は最近だと日清のキャンペーンサイトは企画を含めて毎回面白いなと思っているのですが（笑）

【どん兵衛×ラッセン】かき揚げを、描きあげる。｜日清のどん兵衛

くれま：

下へスクロールさせたくなるようなちょっとしたエフェクトだったり、動画の効果的な見せ方などは、Web制作者としてはどうやって実装してるのかなって気になりますよね。

さくら：

実装方法の基礎知識を持っているかどうかで、デザインの幅が大きく左右されそうです。

くれま：

そういった動きを伴うWebサイトの作り方って、ものすごく興味ありませんか？ 実はこのサイトを実装してる人は私の知り合いなんですよ。

さくら：

えっ、そうなんですか？ それはお話を聞きたいです。

くれま：

沖良矢さんという方なんですけど。

さくら：

おお〜。Lynda.com 日本版の沖さんのHTML/CSS講座、私もいつも参考にしてます。

くれま：

それはよかった。 沖さんが実装技術とどう向き合っているのかを聞いてみましょうよ。「実装技術との付き合い方のお話」は、ずっと使える学びがありそう。

さくら：

私、初学者の方へお教えする時、「フロントエンドの基本」と「最先端の開発手法」の間に、「深ーいミゾ」というか「ある種の距離」を感じてしまって、悩んでるんですよね……。

くれま：

「基本の習得」と「最新トレンド」のギャップに悩んでるってことですよね。でしたら、沖さんは今回のテーマに最適じゃないですか？

さくら：

そうですね！ 早速行ってみましょう〜！

そんなわけで、私たちは、沖さんの事務所がある中野を訪ねたのでした。

今回の「達人」はこんな人！ 沖さんのキャリアを解剖

こちらの笑顔がキラキラしている男性が、今日の達人・沖良矢さんです！ さて、どんな方なのかと言いますと……。

沖さんは、こんな人

世路庵（せろあん）の屋号でインタラクションデザイナーとして東京で活動。インタラクション性のあるWebサイトの制作を得意とする一方で、講師としての指導やセミナーへの登壇、「DIST」などのクリエイティブコミュニティの運営にも積極的に携わる。

独学でHTMLを触る中学生ー高校生時代

まだWebデザイナーやフロントエンドエンジニアという職業が広く認知されていなかった90年代後半、ゲーム関連のホームページを作っていた中学生の沖さんは、HTML,CSSを独学で学ぶうちになんとなく「Webの仕事をしたいな」と思うように。作ったサイトは「Yahoo!のディレクトリ」にも掲載されたそう。

マルチメディアの基本技術を専門学校で学ぶ

高校卒業後の2000年、日本工学院専門学校へ入学。最初の半年はゲームやCGの制作を学ぶ人たちと一緒にVisual Basic、Mayaなどのデジタル制作全般を学ぶ。後半は「デジタルクリエイターコース」を専攻。Web、DTP、映像制作を総合的に学ぶ。在学中よりFlashユーザーコミュニティ「F-site」（※）などに参加。
※「F-site」はその後、2010年に沖さんが代表に就任（残念ながら2016年に活動停止が発表されました）

デジタルコンテンツ制作会社へ入社

前述のFlashユーザーコミュニティ「F-site」が縁で、2003年、教育関連のWeb、出版を主体とするデジタルコンテンツ制作会社に入社。同社が手がけていた図書館や学校へ配布する教育系「CD-ROMコンテンツ」などの制作に携わる中で、DirectorやFlashなどWeb制作にも通じるスキルが生きる。

「とりあえず辞めよう」からフリーになり、現在に。

2008年ごろ同社を辞めてから、現在までフリーランスの沖さん。実は明確に「フリーになりたい」という気持ちで退職したわけではなかったそう。退職を知った知り合いから、ある日「ちょっと仕事手伝ってよ」という電話が来るように。気軽にOKしたら、同じ日にまた別の知り合いから電話が……。あれ？ 同業者に知れ渡ってる？ 「あ、これ、もう、フリーって言って名刺作らなきゃいけないのかな？」と思った沖さんは、当時全盛期を迎えていたフルFlashサイトのオーサリングや、専門学校の臨時講師などを個人で請けることに。その後現在に至るまで、Webの現場で幅広くご活躍。

「いわゆる就職活動」も、独立にあたっての「営業活動」もしなかったという、驚きの経歴の沖さん。沖さんの武器である「幅広く対応できる実装の心得」は、クライアントさんにとても重宝されていたんですね。

といったお人柄が分かったところで、そろそろ本題に入っていきましょう。

2017年らしい「Webの実装」を沖さんと考える。

沖さんのお仕事 日清「黒歴史トリオ」（JavaScript、コーディング）

くれま：

お世話になります！ 今日は私たち、「実装のトレンドを学ぶための心得」についてお伺いしたいんです。

さくら：

私もくれまさんも、グラフィック作成に仕事の比重があるせいか、コーディング知識のキャッチアップが遅れがちなので、この機会にきっちり伺っておきたいという気持ちでして……。

沖：

なるほど。では、まずこちらから質問なんですけど、くれまさんとさくらさんって、HTMLやCSSはどれぐらい書くんですか？

くれま：

私は、仕事のうち1/4ぐらいが、HTMLやCSSを書くものですね。

沖：

じゃ、くれまさんが書いたものが、納品するコードになる？

くれま：

なります。

さくら：

私は新規よりも運用が多いので、もうすこし少なめです。クライアントワークで新規制作などの時は、沖さんみたいな方と組む場合が多いです。

沖：

ああ、じゃあ、そこから先はお任せで、「ある程度分かってると良いことあるかもな」ってことですよね？

さくら：

はい。

沖：

分かりました。

まず、僕の考えですけど、今の時代は「HTMLやCSSを使って作るもの」が多様化していると思っています。

昔は、HTMLやCSSを使って作るものって、いわゆる「ホームページ」というか、読むのがメインの静的なWebページだったと思うんです。でも、今って、「アプリケーション的なもの／Webサービス的なもの」というのが増えてるんです。そもそも、Webアプリケーションを作るためにHTML5が機能拡張した、というところもありますし。

くれま：

「読ませるためのモノ」と「使わせるためのモノ」ということですよね。

沖：

そう。その、「読ませるためのモノ」と「使わせるためのモノ」ってけっこう違うので、統一的なワークフローみたいなものが無くなってきた、と思っているんです。作るものに合わせて最適解が違う。

だから、環境と実装の手法も変わってくる。WebページはWebページ、アプリケーションはアプリケーション、という時代。いま、そうなっていきつつある状況なのかな、と思っています。

さくら：

多様化して、分かれようとしているところでしょうか。

沖：

そうですね。そんな風に作るものが多様化している中、これまでみんなが「HTMLやCSSってこうだよね」って話していたものに対して、コンテキストの違いによる「対話のズレ」や「噛み合わなさ」というのが、出てきていると思うんです。

さくら：

なるほど。

沖：

たとえば、アプリ側の人にとっては優先度の低いことを、逆側の人が声高に言ったりとか。その逆もありますし。そういうときは、まず「自分たちは何を作るのか」ということを明確にしてから話したら良いのにな、と感じますね。

くれま：

それでいうと、私が1/4くらいやっているコーディング込みの仕事は、完全に「読ませる」ためのものです。

沖：

いわゆる普通の「静的なWebページ」ですね。

くれま：

はい。そういう「静的なWebページ」だと、私がHTML／CSSコーディングまでやって納品する。逆に「Webアプリ／サービス」の仕事だと、私がUIだけ設計して、HTML／CSS／JavaScriptは別の方に書いていただく、という感じに切り分けています。

沖：

なるほど。ちょっと話が開発環境のことになりますけど、小規模の静的ページであれば、極端な話「メモ帳」でHTMLを書いたって良いと思うんですよね。世間でよく「勉強しなきゃ」と言われる「Node.js」とか「gulp」みたいなものを、まったく使わなくたって良いと思います。

くれま：

そうか、そうなんですね。

沖：

一方で、「使わせるためのWebページ」って、動的な要素が増えるじゃないですか。読むためだけではなく、操作するための画面だということもあって、タブ切り替え的なUIを取り入れたり、クリックしたときに表示内容が変わったり。ほとんどのケースでJavaScriptを多用することになるわけです。

そういう場合には、モジュールの依存関係を解決するために、モジュールバンドラーなりタスクランナーなりを導入した方がいいという話になってくると思います。そこの差が「けっこうでかいかな」という気はしますね。

さくら：

確かに、静的なWebページ作成の仕事が多い私から見ると、「使わせるためのWebページ」の実装に関しては「あ、そういう視点もあるんだ」という発見があります。

沖：

あと、実装の手段を考える要素としては「レスポンシブWebデザイン」というのが大きいなと思いますね。「レスポンシブWebデザインに対応する」ということを考えると、もちろんいままでのやり方でHTML／CSSを書いてもいいんだけど、タスクランナー的なモノを使った方が、よりラクになるシーンは多いと思いますよ。

くれま：

そうですよね。サイトのターゲットや規模感によっても、とるべき手法は変わってきますよね。

ここがポイント

沖さんと「Flasherの変遷とイマ」を語ろう

さくら：

マルチデバイス時代にFlashはそぐわないということで、アプリのFlash Professionalは、いまでは「Animate」になってしまいました。沖さんのお仕事の変遷はどんな感じでしたか？

沖：

僕の場合は基本的にツールが変わっただけで、Flashでやってたようなことを、HTMLとJavaScriptでやるっていうことになってますね。だから、やってることはけっこう「Flashっぽい」。ユーザーのインタラクションに対して何かを返す、みたいなことを作るのが多いですね。

沖さんのお仕事：KASHIYAMA the Smart Tailor（カシヤマ ザ・スマートテーラー）（JavaScript、コーディング ※一部画面）

くれま：

Flashが使われなくなってきた状況と平行して「HTML5＋JavaScriptに移行しなければ」ということになりましたけれど、そのためになにか「学び直した」ということがあったりしたんですか？

沖：

うーん。もともとHTMLも書けますし、あとはJavaScriptくらいだったかな。基本的には、「学び直した」ことは無いです。

くれま：

もともと持ってる知識から転用できたわけですね。

さくら：

「ツールに固執しちゃって食えなくなっていく人もいる」って言うじゃないですか。その辺って、元Flasherの皆さんはどうされているんでしょうか。

沖：

Flashのノウハウの本質っていうのは**、「動きの気持ちよさ」がメインになってくるんですけど、何のツールに変えても通用するんですよ。**使うモノがHTML5になろうがUnityになろうが、目指すべき本質は変わらないので、Flash時代に培ったスキルは今でも大いに役に立っています。

実際、当時のFlashユーザーが、今はUIデザインやソーシャルゲームなどの現場で活躍されている例を数多く耳にしますよ。

さくら：

そうなんですか！

くれま：

私の勝手な想像だと、そういう方は「新しい技術が好き」ということと「インタラクションを作る」というところを軸にして、道具はその時代その時代に合うものに変えている、というイメージですよね。

沖：

おっしゃるとおりです。僕はブラウザを通したインターネットがすごく好きなので、アプリとかよりも、ホームページ的な仕事が楽しいんですよね。そうすると、必然的に道具はJavaScriptになるわけです。

さくら：

いまは、Flash改め「Animate」はまったく触らないんですか？

沖：

いや、使いますよ。Canvasで作るものとか。動きをAnimateで作って、それを素材として使う、みたいな。

さくら：

すごく自然な感じで、うまく仕事されてる気がしますね。スマートですね。

ここがポイント

実装技術の学び方とステップアップ方法を教えて！

くれま：

では続いて、「Flasher沖さん」の側面から、「教育者沖さん」の側面に話を移しましょうか。

さくら：

実は私、沖さんの教材が分かりやすくて、いつも参考にさせていただいています。沖さんご自身は、どうやってHTMLなどを学んでいったんですか？

沖：

僕自身は独学ですね。実は学校では、ほとんど学んでないです。

さくら：

えっ。

沖：

学校がWebデザインに特化していたわけではなかったので。

くれま：

そうだったんですね（笑） 。さて、時は流れて2017年。世の中に沢山の学校や学習コンテンツがある中、「今からHTMLとCSSをちゃんと学びたい」という方には、どういうものを勧めるのがいいんでしょうか。

沖：

僕が一番いいと思うのは、興味があるものを作るにはどうすればいいのかと考えていく方法ですね。一番最初は難しいことはいったん置いておいて、プレーンなHTML／CSSを書くのがいいのかな、と。

さくら：

ある程度やってみて「これはなぜできないんだろう」という疑問が湧いてきたときに、仕様書なり学習書なりで追っていく、っていうのはありですよね。

くれま：

自分の中に発信したい情報があると、サイト制作に向けて勉強する気分も盛り上がりますよね。まずは興味のあるものを作ってみる、ということですね。

さくら：

ところで私、「初心者から中級者にステップアップさせる教育方法」が気になっているんです。HTMLとCSSをひととおり学んだという人って、次のステップとしてたとえばSassなんかの技術を知りたいと思うんですよ。そのとき、どうやって導いてあげればいいんでしょうか。

沖：

確かに、ちょっと難易度があがりますよね。

さくら：

やっぱり実務に放り込んで「あ、Sassって便利じゃん」って思わせるしかないんですかね？

沖：

そうですね。いきなりSassを教えられても、CSSを書いたことがない人には何が便利なのか分からないと思うんですよね。まずは、HTMLとCSSを沢山書くというのが良いんじゃないですかね？ 5ページ10ページ書いただけじゃ、Sassの良さは分からないでしょうし。

さくら：

なるほど。

くれま：

これは私の経験なのですが、自サイトを更新したいECサイトのオーナーさんに、CSSの仕組みを少し説明したことがあるんです。最初、その方は、HTMLに直接タグを書いて文字色を変更していたんですが、それが「なぜ良くないのか」を理解してもらうのが難しくて……。

沖：

そういうケースは、ある程度体系的に勉強しないと、不便さに「気づかない」んですよね。なぜHTMLに直接タグで書いてはいけないのかっていうと、他のページにそのスタイルを流用できなくて、都度書かなきゃいけないから不便でしょう？という。

さくら：

CSSもタグも同じで、「何度も書いて間違える」ことで、「不便さに気づく」かもしれませんね。

沖：

そこから、どうやってテクノロジーで不便さをなくしていこうかな、と思わせたら良いと思うんです。先程さくらさんが触れたSassの話と同じで、1度書いたくらいでは、それをなぜ勉強しなくてはいけないのか、ということが分からないので。やっぱり沢山書いてみて、何度か失敗して、理解することで、「気づき」があるのかなとは思いますね。

さくら：

作業者としては「何度も何度もで装飾するのがしんどいからCSSのclassで一括で指定しよう」という考えになると思うんですよね。そこから、「なぜfontはHTML5で廃止になったのか？」という理解につながると理想的ですね。

沖：

「とにかくここ一箇所だけ、fontでもなんでも、赤にできればいいんだよ！」っていう人は、それはそれでいいと思いますけどね。

あとは、ホームページということにこだわらなければ、まずは、結果が早く出やすいツールで勉強をはじめるのも、学習モチベーションの維持のために大事かもしれません。

HTMLとCSSでいわゆる「通常のWebページ」の体裁にするまでって、けっこう時間かかるじゃないですか。横にものを並べるだけで、その要素がなんなのか勉強しなくちゃいけなかったり。そういうのがいらないツールからまず覚えるっていうのが、良かったりするかもしれないですね。いわゆるビジュアルプログラミング的なプログラミング言語を使って遊んでみるとか。Processingとか。

そういう、絵で結果がすぐ出るようなものからはじめるのも、ひとつの手かなと思いますけどね。それが僕にとってはFlashだったのかもしれないです。とりあえず、Flashのタイムラインにものを置いて書き出せば、ブラウザで見られるものになるという楽しさ。

PhotoshopとIllustratorがいくらできても、それが直接HTMLとCSSにはならないですからね。

くれま：

学ばなくてはいけないことが多いからこそ、習得するスキルの「優先順位付け」と「モチベーションの維持」が大事ということですね。説得力があります。

ここがポイント

技術やツールのトレンドとどう向き合うべきか。

さくら：

学ばなくてはいけないというのは大前提として、「技術のトレンド」についてはどう考えますか？ 私って、マークアップ界隈のトレンドに振り回されやすいんです。周りが「いい」って言ったから入れてみたけど、結局使わなかった、みたいなのがすごく多くて。

くれま：

ちょっと横入りしますけど、たとえば、「デザインツールのトレンド」については、さくらさんはどう思います？

さくら：

あっ、それはある程度相対的に評価ができるので、マークアップよりは右往左往はしないかも……。

くれま：

それと同じように、マークアップに関して分かっている方であれば、評価基準を明確に「優先順位」が見極められるから、振り回される感じは少なそうですね。

さくら：

そうかもしれません（笑）。沖さんも、そういう感じでトレンド情報と付き合っていますか？

沖：

そうですね。興味があれば触るというのは、前提としてあります。その結果「（自分としては）使えねぇな」と思うことは、皆さんあると思うんですよ。それはそれで良いと思います。何でもかんでも見ていくと、きりがないですし、新しいことが必ずしもいいわけじゃない。

僕は、ニュースでなにかが紹介されても、すぐには使わないんですよ。で、半年ぐらい経ってもまだみんなが騒いでたら、「そろそろ触ってやるかな」っていうスタンスです（笑）

くれま：

「ある程度枯れた技術」を使うというスタンスですね。

沖：

たとえば、Node.jsのパッケージをインストールする方法として、もともとはnpmっていうやり方があったんですけど、1年くらい前にYarnという新しいパッケージマネージャーだともっと速くインストールできる！10倍速だ！みたいな話になって、流行に敏感な人たちはみんなそっちに移行したたわけです。

そんな中、npmもどんどんバージョンアップして、インストール速度の面ではYarnとほぼ同じかちょっと速いぐらいになってきて、そうすると、また戻るわけですよ。自分だけでやるんだったらいいですけど、チームでやるとなるとすぐ対応できない人もいるので、スイッチングコストが大きかったりするわけですよね。そういう場合は、なんでもかんでも飛びつかないようにしたほうがよかったりしますよね。

さくら：

なるほど、「スイッチングコスト」という考えはありますね。

くれま：

他の技術やツールでも、みんなが群がって、また戻っていく光景がよくあるような気がしますよね。

さくら：

群がってるときにちょっと触れて、「その後、どうなったんだろう？」みたいなのは、よくあります。栄枯盛衰ですね。

くれま：

そういう技術やツールが無数にあって、そこに対して「やんなきゃ」というプレッシャーで、ドキドキする毎日です……。もうちょっと言うと、自分が「分業しているデザイナー」であることに、引け目を感じるんですよね。

さくら：

分かります。そういう引け目があるから、「あっちの水のほうが甘いらしいぜ」っていう話が出ると、ばーっと気持ちがいっちゃうのかもしれないですね。

沖：

たしかに、目の前の実装技術も大切なんですが、僕としてはトレンドを追うよりも、もっと他にも勉強しなくちゃいけないことって沢山あると思っているんです。たとえば、「ピクセル比」って分かります？

くれま：

ピクセル密度ではなく？

沖：

違うんです。たとえばDVDビデオに映す素材を作るとき、普通に正円の画像を作って映しちゃうと、ちょっと横長に潰れちゃうんですよ。ちょっと。

さくら：

えっ。それは知りませんでした。

沖さん：なんでかっていうと、パソコン上の1ピクセルと、DVDビデオでいう1ピクセルって縦横比が違っていて、パソコンだと当然1:1なんですけど、DVDビデオだと1:0.9なんです。だから、ちゃんとそのピクセル比を理解していないと、DVDビデオに映す画像を作る人は、きちんとした画像を作れないわけです。

くれま：

なるほど……！

Photoshopの［新規ドキュメント作成］ダイアログボックスでチェックすることができる「ピクセル比」

沖：

最近のWebサイトって、映像を掲載したりコラボしたりすることもありますよね。映像制作関連の方から「ピクセル比いくつで作って渡せばいいですか？」って訊かれても、知らなければ、「ピクセル比ってなんですか？」ってなるじゃないですか。本当は、映像のことも分かった方がもっといいよね。って、さっきと同じような文脈で、言えると思うんです。

くれま：

本当に、知らないことだらけ……。

沖：

ほかにも、Webサイトを作る上では、膨大に考えなきゃいけないことってあるんですよ。だけど、まず自分の目の前にある課題をつぶすことができるのであれば、そっちを優先したほうがいいんじゃない？っていう。ECサイトでいえば、もっと商品の良さを追求した方が良かったりするわけじゃないですか。

さくら：

ECサイトだと、写真の撮り方とか。コピーライティングとか。

沖：

そうそう。そういうトピックは、沢山あると思いますよ。

ここがポイント

おわりに

くれま：

では最後に、これからマークアップを勉強しなきゃ！と思っている人たちに向けて、メッセージを送っていただけますか？

沖：

やっぱり繰り返しになっちゃいますけど、好きなことをやるのは一番良いんじゃないですかね？ 自分も、自分のやりたいことが先にあって、「こういうサイトを作りたい」という必要があったから、HTMLとかCSS、Flashを勉強するという手順でいったので。まず先に「何をやりたいか」を明確にすると、自ずと答えが出るんじゃないですかね。いまから、基礎的なことを勉強するにしても、高度なことを勉強するにしても。

あとは好きなことを伸ばしてたら、自分の強みになるはずだと思うので、それが一番大事かな、と思います。

くれま：

今日のお話全体に通底するのが、そこですね。興味のあるところから攻めていく。

沖：

こういう仕事した方が、キャリア広がるな、とか。そういうふうに考えてやっていく方が、いいんじゃないですかね。僕も別に「超Flashやってます！」とは思ってないですけど、結果的にFlashっぽい動きのあるサイトというのが、今の自分の強みになっていると思うので。

さくら：

沖さんならではの回答ですね！ 色々挑戦する元気が出ました。

くれま：

ありがとうございました！

まとめ

くれまのまとめ

40代も半ばとなり、ついつい惰性で行動してしまう最近の私だったのですが、今回のインタビューでは、心が洗われたような気がしていまして。目をキラキラさせて「これが好きだから頑張る！」をずっと積み重ね、着実に大きなお仕事を成功させている沖さん。「好きこそものの上手なれ」をこんなに体現している方は、なかなかいない気がします。

さくらのまとめ

どうやって動いているか分からないくらいのインタラクティブ性のあるコンテンツと、「HTML/CSSの初歩」。沖さんの話を聞いていると、一見すごく離れているように見えて、しっかりと技術として繋がっていることが実感できました。技術には当然流行り廃りがありますが、まずは自分の興味から得意分野を磨いて、判断基準を持った上で、最新技術を自分の強みに変えていく。コレ、一生使える知識ですよね。前回のこもりさんのお話と共通する部分も沢山あったりして勉強になったなぁ。沖さんありがとうございました！