しょっちゅう起きます。
僕ちょっと素人なんで適当なこと言うんですけど、例えばデザイナーの人が1回そういうデザイン作りましたと、1980×1020で作りましたよみたいな時に、
後からレスポンスにした時にスマホとかでこんな崩れちゃったよみたいな話とかってもらうわけだと思うんですけど、
初学者のうちから全部考えるのは無理なので、学びの入り口としては全然いいと思いますよ。
ただ、そういう出来事があっても、とはいえデスクトップを作って、モバイルはいい感じにエンジニアの方にお願いしますみたいなデザイナーもまあまあ、
結構多いらしいと聞くので。
ああ、そうなんですね。
うーん、まあらしいですよ。
へー、そうなんだ。それはちょっと知らなかったですね。
変な話、モバイルってほとんどレイアウトって縦1列にしかできないじゃないですか。あんまり2列3列とかって、
デスクトップで複雑なやつ作って、これを並べられる感じでモバイル版に収めてくださいみたいなリクエストとかは結構まあまあ聞きますね。
ああ、私それ聞きたいですね。
なんか結構聞くために頼った会話だけでもないと思うけどなぁ。
そうなんですね。
そっか、X状ではもうなんか、
3、4ヶ月に1回ぐらいなんかそういう漢字があるような気がして、
聞いてみてほしいです。
はい。
早めに1回にやると、
それがもういくつかの回答になるかもして、
あ、それとも浅夜の時点で出てくるかもしれません。
浅夜の時点で出てくるかもしれません。
浅夜の時点で出てくると、
浅夜の時点で出てくるかもしれません。
わかるよ。
それは、
だって、
いやそう、
3、4ヶ月に1回ぐらい、なんか、そういう恒例状があるような気がして。
確かにそれはやらないとダメですね。苦労をちょっと知ってもらわなきゃいけないですね、それも。
そう、なるほど。
デザインデータの質は確かに、本当にコードを書いてる人と書いてない人で全然変わると思うし、
一度まず経験してみるっていうところは大事かなと思ってて、
それを自分で作ったデザインが、まずデザイン頑張ってみてくださいってやったときに、
こういうところも考慮しなきゃいけないんだっていう気づきを得て、学べるか否か。
そうですね。
あとは、特に紙出身のデザイナーって、これむしろいいこだわりなんですけど、
例えばそうだな、ある段落とある段落のテキストの分量がちょっと違うから変なとこで開業されちゃうなみたいなときに、
倍の程度にちょっとサイズ変えたりするんですよ。
上の段落は99.5%にして、下の段落は101%にするとか、そうすると気持ちいいとこで開業されるみたいな。
あるある。
コマ何パーが印刷されてももう分かんないじゃないですか。同じサイズだなってしか人間見えないので。
全然大丈夫なんですけど、そういうのは例えばウェブとかでやろうとすると、
いや、スマホのときは結局ここで開業されちゃいますけど、みたいなのが起きるとか。
あとは、なんだろう、例えばコード書いてる身からすると、
これ文字量が20文字変わるごとに不文をかけってことですか?みたいなデザインデータが出てきてしまうとか、イメージ的にはね。
コード的な不採ですね、それは完全に。
例えば、見出しが画面の幅いっぱいになってほしいみたいなやつが、
最近だとCSSの計算でちょろちょろともしかしてできるかもしれないけど、
JS使って計算しなきゃいけないみたいなこととかになって、かつ、
この文字数を超えたらとはいえ2行にしたいです、みたいなオーダーがあったりすると、すごいことになっちゃうわけじゃないですか。
これはもう、無理な時もあるよ、みたいな。
なんか、なんだかんだ強引で読み解けないCSSは不採になると思っていて、
たとえできるとしてても。
そうそう。
CSSも脆いんで、完全とは言い切れないから、そういう不採になるようなデザインが生み出されている時点で、
それをエンジニアも実装している時点で、
ちょっとなーっていうところはあったりはするんですよね、自分の中では。
2人3脚で不採に走っていってるチャートみたいな。
そのデザインを需要している側も、需要している側で不採を生んでるんですよ。
なるほど。
これは僕は今、デザイナーの立場だから、デザイナーコードを書いた方がいいよって言ってるけど、
これもし僕出自がエンジニアだったら、エンジニアももうちょっとデザインやった方がいいよって多分言ってるんだろうなって。
いやー、わかります。
なるほど、なるほど、なるほど。
そう、僕は主体がデザイナーだから、コードを書かないとそういう不採だとか、
なんかそういうのに気づけないですよ、実装上のあれこれ気づけないですよっていう話をしてる。
ポジショントークと言えばポジショントーク。
うんうん。
いや、その最近、CSSとか結構書くことが自分も増えたんですけど、
あー、そうなんだ。
だからちょっとだけわかるんですよ、ちょっとだけ。
で、最近あったのが、10行になったら開業、開業じゃないわ、もっとビルボタンを出してくれみたいな、
10行以上になったらもっとビルボタンを出してくれとか、20行以上になったらもっとビルボタンを出してくれみたいなのがあったりして、
でもそれもその何行になるかって横幅で変わるから、
そうそうそう。
あのタイミングで出すの?みたいなの結構あったりして。
そうなんだよね。
確かに確かにそういうの思いましたね。
その話で言えばさ、例えばJavaScriptだったらさ、文字数を行数が無理だからじゃあ100文字でって言われたとして、
いやリング数で数えていいのかこれみたいなのあるじゃないですか。
なりますなります。
なんて読むかわかんないけど、INTLテグメンターみたいなやつで分割すべきなのか、
サロゲートペアは?とかなんか出てくるじゃん、みたいなのの苦しみをデザイナーも知っておいたほうがいいなっていう気がして、
100文字って言うけどさ、みたいな。
どこだい?みたいな。
いやそうなんですよね本当。
だからなんかデザインやってて、そうですね、デザイナーやってる人たちにこういうこと考えながらやってたのかなとか演じながらやってたりとかして、
最近はAチームのデザイナーの人たちはそういうことも考えて結構やってくれてたんだなっていうのをちょっと感じることも多くて、
なんか、すごい良い会社だったんだなっていう、思ったりしますねやっぱり、そこはやっぱりそういうのを教えてくれる人がいるんだろうなっていう。
今のも例えばデザイナーもちょっとコードわかるし、エンジニアもちょっとデザインわかる状態だったら、例えばそうだな、
全文取ってくるとさすがにパフォーマンス的によろしくないけど、200文字ぐらい取ってくればさすがにその1文字2文字の差でおかしくなることはないから、
ざっくり200文字ぐらい取ってきて、先頭の1行分ぐらいの高さで切り取りましょうみたいなこととかが、
良いかは別にしてそういう着地を議論できるわけじゃない。
そうですね。
これがどっちかが一方の知識を全く知らないとか、デザインを作った通りに実装してくださいよみたいな強情なデザイナーだと、
これはヤバいってっていうのが平気に生まれちゃう。
私が今いる会社はもう完全にデザイナーコード書かないような状況になっていて、
エンジニアがUIの組み立ても全部やっていくっていう感じの組織になっているんですけど、
だからこそまだ完成しきっていない状態でもデザインをお披露目して、
ここが実装が難しいとかこういう観点が抜けてるとかをエンジニアがフィグマにコメントを残していくみたいな文化があって、
それで擦り合わされてるからアウトプットとして出てきたものを組みやすい状態になっていたりしますね。
そういう途中での擦り合わせは絶対必要かなって思うね。
もうウォーターフォール的に、はいデザイン工程おしまいです、ここからはエンジニア工程です、戻ることはないですってすると、
多分まあ苦しい。
苦しいですね。
あとはデザイナーがコーディングの知識がなかった場合、
コーディングの知識がある人が作ったデザインシステムとか規約に乗っかるとか、
そういうのである程度制限がある中のデザインになってはしまいますけど、
だからこそ正しいUI設計ができるっていうところはあると思うので。
デザインシステム周りもコードの知識が全然ないデザイナーって、
だいたい制限が多くて、嫌だ、稼が多いっていう反応になるんですよ。
なるほど。
変な話、ちょっとしたレイアウトとかサイズのパターンは、
大きいほどいろんなデザインのパターンが組めるわけじゃないですか。
で、さっき言ったみたいに1%とか1ピクセルとかで調整したくなっちゃうのがデザイナーの差がなので正直言って。
嫌だよ、そんなSMLしかないなんて、みたいななんか言っちゃうんですよね。
なるほど。
で、でなるとせっかく仮に神の視点から見たらめちゃくちゃいいデザインシステムだったとしても、
デザイナーがこんなバリエーションの少なさでも嫌ですよ、みたいになってサジ投げちゃうみたいな。
とかっていうのも結構聞く話ではあって、デザインシステムの導入に失敗しましたみたいな話の裏側みたいなね。
それはデザイナーのわがままというよりかは事前にこれぐらいのバリエーションでやってきますよみたいな合意形成が取れてなかったから、
デザイナーがてっきり10種類ぐらい使えるもんだと思ったら、
エンジニアは2種類しかダメですって言って喧嘩になっちゃったみたいなイメージ。
なんか、私の感覚だったらなんかデザインシステムがあることによってある程度ルール決まった上での設計ができるから、
デザイン設計する上でも楽になったと感じるんですけど、
それこそ多分装飾系多めなというウェブサイトを作ってきた人たちとかだと、
通信とかだと表現によって売り上げを立てたいとかそういうニーズとかもあると思うんで、
それを制限がある中組み立てていくのって難しいよねみたいなところは論争になりそうですね。
そうなんですよね。
そのあたりもね、自分で書いたことあると、まあでも妥当なとこですよね。
この3種類がね、みたいなのはなんか諦めじゃないんだけどなんか、
なんだかんだこれぐらいだよねっていう感覚が身についてくるというか。
確かに。
なんか、やたら種類増えると命名も大変じゃないですか。
はい。おっしゃる通り。
XMLで済むんだったら楽だけど、4種類目が出てきたときに、
XLはあるけどXSはないのか、いいのかなこれみたいなことを考えちゃうとか。
たまにありますよね。XXXLみたいな。
もうこれ以上追加できないよーって。
こんなにいる?みたいなね。
何で使い分けているんですかって感覚みたいな。
その分チェック項目とかも増えますしね。
そうそう。
どういうデバイスでどう見えるかとか、そういうところもパターンがある分不明瞭になるので。
そうなんだよね。あと例えばこう、プライマリー、セカンダリーぐらいは名前が浮かぶ。
まあターシャリーも浮かぶかなってなるけど、4番目って何て言うんでしたっけみたいになるじゃん。
僕なんか調べるんだけど。
絵を作ってる人からだったら、いや4種類欲しいんですよってなったら、
まあなんかなりそうだなって気がするのよね。
でも多分コード書くときに命名が苦しいってことは多分、
うまく役割与えられてないじゃんみたいなことの証拠な気がするから。
そうですね。それはもうエンジニアでもよく言われるやつですね。
その辺りもね。
お前命名できないってことはどういうことか分かってんのかって。
扱えてないってことだぞみたいな。
これは責務がちゃんと分割できてないぞって。
そうそう。通称で40話みたいな。
あの赤くて丸いやつと青くて角ばったやつとみたいなのがあるけど。
デザインシステムってなったらそうはいかんわなみたいなあたりとかも、
多分ちょっとぐらい自分でこう作ってみてとか、
それを組み合わせてデザイン作ってみないと、
その感覚っていうのはなかなか得られないかなって。
いやー確かに。
いやでもなんかフィグマが成長したことによって、
なんかそれがコード書けずとも制約が必要であるパターンとか、
命名付けが必要なパターンっていうのが多く出てくるようにはなってきたなと思ってて。
はいはい。
それこそバリアンスの命名どうしようとか、
コンポーネントの命名どうしようとか、
使うケースあんまないかも。
デザインシステム作らない上ではあまりないかもしれないけど、
バリアブルとか使っていくと、
もう命名の嵐じゃないですか。
そうね。
でもなんかわからない命名とかわからないパターンとか作ってったりとか、
なんかパターンが多いほどコンポーネントやばいことになるじゃないですか。
そうね。組み合わせばかりだね。
組み合わせ爆発100種とかなんかよく見かける話なんですけど。
嫌だからね。
なんかデザインツールがコードにすごい近寄ってくれたおかげで、
寄り添い合える世界が近くなってきたような気がしてて、過去よりかは。
もともとフォトショーから頑張ってデザインを組んでたものからすると、
マジでフィグマの存在はコードを書いてる人からしたらありがたいですね。
でかいね。コードを書いてた身からすると、
最終的にこういうコードになるんだからこのデータだわなっていうのが、
かなりスムーズな作り方ができるので、
そういう意味で僕のサイドからしても嬉しいですね。
分かります。
And now, a short commercial break.
エンジニアの価値は世界が決める。
転職ドラフトは年収アップ率94%、
平均年収アップ額148万円と、
圧倒的な実績を誇るITエンジニア限定の転職サービスです。
今までのエンジニア経験を登録することで、
前線された企業から年収提示付きのスカウトが届き、
リアルな市場価値が測れます。
気になる方は、転職ドラフトで検索してお気軽にご参加ください。
ITトリオ。
後ろ向きなっていうか、コード書けないとこんなところがつらい話ばっかりしちゃったから、
コード書けるとこれもいいよって話はしたいんだけど。
そうですね。ぜひぜひ。
デザイナーとしていろんなアプリとか使ってると、
エラーが出るにしてもこういう出し方してくれると分かりやすいなとか、
電波悪いにしてもこういう風になってくれてると、
404出るにしてもこんな風になってると分かりやすいなみたいなのって結構大事なというか、
感じること多いわけですよね。
コードが分かるとそのあたりをちゃんと心地よい、
エラーならエラーなりに心地よいとか、
そういうのを提供しやすいなってすごい思ってて。
具体の話でいうと、リアクトの最近サスペンスが出てきてみたいな話とかをちゃんと使えると、
読み込み遅いデータにしても、
ちゃんとここでこういうコンポーネントを作っておけば、
そんな不快な待ち時間にもならないよねみたいなのは意図して作れるというか、
そういうのを想定しながら作れるとか。
でもそうやって技術的なことを知らないと、
なんかあれじゃないですか、
フェイスブックとかでシュンシュンってなるやつみたいな、
そういうのを言った時にしか話せないというか。
ってなっちゃうので、そこを知っとくと、
この場合だったらこうした方が心地よく使えるなみたいな、
更新するときとか、
今からもう一回リトライするときとか、
そういうのでね、
いい体験を提供できるよねっていうのが繋がりやすくなるかなって。
確かに。
ユーザーが使う、ある意味ブラウザの知識じゃないですか、
ブラウザとしてどう動いていくかっていう前提で、
デザイナーとしてどういう体験の引き出しを持っていればいいかみたいな、
すごい強みになるなって思いましたね、そこまで考えられると。
そうなんですよね。
でもなかなかいないですね。
いるいないで言えばだいぶ少ないよ。
少ないなって今、話してて、
ここまで考えられたらすごいなとか思ったけど、
なんで少ないんだろうなっていうのは、
そうなんですよね。
なんでかなかなか解明できないんですよね。
そもそもデザイナーって種類が多いじゃないですか、
一言デザイナーって言っても、
ウェブに携わってるデザイナーでも種類が多いイメージがあって、
何が強い、何が強いとか、
その中で特にUIウェブが強いみたいなデザイナーが、
そもそもそんなに多くないイメージがあって、
世の中に出ているウェブサイト、
半分くらい多分ウェブ製作、
事業会社の方がデザインシステムとか、
そういうデザイン設計とかがちゃんと、
ベースがあるというか、継続してデザインを運用していくみたいな、
文化がちゃんとあるけど、
製作ってクライアントさんに綺麗に見えるものを提供したりとか、
やっぱりプレゼンテーションして取りに行かなきゃいけないから、
考え方が違ったりとかなると、
めちゃくちゃ古いにかかった上での、
一種のデザイナーっていう感じがして、
対応も難しいんですよね、上で。
そうですね。
製作会社のデザインシステムで聞くのと、
ヘッドレスUI的なのを社内で作ってるのは時々聞くが多いんですけど、
毎回パララックスを実装するから、
画像を与えればパララックスできるものを作っておこうとか、
パターンとして準備しておくみたいな。
ただ、とはいえサイズ、色、形は毎回もう絶対違うから、
それはもう都度都度考える前提でやってみたいな。
そこからもう一回設計し直してっていうところだから。
あくまで機構をライブラリとして切り出すというか、
そんな感じっぽい。
なので、事業会社のデザインシステムとはまただいぶ違うだろうし、
あと結構、制作会社とあちいちの問題なんか、
デザイナーが一旦もう自由にやっていただいて、
あともう私たちがどんだけでも拾うんでみたいな、
割り切ってるとこも聞き忘れ。
割り切ってるところ?
もう自由にやっていただいて、はいって言って。
あるデザイナーの自由さをどんな奴が来ても拾いきれることが、
エンジニアのスキルの高さとか強靭みたいになってるとこも聞き忘れし、
それはそういうところだなっていう気もする。
確かに確かに。
私も昔はどんなデザインが来てもCSSで表現します、キラリ、
それがかっこいいキラリって思ってた時代があって、
でも今思うと、あのコード誰が見て理解できるんだろうって。
あのコード残したけど大丈夫かなって。
その後変更を加えた時に多分ぶっ壊れるけど大丈夫かなって。
読めるかなって。
あるよね。ミニファイしたわけでもないのに読めない。
疑似要素ゴリゴリで何かめちゃくちゃ作って、できたみたいな。
あるよね。
そういう経験してるんですね、デザイナーの人も。
なんかある、多分エンジニア、いかにもエンジニアっていうよりか
マークアップ出身だと一回CSSでどこまでできるのかっていう時期は多分来ると思う。
あるよね。
やる。
マークアップが多めの人はね、多分どこかではキャリアのうちやってると思う。
やってると思いますね。CSSでどこまでお絵かきができるかっていう。
そうなんだ。
どんなカンプでもやってこいみたいな時期があり、
で、どんどんエンジニアリングに寄っていくと、
あ、CSSってこんなに脆いんだ。どうやって運用していくんだろう。
大丈夫かな、あのコードってなっていく。