のの | コーディング @nono__design X Profile

のの | コーディング

@nono__design

Followers

42

Following

19

Media

5

Statuses

184

Joined January 2025

Don't wanna be here? Send us removal request.

のの | コーディング

@nono__design

12 days

／.ヘッダー変えました！😀.＼. 今までの水色カラーから.大きくイメチェンしました！. figmaで作りました✨. もしよかったら、.@nono__design.ヘッダー見にきてください😊.

0

1

のの | コーディング

@nono__design

9 hours

DAY167：メディアクエリは段階的に切り替え. 📌 いきなり大きく変えず徐々に調整. 🔹 スマホ→タブレット→PC と段階的に.🔹 過度な切り替えはパフォーマンス低下の元. ✅ ユーザーの環境に自然に馴染む設計. #cssコードは静かに咲く.#Web制作 .#codejump .#フロントエンド .#css.

0

のの | コーディング

@nono__design

1 day

DAY166：min-width と max-width で幅の振り幅をコントロール. 📌 伸びすぎ・縮みすぎを防ぐ. 🔹 レイアウト崩れの原因を事前にガード.🔹 コンテナのサイズ感を意識しよう. ✅ デバイスによらず美しい見た目. #cssやさしく整える日々.#web制作 .#codejump .#フロントエンド .#css.

0

2

のの | コーディング

@nono__design

2 days

DAY165：フォームの自動補完・検証を活用. 📌 ユーザーの入力負担を減らすために. 🔹 autocomplete 属性を適切に設定.🔹 pattern や required で入力チェックも. ✅ 快適＆正確な入力を促すCSS設計と連携. #cssやさしく整える日々.#web制作 .#codejump .#フロントエンド .#css.

0

2

のの | コーディング

@nono__design

3 days

DAY164：入力欄のプレースホルダーは補助的に. 📌 重要な説明はラベルに任せて. 🔹 プレースホルダーはあくまで例や補足に.🔹 消えるテキストに頼りすぎないことがコツ. ✅ 誰でも迷わず使えるフォームを目指そう. #cssやさしく整える日々.#web制作 .#codejump .#フロントエンド .#css.

0

1

のの | コーディング

@nono__design

4 days

DAY163：エラーメッセージは見やすく・分かりやすく. 📌 入力ミスの原因を即時に伝えるのが大事. 🔹 色だけに頼らずアイコンやテキストも使う.🔹 aria-live 属性でスクリーンリーダー対応. ✅ ユーザーストレスを減らす見せ方の工夫. #cssやさしく整える日々.#web制作 #codejump .#フロントエンド #css.

0

4

のの | コーディング

@nono__design

5 days

DAY162：フォーカスの見た目をカスタマイズ. 📌 focus-visible を使って本当に必要な時だけ強調. 🔹 デフォルトの青枠をシンプルに調整.🔹 アクセシビリティを損なわずデザイン性もUP. ✅ キーボード操作のユーザーフレンドリー化. #cssやさしく整える日々.#web制作 .#codejump .#フロントエンド .#css.

0

3

のの | コーディング

@nono__design

6 days

うわぁぁぁ！.めっちゃ便利！！！.背景を削除したいやつよくあります.めっちゃ使える✨.

もち | デザイナー・CDO・起業家

@makiko_sakamoto

8 days

うおおおお激アツ！！！.Figmaで複数枚の画像の背景を一括で削除できるようになった！！これはずっと待ってたやつ！！最高すぎる✨. #Figmaアップデート.

0

1

のの | コーディング

@nono__design

6 days

DAY161：フォームのラベルは必ずセットで. 📌 目が不自由な方も使いやすくするための基本. 🔹 label 要素で入力と説明を結びつける.🔹 for 属性で対応付けを忘れずに. ✅ 誰にでも使いやすいフォームは基本から. #cssコードは静かに咲く.#Web制作 .#codejump .#フロントエンド .#css.

0

6

のの | コーディング

@nono__design

7 days

DAY160：フォームのレスポンシブ対応. 📌 小さい画面でフォームが使いにくい…. 🔹 幅は100%、パディングは調整してタップしやすく.🔹 media query でラベルを上に積むスタイルに切替え. ✅ スマホでも快適フォームを提供. #cssコードは静かに咲く.#Web制作 .#codejump .#フロントエンド .#css.

0

2

のの | コーディング

@nono__design

8 days

