以下の内容はhttps://ozaki25.hatenadiary.jp/entry/2025/07/12/191047より取得しました。


「第45回リクリセミナー「帰ってきたWebデザイントレンド & A11y Osaka Meetup」」に参加してきました

感想

  • アクセシビリティの話目当てでしたがデザイントレンドも120分あっという間で大阪まで来たかいがありました

帰ってきたWebデザイントレンド

原 一浩さん(Kansock.Industries)
矢野りんさん(株式会社LegalOn Technologies)
坂本邦夫さん(カラー&Webデザイン フォルトゥナ)

海外Web編

  • 素材感
    • AppleがLiquid Glassを発表した
    • くもりガラス
    • 反射(くもりガラス的なのが反転)
  • ジオメトリックパターン
    • 幾何学模様
    • 角丸と四角で作った形
  • ホバーサムネイル
    • ホバーするとマウスのところに画像が浮いてついてくる

スタートアップ編

  • オルタナタブ
    • タブに見えないけどタブ
    • ボタンと思いきやタブ
    • メガメニューの中にタブ
  • フッターデカ文字
    • フッターにでかいロゴ
    • フッターにでかい文字

AI関連編

  • いきなりアプリ
    • ChatGPTとかみたいに説明とかなしにいきなり使う
    • いきなり出てるのにアカウントないと使えない
      • 何に使えるか説明ないやつも
    • スクロールしてくとそこに説明があるパターンも
  • サービス模式図
    • 何ができるサービスか難しいものが多い
    • 実行してる様子を見せる
  • 配色傾向
    • ダーク+レインボーパープル
    • ベージュ系

グローバル500編

  • アクセシビリティツール
    • オーバーレイとか独自読み上げツール
    • グローバルナビゲーションなど目立つところに入るように
  • ルーセル
    • 1ページにいくつもある
    • マーキーとセットも多い

上場企業編

  • ヘッダー
    • グローバルナビゲーションに独自の情報を載せる
    • メガメニュー
  • フッター
    • フッターの量が多くてタブで切り替えられる
    • スクロールしてってフッターにオチ
  • 早わかり
    • 情報を短時間で理解できるコンテンツ
    • グロナビに「すぐわかる〜」

県市町村編

  • 緊急情報
    • 昔は画面内にそういうエリアがあった
    • ちょっと前から緊急情報モードが出てきた
    • 緊急情報ボタンが最近出てきた
      • ボタン押すと開いて出てくる
  • ここだよマップ
    • 自治体がどこにあるかの説明
    • 場所だけじゃなくて人口とかの説明も
  • フッター
    • フッター山
  • ページID
    • ページIDでの検索
    • 印刷物からたどる時とか
  • 名産特産モチーフ

ウェブアクセシビリティmeetup

植木真さん(株式会社インフォアクシア
板垣 宏明さん(NPO法人アイ・コラボレーション神戸)
Tenさん(合同会社Ledesone(レデソン))

  • ホバーサムネイル
    • 画面表示を拡大している人がいる
    • マウスにサムネイルが追従してしまうからサムネイルしか見えなくなる
      • escで蹴るなどの対応があるといい
    • それ以外でもホバーでの反応は画面を覆ってしまうので注意
  • 緊急情報
    • デフォルト表示か閉じておくか
    • 本当に緊急な時は表示しておかないと気付けない人もいる
  • スクロール量は少なくて済むほどいい
    • 操作が大変な場合がある
    • 1画面に収まらない大きな図で小さなスクロールを繰り返させないといけない
  • グローバルナビゲーションは上か横に固定してほしい
    • 拡大したときに画面を占有しすぎないように
  • クリック範囲は大きいほどいい
    • 細かいマウス操作が難しいときに押しやすいように
    • 文字だけじゃなくてブロック全体を押せるとか
  • フッター
    • 小さいリンクがたくさん並んでるとクリックが大変
    • 24x24が最低限のターゲットサイズ
  • カードUI
    • カード同士の境目が分かりづらくならないように
    • 余白だけでなく枠や線で明確にするといい
    • ディスレクシアの人など読みづらいケースがある
  • 凝ったアイコン
    • 文字を読んで理解するのが難しい人にアイコンがあるのは役立つ
    • 文字があることで嬉しい人もいるので併用するといい
  • 文字は画像じゃなくてテキストで
    • フォントや行間などを自分用にカスタマイズするケースがある
  • 漢字よりもひらがな
    • 漢字だけだとかたまりに見えて読みづらいことがある
    • 口座開設 -> 口座をひらく など伝わりやすいことがある
  • 金額や日付を記号ではなく漢字表記で
    • 1/30より1月30日
    • ¥100より100円
  • アクセシビリティオーバーレイ
    • ルーラー
      • 定規が出てきて行の読み飛ばしを防げる
    • スクリーンマスク
      • ルーラーみたいだけどカーソルの上下以外をマスクする
      • 読んでる行以外をマスクできるので気が散らない
    • ただしオーバーレイを入れてすべて解決なんてことはないので要注意



以上の内容はhttps://ozaki25.hatenadiary.jp/entry/2025/07/12/191047より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14