余白の重要性

date_range 2024/05/28
日々の活動日記エンジニアインターン
余白

こんにちは!

京都開発研究所、Webプログラマーコースの長期インターン生、松木智哉です!!


最近行っている業務のサイト構築課題において「余白を含めたレイアウトの再現性をもっとあげる」というフィードバックをいただきました。

大学でのパワポの発表資料でも余白について指摘されたことを思い出しました、、


余白などレイアウトは、なるべく見本に近づけるように意識はしていますが、まだまだ求められているレベルには到達していないと感じてます!!

第一線で活躍してる方々は余白を自分が考えている以上に重要視しているのだなとすごく感じます!!


余白の持つ意味について考えてみた

余白はウェブサイトにおいて①読みやすさの向上 ②コンテンツを際立たせる ③全体の構造の整理 という役割を果たしているのかなと思います。


実際に、① ぎゅうぎゅうなコンテンツは見えにくいです。また、② 重要なコンテンツの周りに多くの余白があれば注意を引きます。さらに、③ 余白はコンテンツごとをグループ化することができ、ユーザーの情報処理を視覚的に手助けしてくれます!


ウェブサイトだけでなく、建築や芸術にも余白が使われています!

しかし、余白は物理的なものだけではないと感じました!

例えば、コミュニケーションでは「間」と呼ばれる余白が使われています!!


このように余白は単に「何もないスペース」ではなく、それ自体に様々な意味が隠されている重要な要素であると感じました!!


今まで以上に余白を意識して、余白を使いこなせるように努力したいと思います!!


-----------------------------------------------

G!FIT公式Instagram:https://www.instagram.com/gfit_gdn/

G!FIT公式Twitter:https://twitter.com/gfit_gdn

メンバー紹介ページ:https://guardian.jpn.com/member/tomoya_matsuki/

*COMMENT*

  • 下川 春樹

    下川 春樹

    更新日:2024-05-28 18:03

    *コメント*

    お疲れ様です。
    何もないようでとても大切な余白。
    サイト全体で統一されているのはもちろん、要所要所で色んな使い方や役割があり、面白いですよね。
    どなたかのコメントにも書いたのですが、下記の本がとても勉強になるので良かったら見てみてくださいー٩( 'ω' )و

    けっきょく、よはく。 余白を活かしたデザインレイアウト

    *コメント*

  • 芹原 まなみ

    芹原 まなみ

    更新日:2024-05-28 18:27

    *コメント*

    コンテンツの余白もテキストの文字間・行間もガラッと印象が変わりますよね。
    余白の使い方まだまだ勉強不足なのでみなさんがみなさんがお勧めされている本読んでみたいです。

    *コメント*

  • 黒川 かな

    黒川 かな

    更新日:2024-05-28 18:37

    *コメント*

    お疲れ様です!
    余白大切ですよね!
    余白がないレイアウトだと圧迫した印象を与えてしまうし、そもそも読む気をなくすので、とても神経を使う部分です。
    整列や近接も合わせて考えてみると良いと思います!

    *コメント*

  • 池田 つづみ

    池田 つづみ

    更新日:2024-05-29 08:17

    *コメント*

    デザインをするとき、絵を描くとき、コミュニケーション、人間関係、普段いろんなことに対して余白の重要性についてよく考えています。完璧になることは難しいかもしれないですが年々うまく余白を取れるようになってきています。一緒に頑張りましょう。

    *コメント*

  • 熊谷 ゆか

    熊谷 ゆか

    更新日:2024-05-29 13:07

    *コメント*

    余白の取り方、とても難しいですよね。
    余白の取り方が上手なサイトやデザインが自然と目を引くのかなぁなんて思います。
    色んなデザインを見て勉強しなくてはと思います。

    *コメント*

  • 奥村 優

    奥村 優

    更新日:2024-05-29 20:07

    *コメント*

    余白の取り方はとても大事ですよね。余白によってデザインの見え方もかなり変わってくるので、記事を読んで改めて余白の重要性はとても大事だなと思いました。

    *コメント*

*コメント*

*ログイン*

メールアドレス
パスワード