誰かWEBデザインに詳しい人いませんか😭 (135)

←← 掲示板一覧に戻る ← スレッド一覧に戻る

LPをXDで作らなきゃいけないんだけど初心者もいいところで何もわからないの農園に有識者はいませんか😭

有識者じゃないけど来たよ🥺

❓
🥺わかんないきたよ

>>2
不安しかないからいてくれるだけでありがたいよ😭

>>3
ぷゆもわかんないから仲間だね😭🤝🥺

シーおじよべ

>>6
シーおじに頼ってもいいかなぁ😭
流石になんか申し訳なくて😭

>>7
召喚してから考えよ🥺

>>8
うっうっ…見かけたら話しかけてみるねぇ😭

ライフポイントをエクスドライブで…？

プロトタイプ作れるやつか

ちなみにまず何がわかんないって

モバイルのデザインをそのままPCにも表示させて余白にはインデックスとかを入れるタイプのLPを作らなきゃいけないんだけどXDのファイルサイズはW1080作ってその中にW360とかのスマホ版を作り込んでいったらいいのかなぁ😭

>>10
ランディングページをエックスディー（っていうアドビのウェブデザインソフト）で作ってってゆあれた😭

>>11
なんかコーダーさんに渡す前のウェブのデザインをするやつだよぉ😭
ぷゆもあんま分かってないよぉ😭

>>13
ぱっと調べたけどどうとでもなりそうじゃない？
もしデザイン畑じゃないとしたら表示しないといけない物を羅列してデザイン強者に相談しよう💪😡

なんか前はコーダーさんに2倍のサイズで作ってってゆあれて2倍で作ったんだけどべつのコーダーさんにはXDだから2倍にしなくていいってゆあれた😭

>>15
まずWEBデザインのサイズの概念がわからないよぉ😭
ちょっと聞きたいことについて図を作ってみるよぉ
たぶん初心者以下の糞みたいな質問だよぉ😭

コーディングならできるけどデザインはやったこと無いなあ
趣味のwebページは脳内デザインで進めてるし

たまにフロントやるけど雰囲気でfigmaとか見てるよ😳

>>18
コーディングできる農奴いた！！😭
聞きたいこと沢山あるはずなのに初心者すぎて何から聞けばいいのかわかんない😭

>>19
ぷゆも雰囲気でXD触ってるよ…😭

ちなみにですね😭

モバイル版のデザインはもうできあがってるのかなぁ？🥺

このような感じでモバイル版をそのままPC版にも表示させたいのです😭

https://i.imgur.com/Ip8KBKp.jpeg" data-lightbox="image">https://i.imgur.com/Ip8KBKp.jpeg" loading="lazy">
https://i.imgur.com/Ip8KBKp.jpeg
https://i.imgur.com/lPvOTUR.jpeg" data-lightbox="image">https://i.imgur.com/lPvOTUR.jpeg" loading="lazy">
https://i.imgur.com/lPvOTUR.jpeg

>>23
まだだよぉ😭
新規作成ファイルをどのサイズで作ったらいいかってとこで既につまづいているよぉ😭

>>24
これならモバイル版のデザインができたらPC版もほぼ完成ぽいねぇ🥺

>>26
そうなの別々に作るよりは作業はたぶん少ないの😭

>>25
まずコンテンツ表示の幅を決めようねぇ🥺
よくあるのはモバイル版375px:PC版1280px（世間のシェア的には1366pxが多数だけどレガシー環境も意識して一段狭くすることがおおい）🥺

モバイル版の倍の解像度で作るとかいうのは埋め込む画像の解像度の話だからデザインは等倍で作って大丈夫🥺

>>28
おおおお！！！😭😭😭😭
PC版1280 モバイル版375で制作していいんだね😭
このサイズってWEBデザイナーが決めるものなの？😭

順序的にはまずはモバイル版のデザインを優先しよう🥺

>>29
はぇ～～～なるほど😭😭😭😳😳😳

>>31
はい😭
先にw375でモバイル版をつくる😭

>>30
ゼロからデザインする場合は全部デザイナーがきてるよぉ🥺
すでにデザインルールが確立している場合はそのルールに従ってつくるの🥺

WEBデザインで画像配置するとき解像度ってどうしたらいいの72dpiとかいうけどそれじゃ足りなかったりするんでしょうか😭

