野に咲く名無し@転載禁止<>52357d87<>2024/07/31 (水) 16:47:14.103 ID:uyC791WQ8主<>LPをXDで作らなきゃいけないんだけど初心者もいいところで何もわからないの農園に有識者はいませんか😭<>誰かWEBデザインに詳しい人いませんか😭
野に咲く名無し@転載禁止<><>2024/07/31 (水) 16:47:44.418 ID:5X0KuIL2m<>有識者じゃないけど来たよ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 16:48:14.167 ID:A6WKteUkw<>❓
🥺わかんないきたよ<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 16:48:20.319 ID:uyC791WQ8主<> >>2
不安しかないからいてくれるだけでありがたいよ😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 16:48:50.775 ID:uyC791WQ8主<> >>3
ぷゆもわかんないから仲間だね😭🤝🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 16:51:02.494 ID:Eb4qWIpAz<>シーおじよべ<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 16:52:08.546 ID:uyC791WQ8主<> >>6
シーおじに頼ってもいいかなぁ😭
流石になんか申し訳なくて😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 16:52:28.021 ID:Eb4qWIpAz<> >>7
召喚してから考えよ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 16:53:23.214 ID:uyC791WQ8主<> >>8
うっうっ…見かけたら話しかけてみるねぇ😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 16:56:50.927 ID:H9T5FhIKG<>ライフポイントをエクスドライブで…？<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 16:58:38.457 ID:O6GNKIs1o<>プロトタイプ作れるやつか<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:00:28.676 ID:uyC791WQ8主<>ちなみにまず何がわかんないって
モバイルのデザインをそのままPCにも表示させて余白にはインデックスとかを入れるタイプのLPを作らなきゃいけないんだけどXDのファイルサイズはW1080作ってその中にW360とかのスマホ版を作り込んでいったらいいのかなぁ😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:01:36.771 ID:uyC791WQ8主<> >>10
ランディングページをエックスディー（っていうアドビのウェブデザインソフト）で作ってってゆあれた😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:02:38.696 ID:uyC791WQ8主<> >>11
なんかコーダーさんに渡す前のウェブのデザインをするやつだよぉ😭
ぷゆもあんま分かってないよぉ😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:04:24.384 ID:H9T5FhIKG<> >>13
ぱっと調べたけどどうとでもなりそうじゃない？
もしデザイン畑じゃないとしたら表示しないといけない物を羅列してデザイン強者に相談しよう💪😡<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:05:50.654 ID:uyC791WQ8主<>なんか前はコーダーさんに2倍のサイズで作ってってゆあれて2倍で作ったんだけどべつのコーダーさんにはXDだから2倍にしなくていいってゆあれた😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:08:43.767 ID:uyC791WQ8主<> >>15
まずWEBデザインのサイズの概念がわからないよぉ😭
ちょっと聞きたいことについて図を作ってみるよぉ
たぶん初心者以下の糞みたいな質問だよぉ😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:11:19.479 ID:WSul09BsS<>コーディングならできるけどデザインはやったこと無いなあ
趣味のwebページは脳内デザインで進めてるし<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:11:36.182 ID:V9f5YXw84<>たまにフロントやるけど雰囲気でfigmaとか見てるよ😳<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:12:41.555 ID:uyC791WQ8主<> >>18
コーディングできる農奴いた！！😭
聞きたいこと沢山あるはずなのに初心者すぎて何から聞けばいいのかわかんない😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:13:28.621 ID:uyC791WQ8主<> >>19
ぷゆも雰囲気でXD触ってるよ…😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:13:40.378 ID:uyC791WQ8主<>ちなみにですね😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:13:42.820 ID:6OFsFM368<>モバイル版のデザインはもうできあがってるのかなぁ？🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:15:05.589 ID:uyC791WQ8主<>このような感じでモバイル版をそのままPC版にも表示させたいのです😭
https://i.imgur.com/Ip8KBKp.jpeg
https://i.imgur.com/lPvOTUR.jpeg<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:15:53.939 ID:uyC791WQ8主<> >>23
まだだよぉ😭
新規作成ファイルをどのサイズで作ったらいいかってとこで既につまづいているよぉ😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:16:57.548 ID:6OFsFM368<> >>24
これならモバイル版のデザインができたらPC版もほぼ完成ぽいねぇ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:19:05.543 ID:uyC791WQ8主<> >>26
そうなの別々に作るよりは作業はたぶん少ないの😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:19:59.106 ID:6OFsFM368<> >>25
まずコンテンツ表示の幅を決めようねぇ🥺
よくあるのはモバイル版375px:PC版1280px（世間のシェア的には1366pxが多数だけどレガシー環境も意識して一段狭くすることがおおい）🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:21:42.269 ID:6OFsFM368<>モバイル版の倍の解像度で作るとかいうのは埋め込む画像の解像度の話だからデザインは等倍で作って大丈夫🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:22:25.821 ID:uyC791WQ8主<> >>28
おおおお！！！😭😭😭😭
PC版1280 モバイル版375で制作していいんだね😭
このサイズってWEBデザイナーが決めるものなの？😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:22:49.893 ID:6OFsFM368<>順序的にはまずはモバイル版のデザインを優先しよう🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:23:06.770 ID:uyC791WQ8主<> >>29
はぇ〜〜〜なるほど😭😭😭😳😳😳<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:23:54.521 ID:uyC791WQ8主<> >>31
はい😭
先にw375でモバイル版をつくる😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:24:21.852 ID:6OFsFM368<> >>30
ゼロからデザインする場合は全部デザイナーがきてるよぉ🥺
すでにデザインルールが確立している場合はそのルールに従ってつくるの🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:25:14.931 ID:uyC791WQ8主<>WEBデザインで画像配置するとき解像度ってどうしたらいいの72dpiとかいうけどそれじゃ足りなかったりするんでしょうか😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:26:42.968 ID:uyC791WQ8主<> >>34
そしたら今回はぷゆが決めるのだと思われます😭
前にコーダーさんからもXD使うなら？モバイル版375で制作していいですよと言われたので375で作ろうと思います😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:27:12.036 ID:6OFsFM368<> >>35
デザイン時には72で大丈夫🥺
実装時にフロントエンジニアに渡す時にx2やx3で書き出して渡すの🥺
最近のレティーナ対応ならx3とかかな🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:29:31.308 ID:uyC791WQ8主<> >>37
デザイン時に72で配置して×3で書き出しても画質が落ちたりとかしないものなんでしょうか😭
ほんとに何にも知らなくてごめんなさい😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:31:16.284 ID:uyC791WQ8主<>あとコーダーさんに渡すデータはXDのデータと書き出した画像データと仕様書（ぷゆはそんなものほぼ書けない）でいいのでしょうか😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:34:06.152 ID:6OFsFM368<> >>38
あ、それは劣化するね🥺
最後の書き出し画質まで意識してデザイン進めるのであればデザイン時に画像もx2やx3でつくって埋め込んだほうがいいかな🥺
ただ画像に変更が入る可能性がある場合は依頼者の最終OKが出るまではアタリ画像として72で作っておくほうがめんどくさくなくていいよぉ🥺
OKがでたらほんちゃん画像としてx3で作る時間をとっておく🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:34:23.762 ID:H9T5FhIKG<>有識者だ😮<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:35:06.402 ID:n0Z1UE9ca<>モック作成ってこと?🤔<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:37:02.714 ID:6OFsFM368<> >>39
仕様書がないのであればデザインがそのまま仕様ということでもまぁ大丈夫（大規模な開発案件とかでなければ）🥺
エンジニアに渡すのはデザインと埋め込む画像になるかな🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:40:12.550 ID:uyC791WQ8主<>前にコーダーさんにx1とx2で書き出したデータ両方くださいって言われたけどx3だけで良かったりする…？😭
>>40
なるほど…なるほどなるほど😭😭😭
すごく助かりますありがとうございます🙇♀🙇♀🙇♀
PC版の背景はサイズが固定されるので縦幅？は1280×720で作っていい？😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:40:59.625 ID:uyC791WQ8主<> >>42
モック…？これモックなのかな…？😭モック…？🤔<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:41:36.755 ID:n0Z1UE9ca<> >>43
仕様書がないのであればデザインがそのまま仕様
🥺☝これやる場合はちゃんと各パーツのpx値出してほしい
🥺目勘定でやらせてブチギレるやつともう仕事したくない<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:41:58.339 ID:UZ627jD2m<>ほんとに詳しい人きてる😳<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:43:25.766 ID:6OFsFM368<>画面幅が決まったらグリッドを決めようねぇ🥺
375pxの両端に余白を確保して残りをコンテンツエリアと決める🥺
コンテンツエリアを2分割3分割4分割できる統一のガター（マージン）幅を割り出すの🥺
基本的に全てのものはこの分割設計に則って幅を決めて配置していくと整然と綺麗なレイアウトになるしサイト全体を通してデザインルールがブレにくくなる🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:44:22.945 ID:uyC791WQ8主<> >>46
XDで作ってるんだけどXDのデータだけではpx値なるものはわから…ない…のでしょうか😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:46:11.912 ID:n0Z1UE9ca<> >>49
ぷゆは貰う側だからわかんないなぁ🥺
けどpxってピクセルの略語で単純にデザイン指示書にパーツの縦横のサイズ書いとけって話よ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:48:36.505 ID:uyC791WQ8主<> >>48
コンテンツエリアを分割するというのは縦に…ってことでいいですか
ヘッダー？の画像はのここまでとかindexはここまでとか分割していく的な？😭
後で教えてもらったこと自分でもググるねほんとにごめんなさいありがとう😭😭😭
今ファイル作った😭
https://i.imgur.com/ZQO5i8u.jpeg<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:49:23.543 ID:uyC791WQ8主<> >>50
それ全部書かなきゃいけないのか…初めて知った…😭😱<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:50:43.109 ID:n0Z1UE9ca<> >>52
書かなくてもいいけどそれ見て作られたものが適当でガタガタでも怒らないでね🥺👐<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:52:47.931 ID:uyC791WQ8主<> >>53
ぷゆは素人過ぎてコーダーさんにはいつも土下座したい気持ちでいっぱいだよぉ😭
クライアントと代理店の人はコーダーさんに無茶苦茶言うているかもしれない…😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:52:56.823 ID:6OFsFM368<> >>46
仕様も含んだデザインなら実装時に迷わせる要素は基本残さないようにする必要があるねぇ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:56:11.791 ID:uyC791WQ8主<>仕様書にはいつも「このへんから戻るボタン表示させてください」とか死ぬ程ふんわりしたこと書いてる本当にごめんなさい😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:57:00.962 ID:6OFsFM368<> >>51
そうそう縦に割っていくルールをきめるってことだねぇ🥺
モバイルなら4分割まであればまあ大丈夫🥺
|左余白|1/2|マージン|1/2|右余白|
|左余白|1/3|マージン|1/3|マージン|1/3|右余白|
マージンは共通幅みたいな感じ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 17:57:39.837 ID:StHI4Oga2<>プロが来てる😳<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:00:38.241 ID:uyC791WQ8主<> >>57
むむ…？😭
|左余白|1/2|マージン|1/2|右余白|
それはつまり<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:03:24.691 ID:uyC791WQ8主<>こういうこと？？😭
https://i.imgur.com/jJxucmD.jpeg<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:06:34.357 ID:6OFsFM368<> >>59
これだと伝わるかな？🥺
画面幅は全体で375pxで
◾️コンテンツエリア2分割の場合
|左余白|1/2コンテンツ幅|マージン| 1/2コンテンツ幅|右余白|
◾️コンテンツエリア3分割の場合
|左余白|1/3コンテンツ幅|マージン|1/3コンテンツ幅|マージン|1/3コンテンツ幅|右余白|
でマージン幅は全て統一にするイメージ（端折ってるけど4分割の場合も）🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:06:52.978 ID:uyC791WQ8主<> >>57
あっあとあともしお仕事とか作業とかあったら気にせずぷゆのことは放っておいてください😭
こんな教えだしたらキリがない素人にほんとにすみません😭
そちらの作業に影響がないレベルでお手隙のときにもし教えてもらえればほんとうにありがたいとうかんじで😭😭😭🙇🙇🙇<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:07:36.221 ID:KTqTY89Az<>サンキュー詳しい人！<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:08:29.970 ID:n0Z1UE9ca<>これさ
>>1の上司「どこで調べたの？」
😭「の、農園…」
ってなる世界線ある？🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:09:11.323 ID:6OFsFM368<> >>60
いえす🥺
まずは左右の余白のpxを決めて、残ったコンテンツエリアが2分割3分割4分割になった時も整数pxで割れるようなマージン幅を求めよう🥺
そんな機能がXDについてなかったかしら？🥺
ワイちゃんfigmaばっかりでXDわすれちゃった🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:10:02.838 ID:StHI4Oga2<> >>64
今どきネットで調べるの普通だしギリセーフ🙄<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:11:06.137 ID:uyC791WQ8主<> >>64
上司もクライアントも代理店も何が何だか分かってないからセーフ…😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:13:10.769 ID:uyC791WQ8主<> >>65
なるほど…なるほどです
整数っていうのは60.853とか小数点以下出ないようにということで合ってますか😭
XDは基本点以下にならないように設定してます😭😭😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:16:21.369 ID:uyC791WQ8主<>コ…コンテンツエリア…😭
https://i.imgur.com/9SyRboa.jpeg<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:19:25.760 ID:6OFsFM368<> >>68
たぶんXDのやつは小数点以下の端数は自動で切り上げる（or切り下げる）っていうやつだと思うから一度ちゃんと計算しておくのをお勧めするよぉ🥺
オンラインでいいのないかなあ？と思って探してみたけど微妙かも🥺
https://www.kenjisugimoto.com/gridpx/<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:19:50.458 ID:n0Z1UE9ca<> >>69
おーすごい🥺
大手のサイトって大抵こんなんだよね🥺
適当にソニーとかローソンとかで調べてでてくるサイトもこんな感じだし<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:21:11.640 ID:6OFsFM368<> >>69
ああ、ただしい定義で言うとこうなってるかもだけど時と場合で適当に使っているよぉ🥺
ワイちゃんが言いたいのは余白とコンテンツエリアを概念として分けておきたかっただけだねぇ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:23:05.956 ID:uyC791WQ8主<> >>70
はぇ〜こういうのできちんと計算しないといけないんだ…😭
本当に糞やべえ地獄みたいなデータを渡していたということを再認識していく😭🤮<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:24:36.026 ID:a4jaG6hnC<>こういうのhtmlとかcss 学ぶのとはまた別なんかな<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:25:02.317 ID:uyC791WQ8主<> >>71
むじゅかしぃうぇぶのせかいむじゅかしぃ😭
>>72
はい余白とコンテンツエリアをしっかり分けておく😭🙋<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:25:34.907 ID:JF6uMvX5c<>Webデザイン全くわからないけど来たよ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:27:16.835 ID:uyC791WQ8主<> >>74
きっとWEBデザインやるなら知っておかなきゃいけないことなんだ😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:27:50.127 ID:uyC791WQ8主<> >>76
心細いからいてくれるだけで助かるよ😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:28:43.200 ID:6OFsFM368<> >>73
今計算してみたら
左右の余白20px
マージン17px
で2分割3分割4分割時に整数で割れることがわかりまちた🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:31:51.856 ID:uyC791WQ8主<>詳しい人達ありがとう
本来ならお金をお支払いして教えていただくようなことを教えていただいてありがとうございます😭
🌷ですみません先に送っておきます😭
!pay:10000:ID:6OFsFM368
!pay:10000:ID:n0Z1UE9ca
>>79
！！！今ちょっとそれで分割してみます😭
-
★ID:6OFsFM368に10000g??を送りました。
-
★ID:n0Z1UE9caに10000g??を送りました。<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:32:25.044 ID:6OFsFM368<> >>74
知ってたほうが圧倒的にデザインやりやすいよぉ🥺
最近はデザインとフロントワンセットで求人出てることも多い🥺
両方できるとかせげるねぇ🥺💰<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:32:42.696 ID:a4jaG6hnC<>趣味でサイト作るけど感性だけでやってるからプロは大変なんだなぁと🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:33:23.607 ID:Eb4qWIpAz<>金持ちら😳<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:33:57.164 ID:WSul09BsS<> >>82
メンス
全部ノリでやってるわ<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:34:20.719 ID:a4jaG6hnC<> >>81
ありがとう🥺
基礎は分かるけどそれ以上は覚えてないから仕事にするのは難しそうだなぁ
!pay:39:ID:6OFsFM368
-
★ID:6OFsFM368に39g??を送りました。<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:38:26.551 ID:6OFsFM368<> >>80
ｵﾜｰありがとぅ😊
グリット引けたら下準備はできたからあとはその分割を使ってデザインしていくといいよお🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:39:55.053 ID:uyC791WQ8主<>あれ…😭二分割のこれはあってる？
https://i.imgur.com/ffQwAi8.jpeg<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:42:50.820 ID:6OFsFM368<>余白は不可侵🥺
画面分割はその時々で便利に使っていくといいよぉ🥺
素直に分割して行ってもいいし、
よくあるのでは
◾️3分割レイアウトの応用
|画像幅1/3|マージン|文章幅2/3（マージン1個分含む）|
とかとかもあり🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:44:17.908 ID:6OFsFM368<> >>87
あ、ごめん最初の引き算間違えてた🥺💦
ちょっとまっててねぇ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:45:14.104 ID:uyC791WQ8主<> >>89
はいぃ😭正座待機正座待機😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:52:41.115 ID:6OFsFM368<> >>90
左右余白22px
マージン17pxでいけるかな？<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:53:10.910 ID:uyC791WQ8主<>ち…ちなみにちなみにWEBのデザインがグリッドに沿って？分割されたブロックベースでなされているっていうのは薄っすら理解しているんだけど例えば
https://www.globalwork.jp/kids/2023_early_summer/
みたいに写真が一見ランダムに置いてあるようなデザインでもカラム？に沿って作られているものだったりするのでしょうか😭
この写真のレイアウトとか😭
https://i.imgur.com/o2BNHPe.jpeg<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:53:26.499 ID:uyC791WQ8主<> >>91
やってみます！！😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:57:48.295 ID:6OFsFM368<> >>92
写真群の配置エリア全体は決まっていてその中は自由って感じだねぇ🥺
感性に訴える必要があるとか碁盤の目のレイアウトをわざとすかしたい時とかはありだねぇ🥺
ただその旨エンジニアには伝えておくことが必要だよぉ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:58:02.062 ID:SxvvY995u<>正直アルゴリズムよりデザインを思った通りに実装することのほうが手間だよね<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 18:59:33.375 ID:6OFsFM368<> >>93
マージン17pxでは狭いと感じるようであれば
左右余白23px
マージン19px
もおすすめだよぉ🥺
最近は文字サイズも大きくなる傾向があるからマージン広めがいいのかも🥺
これは実際にコンテンツを配置してみて塩梅を見たほうが良さそう🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:00:26.106 ID:uyC791WQ8主<> >>91
いけました！！😭
基本はこのブロックを割り出してからデザインしていくものなのですね😭🙇
これでデザインしていって完成したらPC版によっこらしょっと移植するだけでいいのでしょうか…😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:01:20.930 ID:6OFsFM368<>理想としてはイレギュラーなレイアウトをするのであればそのイレギュラーな中のルールを決めると実装者にも伝わりやすいの🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:03:41.285 ID:uyC791WQ8主<> >>98
なるほど…む…むじゅかしぃ😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:04:23.731 ID:uyC791WQ8主<>あ画像忘れてた
綺麗に分割できた😭😭😭
https://i.imgur.com/MGbqdkc.jpeg<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:07:56.937 ID:6OFsFM368<> >>97
グリッドはデザイナー、エンジニアに共有のレイアウトの基本ルールになるから決めておいた方が後々圧倒的にトラブルが少なくなるよぉ🥺
整数にこだわったのは表示された時のピクセルボケを防いだり画像サイズに半端な数字を出させないためだったりって感じだねぇ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:08:20.059 ID:6OFsFM368<> >>97
PCばんで何をやりたいかによるんだねぇ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:13:25.356 ID:uyC791WQ8主<> >>101
思ってたよりグリッドの概念すごくだいじ😭
PCでやりたいことはですね…ええとええと<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:23:10.809 ID:uyC791WQ8主<>例えばPC版の背景は固定でリンクが少しはいる程度だとしたらスマホ版をそのまま移植するんでいいんでしょうか😭
ていうか難しいことできないからそのまま移植したい😭
↓これで伝わるかなというか質問に対する答えとして合ってるかな😭
こんな感じにしたいの😭
https://i.imgur.com/JFQqLUd.jpeg<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:25:17.434 ID:uyC791WQ8主<> >>96
そしたらマージン19pxで作ってみようと思います😭
本当になにからなにまで😭😭😭🙇🙇🙇<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:29:50.374 ID:6OFsFM368<> >>100
しゅごいパチパチ👏🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:31:54.721 ID:6OFsFM368<> >>104
このサイトってレスポンシブ（1ソースで実装してPC/モバイルで表示を切り替える）かなぁ？🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:34:31.817 ID:uyC791WQ8主<> >>106
計算できるのがしゅごい😭
ぷゆは…ぷゆは…高校の頃数学が2だったのになぜ今になってこんなことに携わっているのか…😭
>>107
タブレットでも表示するみたい😭
レ…レスポンシブルというやつだと思う…たぶん😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:36:03.801 ID:uyC791WQ8主<>あモバイルって言ったらタブレットも含まれてるか…😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:37:03.559 ID:6OFsFM368<> >>108
レスポンシブでタブレット対応かぁ🥺
今のタブレットの短辺の解像度って何ピクセルがメジャーなんだろ？🥺
1024とかだっけ？🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:38:55.191 ID:6OFsFM368<>いまだに768pxかぁ🥺
うーん🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:39:28.173 ID:uyC791WQ8主<>むむむ😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:41:09.194 ID:WSul09BsS<>ワイ将、ブレークポイントを設置するのが面倒なので768pxのみで分割する<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:41:51.139 ID:6OFsFM368<>ワイちゃんならPC／タブレットを共通デザインとして画面幅768pxで作るかなぁ🥺
PC版はタブレット表示の左右の余白が伸びていく仕様🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:42:12.042 ID:uyC791WQ8主<> >>113
ブレークポイントってレイアウトが切り替わるポイントのことでしゅか😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:43:25.850 ID:WSul09BsS<> >>115
そうわよ
ウィンドウの横幅に応じて適用させるcssを変えたりするんだよ🥺👍<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:46:00.811 ID:6OFsFM368<>768-375=393px内にナビゲーションをつくるかんじ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:46:31.217 ID:uyC791WQ8主<> >>113
>>114
おなじ答えを導き出している…ってこと？😭
PCとタブレットは768で作って
スマホ版は375？😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:50:20.046 ID:uyC791WQ8主<>スマホ版とタブレット版を同じデザインにするのはむずかしかったり問題があったりする？😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:51:20.735 ID:WSul09BsS<>ワイは
-768px スマホ&タブレット向けで1カラム
769px- タブレット&pc向けで2-3カラム
でも独学の趣味勢のやることやからあんま気にせんほうがええで<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:56:34.702 ID:uyC791WQ8主<> >>120
独学でそこまで理解しててしゅごい…😭
例えばの話ですけどスマホ版を768で作るときってフォントの大きさはどうしゅるの？単純に2倍になったりするんでしょうか😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 19:59:12.298 ID:uyC791WQ8主<> >>117
これが一番簡単なのかな😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 20:03:11.953 ID:WSul09BsS<>ワイは基本的に絶対的なフォントサイズは指定してないなあ
ほとんどremで指定してる
デザインかっちりしたwebサイトなら指定したほうがいいと思うけど
まあスマホとpcで2倍にするようなことはないと思う
本文なら14-18pxが多いんじゃないかな<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 20:06:02.539 ID:p7DmQ6vYO<>すげえプロきてる😳<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 20:06:22.163 ID:6OFsFM368<> >>120
あぁ〜なるほど🥺
こっちのほうが柔軟性ありそう🥺
ワイちゃんのさっきのイメージは375がブレークポイントだったけど768ブレークが良いかも🥺
◾️〜768px
スマホと768までのタブレットに対応したレイアウト
375pxでデザインして実装時には768pxまではコンテンツごと伸びていく
◾️768px〜
768以上のタブレットとPCに対応したレイアウト
768pxでデザインして実装時には768以上は左右の余白が伸びていく（orマックスの横幅を設定してコンテンツごと伸びていく）<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 20:06:58.846 ID:uyC791WQ8主<> >>123
はぇ〜Remって画面サイズに合わせて文字サイズも自動で変わる単位？的な…？😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 20:09:10.744 ID:6OFsFM368<> >>123
近年は全て相対指定の完全リキッドデザインも増えてきたねぇ🥺
ウェブアプリ系はこっちが主流になりそう🥺
広告系はデザイナーの頭の中の再現性がキモだから絶対指定がおおいけど🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 20:11:41.747 ID:6OFsFM368<> >>126
そうそう🥺
文字サイズだけじゃなくて画像の幅とかレイアウト自体も全て相対で組むこともできるよぉ🥺
昔の用語でリキッドデザイン（見るデバイスに完全にフィットするから流体デザイン）なんて呼んでいたねぇ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 20:17:33.493 ID:6OFsFM368<>さ、ほんじつはこのへんで🥺👋<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 20:17:51.160 ID:uyC791WQ8主<> >>125
つまりぷゆはこの2つを作ったらいいって…ことですか…？😭
https://i.imgur.com/1TbBfUa.jpeg<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 20:18:36.761 ID:uyC791WQ8主<> >>129
あっ承知しました😭🙇
本当にありがとうございましたあとは自分で調べてみます感謝感謝です😭<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 20:19:48.709 ID:6OFsFM368<> >>130
そだねぇ🥺
そこからそれぞれの横幅が伸びて行った時の挙動もセットでかんがえてねぇ🥺<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 20:21:59.667 ID:uyC791WQ8主<> >>123
ID:WSul09BsSさんもありがとうございます😭
少なくなっちゃってごめんなさいだけどお礼のチューリップです😭👐🌷
!pay:5000:ID:WSul09BsS
-
★ID:WSul09BsSに5000g??を送りました。<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 20:23:34.219 ID:uyC791WQ8主<> >>132
ありがとうございます😭😭😭
本当に助かりました😭
余白伸びたときのことも考えてやってみます😭🙋<>
野に咲く名無し@転載禁止<><>2024/07/31 (水) 20:44:12.326 ID:WSul09BsS<> >>133
大したこと言ってないのにすまないね🥺💦
頑張って！😳💪<>