週刊Webテク通信

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

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

ネットで見かけた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に埋め込めるサービス

今週の気になるWebネタ

東京駅などの屋内を「Googleマップ」がナビする新機能--JR東日本の17駅から順次提供へ - CNET Japanhttps://japan.cnet.com/article/35173442/

GoogleマップのARナビゲーション機能が屋内でも使えるようになります。AIがカメラの映像とストリートビューの画像を比較することで,GPSの届きにくい場所でも使えるそうです。

空港・駅での乗り換え,ショッピングモール内の案内などに便利とのことで,まずはJR東日本の17駅からスタートします。複雑な構造の新宿駅での乗り換えや,品川駅の駅ナカグルメのお店を探すのに便利そうですね。

先日初めての場所に出かけたとき,バスを降りてGoogleマップを立ち上げると周囲の写真を撮るよう指示されました。その写真を元に場所や向きを特定して,そのあとはARを利用して目的地までナビしてくれるライブビュー機能でした。今回紹介したのは,そのライブビューの屋内版「インドアライブビュー」という機能です。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote