週刊Webテク通信

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

ネットで見かけた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 フロントエンド関連のツールをまとめたサービス

おすすめ記事

記事・ニュース一覧