00:03
ManaのWebクリエイターカフェからのお知らせです。現在、リスナーの皆さんへ、番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
WebデザイナーでWebクリエイターボックスを運営しているManaです。
この番組では、私やゲストの経験談をもとに、Webコンテンツ制作で役立つ知識やノウハウ、キャリアの話をしていきます。
今回のテーマは、フロントエンドの面白さ、です。
動きや機能のあるWebサイトには必須のフロントエンドスキル、今日はフロントエンドの魅力をたっぷりお話しできればと思います。
ゲストにはWeb製作会社ICS代表の池田泰信さんにお越しいただきます。
お会いしたのは1回なんですが、ちょこちょこオンラインの方でお話したことはありますので、今日は深いところまで聞けたらいいかなと思います。
ManaのWebクリエイターカフェ、本日のゲストをご紹介します。
Web製作会社ICS代表の池田泰信さんです。
はい、こんにちは。池田です。今日はよろしくお願いします。
はい、よろしくお願いします。
池田さんとはちょっと振り返ってみると、2018年に初めてお会いしたんですね。
以前ポッドキャストにも来ていただいたヤットさんと一緒に開催したWebデザインシンキングセミナーというイベントでお会いして、そこで名刺を交換してという形だったと思うんですけど、覚えてますかね?
はっきり覚えてます。
はっきり覚えてます。
ManaさんってWebクリエイターズボックスで昔からサイトを運用されていて、Web業界にいると見ない人はいないと思うんですけれども、
ただ、Manaさんの社でどんな方なのか全く知らなかったんですよね。
想像、写真はちょっと載ってたけれども全くわからなくて、ヤットさんのイベントが行われると聞いて、もうこれは一目でも思い浮かべたいと思ってですね、それで行ったということで。
ああ、そうなんですね。嬉しいです。ありがとうございます。
私もブログとかも拝見してましたし、その当時多分、わずってたのが、あい、昔のインターネットエクスプローラー6っていうのがあってね、みたいな感じのブログ記事があって、その辺をよく見てたので、ああ、あの方だという感じで、私もすごく嬉しかったのを覚えてます。
ありがとうございます。やっぱりブログの記事っていうのは、なんかそういう名刺にもなると言いますか、なんかそういった一面ありますよね。
そうですね、それきっかけで話が広がっていきますし、名刺っていう言葉が今出たんですけど、実際にいただいた名刺を私のブログの記事の方にも掲載してっていうことがありまして、今でも見返してですね、ああ、あったなって思いながら見返しておりました。
03:07
ありがとうございます。なかなか名刺っていうのも各社それぞれ工夫しているところで、名刺のいろいろ紹介いただいて、なんか取り上げていただいたので、嬉しかったです。
ありがとうございます。こちらこそ。で、池田さんのそもそものですね、歴史を振り返ってみたいなとずっと思っていて、ちょっとその辺を今回は突っ込んで聞いていこうかなと思うんですけど、そもそもエンジニアになろうと思ったきっかけっていうのは何かあったんですか。
そうですね。私がウェブ業界に入ったのは16、7年ぐらい前なんですけれども、当時エンジニアになりたいというよりはクリエイターになりたいっていう思いの方が強かったんですね。映像表現であるとか、なんか世界観を自分で作って、アートじゃないけれども、そういうものを作りたいっていう思いの方が強かったんです。
で、当時はそれをウェブでやろうとするとフラッシュだったんですけれども、そのフラッシュで結局作っていくと表現も大事だけれども、スクリプトをガリガリ書かないといけない。かなりエンジニアの側面が大きかったというところがあって、結局いろいろものづくりやっていく上で、プログラミングの要素みたいなのをすごく学ぶことがあったので、結果的に今エンジニアになったというような一面があります。
たしかにあの当時は本当に動くインタラクティブなウェブサイトが流行ってたっていうのもありますよね。
はい。各社創意工夫して、表現もすごいんだけれども、後ろで動いているプログラムもすごい。両方あってすごいになると思うんですけれども、表現力、プログラミング力両方必要だったみたいな時代だったかなと思います。
たしかに。私は表現をするっていうのと、その裏ではプログラミングがたくさん書かれてるっていうふうにおっしゃってたんですけど、それを見てデザインの方に行ったっていうパターンですね。
ちょっとこれは書けないなっていうのが強くなってしまったので、どっちかというとグラフィックデザインとかをメインで進めていった形になります。
別れ道だったりもしましたよね、その当時は。
そうですね。たぶん作ってみたいっていうのはたぶん皆さんあって、自分の特性、得意分野にどっちの方がコミットできるかみたいな、たぶん皆さん考えられて枝分かりしていったようなところがあるのかもしれないですね。
そこからの今はフロントエンド、JavaScriptをメインでお仕事されてるかなと思うんですけど、その辺の移行はきっかけというかあったんですかね、フロントエンドを選んだ理由。
そうですね、今は結局フロントエンドエンジニアという形でやってはいるんですけれども、
ウェブで自分でコードを書いて自由度高くウェブサイトを作ることができるのがフロントエンドエンジニアの魅力の一つなのかなと思うところがあって、
06:02
デザインもやることもあるんですけれども、UIデザイン、インタラクションデザインというところが私の専門分野の一つにはなるんですけれども、
最終的にアウトプットした、最後ユーザーに目に触れる直前のところまで関わることができるのがフロントエンドエンジニアみたいな一面があって、そこはやりたくて取り組んでいるというところがあります。
ウェブデザインとフロントエンドっていう風に、以前は結構明確に分かれている部分があったりもしたんですが、今混同されたりとか、ウェブデザイナーってどこまでするのが正解なんだということが結構話題になったりもするんですけど、その辺どう思います?
そうですね、興味深い話題かなと思います。いろんなウェブ製作会社の話を聞いたり、私もいろんな会社とお付き合いがあるんですけれども、よくあるパターンとしてはデザイナーというと、PhotoshopとかXD、Figmaとかの静止デザイン、デザイン幹部を作る人たちをデザイナーと呼んで、
HTMLコーダー、エンジニアというのがそのデザイン幹部をもとにコードを落とし込む方をエンジニアと呼ぶ傾向が多いようにも思っています。ただ会社によっては、PhotoshopからHTMLに起こすところまでがデザイナーで、それをシステム的にサーバーの変数を埋め込んだりみたいなところからがエンジニアと区別しているケースもあって、
エンジニアとデザイナーの境界線というのはちょっと会社によって若干前後するようなところがあるのかなと思っています。
そうですね。特に最近だったらアニメーションの表現力がすごく増えたので、幅が広がりましたので、デザイナーがアニメーションをどこまでどう表現していくかっていうのはまた難しくなってくると思うんですね。その辺の意思疎通ってちゃんとどういうふうにやってらっしゃいますか?
そうですね。デザイナーが求めるものって多分ユーザーがどう体験するかを考えることだと思うんですね。静止デザインを見たりとか、アニメーションの体験を見たりみたいなところ。そこまでがデザイナーの役割と考えると、アニメーションを作るときエンジニアにどうやって意思疎通するかというところで、デザイン幹部静止画だけだとなかなか伝わらないみたいなところがあるので、そこはデザイナーの力の見せどころでもあるんですけれども、
デザイン幹部に丁寧にここはこう動かしたいと、逐次コメントを書いたりだとか、デザイナーもいろんなウェブサイトを見ていると思うので、ここの表現はあのサイトで見かけるようなここの部分の表現にしたいみたいなことをメモっておく。それをエンジニアに伝えるみたいなことをやることが多いです。
もう少し手の込んだことをしたい方はXDのプロトタイプ機能とか、アフターXでその部分の演出だけ仮に作っちゃうとか、そういう形で連携していることが多いですね。
なるほど、じゃあデザイン幹部をデザインするみたいなところもあるかもしれないですね。デザインを説明するためのデザインをまた伝えるために作ると。
09:09
確かにそれありますね。完成形だけじゃなくエンジニアに伝えるためのデザインというと。
でも何かしら伝えないと結構エンジニアって効率よく作るとか、無駄のないものはあまり作らないみたいな傾向が、そうでしょ、私の観測範囲だと思ってですね。
伝えないと実は結構アニメーション実装されないことが多いなという印象がありました。
デザイナーの方から結構積極的に、普通例えばこのボタンがあったら、マウスオーバーしたらマウスオーバーする演出、GSSトラディションぐらいは入れて欲しいんだみたいな、デザインの方が自然と思っていても、エンジニアの方は全く意識せずにパッと変わるとか、そういうこともよくあるかなと思っていて。
確かにこう、いや聞いてませんけどで終わりそうですもんね。
そうなんです、それがフェーズの頭、デザインから引き渡した時とかだと、これからHTML着手するぞって時だと多分喜んで、こういう指示があるから作ろうってなるんですけど、作った後でそれ知的されると、ちょっとこれ聞いてないんだけど、結構難色を示す傾向が高いなと思ってます。
ありますね、なんかコード1行足せばいいじゃんっていうようなものでも、いやちゃんとこう道筋通りに書いてるから、後から言われてもみたいなのあるかもしれないですね。
そうなんです。
なるほど、じゃあ結構そういうエンジニアになって難しいなっていうところもあると思うんですけど、そういうのを乗り越えてですね、なって良かったなっていうメリット、嬉しかったこととかってありますか?
そうですね、一つは全体像を見やすくなったみたいなところがエンジニアになって良かったことかなと思います。
Webサイトを作る工程で言うとエンジニアって基本最後の方になると思うんですね。
そのエンジニアから最後、品質チェックみたいなテストとかQAとか、会社によって言い方違うんですけど、その後ろが工程、後ろにあるけれども、基本エンジニアって多分最後のところだと思うので、最後後方から全体を見ることができると言いますか、
作ったものがエンドデザインに届くところまでを先に持って後ろの方から見ることができるので、プロジェクトの始まる時に、例えば企画してる時にこれが実現できそう、できなさそうってことも早い段階で検知することもできますし、
デザインを考える時もエンジニア視点からできる、できないだけじゃなくて、こうやったらもっと面白いことできるみたいな提案ができたりだとか、そういう全体像が見れるのがすごい面白いなと思ってます。
てなると、全体像を見れるようになるまでにすごくいろんな経験があったりとか、知識も必要になってくると思うんですね。
てなると、そういった楽しみに到達するまで、ものすごく時間がかかったんじゃないかなと思うんです。最初やり始めた頃ってそういう楽しさって見られましたかね、経験できました?
12:02
そうですね、今話したこと確かにこのウェブ業界で5年、10年、15年やってきた中での経験値だったのかなと思う。
そうですね、多分ウェブ、初めからおそらく似たようなことは経験していたように思います。
ウェブってすごく面白いなと思うのは、ホームページ作るという考え方でやると、多分中学生の方でも高校生の方でも作ることができると思うんですね。
こういう自分が好きなこととかを世の中に発信したいみたいなことって、多分当時から思って、ちょっと手を動かしたら家のパソコンとかでお父さんの借りて作るみたいなことって多分できたと、今も多分できると思うんです。
そうなってきた時に、作っているものが形になって世の中に発信してみたいなことを小さなフェーズからもできるのがウェブの良さかなと思うので、
先ほどお伝えした、いろんな人がいって作った時に全体が見えるというメリットの話なんですけれども、おそらく個人でやっていても近いこと、ものづくりの形にするというか、ウェブとして作り上げるみたいなところは、始めたばかりの方でも体験できるんじゃないかなと思いました。
なるほど、そうですね。やっぱりユーザーと直接会うような形ではないですけど、すごく遠いようで近いところにユーザーがいると思うので、自分の作ったものをパッと公開して、パッと使ってもらえるというところまでは体験しやすいかもしれないですね。
はい、そう思います。
それを積み重ねた結果、いろんな視点でウェブサイトというものを見るようになって、面白さがまた増えてきてということですかね。
はい。
なるほど、わかりました。
カジュアルに始める転職活動にグリーンをご活用ください。
逆にここつまずいたなとか、これやるんじゃなかったなとかいうのってありますかね、そういった経験は。
そうですね、つまずいたに関しては、私は会社を立ち上げる前にフリーランスとして働いていたんですね。
フリーランス時代にちょっと実際の案件ベースの話になるんですけれども、かなり巨大なゲームシステムを作る案件がありまして、
そのゲームを作るときに、これできるのかなみたいなめちゃくちゃ難しい要件のものがあったんです。
3Dを絡むとか、もちろんゲームなのでインタラクティブにするとか。
15:01
フリーランスでやってると多分これ自分の手に負えないんじゃないかなと思うんですけれども、
昔ってあんまり仕事断るのは望ましくないみたいな空気があって、断ったら二度と仕事こないよみたいな話もあったり、
フリーランスの駆け出しではなかったかもしれないけれども、始めたばかりの頃だったので引き受けたんですね。
やっぱりこれ難しいなって思って、やっぱり一人だとだいぶしんどかったなっていうのがありました。
結局その案件自体は、いろんな別の事情で案件自体がなくなって、最終的に作りきらずに終わってしまったので、
クリエイターとしては残念ですけれども、心境的には作りきれないものを作らなくてよくなったという安心点があったという。
ちょっとほっとしたところも。
そうするとつまずいたというのは、自分のスキルに似合わない、
たぶんチームじゃないと作りきれないようなものを引き受けてしまったみたいなところがつまずいたポイントだったかなと思います。
そういった経験をしている駆け出しの方とか、今もたくさんいらっしゃると思うんですけど、そういった方に何かアドバイスってありますか?
そうですね。今の仕事のボリュームみたいなところの話で言うと、わりと仕事って断ることは全然問題ないのかなと思っていて、
自分ができるできないことってたぶんあると思うんですね。できないことってはっきりできないでいいのかなと思います。
レブの技術もかなり多岐多様にわたっているので、デザインはできるけれどもコードは書くのは苦手って方もいらっしゃいますし、
コードはものすごいバリバリ書けるけどデザインの色の選定がわからないみたいな方もいたりとかするので、
専門分野でできるできないことってたくさん、はっきりできない方はたくさんいるので、仕事でできなさそうな依頼を受けたら、はっきりできないって回答していいのかなとは思います。
もうすでに引き受けちゃいました?やりますって言った後でもできませんって言っちゃっても大丈夫ですかね?
それは難しいですね。
できるかなと思って引き受けました。よく見たら、あれ?これちょっと難しいぞっていうのもあると思うんですね。
そうですね。早く伝えたほうがいいかなと思いますね。何色ちょっと難しいと感じ始めましたとかだけでもいいと思うので。
なるほどなるほど。できそう、自分でできなくて誰か手伝ってくれそうな人がいたら頼ってもいいかなって感じですかね?
そうですね。頼ったり、他にも協力者を見つけてきたりとか、いろいろまたそこはその後も大変かもしれないですけれども、
自分一人でやりきるよりはだいぶ楽なんじゃないかな。楽だし、現実的にウェブサイトとして公開できる可能性が高くなると思うので。
なるほどなるほど。そうですね、しょいきれないものを一人でしょいこもうとはしないというのが大事ですね。
まさにその通りだと思います。
わかりました。じゃあ、そんな今お勉強中の方とか、そうじゃない方、今バリバリ元気でやってますっていう方に向けて、
18:04
メディアもいろいろとですね、ブログの公開とかもされてると思うんですけど、そもそもそういった制作のブログを発信しようと思ったきっかけとか理由って何かあったんですか?
そうですね、きっかけは恩返ししたいっていう気持ちが一番ありました。
ウェブでコンテンツ作るときって、基本多分皆さん検索されて何かしら情報を見つけてくると思うんですけれども、
知らない人が無料で情報を公開していて、すごくこの記事があったから自分できたみたいな経験ってあると思うんですけど、
私すごくその経験が連続して、それがどんどんスキルアップにつながっていったなって気持ちがあったんです。
なので、自分たちも新しく制作する中で気づいたこととかは、ウェブの皆さんに対して返していきたいなっていう気持ちが強くなって、
オンエンドメディアをやりたいなと、ブログをやりたいなという気持ちにつながっていきました。
そうですよね。私も海外のブログとかも特にそういうのが多くて、無料で情報発信とか、すごいとこだったら何百ページもあるPDFを無料で配布しますとかいうところもあったりして、
私もブログをそもそも始めようと思ったのが、同じように自分の思ったこと、誰かが経験したことが誰かの役に立てたらいいなっていうのもあったので、
やっぱり情報発信する人のスタート地点っていうのはそういうのがあるのかもしれないですね。
そうですね。
最近役に立ったもので言うと、先日、昨日かな、ICSメディアさんの方で公開されたFigmaのプラグインのお話を先ほど拝見しまして、
ちょうど欲しかったプラグインが載ってるっていうのがちょうどあったところなので、すごくうなずきながら聞けました。
ありがとうございます。Figmaも盛り上がってきているデザインツールではあるので、どんどん発信していきたいなと思っていて、
根本的にあるのは、うちのスタッフがFigmaの記事を書いたわけで、私じゃなくて別のスタッフが書いたんですけれども、
マインドは同じで、Figmaのこと好きだから書くっていうのが大きいんですよね。
Figmaのこと大好きだから、大好きなものを使ってやると、実はこんな便利な機能があって、みんな使うとみんなハッピーになるっていう自信があるから記事書いてるみたいなところが大するので、
恩返しという話をしたんですけれども、それぞれが好きなものを他の人にもこんな楽しいものがあるんだよって紹介したいという気持ちが根底にあるような気がします。
それはそうですね。本当に好きじゃないとブログの記事に書こうってまずならないですし、書いててもなんか浮っ面だけの内容になっちゃうなっていうこともすごくあるんですけど、
そういうんじゃなくて、やっぱ好きで楽しいから伝えたいっていうのは確かに大事ですよね。
そう思います。
なるほど、なるほど。では最後にですね、今これからフロントエンドエンジニアになりたいと駆け出し中の方、お勉強中の方に何かアドバイスがあればお願いします。
21:05
そうですね。フロントエンドエンジニアになりたいという方に対しては、結構今日楽しいって言葉が何度か出たかなと思うんですけれども、
ものを作っていて楽しいと思ってもらうことが上達の近道なのかなと思います。
私も元々Flashから始めて、今のHTML、JavaScriptの分野にとっぷり使っていますけれども、
なんか新しい技術が出てきたりとかしたら、もう積極的に記事を見に行ったりとかするんですね。
RSSリーダーとか、テックフィードとか、ハテナブックマークとか、各個人のTwitterであるとか、そういうのを積極的にアンテナ張ってですね、見に行くのがものすごく楽しくて、毎朝記事をチェックしてるんですけれども、
20代の社会人、若手の頃は、1日100記事読むみたいなことをもっと掲げていて、日本だけじゃなくて海外のものも併せて読んでたんですけれども、
それをAOBレベル、休日も読んでたような気がするので、365日毎日100記事読んでたような気はするんですけれども、
でもそのぐらい、情報を知る、スキルアップするために、自分の向上心、より良い行動を書く、より良い表現をできるようにする、みたいなことはやっぱりたくさんインプットすることが大事なので、
それを調べて、それを実践することを楽しいと思うと、スキルは一気にぐるぐるぐるぐる伸びていくので、それがアドバイスと言いますか、おすすめしたいことになりますね。
なるほど、今ちょっと楽しいって思えない、つまずいてるなっていう時でも、インプットを増やして楽しいって思えるポイントを探して、そこから楽しみながら成長していければっていうことですかね。
はい、そう思います。
わかりました。では、池田さん、今日はありがとうございました。いかがでしたか。
そうですね、昔の話を思い出すというのは新鮮な気がしました。
そうですよね。私、個人的にはもっともっと深掘りしたいところではあるんですが、ちょっとお時間が来ましたので、また次回ですね、次はJavaScriptとアニメーションについて詳しく聞いていきたいと思います。
池田さん、次回もよろしくお願いします。
はい、よろしくお願いします。今日はありがとうございました。
ありがとうございました。池田さんは本当にフロントエンドの領域、アニメーションが好きなんだなっていうのが伝わりました。こうやって楽しいと思えることに矛盾になって取り組むことがスキルアップへの近道ですね。
さて、この番組では感想や質問、リクエストなどお待ちしております。番組詳細欄にあるリンクよりお気軽にご投稿ください。
TwitterではカタカナでハッシュタグWebカフェをつけてツイートしてください。
そしてAppleポッドキャストやSpotifyのポッドキャストではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
24:02
Tech Academyはウェブデザインやプログラミングをオンラインで学べるスクールです。
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
副業案件の提供を保証するTech Academy Worksもあるので、ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。Webクリエイターボックス、マナでした。
