ネットで見かけたWebテク
1. Web Usability: Breadcrumbs Design Tips and Practiceshttps://blog.tubikstudio.com/web-usability-breadcrumbs-design/
パンくずリストをデザインするヒントをまとめた記事です。パンくずリストの話題だけでこれだけのコンテンツになるんだと感心するほど充実しています。
パンくずリストのデザイン手法として、
- メインのナビゲーションにはしない
- H1見出しの上に配置する
- パンくずリストの経路をトップページへのリンクから始める
- 現在位置をクリックできないように見せる
(あるいは表示しない) - 要素を明確に区切る
- 読みやすさと余白に気を配る
- 操作の履歴ではなくサイトの階層構造を示す
- 多すぎる要素で混乱させない
- レイアウト上でパンくずリストを視覚的に強調しない
- モバイル環境で複数行になるパンくずリストを使わない
- 階層構造がないか単純なウェブサイトにパンくずリストを使わない
2. UI & UX Micro-Tips: Volume Three. | Marc Andrewhttps://marcandrew.me/ui-ux-micro-tips-volume-three/
UIとUXのちょっとしたヒントをまとめています。
- より非公式な口調にするには、
すべての文字を小文字にする - 文字の太さ、
サイズ、 色を使って階層構造を示す - 暗い背景に明るい文字のときは読みやすくするためフォントを太くする
- 狙った通りの感情になってもらうためのフォント選び
- 複数のフォントを使う場合は最大2つのルールを守る
- すべて大文字+文字の間隔=読みやすさ
3. Basic Do's and Don'ts of Effective Website Design - Design4Usershttps://design4users.com/dos-and-donts-website-design/
効果的なウェブデザインのためにやるべきこととやってはいけないことを紹介した記事です。
レイアウト/
4. Evergreen CSS Flex Layouts With Live Demos | webup.org/bloghttps://webup.org/blog/evergreen-css-flex-layouts-with-demos/
CSSフレックスボックスのデモ付きガイドです。CodePenのサンプルコードを埋め込んでいるので、
レイアウトのパターンを9種類掲載していますが、
5. Printableshttps://printables.craftwork.design/
プリントアウトして使う、
iPhoneやGALAXY、
そのほか、
- 話題の音声SNS
「Clubhouse」、 仏プライバシー保護機関が調査 - CNET Japan
規制当局の介入を求めるオンラインの請願書には2万5000件以上の署名が寄せられているそうです - Zホールディングス、
外部有識者による特別委員会を設置 LINEのデータ管理問題で - ITmedia NEWS
LINEのZホールディングスとの経営統合でいろいろ表沙汰になっているわけですが、きちんと対応してイメージを良くする対策を進めているわけですね - Facebook、
iOS版とAndroid版でも物理セキュリティキーに対応 - CNET Japan
Facebookにログインするための二段階認証に、物理的なセキュリティキーを使えるようになります
先週の気になるWebサービス
Attract more listeners with personalized Clubhouse pages 🚀 | twisohttps://clubhouse.twiso.co/
TwisoはClubhouseのroomを紹介するページを作るためのサービスです。roomのリンクをもとに3種類のデザインのページを生成します。
類似のサービスとしてClubLinkがありますが、
残念ながらSNSでシェアするときのプレビュー画像は日本語が文字化けするのですが、