週刊Webテク通信

2021年7月第1週号 1位は,サインアップ/ログインのUXを良くするヒント,気になるネタは,「Chrome」のサードパーティークッキー廃止が2023年に延期

この記事を読むのに必要な時間:およそ 2 分

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

1. 15 Tips for Better Signup / Login UX (Illustrated)https://learnui.design/blog/tips-signup-login-ux.html

サインアップ/ログインのUXを良くするヒントをまとめた記事です。

  1. 最初のフィールドに自動でフォーカスを合わせる
  2. モバイル端末でのソフトウェアキーボードは入力内容に合わせたものを使用する
  3. 入力と同時にフィールドの値チェックを行う
  4. ラベルテキストをクリック可能にする
  5. パスワードを入力するときにパスワードのルールを表示する
  6. パスワードを入力するときに入力内容を見られる仕組みを用意する
  7. ボタン内のテキストでボタンを押すことの価値を明らかにする
  8. シングルサインオンの実現
  9. ユーザーが利用規約に同意したことを通知することでクリック数を節約できる(ユーザーの明示的な許可を必要としない場合)
  10. 「サインイン」「サインアップ」には異なる用語を使う(サインアップとログインなど)
  11. 「サインイン」「サインアップ」を簡単に切り替えられるようにする
  12. ユーザー名でなくメールアドレスでログインさせる
  13. 無効なパスワードを入力したユーザーに,なぜ無効なのか説明する
  14. パスワード入力に失敗した場合も入力内容はクリアせずそのままにしておく
  15. パスワードのリセット画面に移行するとき,入力済みのメールアドレスを引き継ぐ

図1 サインアップ/ログインのUXを良くするヒント

図1 サインアップ/ログインのUXを良くするヒント

2. Exploring the Use of Sticky Vertical Navigation in Web Designhttps://speckyboy.com/sticky-vertical-navbars/

縦に配置された固定ナビゲーションを使ったWebデザインの事例を紹介しています。

一部のサイトで垂直ナビゲーションが選ばれている理由は以下です。

  • コンパクトなのでヒーローセクション全体を使える
  • デスクトップとモバイルデバイスの両方での使用に適している
  • ナビゲーションが固定されることでユーザー体験を快適にする
  • ロゴや名称を常に表示することでブランドアイデンティティを高める

図2 垂直ナビゲーションを使ったWebデザインいろいろ

図2 垂直ナビゲーションを使ったWebデザインいろいろ

3. Copy & Paste CSS - Buttonshttps://copy-paste-css.com/

CSSで作られたボタンを,いろいろなサイトから集めています。

Airbnb,Spotify,Amazon,SlackなどのボタンをCSSで確認できて参考になります。

図3 CSSで作られたボタンの事例集

図3 CSSで作られたボタンの事例集

4. 24 Must-Know Graphic Design Terms | Web Design | WebFXhttps://www.webfx.com/blog/web-design/24-must-know-graphic-design-terms/

知っておくべきグラフィックデザインの用語を24個まとめた記事です。

英語ではどういう用語が使われているかの確認にもなり,英語の記事を読むときの参考になると思い紹介しました。マージン,ホワイトスペース,グリッドなどカタカナでそのまま通用する用語も多いですね。

図4 知っておくべきグラフィックデザインの用語24選

図4 知っておくべきグラフィックデザインの用語24選

5. 10 MORE Figma Tricks I Wish I Knew Earlier | by Danny Sapio | May, 2021 | UX Collectivehttps://uxdesign.cc/10-more-figma-tricks-i-wish-i-knew-earlier-1f802190e31a

Figmaのテクニックを紹介した記事です。プラグインを使うことで大変そうなことが簡単にできるパターンが多いと感じました。

Figma内でチャットができるプラグイン,等角投影法を簡単に扱うプラグインなどを紹介しています。

図5 Figmaの技を10個紹介

図5 Figmaの技を10個紹介

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

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

Convert your Google Form to a Chatbot in 1 minute - Form to Chatbothttps://formtochatbot.com/

Collect.chatはGoogleフォームで作ったフォームをチャット形式のフォームに変換するサービスです。Google Workspace Marketplaceからアドオンをインストールすると使えるようになります。

Googleフォームが,ボタンひとつで項目ごとに答えるチャット形式のページに変換されます。生成されたチャット形式のフォームは独自ページだけでなく,ページ内で小窓として開くウイジェットや,ページへの埋め込み形式も選べます。

変換したフォームは,Collect.chatのダッシュボードからデザインをカスタマイズできます。無料で使えますが,月に50以上の回答を得る場合は有料プランが必要になるようです。

図6 Googleフォームをチャット形式のフォームに変換するサービス

図6 Googleフォームをチャット形式のフォームに変換するサービス

今週の気になるWebネタ

「Chrome」のサードパーティークッキー廃止が2023年に延期 - CNET Japanhttps://japan.cnet.com/article/35172922/

GoogleはChromeブラウザでのサードパーティークッキーのサポートを,2022年までに段階的に廃止する計画を延期しました。新たなスケジュールでは2023年中盤~終盤になるそうです。かなり先ですね。

プライバシーを維持しつつ,サードパーティークッキーに代わる手段を開発してテストするGoogle側の時間がまだ必要で,その分広告業界側が対応する時間の猶予もできたということなのでしょう。

Chrome以外のブラウザも足並みを揃えないと,ややこしいことになりそうで気になります。英国の競争・市場庁(CMA)が関与しているなど,外部と調整することも多いようです。なんとなく経緯をニュースで目にしていましたが,大変そうなプロジェクトなことは伝わってきました。

著者プロフィール

アシカガコウジ

フリーのWebデザイナー&ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール(ソフトウェア)の案内,デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote