イラレのデータからウェブデータつくるなんて、チャンチャラ。クズなの？あれ？クズ発見！みたいな。そのくらいのもん。フォトショにもってってみそ？
Re:2 またお前か。あちこち荒らすなよ
Re:2 こいつよくわかってないみたいだな。恥ずかしいぞ。
Re:4 出るんだけどフォントサイズくらいしかそのまま持ってこれるデータなくて、カーニングとか行間とかはCSSそのまま入れても全然合わないし、マージンも手動で測ってて効率悪すぎだし自分だけなんかやり方間違ってるのかと思って・・・行間はAIの行間➗フォントとかで計算で出してる状態
Re:6 行間は常にAi/PSのデータから計算していれてる。というかSassつかってればline-height:(36/24);とかでいけるよ？
Re:6 CSS の line-height と Ai の行送りは概念が違うからなぁ…まあ確かに困るね。ただマージンが何を指してるのか解からん。カーニングなんてやんの？ せいぜい letter-spacing で一括指定するだけだけど。
Re:7 まじかああああそんな機能が・・・SCSSは使ってるけど入れ子にする程度にしか使ってなかった・・・この感じだとまだ知らない便利なやつたくさんありそうだな・・・少しCSSの指定早くなる気がするありがとう。てかみんなPSっていうけどAIでデータもらってるパターン少ないのかな・・・？今までほとんどAiでしかもらったことないんだけど
Re:8 うちはデザイナーのこだわりでだいたい文字間は段落ごとに違うし、Aiデータ上だ文字間の設定にトラッキングとカーニングが入っててトラッキングの数字入れるだけだと合わないから困ってる。マージンは普通に要素毎にどれくらい合間が空いてるかって話。手動で測ってるんだけどめっちゃレガシー＋効率悪いことやってるんじゃないかとおもって。それでもぴったりは合わないからさらに手動で調整するんだけども
Re:10 なにそのデザイナーキモいな。そんなんだから未だにIllustratorでカンプ作るようなレガシー制作してんだよ。。。
Re:9 フリーでコーディングしてるけど、イラレ30%、フォトショ60%、Fw 10%って感じですね。デザインにこだわるところほどイラレ。効率重視の所はフォトショって感じかな。
Re:10 大丈夫。Appleとかでも１文字ごとにspan切ったりしてるから。ただ、そんなに目立たない文章や流し込み本文にまでそれやられたらキレそうになるけどねｗ
Re:8 >CSS の line-height と Ai の行送りは概念が違うこれで毎回困ってるんだけど手動で計算以外に解決方法あるの？
Re:14 単位を両方で揃えれば（普通pxだろうけど）行間サイズはまったく一致する。上のスペースが ((line-height - font-size) / 2)px 空くだけ。
そういう場合は、指示書を作ってもらうこと。プリントアウトに手書きで、フォントサイズは●●pxで、行間は●●px。トラッキングは●●で、ここの見出しの文字詰めだけはしてほしいとか。すり合わせないと、お互い不幸。＞大丈夫。Appleとかでも１文字ごとにspan切ったりしてるから。とかいう人がいるが、正直現実的ではない。Appleぐらい大手の案件で時間と予算があればやっても良いけど。基本的に、Webは見る人の環境やデバイスによって、フォントも違うし、ブラウザの設定によってはフォントサイズも違う場合もあるし、全体の中央値をとる必要がある。無駄に文字詰めして、ある一定の端末&フォントで微妙に崩れてる場合とか考えるとできるだけプレーンで汎用的なものを作る必要がある。そのあたりをちゃんと理解してもらわないといけないよ。誰のためのこだわりなのか。それって本当にユーザーのためになってる？と思ってしまうよ。そこまでこだわりがあって、やるんだったら文字を画像（SVG）にするとかしたほうがきれいだよ。
Re:15 ありがとう。>上のスペースが ((line-height - font-size) / 2)px 空くだけ。これに困ってるんだ。例えば見出し+本文とかで本文の行間をイラレに合わせると見出しの下の余白がカンプと合わなかったり。marginとかで調整するのもどうなのかと思って。。
Re:13 これ正直 Web でやるのアホらしいで…グラフィックでも大見出しに使うぐらい。最近は Web フォントを使えば環境ごとの違いは吸収してくれるが、それでもまーなんだろ…アホらしいでやっぱり。
Re:18 Webフォントでも１文字ごとの字詰めはspan切らなきゃだよね？アホらしいと思うのは分かるけど、メインビジュアルのコピーとか、こだわりたいところはやるべきだと思う。
普通は、イラレのデータをそのレベルで再現するなんて非効率極まりないことしないと思うよ。デザイナーがそこまで指示を出せるなら、XDなりSketchなりのツール上でCSSの値を出力できるもので指示を出すべきであって、そのコストをコーダーに負わせるなんて、2018年現在では非常識だね。俺が上の人間なら、内部予算を無駄遣いだと指摘するね。
なんかあれだ、CodeGridにピクセルグリッドがECサイトのデザインカンプ例を載せてたけど、あそこのレベルまで出してくれるなら、完璧に仕上げてやるぜ！ って気持ちになるな。しかし、あのレベルを出してくるデザイナーとは一人として出会ったことがない。
Re:21 これ見たくって探してるんだけどどの記事？
いろんな意見あるなぁ割り切れない数をSassで計算して出すのはめちゃ参考になった。ただ意外とマージンを自動で測る方法とかってないのね・・・。
Re:2 イラレのデータからウェブデータつくれないなんて、チャンチャラ。クズなの？あれ？クズ発見！みたいな。そのくらいのもん。イラレ程度触れるようになってみそ？
Re:23 ごめん、自分も探してるんだけど、無料閲覧の中には無かった…前の会社で有料購読していたから、もしかすると有料記事の中にあるのかも。今は有料購読してないから、これ以上は調べられないんだ。申し訳ない
Re:26 https://app.codegrid.net/entry/design-spec-1見つけた！いやいや、ありがとう。おかげで助かりました。
Re:27 有料か…お試し期間とかないかな〜
27 件の回答
イラレのデータからウェブデータつくるなんて、チャンチャラ。
クズなの？
あれ？クズ発見！みたいな。
そのくらいのもん。
フォトショにもってってみそ？
Re:2 またお前か。あちこち荒らすなよ
Re:2
こいつよくわかってないみたいだな。
恥ずかしいぞ。
Re:4
出るんだけどフォントサイズくらいしかそのまま持ってこれるデータなくて、カーニングとか行間とかはCSSそのまま入れても全然合わないし、マージンも手動で測ってて効率悪すぎだし自分だけなんかやり方間違ってるのかと思って・・・
行間はAIの行間➗フォントとかで計算で出してる状態
Re:6
行間は常にAi/PSのデータから計算していれてる。
というかSassつかってればline-height:(36/24);とかでいけるよ？
Re:6
CSS の line-height と Ai の行送りは概念が違うからなぁ…まあ確かに困るね。ただマージンが何を指してるのか解からん。カーニングなんてやんの？ せいぜい letter-spacing で一括指定するだけだけど。
Re:7
まじかああああそんな機能が・・・SCSSは使ってるけど入れ子にする程度にしか使ってなかった・・・
この感じだとまだ知らない便利なやつたくさんありそうだな・・・少しCSSの指定早くなる気がするありがとう。
てかみんなPSっていうけどAIでデータもらってるパターン少ないのかな・・・？
今までほとんどAiでしかもらったことないんだけど
Re:8
うちはデザイナーのこだわりでだいたい文字間は段落ごとに違うし、Aiデータ上だ文字間の設定にトラッキングとカーニングが入っててトラッキングの数字入れるだけだと合わないから困ってる。
マージンは普通に要素毎にどれくらい合間が空いてるかって話。手動で測ってるんだけどめっちゃレガシー＋効率悪いことやってるんじゃないかとおもって。それでもぴったりは合わないからさらに手動で調整するんだけども
Re:10
なにそのデザイナーキモいな。
そんなんだから未だにIllustratorでカンプ作るようなレガシー制作してんだよ。。。
Re:9
フリーでコーディングしてるけど、イラレ30%、フォトショ60%、Fw 10%って感じですね。
デザインにこだわるところほどイラレ。効率重視の所はフォトショって感じかな。
Re:10
大丈夫。Appleとかでも１文字ごとにspan切ったりしてるから。
ただ、そんなに目立たない文章や流し込み本文にまでそれやられたらキレそうになるけどねｗ
Re:8
>CSS の line-height と Ai の行送りは概念が違う
これで毎回困ってるんだけど手動で計算以外に解決方法あるの？
Re:14
単位を両方で揃えれば（普通pxだろうけど）行間サイズはまったく一致する。上のスペースが ((line-height - font-size) / 2)px 空くだけ。
そういう場合は、指示書を作ってもらうこと。
プリントアウトに手書きで、フォントサイズは●●pxで、行間は●●px。トラッキングは●●で、ここの見出しの文字詰めだけはしてほしいとか。
すり合わせないと、お互い不幸。
＞大丈夫。Appleとかでも１文字ごとにspan切ったりしてるから。
とかいう人がいるが、正直現実的ではない。
Appleぐらい大手の案件で時間と予算があればやっても良いけど。
基本的に、Webは見る人の環境やデバイスによって、フォントも違うし、
ブラウザの設定によってはフォントサイズも違う場合もあるし、全体の中央値をとる必要がある。
無駄に文字詰めして、ある一定の端末&フォントで微妙に崩れてる場合とか考えると
できるだけプレーンで汎用的なものを作る必要がある。
そのあたりをちゃんと理解してもらわないといけないよ。
誰のためのこだわりなのか。
それって本当にユーザーのためになってる？
と思ってしまうよ。
そこまでこだわりがあって、やるんだったら文字を画像（SVG）に
するとかしたほうがきれいだよ。
Re:15
ありがとう。
>上のスペースが ((line-height - font-size) / 2)px 空くだけ。
これに困ってるんだ。
例えば見出し+本文とかで本文の行間をイラレに合わせると見出しの下の余白がカンプと合わなかったり。marginとかで調整するのもどうなのかと思って。。
Re:13
これ正直 Web でやるのアホらしいで…グラフィックでも大見出しに使うぐらい。最近は Web フォントを使えば環境ごとの違いは吸収してくれるが、それでもまーなんだろ…アホらしいでやっぱり。
Re:18
Webフォントでも１文字ごとの字詰めはspan切らなきゃだよね？
アホらしいと思うのは分かるけど、メインビジュアルのコピーとか、こだわりたいところはやるべきだと思う。
普通は、イラレのデータをそのレベルで再現するなんて非効率極まりないことしないと思うよ。
デザイナーがそこまで指示を出せるなら、XDなりSketchなりのツール上でCSSの値を出力できるもので指示を出すべきであって、そのコストをコーダーに負わせるなんて、2018年現在では非常識だね。俺が上の人間なら、内部予算を無駄遣いだと指摘するね。
なんかあれだ、CodeGridにピクセルグリッドがECサイトのデザインカンプ例を載せてたけど、あそこのレベルまで出してくれるなら、完璧に仕上げてやるぜ！ って気持ちになるな。
しかし、あのレベルを出してくるデザイナーとは一人として出会ったことがない。
Re:21
これ見たくって探してるんだけどどの記事？
いろんな意見あるなぁ
割り切れない数をSassで計算して出すのはめちゃ参考になった。ただ意外とマージンを自動で測る方法とかってないのね・・・。
Re:2
イラレのデータからウェブデータつくれないなんて、チャンチャラ。
クズなの？
あれ？クズ発見！みたいな。
そのくらいのもん。
イラレ程度触れるようになってみそ？
Re:23
ごめん、自分も探してるんだけど、無料閲覧の中には無かった…
前の会社で有料購読していたから、もしかすると有料記事の中にあるのかも。
今は有料購読してないから、これ以上は調べられないんだ。申し訳ない
Re:26
https://app.codegrid.net/entry/design-spec-1
見つけた！いやいや、ありがとう。
おかげで助かりました。
Re:27
有料か…
お試し期間とかないかな〜