週刊Webテク通信

2021年4月第3週号 1位は,固定ヘッダーをより良いものにするための5つのヒント,気になるネタは,タスク管理「Trello」,公開範囲の設定ミスで名前や住所が筒抜けに--運営元が注意喚起

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

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

1. Sticky Headers: 5 Ways to Make Them Betterhttps://www.nngroup.com/articles/sticky-headers/

固定ヘッダーをより良いものにするための5つのヒントをまとめた記事です。

  1. コンテンツ部分とUI部分との比率を最大にするようヘッダー部分を小さく保つ
  2. コンテンツとヘッダーのコントラストが重要
  3. 動きは最小限で違和感なくレスポンシブなものに
  4. 一時的に固定するヘッダーを検討する
  5. 固定ヘッダーが必要かどうかを考える

1では,モバイルとデスクトップでは画面サイズが違うことから,比率で考えようと説明していました。

図1 固定ヘッダーをより良いものにするための5つのヒント

図1 固定ヘッダーをより良いものにするための5つのヒント

2. 3 Essential Design Trends, April 2021 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/04/3-essential-design-trends-april-2021/

デザイントレンドを3つ紹介しています。

  1. ほぼブルータリズム
  2. 美しいスライドスクロール
  3. タイポグラフィアニメーション

ブルータリズムはもともと建築様式で使われる用語で,わたしも完全には理解できてませんが,ここでは完全なブルータリズムは扱いがむずかしいので「ほぼ」なものがトレンドということです。

図2 デザイントレンドを3つ紹介

図2 デザイントレンドを3つ紹介

3. How to Design Better Icons. Interface iconography tips & tricks. | by Buninux | Mar, 2021 | Prototyprhttps://blog.prototypr.io/how-to-design-better-icons-869d067fddbf

より良いアイコンの作り方を解説した記事です。

  1. グリッドを設定する
  2. 一貫性を持たせる
  3. 明瞭にする
  4. 間隔を同じにする
  5. 光学的な補正
  6. 空間を埋める
  7. スタイルの組み合わせ
  8. 便利なツール

図3 より良いアイコンの作り方

図3 より良いアイコンの作り方

4. 60 Shopping Cart UI For Your Inspiration - Hongkiathttps://www.hongkiat.com/blog/shopping-cart-designs/

ショッピングカートのUIデザインのギャラリーです。

実際のサイトに使われているものではなく,デザインデータとして販売されているものをまとめています。Sketch,Figma,Adobe XDなどのファイルとしてダウンロードできます。

図4 ショッピングカートのUIデザインのギャラリー

図4 ショッピングカートのUIデザインのギャラリー

5. 15 Glassmorphism UI Design Inspirations and Examples - Super Dev Resourceshttps://superdevresources.com/glassmorphism-ui-inspiration/

グラスモーフィズムのUIデザインを多数紹介した記事です。UIに奥行きと視覚的な階層を追加し,強調したいコンテンツに焦点を当てるのに効果的と解説しています。

BehanceやDribbbleに掲載しているデザインをまとめたものでした。

図5 グラスモーフィズムのUIデザインいろいろ

図5 グラスモーフィズムのUIデザインいろいろ

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

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

Frontend Toolkithttps://www.fetoolkit.io/

Frontend Toolkitはフロントエンド関連のツールをまとめたサービスです。コードや画像ファイルの最適化など,ちょっとしたツールを同じページで利用できます。

個人的には,SVGをCSSに変換するツール,色のHEX値,RGB値を取得できるツールが地味に便利だと思いました。アイコンを探してSVGかCSSで取得できるツールもあります。

ツールを検索して絞り込んだり,並び順を変えることができます。将来的にはツールの数も増えて,ログインしてカスタマイズした状態を保存できるようになるのかもしれません。

図6 フロントエンド関連のツールをまとめたサービス

図6 フロントエンド関連のツールをまとめたサービス

今週の気になるWebネタ

タスク管理「Trello」,公開範囲の設定ミスで名前や住所が筒抜けに--運営元が注意喚起 - CNET Japanhttps://japan.cnet.com/article/35168924/

タスク管理ツールTrelloで公開された,個人情報や業務活動を含むページが検索エンジンでひっかかることを指摘した人がいて,大きな騒ぎになっていました。就活生の個人情報や採用・不採用の理由までもが「ダダ漏れ」状態だったことが注目された理由だと思います。

公開範囲の「設定ミス」と伝えているケースが多く,Trelloが危ない印象を持った人もいたようです。しかし,ユーザーが意図して「公開」にしないと公開されませんし,切り替える際にもわかりやすく説明が出るようになっています。

社内でみんながアカウントを作ってグループで共有すれば問題なかったところ,上司や先輩にアカウントを作ってもらうハードルが高く,共有リンクを使ったんだと思われます。Trelloも日本人のITリテラシーの低さを考慮し切れてなかったのかもしれませんね。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote