週刊Webテク通信

2021年7月第3週号1位は、ユーザー体験の原則を5つ紹介、気になるネタは、東京駅などの屋内を「Googleマップ」ナビする新機能--JR東日本の17駅から順次提供へ

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

1. 5 User Experience Principles to Help Guide Your Workhttps://www.uxpin.com/studio/blog/heuristic-evaluation-design/

ユーザー体験の原則をまとめた記事です。

  1. ユーザーは自分がどこにいるかを知っている必要がある
  2. ユーザーインターフェイスを一貫性があり美しいものにする
  3. 読む、待つ、暗記する必要性を減らす
  4. エラーを防ぎ、アクションは取り消しできるようにする
  5. 経験豊富なユーザーのための機能を提供し、新規ユーザーにも配慮する
図1 ユーザー体験の原則を5つ紹介
図1 ユーザー体験の原則を5つ紹介

2. Design Trend: Gaussian Blur | Design Shackhttps://designshack.net/articles/trends/gaussian-blur/

半透明のすりガラスのような効果を使ったグラスモーフィズムや背景ボケなど、ガウスぼかしが使われたWebデザインについて解説しています。

  • ガウスぼかしとは何か
  • デザイントレンドの特徴
  • ガウスぼかしを使う7つの方法
  • ガウスぼかしのツールと情報源
図2 Webデザインで流行しているガウスぼかしについて
図2 Webデザインで流行しているガウスぼかしについて

3. 10 CSS & JavaScript Snippets for Creating the Parallax Scrolling Effecthttps://speckyboy.com/css-javascript-parallax-scrolling/

視差スクロール効果を作成するためのCSS&JavaScriptのコード集です。

CSSだけで実現したもの、背景の視差アニメーション、横スクロールなどもありました。

図3 視差スクロール効果のスニペット集
図3 視差スクロール効果のスニペット集

4. 3 Essential Design Trends, July 2021 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/07/3-essential-design-trends-july-2021/

2021年7月のデザイントレンドをまとめています。

  1. 配色が面白いモノトーンのカラーパレット
  2. ブルータリズム風で白黒の配色
  3. 未来的な顔

3はAIの生成した顔やサイボーグ風に加工された顔写真などのことですが、例として日本のサイトも取り上げられていました。

図4 2021年7月のデザイントレンド3つ
図4 2021年7月のデザイントレンド3つ

5. Essential CSS concepts every designer should know | by Reinoud Schuijers | Jul, 2021 | UX Collectivehttps://uxdesign.cc/essential-css-concepts-every-designer-should-know-f8295497c5ae

CSSの重要な概念について、アニメーションを使った図解で解説した記事です。

  1. 親と子
  2. マージン(パーソナルスペース)
  3. パディング(毛皮)
  4. フレックスボックス(分布)
  5. 相対と絶対

3のパディングを毛皮のコートに例えるのは面白いですね。

図5 CSSの重要な概念を図解で解説
図5 CSSの重要な概念を図解で解説

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

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

Notion Charts - Customizable Charts from your Notion Tableshttps://notioncharts.io/

Notion ChartsはNotionに埋め込めるグラフを作れるサービスです。Notionで作ったデータベースを元に、様々なグラフを生成できます。

Notionのアカウントと連携して、データベースを選択するだけでグラフを作れます。円グラフ、棒グラフ、線グラフ、レーダーチャートなど9種類のグラフが選べます。URLを取得して埋め込むだけでNotionのページ上にグラフを表示できます。

データベースの数値を変更した場合にはNotion上でグラフを更新できます。ダークモードにも対応しています。無料版ではグラフは2つまで扱え、グラフの種類は5種類という制限があります。

図6 Notionのデータベースを元にグラフを作ってNotionに埋め込めるサービス
図6 Notionのデータベースを元にグラフを作ってNotionに埋め込めるサービス

おすすめ記事

記事・ニュース一覧