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

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

新規登録して質問してみよう
ただいま回答率
85.50%
デザイン

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

3921閲覧

マージンの広さはどのくらいが適切なのでしょうか

takane

総合スコア63

デザイン

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/02/26 05:59

こんにちは。webデザイナー兼コーダーをしている者です。
時々思うのですが、何気なく設定しているマージンですが、どのくらいがちょうどよくてそれがなぜなのかあまり考えたことがありませんでした。
下のサイトで調べてみましたが、1.ブロックごとに分けるために仕切りを作る意味がある2.マージンを広くとると見やすくなる
というくらいしか理解できませんでした。
https://lab.sonicmoov.com/design/margin/
https://lab.sonicmoov.com/design/margin-padding/

皆さんはデザインをするとき、どのくらいのマージンが適切だと思いますか?
また、狭いマージンと広いマージンで、どういった意味の違いが出てくるでしょうか?

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamato_user

2019/02/26 06:03

......そんなもんデザイン次第だと思うが......理由などない。それが見やすくておしゃれだと思うから、そのデザインにするのだ。あれこれ考えるやつは、デザインセンスないだろ
stdio

2019/02/26 06:14

ryounaman19さん webデザイナー兼コーダーと言っている時点で明白です。 基本的に「デザイナー」ではなく「webデザイナー」と名乗る人はどちらかといえばコーダーの人間です。質問者にデザインセンスがかけらもないのはそのためではないでしょうか?
Lhankor_Mhy

2019/02/26 06:17

ここはエンジニアさんが来るところであって、デザイナーさんは少ないと思うので、ここで聞くよりも「版面率」でググった方が勉強になると思います。
takane

2019/02/26 06:18

こんなに炎上するとは・・・ センスがないから一般論を聞きたいのですが・・・ それに、一応デザイン系の学校を出ていますが、なんでもかんでも「センス」でまとめるデザイナーもちょっとまゆつばっぽくないですか?
Lhankor_Mhy

2019/02/26 06:21

デザイン系の学校を出ているなら、なおのことエンジニアさんに聞いて勉強になることなんてないんじゃないかと思いますが……
stdio

2019/02/26 06:21

そら炎上しますよ。 センスがないならそのままプログラマにでもなりなさいな。 センスは人に聞いて身に付くものではありません。一般論を聞きたところでそんなテンプレしか作れないデザイナーはいりませんよ。
takane

2019/02/26 06:23

版面率は勉強になりました。 確かに、「デザイン」の項目があるのでデザイナーさんもいるのかと思っていましたが、主にはエンジニアさんでしたね
stdio

2019/02/26 06:29

版面率のほかにも黄金比というものがありますよ。 あんまり関係ないけど...
dice142

2019/02/26 06:49

質問とは異なるのでこちらに書きますが、「Webデザイン」と「Webコーディング」は学ぶものが全くの別物なので、分けて勉強された方が良いです。 魅せ方はWebデザインですが、見せる方法はWebコーディングなので、質問の本質はWebデザインの方ですかね。
m.ts10806

2019/02/26 06:52

本当に炎上した質問は低評価がもっと殺到しますし、「注意」レベルのコメントじゃないですよ。あくまで「アドバイス」レベルのコメントしか集まってません。
guest

回答4

0

ベストアンサー

・・・Webデザイナーですよね?
人におすすめ聞くようじゃWebデザイナーとは言えないのでは?

デザイン系の大学行ってましたが、マージンはいくつにしろ~なんて誰も教えてくれませんでしたよ。
要するにセンスです。

何がちょうど良いかなんて作る人にしかわからなくないですか?

依頼されているものなら、お客さんと話し合って決めてください。
基準なんてものはありません。


【追記】

センスで決めるのも良くないのでは?と質問者さんは仰っていますが
まぁある程度の知識は必要でしょうね。

例えば、市役所などのサイトのデザインにかかわった時に余白を広く取りすぎては
大事な情報を詰め込めませんし、

何かの商品をPRするサイトのデザインにかかわった時に余白をあまりとらず、
ぎちぎちにつめこんでしまっては何をPRしたいのかわかりません。

そのサイトに適した余白があるはずです。

(まぁやっぱりその余白を見極める点で最終的にはセンスになっちゃうんですがね)

投稿2019/02/26 06:15

編集2019/02/26 06:43
azuapricot

総合スコア2341

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

stdio

2019/02/26 06:18

良い事言いますね。 確かに何度もああでもない、こうでもないと試さないと良いデザインなんて生まれませんよね。
takane

2019/02/26 06:47

わかりやすそうなサイトありがとうございます。 なんか叩かれすぎてへこみましたが、基礎知識が足りていないせいだというのはわかっているのでぐうのねもでません。 そのへんを勉強しなおそうとしても、web関連の本だと表面的なことしか書かれていなかったり、紙関係の本は若干淘汰されていたりと踏んだり蹴ったりです
m.ts10806

2019/02/26 06:57

うーん、これで「叩かれている」と感じられてしまうとどんなアドバイスも受け入れられなくなるのでそこは注意してください。 あくまで「アドバイス」でしかありません。アドバイスを求めるサイトなので、そこは前向きに捉えましょう。 (本当に炎上した質問はこの程度じゃないですし、質問者の対応のまずさや変に開き直ったり、ヘイトを集めるようなことになっています。) 算数のように1+1=2とか答えが決まっているものではないので、資料に頼るのではなく、自身の感性を磨くことに注力されては? どんなに技術を身につけてもそれを活かせる感性がないことには実力は発揮できません。 私もWebデザインを大昔に受講していましたが、「様々なデザインに触れることが最も勉強になる」とそのときの講師は常々話していました。 心理学的な面で年齢や性別・職業・カテゴリで「心地よい」とされるデザインの推奨的なものはあるのはありますが、それもやはり要件次第ですし、要件が同じでも感性によって全く同じものはできあがりません。
azuapricot

