ウェブデザインのベストプラクティス（サイト幅は～pxにする、ブレークポイントは～pxにする等）がまとまっている書籍・サイト・動画などはないでしょうか。

Question

ノーコードツールbubbleを使用して、
ビジネスマッチングサイトを作ろうとしているものです。

各ページのデザインをしているところですが、
フォントサイズはどの程度にするべきか、
各要素間の距離は何ピクセルにするべきか、
ページの幅はどれくらいにするべきか、
といったことがわからず、制作が行き詰まってしまいました。

ウェブサイトのデザインは、一般的にこうするべきだ、ベストプラクティスはこうだ、
といったことがまとまっているような書籍、サイト、動画などはないでしょうか。

どうぞよろしくお願いいたします。

Comments

[Zuishin]

まるで何をしたらいいかわからないのであれば、ワードプレスを使った方がいいのでは？

[m.ts10806]

基本的に作る人が決めるべきと思います。
（あとは質問者さんが調べてもすぐ出てくる範囲になるかと。調べてないのなら調べるところからです）

Answer 1

ウェブデザイン自体は詰まるところ「そのサイトの考えるデザイン」がそのサイトにとっての最善であるので（自身の表現であるから）、あえてデザイン云々で言うなら、「不特定多数が見ても不快にならず誘導しやすい」がベストプラクティスとなります。

現在ですとデザイン面はともかく、「誰でも使いやすい」という観点から Webアクセシビリティという考え方があり、これは工業規格化もされています。これには例えば
・色使いに配慮する（例えば色覚障碍がある人にとっては、色分けされたはずのサイトが色分けされていないことになり、混乱してしまいます）
・聴覚を使用してWebアクセスしている人（視力が極端に悪いなど）に配慮する
・複数の画面解像度が異なるデバイスに対応する（PC用とスマホ用とでは、画面内で利用できる領域は異なってきます）
・一貫性のある操作性を提供する（例えば画面毎にメニューの並び順が違ったりすると混乱しますよね？）
といったものです。
※必ずしもデザイン優先の Webサイトを排除するものではありません。実際、Webアクセシビリティを高い状態に保ちつつデザインに優れたWebサイトは存在します

まずはその辺を調べられてはいかがでしょうか。

Comments

[maruchansan]

ご丁寧にご回答いただき、ありがとうございます。

ウェブデザイン、UI・UXデザイン関係の書籍は10冊以上読んでおりましたが、
なかなか私の質問する内容に答える情報は得られずにいたところでございました。

ウェブアクセシビリティについても、配慮するようにいたします。

[tacsheaven]

使える画面のサイズが多種多様である昨今、デザインに凝っても意図したとおりに表示できるとは限らないのです。ですから～px以上、といった考え方はあまり意味がありません。
※Web黎明期だと PC の画面サイズはだいたい決まっていましたから、640x480 だったり 1024x768だったりといったサイズを想定してそれに合わせて最適なデザインを、というのはありでしたが、今はとてもとても……

Answer 2

国内の書籍やUdemyの講座では、意図した内容の載っているものはありませんでした。
英語のUdemyの講座ではいくつか意図したものが発見されましたので、それを受講することとしました。

加えて、googleのマテリアルデザインガイドライン等の各社のデザインガイドラインを参照することとしました。

回答いただいた方、回答を検討いただいた方、ありがとうございました。