>>34
そしたら今回はぷゆが決めるのだと思われます😭
前にコーダーさんからもXD使うなら？モバイル版375で制作していいですよと言われたので375で作ろうと思います😭

>>35
デザイン時には72で大丈夫🥺
実装時にフロントエンジニアに渡す時にx2やx3で書き出して渡すの🥺
最近のレティーナ対応ならx3とかかな🥺

>>37
デザイン時に72で配置して×3で書き出しても画質が落ちたりとかしないものなんでしょうか😭
ほんとに何にも知らなくてごめんなさい😭

あとコーダーさんに渡すデータはXDのデータと書き出した画像データと仕様書（ぷゆはそんなものほぼ書けない）でいいのでしょうか😭

>>38
あ、それは劣化するね🥺
最後の書き出し画質まで意識してデザイン進めるのであればデザイン時に画像もx2やx3でつくって埋め込んだほうがいいかな🥺
ただ画像に変更が入る可能性がある場合は依頼者の最終OKが出るまではアタリ画像として72で作っておくほうがめんどくさくなくていいよぉ🥺
OKがでたらほんちゃん画像としてx3で作る時間をとっておく🥺

有識者だ😮

モック作成ってこと?🤔

>>39
仕様書がないのであればデザインがそのまま仕様ということでもまぁ大丈夫（大規模な開発案件とかでなければ）🥺
エンジニアに渡すのはデザインと埋め込む画像になるかな🥺

前にコーダーさんにx1とx2で書き出したデータ両方くださいって言われたけどx3だけで良かったりする…？😭

>>40
なるほど…なるほどなるほど😭😭😭
すごく助かりますありがとうございます🙇‍♀🙇‍♀🙇‍♀
PC版の背景はサイズが固定されるので縦幅？は1280×720で作っていい？😭

>>42
モック…？これモックなのかな…？😭モック…？🤔

>>43
仕様書がないのであればデザインがそのまま仕様
🥺☝これやる場合はちゃんと各パーツのpx値出してほしい
🥺目勘定でやらせてブチギレるやつともう仕事したくない

ほんとに詳しい人きてる😳

画面幅が決まったらグリッドを決めようねぇ🥺
375pxの両端に余白を確保して残りをコンテンツエリアと決める🥺
コンテンツエリアを2分割3分割4分割できる統一のガター（マージン）幅を割り出すの🥺
基本的に全てのものはこの分割設計に則って幅を決めて配置していくと整然と綺麗なレイアウトになるしサイト全体を通してデザインルールがブレにくくなる🥺

>>46
XDで作ってるんだけどXDのデータだけではpx値なるものはわから…ない…のでしょうか😭

>>49
ぷゆは貰う側だからわかんないなぁ🥺
けどpxってピクセルの略語で単純にデザイン指示書にパーツの縦横のサイズ書いとけって話よ🥺

>>48
コンテンツエリアを分割するというのは縦に…ってことでいいですか
ヘッダー？の画像はのここまでとかindexはここまでとか分割していく的な？😭
後で教えてもらったこと自分でもググるねほんとにごめんなさいありがとう😭😭😭

今ファイル作った😭

https://i.imgur.com/ZQO5i8u.jpeg" data-lightbox="image">https://i.imgur.com/ZQO5i8u.jpeg" loading="lazy">
https://i.imgur.com/ZQO5i8u.jpeg

>>50
それ全部書かなきゃいけないのか…初めて知った…😭😱

>>52
書かなくてもいいけどそれ見て作られたものが適当でガタガタでも怒らないでね🥺👐

>>53
ぷゆは素人過ぎてコーダーさんにはいつも土下座したい気持ちでいっぱいだよぉ😭
クライアントと代理店の人はコーダーさんに無茶苦茶言うているかもしれない…😭

>>46
仕様も含んだデザインなら実装時に迷わせる要素は基本残さないようにする必要があるねぇ🥺

仕様書にはいつも「このへんから戻るボタン表示させてください」とか死ぬ程ふんわりしたこと書いてる本当にごめんなさい😭

>>51
そうそう縦に割っていくルールをきめるってことだねぇ🥺
モバイルなら4分割まであればまあ大丈夫🥺
|左余白|1/2|マージン|1/2|右余白|
|左余白|1/3|マージン|1/3|マージン|1/3|右余白|
マージンは共通幅みたいな感じ🥺

プロが来てる😳