2019/02/26 06:57

デザイナーなんて叩かれてなんぼ凹んでなんぼだと思ってます。 お客さんとの打ち合わせで仕様をきめて、お客さんがそれでいいっていったのに 次の時ではなんでこうしたんだ、こうしてくれってやり直しは日常茶飯事です。 実際サイトをいくつか作っているうちに感覚が身に付いてきます。 まずはいくつか作ってみたらいいんじゃないでしょうか。
stdio

2019/02/26 07:19

azuapricotさん、仕様を決めたのにそれはお辛いでしょうね。 実際サイトをいくつか作ってみるのもそうですが、見るのも重要です。 誰も知らないようなサイトを見に行くのもまた勉強になりますよ。 http://2017.makemepulse.com/ かなり演出にこだわったサイトを紹介しておきますね。
takane

2019/02/26 07:56

>mts10806さん 確かに、ちょっと捉え方がマイナスでした。アドバイスとして受け止めてアウトプットに生かしていこうと思います。 >azuapricotさん デザインは好みにも大きく左右されてしまうので大変ですね。ただ、やっぱり強い?デザイナーさんはそれを説得できるロジックをもっているもののように思います。 >stdioさん 参考になるサイトをありがとうございます。センスも大事ですよね。逆になんか安心しました。さすがにプログラマさんよりはセンスあると思うので、感覚でやってもいいんだ~と、ちょっとホッとしました。
m.ts10806

2019/02/26 07:59

もうUXとかWebデザイン理論とかの書籍を買って読んだ方がいいんじゃないかなと思います。
stdio

2019/02/26 08:29

いや、プログラマさんよりはセンスなんて求めた時点でデザイナーは負けだよ。そこに関しては常に勝っていなきゃデザイナーにわざわざ仕事なんて振らないよ。 まぁ、ゆっくりと自分のペースでやっていくのが一番ですよ。 最初から出来る人は怖いです。なぜならそれ以上伸びないから... とりあえず何か出来たらwebサイトの一つでもできたら見せてね。アドバイスしてあげますよ。
m.ts10806

2019/02/26 08:35

>さすがにプログラマさんよりはセンスあると思う 厳しいツッコミをすると「じゃ、なぜあなたよりセンスが低いであろうプログラマが大半をしめるであろうエンジニア特化QAサイトでこの質問をしたの」となるわけで。 言葉遣いにはご注意を。
m.ts10806

2019/02/26 08:39

補足。言葉足りなかったので。「Webデザイナーはエンジニアではない」という意味ではないです。タグにもその関係のものはありますしね。私も回答することがあります。 ただ、全体の割合からみると「デザインだけやってる人」は少ない そういう意味です。
takane

2019/02/26 08:46

>mts10806 エンジニア特化QAサイトでこの質問をした そうなんです。おっしゃる通りなんですが、デザイナー特化の質問サイトはなぜかかなりクオリティが低く、更新頻度が少ないみたいなので、テラテイルのほうがなんでもやっている人たちがいて勉強になると思うのです。 といっても↓しか知らないのですが。 http://w3q.jp/
stdio

2019/02/26 08:47

mts10806さん 確かに言い過ぎましたね。反省しましょう。 本格的にデザイン一本で生きている人は負けてはいけませんが、そうじゃない人も多いですよね...
stdio

2019/02/26 08:53

ごめん同じサイト内だわww
azuapricot

2019/02/26 08:54

(もうそろそろコメント締めていただけると私の通知欄が喜びます)
guest

0

デザインの学校を出てらっしゃる方にアドバイスするのもおこがましいですが……

わかりやすくて効果的 Webデザイン基礎講座 (DESIGN BEGINNER SERIES) | 内田 広由紀, 視覚デザイン研究所 |本 | 通販 | Amazon

一時期、愛読していました。かなり古い本なのでCSSの記述については注意が必要ですが、デザインの基本は変わらないと思います。

概要がここに載っています。
レイアウトの基礎 その1「様式を選ぶ」 | キメウェブ

投稿2019/02/26 06:37

編集2019/02/26 06:38
Lhankor_Mhy

総合スコア35869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takane

2019/02/26 06:48

わかりやすそうな本ありがとうございます。 なんか叩かれすぎてへこみましたが、基礎知識が足りていないせいだというのはわかっているのでぐうのねもでません。 そのへんを勉強しなおそうとしても、web関連の本だと表面的なことしか書かれていなかったり、紙関係の本は若干淘汰されていたりと踏んだり蹴ったりです
guest

0

作る人、見る人 関係なく「好み」もあるし、どのようなユーザーをターゲットにするかによっても作りは違うので「これが適切」というのはないと思っていいです。
場合によって文字サイズや周りとのバランスもあります。
つまり、要件次第。

投稿2019/02/26 06:11

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

これと言った決まりはないと思います。
見やすい幅というものは存在するかもしれませんが、それも全員が全員共通ではないです。
作るホームページの内容や仮に内容が同じものであっても強調する部分が違うだけでも変わってくるものです。
そういった部分は理論ではなく感覚による部分が強いです。
だからこそ「Webデザイナー」というのではないかと思います。

あくまでも持論ではありますが・・・

投稿2019/02/26 06:21

mutsuki22

総合スコア445

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問