This is a cache of https://b.hatena.ne.jp/entry/s/speakerdeck.com/ktcryomm/naaxiong-di-yu-bai-noyi-wei-wokao-etekara-uishi-zhuang-sitekure. It is a snapshot of the page as it appeared on 2025-11-28T13:29:07.321+0000.
[B! ui] なあ兄弟、 余白の意味を考えてから UI実装してくれ！
  • はてなブックマーク
  • テクノロジー
  • なあ兄弟、 余白の意味を考えてから UI実装してくれ！
  • Twitterでシェア
  • Facebookでシェア

なあ兄弟、 余白の意味を考えてから UI実装してくれ！

テクノロジー カテゴリーの変更を依頼 記事元:speakerdeck.com/ktcryomm
適切な情報に変更
200users がブックマーク コメント 27

    記事へのコメント27件

    • 注目コメント
    • 新着コメント
    tomono-blog
    気をつかって、いい感じに余白をいれるとデザイナーに怒られるからな、気を付けてくれ兄貴

    その他
    himanahitodesukun
    n番煎じのノンデザイナーズブックネタ。これだけ守ったからって良いデザインになるとは限らないし、（ハズレの）デザイナーが何も考えてない場合も多い。

    その他
    kijtra
    いろんな理論を並べても上司やクライアントの好みの前では無力だけど、知っておくことが重要だね

    その他
    yoshi-na
    ノンデザイナーズデザインブックを買おう！

    その他
    uunfo
    デザインの意図を読み取れってのはどうなんかなあ。意味があるならちゃんと補足するなり、グルーピングするなりしておくべきでは。まあコーダーに似たようなこと思ったりはするけど

    その他
    tofu-kun
    めちゃ良い資料。最後の要素自体にpaddingをもたせるのかspaceとして定義するのどちらが良いのかはスライドだけだと読み取れなかった。

    その他
    strawberryhunter
    よくわからない。各自が勝手にデザインするチームでのチームメンバーに対する話なんだろうか。あるいはポンコツデザイナーへの苦言なのだろうか。デザイナー視点の話ならFigmaを今すぐ捨ててHTML/CSSを書けと伝えたい。

    その他
    Kenju
    なるほどって感じ

    その他
    hachiking
    まぁ最近だとデザイナさんがFigmaでコンポーネントなどできちんと設定していてくれるので、あまりエンジニア側がどうこう解釈することないイメージだけどね。

    その他
    yarumato
    “余白は、意図的に入れるもの。SwiftUIの余白の指定方法”

    その他
    yoshi-na
    yoshi-na ノンデザイナーズデザインブックを買おう！

    2025/11/28 リンク

    その他
    strawberryhunter
    strawberryhunter よくわからない。各自が勝手にデザインするチームでのチームメンバーに対する話なんだろうか。あるいはポンコツデザイナーへの苦言なのだろうか。デザイナー視点の話ならFigmaを今すぐ捨ててHTML/CSSを書けと伝えたい。

    2025/11/28 リンク

    その他
    tor4kichi
    とりあえずマック理論でベタ実装して一回ブチ切れリテイクを頂くところからがスタート（やめ／ゲームエンジンよろしくアーティストがUI実装してもいいしエンジニアはUI最適化とインフラ周りに集中させてほしいわ

    その他
    hdampty7
    矩形で囲え。フリーでテキスト配置すんな。クソデザイナーが！という経験をされた兄弟が多いことと存じます。せめてWebデザイナー名乗るなら文字列やデータ量によってコンテンツのサイズが変わることは認識して欲しい

    その他
    nekopon44
    頭上の余白は敵だ (違う

    その他
    ultimatebreak
    感覚だけで調整してるせいかあっちこっちで数値がバラけてるのはやめてほしい(錯覚対処の調整は除く)

    その他
    szsszs
    最初の例で求めてることはフルーツをVStackで囲んで欲しいってことかい？フルーツやボタンが増えたり画面幅で変わったりがあるとか、実装のお作法まで開発と共通認識あるといいね

    その他
    rakugoman
    この話とは関係ないけど、楽天のようなギチギチに情報を詰め込んだページの方がより売り上げが上がったりするので、UIの理論的な正しさと結果が一致しないことにモヤモヤするときはある。私の勉強不足かもだが。

    その他
    uunfo
    uunfo デザインの意図を読み取れってのはどうなんかなあ。意味があるならちゃんと補足するなり、グルーピングするなりしておくべきでは。まあコーダーに似たようなこと思ったりはするけど

    2025/11/28 リンク

    その他
    FreeCatWork
    ボク、兄弟のこと心配なんだにゃ。余白、大切だよねにゃ〜！

    その他
    masarusanjp
    余白には意図があり、それをSwiftUIのコードに落とす際に複数ある余白を設ける手段でどれを採用するのが良いのかというまとめ。とても良かった

    その他
    aiueokabe
    非デザイナーでもこういう基本的な原則は知っておいた方がいい

    その他
    Cru
    常々ゲームコンテンツ以外の日本のUIは全般的にダメって印象があったので、こういうのがバズると良いね。プロジェクトで集まっては解散してるからダメなのよね。組織にノウハウ蓄積がない。全部竹中が悪いw

    その他
    himanahitodesukun
    himanahitodesukun n番煎じのノンデザイナーズブックネタ。これだけ守ったからって良いデザインになるとは限らないし、（ハズレの）デザイナーが何も考えてない場合も多い。

    2025/11/28 リンク

    その他
    eye4u
    有益な話

    その他
    axljpn
    空白含めデザイナーのデザインには意味があると思っているので勝手に変えるのは悪手。基本は忠実に再現して、仕様と違うところは確認する（ということを学んだn年前）

    その他
    kagerouttepaso
    toBだとガッツリ枠線で囲って余白ギチギチになることもあるけど気をつけるべき事はおなじ。

    その他
    ghostbass
    業務アプリとか小さいサイトとかだとデザイナー作ってあんまりないだろうからエクセル方眼紙に書いた「デザイン」をプログラマーが「いい感じに」するんだよね。そういう場合にこういう知識は必要

    その他
    nojimage
    情報設計としての余白／余白はデザインとしてアルファベット圏では重視されるけど漢字圏ではあまり重視していないよね

    その他
    tohokuaiki
    枠線じゃなくて余白でグルーピングってことかな？色でも罫線でも区切り線でも形状やドロップシャドウでもできるよね。

    その他
    kijtra
    kijtra いろんな理論を並べても上司やクライアントの好みの前では無力だけど、知っておくことが重要だね

    2025/11/28 リンク

    その他
    yoiIT
    エンジニアにわかりやすい解説。

    その他
    tomono-blog
    tomono-blog 気をつかって、いい感じに余白をいれるとデザイナーに怒られるからな、気を付けてくれ兄貴

    2025/11/28 リンク

    その他
    tofu-kun
    tofu-kun めちゃ良い資料。最後の要素自体にpaddingをもたせるのかspaceとして定義するのどちらが良いのかはスライドだけだと読み取れなかった。

    2025/11/27 リンク

    その他

    注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

    アプリのスクリーンショット
    いまの話題をアプリでチェック！
    • バナー広告なし
    • ミュート機能あり
    • ダークモード搭載
    アプリをダウンロード

    関連記事

    なあ兄弟、 余白の意味を考えてから UI実装してくれ！

    2025.11.26 Mobile Fusion Study @KTC

    ブックマークしたユーザー

    • ohiro182025/11/28 ohiro18
    • fuzitahoushirou2025/11/28 fuzitahoushirou
    • Kenju2025/11/28 Kenju
    • u-qreil82025/11/28 u-qreil8
    • TerribleWorld2025/11/28 TerribleWorld
    • kengohayano2025/11/28 kengohayano
    • i-jumpmjag0j22052025/11/28 i-jumpmjag0j2205
    • gawasa292025/11/28 gawasa29
    • nakiwo2025/11/28 nakiwo
    • tiga22025/11/28 tiga2
    • sskoji2025/11/28 sskoji
    • e10kg2025/11/28 e10kg
    • yk56562025/11/28 yk5656
    • facpatrysis2025/11/28 facpatrysis
    • ChillOut2025/11/28 ChillOut
    • kizashi11222025/11/28 kizashi1122
    • coral2902025/11/28 coral290
    • ha-te-na-9212025/11/28 ha-te-na-921
    すべてのユーザーの
    詳細を表示します

    いま人気の記事

    いま人気の記事をもっと読む

    いま人気の記事 - テクノロジー

    いま人気の記事 - テクノロジーをもっと読む

    新着記事 - テクノロジー

    新着記事 - テクノロジーをもっと読む

    同時期にブックマークされた記事

    いま人気の記事 - 企業メディア

    企業メディアをもっと読む

    はてなブックマーク

    公式Twitter

    はてなのサービス

    • App Storeからダウンロード
    • Google Playで手に入れよう
    Copyright © 2005-2025 Hatena. All Rights Reserved.