週刊Webテク通信

2019年5月第2週号1位は、 フォームデザインの究極ガイド、気になるネタは、MSも「パスワード定期変更は不要」表明―Win 10の次期セキュリティ基準で―

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

1. An ultimate guide to form design: How to design converting online formshttps://medium.com/swlh/an-ultimate-guide-to-form-design-how-to-design-converting-online-forms-e27b2a1d3321

フォームデザインの究極ガイドです。フォーム作成&管理サービスJotformの創業者が書いています。

以下の大分類にわけた、46項目ものテクニックを掲載しています。

  • フォームの主な構成要素
  • フォームを埋めてもらうための文章の書き方
  • フォームの心理学
  • 質問、答え、グループ化
  • 本当にその質問をする必要があるか
  • 対象者、目的、コンテキスト
  • 見た目と構造
  • エラーと完了への道
  • 支払いさせるフォーム
図1 フォームデザインの究極ガイド
図1 フォームデザインの究極ガイド

2. Mobile UX Design Principles and Best Practices | Toptalhttps://www.toptal.com/designers/mobile-ui/mobile-ux-design-principles

モバイルUXデザインの法則とベストプラクティスについてまとめています。

  • ナビゲーションは直感的に
  • デバイス間でシームレスな体験を
  • ユーザーのゴールに焦点を
  • パーソナライズ
  • 常に簡単に
  • 良い機能説明
  • 一般的な操作方法を使う
  • スピード重視
  • フィードバックを返す
  • 入力は最小限に
図2 モバイルUXデザインの法則とベストプラクティス
図2 モバイルUXデザインの法則とベストプラクティス

3. Data Visualization in Web Design: 12 Stunning Examples | Design Shackhttps://designshack.net/articles/graphics/data-visualization-web-design-examples/

データビジュアライゼーションを使ったウェブデザインの実例を紹介しています。

データを視覚化し、アニメーションやインタラクションでわかりやすく紹介した優れた事例が揃っています。

図3 データビジュアライゼーションを使ったウェブデザインいろいろ
図3 データビジュアライゼーションを使ったウェブデザインいろいろ

4. CSS Scan - The fastest and easiest way to inspect and copy CSShttps://getcssscan.com/

表示しているページのCSSを解析するブラウザ拡張機能です。カーソルを合わせるだけで、その要素のCSSを表示でき、クリックするとコピーされます。

ブラウザのデベロッパーツールよりも手軽で簡単に使えるので、うまく使い分けると効率的だと思います。

ブラウザ拡張機能で有料のものは初めて見たんですが、ライセンスキーを入力して使うようになっていました。このページ上では無料で試せるようになっています。

図4 CSSを解析するためのブラウザ拡張機能
図4 CSSを解析するためのブラウザ拡張機能

5. 8 CSS Scroll Effectshttps://freefrontend.com/css-scroll-effects/

CSSによるスクロール効果のコーディング例を8つまとめています。

紙芝居的に1画面ずつスクロールする効果や、画面の半分ずつスクロールするものなどを紹介していました。

図5 CSSによるスクロール効果いろいろ
図5 CSSによるスクロール効果いろいろ

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

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

Tweakr - The fastest way to get visual feedback.https://www.tweakr.io/

デザインのフィードバック、デザイン校正を行うためのサービスです。画像の任意の場所にコメントを入れるよくある感じのサービスですが、素早く使えることをアピールポイントにしています。

ログイン不要ですが、画像をアップロードするとメールアドレスの入力を求められます。これは、自分の作ったページ(ワークスペース)のリンクがメールで送られてくるからでした。このリンクをデザイン校正してほしい人に送ると、誰でもログイン不要でアクセスしてコメントできます。

デザイン校正というツールの性格上、セキュリティに気をつける必要があるデータも多いと思いますが、そういう場合は別なツールを使ったほうがいいでしょう。シンプルで簡単を貫いているところがこのサービスの良さです。

図6 デザイン校正を行うためのサービス
図6 デザイン校正を行うためのサービス

おすすめ記事

記事・ニュース一覧