週刊Webテク通信

2021年3月第4週号1位は、パンくずリストをデザインするヒント、気になるネタは、グーグル、「Chrome」リアルタイムの自動字幕起こし機能

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2021年3月15日~21日の間に見つけた記事のベスト5です。

1. Web Usability: Breadcrumbs Design Tips and Practiceshttps://blog.tubikstudio.com/web-usability-breadcrumbs-design/

パンくずリストをデザインするヒントをまとめた記事です。パンくずリストの話題だけでこれだけのコンテンツになるんだと感心するほど充実しています。

パンくずリストのデザイン手法として、以下の項目で解説していました。

  • メインのナビゲーションにはしない
  • H1見出しの上に配置する
  • パンくずリストの経路をトップページへのリンクから始める
  • 現在位置をクリックできないように見せる(あるいは表示しない)
  • 要素を明確に区切る
  • 読みやすさと余白に気を配る
  • 操作の履歴ではなくサイトの階層構造を示す
  • 多すぎる要素で混乱させない
  • レイアウト上でパンくずリストを視覚的に強調しない
  • モバイル環境で複数行になるパンくずリストを使わない
  • 階層構造がないか単純なウェブサイトにパンくずリストを使わない
図1 パンくずリストをデザインするヒント
図1 パンくずリストをデザインするヒント

2. UI & UX Micro-Tips: Volume Three. | Marc Andrewhttps://marcandrew.me/ui-ux-micro-tips-volume-three/

UIとUXのちょっとしたヒントをまとめています。

  1. より非公式な口調にするには、すべての文字を小文字にする
  2. 文字の太さ、サイズ、色を使って階層構造を示す
  3. 暗い背景に明るい文字のときは読みやすくするためフォントを太くする
  4. 狙った通りの感情になってもらうためのフォント選び
  5. 複数のフォントを使う場合は最大2つのルールを守る
  6. すべて大文字+文字の間隔=読みやすさ
図2 UIとUXのちょっとしたヒント
図2 UIとUXのちょっとしたヒント

3. Basic Do's and Don'ts of Effective Website Design - Design4Usershttps://design4users.com/dos-and-donts-website-design/

効果的なウェブデザインのためにやるべきこととやってはいけないことを紹介した記事です。

レイアウト/タイポグラフィ/コンテンツ/ホワイトスペース/ナビゲーション/画像の最適化/背景のコントラスト/速度の最適化の項目ごとにやるべきこととやってはいけないことをまとめています。

図3 効果的なウェブデザインのためにやるべきこととやってはいけないこと
図3 効果的なウェブデザインのためにやるべきこととやってはいけないこと

4. Evergreen CSS Flex Layouts With Live Demos | webup.org/bloghttps://webup.org/blog/evergreen-css-flex-layouts-with-demos/

CSSフレックスボックスのデモ付きガイドです。CodePenのサンプルコードを埋め込んでいるので、その場で確認できます。

レイアウトのパターンを9種類掲載していますが、今後も追加していくそうです。

図4 CSSフレックスボックスのデモ付きガイド
図4 CSSフレックスボックスのデモ付きガイド

5. Printableshttps://printables.craftwork.design/

プリントアウトして使う、アプリの画面をスケッチするためのテンプレート集です。

iPhoneやGALAXY、PIXELなどのデバイス用の用紙をPNG、JPG、PDFでダウンロードできます。

図5 アプリの画面をスケッチするためのテンプレート集
図5 アプリの画面をスケッチするためのテンプレート集

そのほか、最近の記事の中から、気になるニュース記事を紹介します。

先週の気になるWebサービス

Attract more listeners with personalized Clubhouse pages 🚀 | twisohttps://clubhouse.twiso.co/

TwisoはClubhouseのroomを紹介するページを作るためのサービスです。roomのリンクをもとに3種類のデザインのページを生成します。

類似のサービスとしてClubLinkがありますが、ClublinkがSNSでシェアするプレビュー画像を重視しているのに対し、Twisoは生成した単独ページのデザイン性をアピールポイントにしているようです。

残念ながらSNSでシェアするときのプレビュー画像は日本語が文字化けするのですが、実際のページは文字化けしませんでした。また、時刻が日本時間ではなくPST(アメリカ西海岸時間)表記になってしまいます。

図6 Clubhouseのroom紹介ページを作るサービス
図6 Clubhouseのroom紹介ページを作るサービス

おすすめ記事

記事・ニュース一覧