ウェブサイトの見た目って、ちょっとしたことで「おっ？」って感じに変わるんだよね💡
最近、デザインも開発も両方やる友だちから教わった一番簡単なテクをシェアするよ✨
1. 余白を意識するだけで雰囲気が変わる👀
デザイン初心者のわたしもびっくりしたんだけど、文字や画像の周りにちゃんとスペースを空けるだけで見やすくなるんだよね。
「これくらいでいいかな？」って狭くしがちだけど、ちょっと広めに取るとスッキリしてプロっぽい感じに🌸
たとえば、段落と段落の間やボタンとテキストの間に最低でも10〜20pxくらいの余白を入れてみて✨
あんまり詰め込みすぎると、読みにくくなるし、なんだか窮屈な印象になっちゃうから要注意⚠️
2. 色を絞るだけで統一感アップ🎨
色、多いと逆にごちゃごちゃしちゃうよね。
わたしも最初は「カラフルにしたほうが楽しいかな？」って思ってたけど、使う色を3色以内に絞るだけで一気にまとまるんだよ〜💗
基本色、アクセントカラー、文字色の3つくらいに決めて、それ以外は極力使わないようにすると、見た目がグッと洗練される✨
3. フォントの種類は2つまでに抑える👩💻
フォントをたくさん使うと、なんか落ち着かないの。
だからタイトル用と本文用の2種類だけにするのがオススメ！
見出しは目立たせたいから太めのやつ、本文は読みやすいシンプルなやつ…みたいに使い分けるといい感じ📝
まとめ🎀
- 余白はちゃんととるだけで無理なく見やすくなる✨
- 色は3色以内に絞ると統一感が増す💗
- フォントは2種類までにしてスッキリ見せる👍
これだけ押さえれば、デザイン苦手な人でもなんとなく「いい感じ」になる気がするよ😆
デザインと開発のバランスって難しいけど、こういうちょっとしたコツが積み重なると、サイト全体の印象が変わるんだなぁって思った💭
ちょっと試してみて、いつものページがどんな風に変わるか見てみてね🌸
はてな
コメント
ロバート
良質な素材を使って、タイトルは短く、段落も短めに。 余白をしっかりとって見やすくしよう。
クリス
余白は味方！ 詰め込みすぎずスペースを作れば、一気にプロっぽくなるよ。
キンバリー
フォント・色の組み合わせ・余白がちゃんとしてると見栄えが変わる。
エイダン
昔のウェブ感、マルキータグや点滅文字、明るい緑色最高！ #longlivegeocities
グレース
フォントは黒じゃなくて濃いグレーを使おう。
リリー
このシンプルなガイドがめちゃ参考になるから開発者は必見！
チャーリー
踊るバナナGIFで遊ぼう。
レオ
色使いは60-30-10ルールで、ベース60%、サブ30%、アクセント10%が鉄板。
ミア
https://www.grug.design/know もおすすめ。
サラ
レスポンシブ対応の苦労、みんな忘れてない？ PC・タブレット・スマホで3つ作ってる気分で地獄だよ😭
クリス
まずは何がしたいかをはっきりさせて、それに合った使いやすいサイトを作ろう。 見た目だけ良くても使えなきゃ意味ない。
ベン
似たサイトを見て研究してみて。 あと、ITに詳しくない友達に試してもらうと本音が聞けて超有益！
ロバート
当たり前だけど、均等な余白やフォントの階層をちゃんと整えるだけで全然違うよ。
ハンナ
似たサイトを片っ端からパッと見て、良いところ・ダメなところを目で覚えるのが自分のコツ。
ワット
余計な要素は入れないことが一番大事。
