週刊Webテク通信

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

ネットで見かけた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 計算機能などを持つ高度なフォームを作れるサービス

おすすめ記事

記事・ニュース一覧