DAY159：フォーム入力欄の揃え方. 📌 ラベルと入力欄の高さが合わない…. 🔹 flexbox でラベルと入力を横並び.🔹 line-height と padding のバランスを調整. ✅ 見た目と操作性、両方を確保. #cssやさしく整える日々.#web制作 .#codejump .#フロントエンド .#css.

0

1

のの | コーディング

@nono__design

9 days

DAY158：select ボックスのカスタム. 📌 ブラウザ依存で見た目がバラバラ…. 🔹 appearance: none; でデフォルトをオフに.🔹 アイコンやボーダーを自由にスタイリング. ✅ 統一感あるフォームを目指そう. #cssやさしく整える日々.#web制作 .#codejump .#フロントエンド .#css.

0

5

のの | コーディング

@nono__design

10 days

DAY157：ラジオボタンの使いやすさUP. 📌 小さくて押しにくいとストレスに. 🔹 大きめのクリック範囲を確保.🔹 label と連携しタップしやすく. ✅ 操作感が優先のUI設計を. #cssやさしく整える日々.#web制作 .#codejump .#フロントエンド .#css.

0

2

のの | コーディング

@nono__design

11 days

DAY156：チェックボックスの見た目整え方. 📌 そのままだとデザインが古い印象…. 🔹 appearance: none; で自由にカスタマイズ.🔹 :checked 状態で色や形を変えてみよう. ✅ 自分らしいチェックボックスに変身. #cssやさしく整える日々.#web制作 .#codejump .#フロントエンド .#css.

0

4

のの | コーディング

@nono__design

12 days

視界がひっくり返った2日間！.勇気を出してリアタイ参加、大正解‼︎.情報量がスゴっ！.凄すぎて新しい視点が次々誕生✨.フックを意識！.やっちゃってた感想引用のみはNG💦.自分の意見や解釈を添えて👍.振り返りつつ投稿に生かします！.2日間ありがとうございました。.

うさぎ｜デザイナー向けX運用のプロ

@usagi_design12

18 days

─────────.X集客短期集中講座.─────────. 大変ありがたいことに. 現在120名以上の方が参加予定です🥹. まだチケット購入できますので.駆け込みお待ちしておりますー！.

0

1

3

のの | コーディング

@nono__design

12 days

DAY155：見えないけど効果的なキーボード操作補助. 📌 タブ移動で迷子にならないために. 🔹 tabindex の適切な管理で操作の順序を制御.🔹 skip link で素早くメインコンテンツへジャンプ. ✅ 見えなくても使いやすいサイト作り. #cssやさしく整える日々.#web制作 .#codejump .#フロントエンド .#css.

0

4

のの | コーディング

@nono__design

13 days

うさぎさんの講座でめっちゃ紹介されていましたね😍.比較画像でめっちゃわかりやすくて参考になりました！.ユーザーを飽きさせない工夫大事ですね😀.

もちだ｜Webデザイナー

@mochi__creative

23 days

／.参考デザインの.ここを活かしてます💡.＼. 歯科クリニックのホームページ編です🦷.「一目でわかるようなブランディングの確立」.が目的、コンセプトでもあったので. ・ロゴの一部をあしらいとして使う.・全体カラーもロゴを意識して選定. 上記のアイデアも別の参考デザインから

1

0

のの | コーディング

@nono__design

13 days

DAY154：誰にでも分かりやすい色使い. 📌 コントラストが低いと読みづらい. 🔹 文字と背景は最低4.5:1のコントラスト比を.🔹 filter: grayscale(100%) でモノクロでも判別可能かチェック. ✅ 全てのユーザーに配慮した配色を. #cssコードは静かに咲く.#Web制作 .#codejump .#フロントエンド .#css.

0

2

のの | コーディング

@nono__design

14 days

1日目リアタイ参加できました。.プロフ文だけ更新しました😮.明日も楽しみです.

うさぎ｜デザイナー向けX運用のプロ

@usagi_design12

14 days

一日目終了！70人以上の方がリアタイで参加してくださりました😌.計3.5時間で、喋りすぎてもうヤバいです. プロフィールの生添削、数えてみたら50件近くありました🤣(アーカイブに全て残ってます). 明日も参加される方よろしくお願いします！！！！！！！.

1

0

1

のの | コーディング

@nono__design

14 days

DAY153：ARIA属性で意味を補う. 📌 HTMLだけで伝わらない意味を補強. 🔹 aria-label, aria-describedby で要素の意味や説明を追加.🔹 ユーザーにやさしいマークアップを心がけよう. ✅ アクセシビリティはマークアップから. #cssコードは静かに咲く.#Web制作 .#codejump .#フロントエンド .#css.

0

3