>>57
むむ…？😭
|左余白|1/2|マージン|1/2|右余白|

それはつまり

こういうこと？？😭
https://i.imgur.com/jJxucmD.jpeg" data-lightbox="image">https://i.imgur.com/jJxucmD.jpeg" loading="lazy">
https://i.imgur.com/jJxucmD.jpeg

>>57
あっあとあともしお仕事とか作業とかあったら気にせずぷゆのことは放っておいてください😭
こんな教えだしたらキリがない素人にほんとにすみません😭
そちらの作業に影響がないレベルでお手隙のときにもし教えてもらえればほんとうにありがたいとうかんじで😭😭😭🙇🙇🙇

サンキュー詳しい人！

これさ
 >>1の上司「どこで調べたの？」
😭「の、農園…」
ってなる世界線ある？🥺

>>60
いえす🥺
まずは左右の余白のpxを決めて、残ったコンテンツエリアが2分割3分割4分割になった時も整数pxで割れるようなマージン幅を求めよう🥺
そんな機能がXDについてなかったかしら？🥺
ワイちゃんfigmaばっかりでXDわすれちゃった🥺

>>64
今どきネットで調べるの普通だしギリセーフ🙄

>>64
上司もクライアントも代理店も何が何だか分かってないからセーフ…😭

>>65
なるほど…なるほどです
整数っていうのは60.853とか小数点以下出ないようにということで合ってますか😭
XDは基本点以下にならないように設定してます😭😭😭

コ…コンテンツエリア…😭
https://i.imgur.com/9SyRboa.jpeg" data-lightbox="image">https://i.imgur.com/9SyRboa.jpeg" loading="lazy">
https://i.imgur.com/9SyRboa.jpeg

>>68
たぶんXDのやつは小数点以下の端数は自動で切り上げる（or切り下げる）っていうやつだと思うから一度ちゃんと計算しておくのをお勧めするよぉ🥺
オンラインでいいのないかなあ？と思って探してみたけど微妙かも🥺

https://hatenablog-parts.com/embed?url=https://www.kenjisugimoto.com/gridpx/</a>" frameborder="0">https://www.kenjisugimoto.com/gridpx/

>>69
おーすごい🥺
大手のサイトって大抵こんなんだよね🥺
適当にソニーとかローソンとかで調べてでてくるサイトもこんな感じだし

>>69
ああ、ただしい定義で言うとこうなってるかもだけど時と場合で適当に使っているよぉ🥺
ワイちゃんが言いたいのは余白とコンテンツエリアを概念として分けておきたかっただけだねぇ🥺

>>70
はぇ～こういうのできちんと計算しないといけないんだ…😭
本当に糞やべえ地獄みたいなデータを渡していたということを再認識していく😭🤮

こういうのhtmlとかcss 学ぶのとはまた別なんかな

>>71
むじゅかしぃうぇぶのせかいむじゅかしぃ😭

>>72
はい余白とコンテンツエリアをしっかり分けておく😭🙋

Webデザイン全くわからないけど来たよ🥺

>>74
きっとWEBデザインやるなら知っておかなきゃいけないことなんだ😭

>>76
心細いからいてくれるだけで助かるよ😭

>>73
今計算してみたら
左右の余白20px
マージン17px
で2分割3分割4分割時に整数で割れることがわかりまちた🥺

詳しい人達ありがとう
本来ならお金をお支払いして教えていただくようなことを教えていただいてありがとうございます😭
🌷ですみません先に送っておきます😭

!pay:10000:ID:6OFsFM368
!pay:10000:ID:n0Z1UE9ca

>>79
！！！今ちょっとそれで分割してみます😭
-
★ID:6OFsFM368に10000g??を送りました。
-
★ID:n0Z1UE9caに10000g??を送りました。

>>74
知ってたほうが圧倒的にデザインやりやすいよぉ🥺
最近はデザインとフロントワンセットで求人出てることも多い🥺
両方できるとかせげるねぇ🥺💰

趣味でサイト作るけど感性だけでやってるからプロは大変なんだなぁと🥺

金持ちら😳

>>82
メンス
全部ノリでやってるわ

>>81
ありがとう🥺
基礎は分かるけどそれ以上は覚えてないから仕事にするのは難しそうだなぁ
!pay:39:ID:6OFsFM368
-
★ID:6OFsFM368に39g??を送りました。

