質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
ウェブアプリケーション

ウェブアプリケーションとは、ウェブ上でアクセスされるアプリケーションのことを呼びます。この場合におけるウェブとは、インターネットやイントラネット上を意味します。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

デザインパターン

デザインパターンは、ソフトウェアのデザインでよく起きる問題に対して、解決策をノウハウとして蓄積し再利用出来るようにした設計パターンを指します。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

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

maruchansan
maruchansan

総合スコア33

ウェブアプリケーション

ウェブアプリケーションとは、ウェブ上でアクセスされるアプリケーションのことを呼びます。この場合におけるウェブとは、インターネットやイントラネット上を意味します。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

デザインパターン

デザインパターンは、ソフトウェアのデザインでよく起きる問題に対して、解決策をノウハウとして蓄積し再利用出来るようにした設計パターンを指します。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

2回答

0グッド

0クリップ

371閲覧

投稿2022/03/29 09:17

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

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

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

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/03/30 02:23

こちらの質問が複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

2022/03/29 11:44

こちらの質問が複数のユーザーから「問題・課題が含まれていない質問」という指摘を受けました。

Zuishin

2022/03/29 09:52

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

2022/03/29 11:29

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

回答2

1

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

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

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

投稿2022/03/30 00:13

tacsheaven

総合スコア13667

maruchansan👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

maruchansan

2022/03/30 00:35

ご丁寧にご回答いただき、ありがとうございます。 ウェブデザイン、UI・UXデザイン関係の書籍は10冊以上読んでおりましたが、 なかなか私の質問する内容に答える情報は得られずにいたところでございました。 ウェブアクセシビリティについても、配慮するようにいたします。
tacsheaven

2022/03/30 00:50

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

0

自己解決

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

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

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

投稿2022/03/31 06:04

編集2022/03/31 06:07
maruchansan

総合スコア33

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

ウェブアプリケーション

ウェブアプリケーションとは、ウェブ上でアクセスされるアプリケーションのことを呼びます。この場合におけるウェブとは、インターネットやイントラネット上を意味します。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

デザインパターン

デザインパターンは、ソフトウェアのデザインでよく起きる問題に対して、解決策をノウハウとして蓄積し再利用出来るようにした設計パターンを指します。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。