Lemon8Lifestyle community

Automatically translated.View original post

よこさん⌇40代からのじぶん開花🌷Webデザイン
よこさん⌇40代からのじぶん開花🌷Webデザイン

181 followers

Follow
Follow
Follow
WEBデザイン初心者がやりがちな「見た瞬間ダサい」デザインの原因を解説する導入画像。ノートパソコンと感嘆符が描かれ、ピンクの背景に花柄が散りばめられている。
デザイン初心者が感じる「これで完成なのかな？」「しっくりこない」といったモヤモヤの正体を解明する導入ページ。困惑した表情の人物や電球のイラストが描かれている。
NGデザインの1つ「余白ゼロ問題」を解説。余白がない窮屈なデザインと、余白がある読みやすいデザインを比較し、余白がデザインの呼吸であることを示している。
NGデザインの2つ目「整列がバラバラ」を解説。要素が不揃いなデザインと、整然と配置されたデザインを比較し、デザイン4原則で整える重要性を示している。
NGデザインの3つ目「トーンが揃ってない」を解説。色がバラバラでまとまりのないデザインと、明度・彩度が揃った統一感のあるデザインを比較している。
NGデザインの4つ目「フォントを詰め込みすぎ」を解説。5種類のフォントを使った読みにくいデザインと、3種類のフォントで統一された見やすいデザインを比較している。
NGデザインの5つ目「ドロップシャドウが濃すぎ」を解説。影が強すぎる古臭いデザインと、自然な影で洗練されたデザインを比較し、光源の統一を促している。
NGデザインの6つ目「写真のレタッチが甘い」を解説。黄色みがかった写真と、自然な色合いに調整された写真を比較し、高画質素材の使用と調整の重要性を示している。
NGデザインの7つ目「情報の優先度が伝わらない」を解説。情報が羅列され読みにくいデザインと、優先順位が明確で伝わりやすいデザインを比較している。
デザイン改善のためのまとめ。ユーザー視点、デザイン4原則、一貫性、見直しを強調。関連投稿の紹介と、女性の笑顔が描かれている。
1/11

You may also like

No content
See more on the app
See more on the app
See more on the app
26 saved
15

Is that design lost in the [preserved version]?

"Is this complete?"

I feel something different...

"Moyamoya" that many design beginners feel is surprisingly simple 💡

This time, we will introduce 7 NG designs that will make you feel "hmm..." the moment you see it!

We will unravel the causes of "something different" with professional design one by one 👀

📌 this point

・ Margins = breathing of design

· Impression is drastic change in alignment

・ Up to 3 types of fonts

The golden ratio is 70: 25: 5 ✨

Design that changes with "rules" instead of "sense."

Your post can also evolve to "transmitted design" from today 🔥

💾 and use it as NG Design Checklist!

💬 comment, tell me what you want to be most aware of!

Nice to meet you!

🌷 Yoko-san, a web designer 🌷

I also studied web design while raising children,

Now I work freely at home at my favorite time.

🌼 on this account 🌼

A fledgling web designer,

For moms aiming to become web designers

🌷 web design knowledge

🌷 Parenting Mom's Worries While Studying Web Design

🌷 How to work as a freelancer

🌷 to become a freelance web designer

I'm sending out such things!

If you want to know more, please follow me!

How do you want to be a web designer?

What kind of self do you want to be?

Let's aim for a life where we can definitely do what we want 🌷

2025/10/16 Edited to

... Read more私もWEBデザインを始めた頃は「なんか違う…」という感覚に何度も悩まされてきました。ブログやSNSの投稿デザインがどうもしっくりこない原因が分からず、自己流で試行錯誤していたことを覚えています。 この投稿で紹介されている「余白＝デザインの呼吸」は、実際に意識し始めてから見た目が格段に良くなったポイントです。以前は情報を詰め込みすぎて、文字や画像が窮屈に感じられ、読み手に伝わりにくいデザインになりがちでした。余白を適切に取ることで、各要素の意味がクリアになり、読みやすさもアップします。 また、「整列」も意外と見落としがちですが、整列がズレていると一気に素人感が出てしまいます。私はグリッドやガイド線を使うことで安定感のある配置を心がけ、デザイン全体に統一感を持たせるようにしています。 フォントの種類も、最初は多用しすぎてしまうことがありました。今は原則として3種類以内に抑え、用途に応じた使い分けを意識しています。特に見出しや本文で明確な差を付けることが大事だと感じています。 配色の黄金比「70:25:5」もシンプルですが効果的です。自分の作るデザインではメインカラーを70%、アクセントを25%、ポイント使いに5%を心がけることで、バランスの良い配色ができるようになりました。 さらに、ドロップシャドウの使い過ぎや写真の色味のズレなどもプロの視点で見ると違いが大きいです。特に影は控えめにし、光源の方向を揃えることできれいな仕上がりになります。写真は同じトーンで揃えることが大切で、レタッチで明るさやコントラストを調整すると統一感が生まれます。 最後に「情報の優先度」が伝わるかも非常に重要です。伝えたい情報が多すぎるとユーザーは何を見ればいいのかわからなくなるので、大きさや色、余白で明確なヒエラルキーを作る工夫をしています。 今回のチェックリストは保存して繰り返し見返すことで、自己流のクセを直し、伝わるデザインへと確実に近づけるツールとして重宝しています。デザインはセンスよりルールを理解し守ることが上達の近道。私の経験からも、これらのポイントを意識しながら作業を進めていくと、作る楽しさと完成したときの達成感が格段に上がると実感しています。