>>80
ｵﾜｰありがとぅ😊
グリット引けたら下準備はできたからあとはその分割を使ってデザインしていくといいよお🥺

あれ…😭二分割のこれはあってる？
https://i.imgur.com/ffQwAi8.jpeg" data-lightbox="image">https://i.imgur.com/ffQwAi8.jpeg" loading="lazy">
https://i.imgur.com/ffQwAi8.jpeg

余白は不可侵🥺
画面分割はその時々で便利に使っていくといいよぉ🥺
素直に分割して行ってもいいし、
よくあるのでは
◾️3分割レイアウトの応用
|画像幅1/3|マージン|文章幅2/3（マージン1個分含む）|
とかとかもあり🥺

>>87
あ、ごめん最初の引き算間違えてた🥺💦
ちょっとまっててねぇ🥺

>>89
はいぃ😭正座待機正座待機😭

>>90
左右余白22px
マージン17pxでいけるかな？

ち…ちなみにちなみにWEBのデザインがグリッドに沿って？分割されたブロックベースでなされているっていうのは薄っすら理解しているんだけど例えば

https://hatenablog-parts.com/embed?url=https://www.globalwork.jp/kids/2023_early_summer/</a>" frameborder="0">https://www.globalwork.jp/kids/2023_early_summer/

みたいに写真が一見ランダムに置いてあるようなデザインでもカラム？に沿って作られているものだったりするのでしょうか😭

この写真のレイアウトとか😭
https://i.imgur.com/o2BNHPe.jpeg" data-lightbox="image">https://i.imgur.com/o2BNHPe.jpeg" loading="lazy">
https://i.imgur.com/o2BNHPe.jpeg

>>91
やってみます！！😭

>>92
写真群の配置エリア全体は決まっていてその中は自由って感じだねぇ🥺
感性に訴える必要があるとか碁盤の目のレイアウトをわざとすかしたい時とかはありだねぇ🥺
ただその旨エンジニアには伝えておくことが必要だよぉ🥺

正直アルゴリズムよりデザインを思った通りに実装することのほうが手間だよね

>>93
マージン17pxでは狭いと感じるようであれば
左右余白23px
マージン19px
もおすすめだよぉ🥺
最近は文字サイズも大きくなる傾向があるからマージン広めがいいのかも🥺
これは実際にコンテンツを配置してみて塩梅を見たほうが良さそう🥺

>>91
いけました！！😭
基本はこのブロックを割り出してからデザインしていくものなのですね😭🙇

これでデザインしていって完成したらPC版によっこらしょっと移植するだけでいいのでしょうか…😭

理想としてはイレギュラーなレイアウトをするのであればそのイレギュラーな中のルールを決めると実装者にも伝わりやすいの🥺

>>98
なるほど…む…むじゅかしぃ😭

あ画像忘れてた
綺麗に分割できた😭😭😭
https://i.imgur.com/MGbqdkc.jpeg" data-lightbox="image">https://i.imgur.com/MGbqdkc.jpeg" loading="lazy">
https://i.imgur.com/MGbqdkc.jpeg

>>97
グリッドはデザイナー、エンジニアに共有のレイアウトの基本ルールになるから決めておいた方が後々圧倒的にトラブルが少なくなるよぉ🥺
整数にこだわったのは表示された時のピクセルボケを防いだり画像サイズに半端な数字を出させないためだったりって感じだねぇ🥺

>>97
PCばんで何をやりたいかによるんだねぇ🥺

>>101
思ってたよりグリッドの概念すごくだいじ😭
PCでやりたいことはですね…ええとええと

例えばPC版の背景は固定でリンクが少しはいる程度だとしたらスマホ版をそのまま移植するんでいいんでしょうか😭
ていうか難しいことできないからそのまま移植したい😭

↓これで伝わるかなというか質問に対する答えとして合ってるかな😭
こんな感じにしたいの😭
https://i.imgur.com/JFQqLUd.jpeg" data-lightbox="image">https://i.imgur.com/JFQqLUd.jpeg" loading="lazy">
https://i.imgur.com/JFQqLUd.jpeg

>>96
そしたらマージン19pxで作ってみようと思います😭
本当になにからなにまで😭😭😭🙇🙇🙇

>>100
しゅごいパチパチ👏🥺

>>104
このサイトってレスポンシブ（1ソースで実装してPC/モバイルで表示を切り替える）かなぁ？🥺

