デザインツールの進化
ManaのWebクリエイターカフェ。WebデザイナーでWebクリエイターボックスを運営しているManaです。
この番組では、Webコンテンツ製作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、移りゆくデザインツールとの向き合い方です。
デザインツールって、かつてはAdobe製品一択みたいな時代もあったんですが、今はとにかくいろんな選択肢があります。
そんなデザインツールについて考えていきたいと思います。
それでは、今回のゲストを紹介します。Web UI デザイナーの松下恵里さんです。
松恵里さん、簡単に自己紹介をお願いします。
こんにちは。大阪でWeb UI デザイナーをしています。松下恵里と申します。
松恵里って呼んでください。よろしくお願いします。
よろしくお願いします。松恵里さん、なんか久しぶりですよね。
そうですよね。本当に久しぶりですね。お顔見るのは本当に久しぶりです。
本当に久しぶりです。
そうですよね。調べたというか、さかのぼること7年前に初めて会ったのがその時ですかね、2017年。
そうですね。同じ窯の串カツを食べた中ですよね。
そうなんですよ。イベントで会ったっていうのを掘り出したら会ったんですけど、それよりも串カツの方を覚えていて。
もともと私が自分のイベントをやってたその次の日がマナさんのイベントで、私その時マナさんのことはもちろん存じ上げてはいて、
エブクリエイターボックスを見てたんですけど、マナさんって立在するの?ってなって。
じゃあ見てみたい、会ってみたいみたいな感じで、その時一緒に登壇していた人が、
じゃあマナさん知り合いだから、明日イベントやってるから、当立のスタッフしに行くかみたいな感じで。
そうですよね。
そうそうそうそう。
そうなんですよ。ありがとうございました、その説は。串カツおいしかったな。
で、その後ね、大阪いろいろね、旅歩きしましたね。
そうですね。なんかそっちのイメージの方がちょっと強かったりするんですけど。
あれ次の日なんでね。
よくですね、いい天気の日で。
そうそう、いっぱい食べた。
そんな思い出がありましたが、そんな祭さんね。
まずはですね、皆さんゲストに最初聞いてるんですが、キャリアについて。
最初のきっかけ、ウェブ業界に興味を持ったきっかけとかって覚えてますか?
そうですね、もともと紙のデザイン、DTPデザイナーだったんですけど、なんかこれからはウェブやなみたいなことを思ったんでしょうね。
デジタルハリウッドっていうスクールに通ってウェブを学んで、そこからね、フリーランスにウェブデザイナーとしてなりました。
最初からフリーランスだったんですか?
そうですね、そのDTPデザイナーの時は会社員だったんですけど、やめて。
ウェブとしては?
ウェブとしてはね、最初からね、フリーランスだったんですよ。
え、顧客とかはもうすでにいる状態で始めた感じなんですか?
なんとかなるかなと思って。
で、なんとかなった?
まあまあ、その時に私28歳ぐらいだったんですよ。
で、その時、今からウェブ業界に転職活動をするってなったら、もっと若い子たちっていっぱいいるから、ディレクターも視野に入れた方がいいみたいなことを言われたんですけど、
なんか私もっと自分でガリガリ作っていたいみたいなことを思ったんですよ。
でも、その会社の中でね、自分より年上のデザイナーに支持をする会社員の身にもなってみろって言われて、
じゃあ自分でするわみたいな、そんなことを言って、最初からフリーランスになったと思います。
ああ、そうなんですね。確かにその年齢っていうのもあったかもしれないですけど、それでできたっていうことはやっぱ向いてたのかもしれないですね。
うーん、そうなのかな。
まあ、在学中からこういうことしてるんですって言ったら、ちょこちょこ、じゃあこれお願いみたいなこともあったりしたので、
ちょっといけそうかなって思ったのかな、思いました。
なるほど、なるほど。
当時はね、結構フリーランスになる人多かったんですよ。
ああ、そうですよね。その時代はまだ中小企業とかが、簡単なLP作って、簡単なウェブサイト作ってっていうのがありましたもんね。
そうそう、その時まだフラッシュもあったから。
ああ、そっかそっかそっか。そういう時代でしたね。
フラッシュでメインビジュアル作ったら、もう簡単に5万円とか5万円の時代だったんですよ。
ねえ、今もう本当に作り込まないと全然っていうのもありますからね。
そうなんです。
で、なんかちょっと興味深いなと思ったのが、その同じくらいのタイミングで講師とかも始めたんですよね。
そうですね。これはもう本当にフリーランスになったら、何にも属さないじゃないですか。
なので、どこかに属していたかったというのと、そのつながりを持っていたかったっていうのが最初は多いですね。
確かに、それありますよね。なんかもう孤独でしかないですからね。
そうそうそうそう。なので、その時自分がデジハリの中で習った先生が、すごい先生だったんですけど、
その先生が最初はアシスタントみたいな感じでついて、先輩のTAさん、アシスタントさんもいるから、
その先輩の方がバリバリのコーダーだったので、その先輩がコーディングをする、
私がデザインをするみたいな感じで組ましてもらって、しばらくはフィアで動いてました。
なるほど。で、その時から講師業っていうのは今もなおやってらっしゃるってことですかね。
その時はもう本当に自分の何かに属したいっていうのと、固定収入欲しいみたいな感じで始めたんですけども、
徐々に講師の形も色々変わってきて、今は割と自分が制作で得たノウハウを分かりやすく初心者の方にお伝えする。
結果その方々が勉強して、色んなものを世の中に作り出していくので、講師業っていうのもクリエイターの一種かなと思って、
割と今では講師業にも力を入れています。
なるほど、なるほど。で、そういった経験が書籍にもつながったのかなと思うんですが、
フェーズの日本語化
以前、Adobe XDの本をね、Adobe XDで始めるウェブデザイン&プロトタイピング一歩先行く現場のスキルっていう書籍を発売されたと思うんですが、
これも現場を知っているっていうのと、教えるっていうスキルもあったからこそ、こういった本が生み出せたかなと思うんですが、
そういうつながりもあったんですかね。
そうですね、やっぱり直接生徒さんに教えると、あ、そこでつまずくんだみたいな。
分かります。
この言い回しの方が伝わるのねとか、最初に何で今からこれをするのかっていうのを書かないと言わないと、
その通りに動いてくれないのねみたいな、そういう細かい講師の経験がたまってきていたので、
ここはここまで吐かないと伝わらないよなとか、ここはさっき説明したから、ここは端折ってもいいよなみたいな、
勘が働くようになっていたので、書けたっていう感じですかね。
そうでありますよね、なんか教えてるからこそ気づくようなところもありますし、逆にこっちも学んでるようなところもありますもんね。
そうそう、なんとなく自分で使う分には使えるんだけど、説明しようと思うと割とちゃんと理解していないと伝えられない。
伝えられないので、割と教えようとするとむちゃくちゃ自分の勉強になりますね。
なりますよね、なんでって言われたら、なんでだろうって自分でも言っちゃいがちなんですけど、
なんか良くない説明っていうのは、なんでって聞かれたときに、これはこういうもんなんだよっていうのはあまり良くない答えかなと思っていて。
私は結構公式ドキュメントを読むようになりましたね。
そうですよね、そういったのが教えるところと書籍の執筆、あとはデザインツールの深い学びにもつながっていったのかなと思いました。
で、今はそんな経験から関係があるのかちょっとわからないんですけど、フェーズというツールがリリースされたと、こちらに関係されてるんですよね。
そうですね、フェーズっていうのは無料で使えて、しかもアプリのインストールとかいらなくて、ブラウザで、Google Chrome上でアニメーションが作れる。
そしてそれを書き出しができるんですけど、GIF、MP4とRottiファイルっていう形式で書き出しができるツールなんですね。
Rottiっていうのは、リズページとかアプリの上で表示できるんですけど、SVGベースなので、拡大縮小しても劣化しないし、すごく軽量、軽いので、
割といろんなところで見受けられる画像形式なんですけど、それに特化しているアニメーションツールですね。
なるほど、ちょっと軽く使ってみたんですが、ブラウザ上で使えるっていうのが、Figmaにも似たような感触もあって。
そうですね、私は今回フェーズというものを日本版リリースの時に、ローカライズ、ツールのツールバーとかいろんなメニューの和訳ですとか、テクニカルドキュメントの和訳とか、
そういう解説動画の日本語吹き替えなどをやらせてもらったんですけど、むちゃくちゃFigmaを参考に和訳しました。
そうなんですね。だからすごくすっきりシンプルな感じも似てるなと思ったんですが、そういう思想も受け継いでる感じはあるんですかね。
FigmaとかXD、イラストレーター、プロトパイ、アフターエフェクツとかアニメイドとかいろんなツールを見て、日本語のローカライズの単語を合わせていったっていう感じなんですけど、
だからいろんなところで使われている単語がみんな若干違うので、どれに合わせようみたいなのはむっちゃ考えましたね。
そうなんですね。長方形なのかレクタングルなのかみたいな、そういうとこですよね。
矩形ツールなのかとか、楕円ツールなのか楕円形ツールなのか。
はいはいはい。それはじゃあ、すべてを設定したのが松入さんってことですか。
そうですね。決めていったのは、はい、そうですね。
フェーズ日本語版の神。
フェーズ日本語版の神。
実際にはですね、えきはらけんじさんっていうクリエイターの方にも手伝ってもらったりとか、他の人にも構成してもらったりはしたんですけども、
フェーズの人は私に依頼をしてくれていて、多分私がどんな日本語を書いているのかっていうのはあっちはわかってないと思うんですけど、
そうですよね。わかんないですよね。
もう私がこれはこれだみたいな感じで、決めていかないと終わらなかったんですよね。
デザインツールの現状
もう、用語だけでも890ぐらいあって、こんなにシンプルなUIで、こんなに単語あるかねっていうぐらいあったんですよ。
そうですね。メニューを見てもそこまで多いイメージなかったんですけど。
そうそうそう。だから普段ね、そのフィグマとかアドビブのソフトとかで、この日本語変やんみたいな感じのことを自分でよく文句言ってるけど、いやこれ大変あったよなと思って。
そうなんですよね。
その表示できるスペースも基本的に英語で作られているUIだから、幅がこんだけしかないから、この中に収める日本語でしないといけないってなったときに、
どうしても変な感じになっちゃうっていうのはこういうことかっていうのがわかって、あんまりこう人様が作ったUIネタって文句やめようと思いました。
そうですね。大事ですね。そういうの。人思いやる心が育まれたってことですかね。
こことここ表記売れしてるやんとか、そういうのですよね。
誰も何も言えない。
でもしフェーズを使っていて何か感じた方はね、松襟さん頑張ったんだなって、ちょっと心の片隅にそっとしまっておくか、バグフィックスのレポート出すか。
ちょっと教えてもらって、直されへんねんなってところやったら、ちょっと胸の中にしもってもらって。
そうですね。直せなかったんだなって思っていただいて。
そうですね。そういったシンプルな図になってるんですが、特にこういう人にオススメだなっていうのはありますか。
そうですね。そもそもロッティがあんまりまだ市民権を得てないというか、そんなに知名度も高くないんですけれども、
デザイナーの人はですね、なんかウェブ上でちょっとアニメーションしたいんだよねってときに、
これ多分CSS3を学ばなあかんのやろなとか、JavaScriptやろなみたいな感じで、敷居が高いって思ってるかもしれないんですけれども、
とにかく作ってロッティファイルに書き出しさえすれば、あとは言ったらコーナーさんがここでかみ込むとかっていうのはしてくれる人が多いので、
それも全員がしてくれるとは限らないんですけど、もしくはロッティファイルズっていうところにアップしたら簡単に表示ができるので、
ぜひ動きがあるページを作ってみたいとか、実はイラスト書くのが好きで、自分が作ったキャラクターとか、もしくはロゴを動かしたいって思ってる人は、
そんなに学習コストが高いことでもないので、ぜひチャレンジしてほしい。
そして、アフターエフェクトは難しかったって人にぜひ使ってほしいですね。
私ですね。
むちゃくちゃ多機能すぎるアフターエフェクト。
そうなんですよ。もう開いた瞬間にパネルの数がやばい。
アフターエフェクトでむちゃくちゃゴリゴリ作ったアニメーションだと、そのままロッティファイルにできるわけでもないんですよね。
そこは駆け出しできないんだよねとかあったりするんですよ。
なので、最初からロッティファイルを駆け出す前提のものなので、機能もだいぶ限られているんですけど、
逆に機能が少ないからこそやりやすいと思います。
なるほど。じゃあ私ですね。ターゲットユーザー。
まあ、マナさんは言うても使えるでしょってみんな思ってると思いますけどね。
なんかアニメーションを動かすのにアフターエフェクトのサンプルとかテンプレートとかやっぱあるじゃないですか。
それをダウンロードして自分でちょっとカスタマイズしようと思ってアフターエフェクトで開いたんですけど、
何をどうやってもここ変わらんなっていうところがあったりするんですよね。
これどこから出てきたんだろう。
見えないところで何かエクスプレッション測れてるとかね。
そう、どことひもずい、埋め込みがどうのこうの、え、どこからみたいなのがあったりして、えーってなったのが覚えてますので。
で、今回見たとき、フェイス見たときにすごくシンプルだから、すごく複雑な動きは難しいかもしれないんですけど、
こういう私みたいな最初やってみようっていう人にはおすすめなのかなと思って学ぶっていうところでね、チュートリアルの動画とかもちょこちょこ見てたんですが、
これ松襟さんが関わってらっしゃってるんですね。
そう、私が喋ってるのはあれ。
あ、そうだったんですね。
あれも大変でね、英語でプロのナレーションさんがすごい流暢に喋ってる英語のチュートリアルをそのまま日本語したビデオがあって、
そこに日本語をふちかえていくんですけど、日本語のほうがわりと説明することが多いからなのか何なのか、
どう頑張って喋っても尺が合わないんですよ。
かといって、私早口で喋ったら全部噛むんですね。
なので結局最終的に喋ってる音声と画面上の矢印とかがズレないように、
私がプレミアとか開いてズレを直したりとか、
むちゃくちゃ細かく何秒何秒っていうのを本当に5秒3秒1秒ぐらいの感じで、
ここを何秒にしてみたいなことを言ったりとかして、それを合わせるのが結構大変だったので、
プロのナレーターさんって本当すごいんだなと思いました。
すごいですよね、アニメとかの声優さんの話聞いてたらよくそういう話も出てくるんですけど、全然口が合わないみたいな話も聞きますけど。
本当にすごいなと思いました。
そういうAIとかでできそうな気がしないでもないですけどね、テキストを読ませるとか。
AIにしてもらったらよかったんじゃないかなって思う。
あんなに私も動画を編集する人も苦労するんだったら、多少発音が変でもAIでよかったんじゃないかと。
いやいやでもね、松江里さんが喋ったっていうのがまた味が出ていいかもしれないですね。
そう思っていただけるんだったら嬉しいですけどね、ぜひ聞いてください。
はい、ということでした。
コミュニティ活動の効果
他にもコミュニティ活動とかそういうこともされてるっていうふうにお伺いしてるんですが、これがずっと続けてらっしゃるということで、今後もずっとやっていこうかなとは思ってらっしゃるんですかね。
そうですね、コミュニティ活動はぼーっと生きていた私がちゃんと動き始めるきっかけになったので、これはね今後もやっていきます。
これでも最初始めようと思ったきっかけっていうのがないと、なかなか最初の一歩って踏み出しづらいと思うんですが、それは何だったんですか。
もともとね、わりとその日暮らしじゃないですけど、与えられた仕事を淡々とします。
講師業もこの日この日って決まってるから行ってやります。
でもそれだけであんまりこうね、自ら新しい技術を学ぼうみたいな姿勢はあんまりなかった時代が続いたんですよ。
なんならモンハンやってました。
いいですね。
2018年の夏ぐらいにCSSナイトが大阪であったんですよ。
ウェブ系のセミナーですね。
それね、重い腰を上げて行ったんですけど、そしたらむちゃくちゃ感銘を受けて、私が今本を買って読んで、得た技術が今最新と思ってるけど、もうその本のこと古いって言ってるとかね。
こんなツール知らなかったとか、いっぱい気づきがあって、自分はなんて狭い世界で生きてたんだろうと思って、それでちょっと外に出ていくきっかけになったんですよ。
ちょうどその頃、私が大好きだったFireworksが開発終了のお知らせが出たんですよね。
もう大好きだったんですけど、でももう使えなくなるっていうからしょうがないっていうことで、
Adobe XDがその時まだ、正式リリースがまだで、ベータ版だったんですけど、それに乗り換えざるを得なかったみたいなことがあったんですけど、
使い始めたらいろんなところでFireworksの息吹を感じて、XDって使いやすいって思って、
今ですね、フリーランスで受けているデザインのお仕事で、これまではFireworksだったけど開発終了だったから、
フォトショップで作ってって言われた時に、今XDっていうツールがありましてね、これで作っていいですかって聞いたら、そんなの知らんからダメみたいな感じで、
全然使わせてもらえなかったんですよ、特に大阪は。なので、これちょっと使ったほうがみんな時間になるし、いいからみんな使おうよみたいな気持ちで、
最初はすごい小さく、もう本当に20人とかそういう規模で、XDっていうのを触ってみようみたいな勉強会を勝手にやったのが本当にきっかけです、最初です。
そこから、もうAdobeから、だったら公式でやってくださいみたいな感じでこうやってやってもらって、
AdobeXDユーザーグループ大阪にさせてもらって、でもそのうち自分でCSSナイトの大阪版もやるようになって、
っていうことをやっているうちに、交流会でいろんな人に知り合うことができて、仕事ももらえたし、お客さん同士もつながっていくし、
初心者の方もクリエイターさんと交流できるし、みたいな感じで、これええやんってなって、
で、自分もね、そういうコミュニティに来てくれる人の中にはすごい達人もいるから、いっぱい賢い知り合いも増えて、賢い知り合いが増えると、何かの時に助けてって言うじゃないですか、
それめっちゃいいですよね。
そうですね、その人ばかり頼りすぎるわけではないんですけど、
ないんですけど、お互い得意分野を補い合うみたいな、それが私は肌に合っていたみたいですね。
で、それこそ本当にレジ張りを卒業したんだけど、まだ習い足りてないことがあるよとか、
同じようにフリーランスになったけど、どこでお仕事もらっていいかわかんないよみたいな人も勉強会やって、交流会来てもらったら、そこで名刺交換してつながるっていうことができるんで、
ちょっとね、大阪のウェブ業界のコミュニティに貢献できたかなっていう自己満足はあります。
いいと思います。なんか大阪コミュニティって言ったら松江里さんの名前必ず出てきますし、
出てきますよ、お話ししてたら。
そういった交流会の中でいろんな方と出会ってきたと思うんですが、松江里さんから見て、この人伸びそうだなっていう人いますか?
そうですね、最初って誰でも伸びしろしかなくて、どんどんどんどん伸びていくじゃないですか。
ちょっと勉強して、ちょっとわかってきたの。
あとは、今って無料で学べるコンテンツもむちゃくちゃいっぱいあるんですけど、
でもやっぱりちゃんと出版されてる書籍とかって、情報がむっちゃ詰まってますよね。
ちゃんと買うものは買うとか、有料のセミナーも行くものは行くみたいな感じで、
新しい技術を学ぶ姿勢
適切に投資ができる人、これは私にとって有益だから、3000円払って4000円払ってもこのセミナー受けようとか、この本は買うとかね。
ノートでもね、有料記事ありますけど、それもちゃんと必要なものはちゃんとお金出して買うっていう人は、
やっぱり得る情報の質が高いから伸びるのが早いと思うし、そもそもですね、私も自分自身がそうだったんだけど、
世の中の河津というか、ある程度わかったから、これで業務できるから大丈夫ってならずに、
自分がベテランと思い込まずに、新しいツールは試すって教えてもらえるんだったら教えてもらうっていう姿勢を持っている人、
もう私それ知ってるしみたいな、そういうんじゃなくて、私もそうだったんですけどね、昔。
たぶん誰でも一度は長くやってたら、誰でも一度はあると思うんですが。
一回だいたいわかったってなりますよね。
そうなんですよ。
実は全然わかってなかったっていうのが、もう少し進んだらわかるんですよね。
なんかそのあたりになると、若い子から学んでみるっていうのを一度やってみると、結構景色が変わる気がしますね。
そう、あのね、若い子すごい。
若い子すごいの。
若い子すごいっていう発言はちょっとあれなんですけど、
もう若くて、可愛くて、賢くて、どんだけ持っとるんだこの子はっていう人がいっぱいいるんだけど、
もう変に目構えず頭を下げて習ったほうがいい。
そうなんですよ。だからSNSの使い方とかは、もう我々よりも、本当20歳ぐらいの最近始めましたっていう人の方が、
うまく使いこなして、うまく情報の取捨選択できてる方とかもいらっしゃいますので、
そう。
そういった方からね、見て学ぶっていうのもありだと思いますし。
本当に発信するのも本でスピード早いしね。
早い。
今セミナー受けて、もうブログ出したの?みたいな。レポート書いたの?みたいな。
そうなんですよ。
しかもスマホでやったの?みたいな。
いますよね。帰りの長距離バスの中でアップしましたみたいな。
そう。
いらっしゃるんですよ。すごい元気だなって思ったりして。
でもこれはちょっと動画も載ってんじゃん。動画もiPadで編集しましたみたいな。
そうなんですよね。
帰って寝てたわ、その頃はみたいなね、ありますけどね。
手伝いができない形でね、どんどんなってますけど。
はい。という方からも学ぶところはね、あると思いますので、
身構えずに、皆さん平等に教えたり教え合ったりできるといいですよね。
そうですね。自分が分かったって一回思ったものも、人に教えごとすると、
実はね、理解が足りなかったなってところが結構あるので、
イベントの紹介と学び
教え合うっていうのは、むっちゃ大事ですね。
セイロさんにもよく言ってます。
もうね、できたよっていう人は横の人に教えてあげてね、みたいなことはね。
いいですね。
分かりました。今日はなんかいろんな学びがあったような気がしますが、
松江里さん、今日はいかがでしたか?
そうですね。久々にクリエイターとまともに会話ができて、
それだけで楽しかったですし、
マナさんともね、久々にお会いできて嬉しかったです。
普段ね、授業で一方的に喋ったりすることが多いので、
本当に飲み会とかじゃない限り、会話をしてなかったので、
すごくね、ボケ帽子になりました。
飲み会とかだったら、いっぱい人がいるんですけど、
一対一で話す機会ってあんまりないですよね。
そうですよね。
本当にありがたいお時間でございました。
ありがとうございます。
じゃあ最後にお知らせなどあればお願いします。
はい。10月25日の金曜日に、
先日出演された彩香さんも出演されるんですけれども、
朝までFigmaっていうね、夜21時から朝5時までっていうね、
かなりファンキーなイベントがありまして、
明日私もね、出演します。
そこではね、Figmaの話と、
あとね、ノーコードツールのスタジオのお話もしようと思っているので、
デザイン好きなんだけど、コーディングはちょっと苦手だな、
でもサイト公開したいなって思っている方はね、
ぜひ聞いていただけると嬉しいです。
はい。今お話しされたスタジオについてはですね、
私とかけだしちゃんも挑戦してたりしますので、
その辺もポッドキャストで。
あ、そうなんですね。
はい、そうなんですよ。公開してたりしますので、
はい、ぜひチェックしてみてください。
では松井さん、今日はありがとうございました。
はい、ありがとうございました。
さて、この番組では感想や質問、リクエストなどお待ちしております。
番組詳細欄にあるリンクより、
お気軽にご投稿ください。
XではカタカナでハッシュタグWebカフェを付けてポストしてください。
そしてAppleポッドキャストやSpotifyのポッドキャストでは
レビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech Academyは現役デザイナーからマンツーマンで学ぶことができるスクールです。
キャンペーンコードをお申し込みの際の備考で入力すると、
Tech Academyの講座を2万円引きで受講できます。
キャンペーンコードはWebカフェ、小文字のアルファベットで
W-E-B-C-A-F-Eです。
概要欄のリンクからぜひチェックしてみてください。
またお会いしましょう。
Webクリエイターボックスマナでした。
