Jimi Notes

Jimi Notes https://jimi-notes.pages.dev/ 地味だけど本当に困るデザインの悩みを、出典付きリサーチと実演で解く。 ja 背景に逃げてしまう——無地から脱却する背景デザイン https://jimi-notes.pages.dev/articles/background-design/ https://jimi-notes.pages.dev/articles/background-design/ 質感背景をつい無地・無難な単色で仕上げてしまい、世界観もセクションの個性も出ない。 Sat, 20 Jun 2026 00:00:00 GMT 角丸がバラバラ——半径の統一とネスト https://jimi-notes.pages.dev/articles/border-radius/ https://jimi-notes.pages.dev/articles/border-radius/ 細部角丸の半径が要素ごとにバラバラで、入れ子で歪む。 Sat, 20 Jun 2026 00:00:00 GMT 微妙にズレる——整列とグリッドの規律 https://jimi-notes.pages.dev/articles/alignment-grid/ https://jimi-notes.pages.dev/articles/alignment-grid/ レイアウト要素が微妙に揃わず、全体がプロっぽくならない。 Sat, 20 Jun 2026 00:00:00 GMT 区切り線が安っぽい——ボーダーとセパレータの品 https://jimi-notes.pages.dev/articles/dividers-borders/ https://jimi-notes.pages.dev/articles/dividers-borders/ 細部区切り線やボーダーがどぎつく、画面が安っぽく見える。 Sat, 20 Jun 2026 00:00:00 GMT グレーが濁る——使えるニュートラルと色の作り方 https://jimi-notes.pages.dev/articles/neutral-grey/ https://jimi-notes.pages.dev/articles/neutral-grey/ 色グレーやニュートラルが濁って安っぽい。色の選び方に芯がない。 Sat, 20 Jun 2026 00:00:00 GMT ボタンの状態が雑——hover/active/disabled/focusの詰め https://jimi-notes.pages.dev/articles/button-states/ https://jimi-notes.pages.dev/articles/button-states/ 細部ボタンのhover/active/disabled/focusを詰め切れず、触り心地が安っぽい。 Sat, 20 Jun 2026 00:00:00 GMT 影が安っぽい——のっぺりを脱する影の設計 https://jimi-notes.pages.dev/articles/shadow-depth/ https://jimi-notes.pages.dev/articles/shadow-depth/ 質感影をつい単一の濃い黒影で付けてしまい、安っぽく・のっぺり見える。 Sat, 20 Jun 2026 00:00:00 GMT アイコンが浮く——線幅と光学サイズの揃え方 https://jimi-notes.pages.dev/articles/icon-stroke/ https://jimi-notes.pages.dev/articles/icon-stroke/ 細部アイコンの線幅・サイズがテキストやUIと合わず浮く。 Sat, 20 Jun 2026 00:00:00 GMT 日本語が読みにくい——行間・約物・ジャンプ率 https://jimi-notes.pages.dev/articles/jp-typography/ https://jimi-notes.pages.dev/articles/jp-typography/ タイポ日本語の行間・約物アキ・字間が整わず、読みにくく素人っぽい。 Sat, 20 Jun 2026 00:00:00 GMT 余白がなんとなく——8pxで決める余白とリズム https://jimi-notes.pages.dev/articles/spacing-rhythm/ https://jimi-notes.pages.dev/articles/spacing-rhythm/ 余白余白を感覚で置いてしまい、詰まり/スカスカ・不揃いになる。 Sat, 20 Jun 2026 00:00:00 GMT フォントサイズが行き当たりばったり——タイプスケールとジャンプ率 https://jimi-notes.pages.dev/articles/type-scale/ https://jimi-notes.pages.dev/articles/type-scale/ タイポ見出し/本文のサイズを都度決めてしまい、階層もリズムも出ない。 Sat, 20 Jun 2026 00:00:00 GMT カードが平凡——情報カードの設計 https://jimi-notes.pages.dev/articles/card-design/ https://jimi-notes.pages.dev/articles/card-design/ レイアウトカードがただの枠で、情報の優先順位も質感も出ていない。 Sat, 20 Jun 2026 00:00:00 GMT メリハリがない——コントラストで階層を作る https://jimi-notes.pages.dev/articles/contrast-hierarchy/ https://jimi-notes.pages.dev/articles/contrast-hierarchy/ 色全部同じ強さで、どこを見ればいいか分からない平板な画面になる。 Sat, 20 Jun 2026 00:00:00 GMT 数字が揃わない——データと数値の組版 https://jimi-notes.pages.dev/articles/data-numbers/ https://jimi-notes.pages.dev/articles/data-numbers/ タイポ価格やデータの数字が揃わず、桁も読みづらい。 Sat, 20 Jun 2026 00:00:00 GMT 空っぽ・読込中が雑——空状態とローディング https://jimi-notes.pages.dev/articles/empty-loading-states/ https://jimi-notes.pages.dev/articles/empty-loading-states/ 細部空状態やローディングを後回しにして、体験が安っぽくなる。 Sat, 20 Jun 2026 00:00:00 GMT 動きがカクつく——イージングとトランジションの質 https://jimi-notes.pages.dev/articles/easing-motion/ https://jimi-notes.pages.dev/articles/easing-motion/ 細部 transitionが直線的・速すぎ/遅すぎで、動きが安っぽい。 Sat, 20 Jun 2026 00:00:00 GMT フォームが安っぽい——入力欄の質を上げる https://jimi-notes.pages.dev/articles/form-fields/ https://jimi-notes.pages.dev/articles/form-fields/ 細部 input/selectの作り込みが甘く、フォーム全体が素人っぽい。 Sat, 20 Jun 2026 00:00:00 GMT リンクが浮く・埋もれる——テキストリンクの設計 https://jimi-notes.pages.dev/articles/link-styling/ https://jimi-notes.pages.dev/articles/link-styling/ タイポリンクの色・下線の見せ方が雑で、浮くか埋もれるかになる。 Sat, 20 Jun 2026 00:00:00 GMT 写真の切り方が決まらない——トリミングと被写体配置 https://jimi-notes.pages.dev/articles/photo-crop/ https://jimi-notes.pages.dev/articles/photo-crop/ 画像写真のトリミングや被写体位置が決まらず、収まりが悪い。 Sat, 20 Jun 2026 00:00:00 GMT 表が読みにくい——テーブルの可読性 https://jimi-notes.pages.dev/articles/table-readability/ https://jimi-notes.pages.dev/articles/table-readability/ レイアウト罫線だらけ/詰まりすぎで表が読みづらい。 Sat, 20 Jun 2026 00:00:00 GMT タグ・バッジが子どもっぽい——ラベルの設計 https://jimi-notes.pages.dev/articles/tags-badges/ https://jimi-notes.pages.dev/articles/tags-badges/ 細部タグやバッジの色・形・サイズが子どもっぽく安っぽい。 Sat, 20 Jun 2026 00:00:00 GMT ダークモードが映えない——落とし穴と作り方 https://jimi-notes.pages.dev/articles/dark-mode-pitfalls/ https://jimi-notes.pages.dev/articles/dark-mode-pitfalls/ 色ただ反転しただけで、影も色も映えないダークモードになる。 Sat, 20 Jun 2026 00:00:00 GMT あしらいが学生っぽい——装飾線とディテールの品 https://jimi-notes.pages.dev/articles/decorative-details/ https://jimi-notes.pages.dev/articles/decorative-details/ 質感飾り線やあしらいが過剰/ダサく、全体が学生っぽくなる。 Sat, 20 Jun 2026 00:00:00 GMT フッターが投げやり——フッターの設計 https://jimi-notes.pages.dev/articles/footer-design/ https://jimi-notes.pages.dev/articles/footer-design/ レイアウトフッターを適当にして情報が迷子になる。 Sat, 20 Jun 2026 00:00:00 GMT フォーカスが消えてる——focusリングの設計 https://jimi-notes.pages.dev/articles/focus-rings/ https://jimi-notes.pages.dev/articles/focus-rings/ 細部 outlineを消してアクセシビリティを壊しがち。 Sat, 20 Jun 2026 00:00:00 GMT モーダルが雑——ダイアログの作法 https://jimi-notes.pages.dev/articles/modal-dialog/ https://jimi-notes.pages.dev/articles/modal-dialog/ 細部オーバーレイ・フォーカストラップ・閉じ方が甘い。 Sat, 20 Jun 2026 00:00:00 GMT 文言がダサい——マイクロコピーの質 https://jimi-notes.pages.dev/articles/micro-copy/ https://jimi-notes.pages.dev/articles/micro-copy/ タイポボタンや空状態の文言が機械的で冷たい。 Sat, 20 Jun 2026 00:00:00 GMT ナビが散らかる——ヘッダーとナビ設計 https://jimi-notes.pages.dev/articles/nav-header/ https://jimi-notes.pages.dev/articles/nav-header/ レイアウト項目過多・階層不明でヘッダーが散らかる。 Sat, 20 Jun 2026 00:00:00 GMT 料金表が読めない——価格テーブルの設計 https://jimi-notes.pages.dev/articles/pricing-table/ https://jimi-notes.pages.dev/articles/pricing-table/ レイアウトプランの差と推しが伝わらない料金表。 Sat, 20 Jun 2026 00:00:00 GMT チェック類が安っぽい——トグル/チェック/ラジオ https://jimi-notes.pages.dev/articles/toggle-checkbox-radio/ https://jimi-notes.pages.dev/articles/toggle-checkbox-radio/ 細部選択UIの当たり判定や状態表現が雑。 Sat, 20 Jun 2026 00:00:00 GMT 重なりがバグる——z-indexとレイヤー管理 https://jimi-notes.pages.dev/articles/z-index-stacking/ https://jimi-notes.pages.dev/articles/z-index-stacking/ レイアウト z-indexを場当たりで盛って破綻する。 Sat, 20 Jun 2026 00:00:00 GMT