>>106
計算できるのがしゅごい😭
ぷゆは…ぷゆは…高校の頃数学が2だったのになぜ今になってこんなことに携わっているのか…😭

>>107
タブレットでも表示するみたい😭
レ…レスポンシブルというやつだと思う…たぶん😭

あモバイルって言ったらタブレットも含まれてるか…😭

>>108
レスポンシブでタブレット対応かぁ🥺
今のタブレットの短辺の解像度って何ピクセルがメジャーなんだろ？🥺
1024とかだっけ？🥺

いまだに768pxかぁ🥺
うーん🥺

むむむ😭

ワイ将、ブレークポイントを設置するのが面倒なので768pxのみで分割する

ワイちゃんならPC／タブレットを共通デザインとして画面幅768pxで作るかなぁ🥺
PC版はタブレット表示の左右の余白が伸びていく仕様🥺

>>113
ブレークポイントってレイアウトが切り替わるポイントのことでしゅか😭

>>115
そうわよ
ウィンドウの横幅に応じて適用させるcssを変えたりするんだよ🥺👍

768-375=393px内にナビゲーションをつくるかんじ🥺

>>113
>>114
おなじ答えを導き出している…ってこと？😭

PCとタブレットは768で作って
スマホ版は375？😭

スマホ版とタブレット版を同じデザインにするのはむずかしかったり問題があったりする？😭

ワイは
-768px スマホ&タブレット向けで1カラム
769px- タブレット&pc向けで2-3カラム
でも独学の趣味勢のやることやからあんま気にせんほうがええで

>>120
独学でそこまで理解しててしゅごい…😭
例えばの話ですけどスマホ版を768で作るときってフォントの大きさはどうしゅるの？単純に2倍になったりするんでしょうか😭

>>117
これが一番簡単なのかな😭

ワイは基本的に絶対的なフォントサイズは指定してないなあ
ほとんどremで指定してる
デザインかっちりしたwebサイトなら指定したほうがいいと思うけど

まあスマホとpcで2倍にするようなことはないと思う
本文なら14-18pxが多いんじゃないかな

すげえプロきてる😳

>>120
あぁ～なるほど🥺
こっちのほうが柔軟性ありそう🥺
ワイちゃんのさっきのイメージは375がブレークポイントだったけど768ブレークが良いかも🥺
◾️～768px
スマホと768までのタブレットに対応したレイアウト
375pxでデザインして実装時には768pxまではコンテンツごと伸びていく
◾️768px～
768以上のタブレットとPCに対応したレイアウト
768pxでデザインして実装時には768以上は左右の余白が伸びていく（orマックスの横幅を設定してコンテンツごと伸びていく）

>>123
はぇ～Remって画面サイズに合わせて文字サイズも自動で変わる単位？的な…？😭

>>123
近年は全て相対指定の完全リキッドデザインも増えてきたねぇ🥺
ウェブアプリ系はこっちが主流になりそう🥺
広告系はデザイナーの頭の中の再現性がキモだから絶対指定がおおいけど🥺

>>126
そうそう🥺
文字サイズだけじゃなくて画像の幅とかレイアウト自体も全て相対で組むこともできるよぉ🥺
昔の用語でリキッドデザイン（見るデバイスに完全にフィットするから流体デザイン）なんて呼んでいたねぇ🥺

さ、ほんじつはこのへんで🥺👋

>>125
つまりぷゆはこの2つを作ったらいいって…ことですか…？😭

https://i.imgur.com/1TbBfUa.jpeg" data-lightbox="image">https://i.imgur.com/1TbBfUa.jpeg" loading="lazy">
https://i.imgur.com/1TbBfUa.jpeg

>>129
あっ承知しました😭🙇
本当にありがとうございましたあとは自分で調べてみます感謝感謝です😭

>>130
そだねぇ🥺
そこからそれぞれの横幅が伸びて行った時の挙動もセットでかんがえてねぇ🥺

>>123
ID:WSul09BsSさんもありがとうございます😭
少なくなっちゃってごめんなさいだけどお礼のチューリップです😭👐🌷

!pay:5000:ID:WSul09BsS
-
★ID:WSul09BsSに5000g??を送りました。

>>132
ありがとうございます😭😭😭
本当に助かりました😭
余白伸びたときのことも考えてやってみます😭🙋

>>133
大したこと言ってないのにすまないね🥺💦
頑張って！😳💪