週刊Webテク通信

2021年10月第3週号 1位は,プロトタイプによってユーザーエクスペリエンスを最適化するヒント,気になるネタは,情報共有ツール「notion」日本語対応 日本ユーザー急増で

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

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

1.What Is a Prototype: A Guide to Functional UXhttps://www.uxpin.com/studio/blog/what-is-a-prototype-a-guide-to-functional-ux/

プロトタイプとは何かを定義し,プロトタイプによってユーザーエクスペリエンスを最適化するヒントを紹介しています。プロトタイプとは「最終製品のシミュレーションまたはサンプルバージョンで,UXチームが公開前のテストに使用するもの」と定義していました。

プロトタイピングの方式としては,紙,デジタル,HTMLの3種類に分類しています。

また,プロトタイピングのプロセスとしては以下の4つに分けて解説していました。

  • 紙 →低忠実度・デジタル →高忠実度・デジタル →コード
  • 紙 →低忠実度・デジタル →コード
  • HTMLプロトタイピング →コード
  • 紙 →UXPin Mergeを使った高忠実度プロトタイピング →コード

UIデザイン&プロトタイピングルールのUXPinによる記事なので,UXPinを使うように誘導している面もありますね。

図1 プロトタイプとは何か&プロトタイプによってユーザーエクスペリエンスを最適化するヒント

図1 プロトタイプとは何か&プロトタイプによってユーザーエクスペリエンスを最適化するヒント

2.Smart CSS Solutions For Common UI Challenges — Smashing Magazinehttps://www.smashingmagazine.com/2021/10/modern-css-solutions-for-common-problems/

UIの課題を解決するCSSのテクニックをまとめて紹介しています。複数のCSS関連の記事を取り上げていて,見たことのある記事も多かったです。

  • CSSで美しい影をデザインする方法
  • CSSで紙を切り抜いたような効果を作る方法
  • CSSで粒子の粗いグラデーションを作る方法
  • CSSで複数行のテキストにひとつながりのグラデーションの背景を入れる方法

などの記事を紹介していました。

図2 UIの課題を解決するCSSのテクニックいろいろ

図2 UIの課題を解決するCSSのテクニックいろいろ

3.Expandable Sections Within a CSS Grid | CSS-Trickshttps://css-tricks.com/expandable-sections-within-a-css-grid/

CSSグリッドを使ったテクニックを解説した記事です。グリッドのセルのひとつにあるボタンを押すと,そのセルの真下に全幅でセルが開く動作をレスポンシブで実現します。

最終的な完成版ではJavaScriptを使っていますが,メディアクエリもJavaScriptもなしで実装できるとのことでした。CSSも短いです。

図3 CSSグリッドを使ったテクニックを解説

図3 CSSグリッドを使ったテクニックを解説

4.Skeleton Screen Loading Animation using HTML & CSS - DEV Communityhttps://dev.to/shantanu_jana/skeleton-screen-loading-animation-using-html-css-1ec3

一旦骨組みだけが表示されて,画像などの読み込みが終わると差し替わる「スケルトンローディング」のアニメーションを実装する方法です。

骨組み用の背景色とアニメーションを3秒間表示して,そのあとJavaScriptでアニメーションをオフにして本来の画像とテキストを表示します。

図4 スケルトンローディングのアニメーションの実装方法

図4 スケルトンローディングのアニメーションの実装方法

5.20+ Best Adobe XD Website Templates (Free & Pro) | Design Shackhttps://designshack.net/articles/inspiration/adobe-xd-website-templates/

グラフィックツール用のWebサイトのテンプレートを多数紹介しています。記事タイトルにはAdobe XDとありますが,多くのテンプレートはXDだけでなくSketch,Figma,Photoshop用の素材がセットになっています。

紹介しているテンプレートは,素材サイトEnvatoのサブスクリプション制サービスEnvato Elementsのものです。

図5 グラフィックツール用のWebサイトのテンプレートいろいろ

図5 グラフィックツール用のWebサイトのテンプレートいろいろ

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

先週の気になるツール/サービス

Free forms & site builder Zapofhttps://zapof.com/

Zapofは計算機能などを持つ高度なフォームを作れるサービスです。スプレッドシートの機能がフォームに組み合まれているので,オンライン販売などに重宝しそうです。

あらかじめ用意してある豊富なテンプレートをベースにフォームを作成できます。商品リストの表に欲しい個数を入力していくと合計金額が表示され,発送先情報などを入力して送信するシンプルな注文フォームが作れます。決済サービスとしてStripe,PayPalと連携できるようです。

多言語化はされてませんが,日本語の入力は問題ありません。しかし,ちょっと触ってみただけですが,通貨を円にすることはできなそうでした。このサービスでできる程度の注文フォームのニーズは結構ありそうなので,日本語対応に期待したいです。

図6 計算機能などを持つ高度なフォームを作れるサービス

図6 計算機能などを持つ高度なフォームを作れるサービス

今週の気になるWebネタ

情報共有ツール「notion」日本語対応 日本ユーザー急増で - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2110/13/news100.html

今年中の日本語化を公言していたNotionが,ついに日本語対応しました。⁠Setting & Members」「Language & Region」のところで「日本語(ベータ⁠⁠」が選べます。

Webサイトもフッタの左下の言語切り替えで「日本語」が選べるようになっていました。しっかりと日本語化されており,ユーザー事例もスマートニュース,サイバーエージェントなど日本の企業のものです。

日本でのNotion人気が盛り上がっているのは感じていますし,日本のデイリーアクティブユーザー数は今年8月に前年同月比の約4倍に増加したそうです。なお,日本語翻訳はベータ状態ですが,Notion自体はベータ版ではないので誤解なきよう一応説明しておきます。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote