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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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