週刊Webテク通信

2019年2月第4週号 1位は,パスワードマネージャーとうまく連動するログインフォームを作るヒント,気になるネタは,GoogleマップのARナビ機能,一部ユーザー向けにテスト中。スマホをかざして矢印に従えば目的地に着く便利さ

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

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

1. Don’t Get Clever with Login Forms | Brad Frosthttp://bradfrost.com/blog/post/dont-get-clever-with-login-forms/

1PasswordやChromeのパスワードマネージャーなどと,うまく連動するログインフォームを作るヒントをまとめた記事です。

やってはいけないこと
  • ログインフォームをモーダルウィンドウにしない
  • フィールドを隠さない
  • マジックリンクに傾倒しない
  • ログインを複数ページに分割しない

マジックリンクはSlackなどが使っている,ログインのための特別なURLを都度メールで送るログイン手段です。

やるべきこと
  • ログイン専用のページを持つ
  • すべての必須フィールドを最初から表示する
  • すべてのフィールドを1つのページにまとめる
  • 変わった方法を使わない

昔ながらのシンプルで簡潔で予測可能なログインフォームが良いということでした。

図1 パスワードマネージャーとうまく連動するログインフォームを作るヒント

図1 パスワードマネージャーとうまく連動するログインフォームを作るヒント

2. 4 Reasons Why You Should Design Without Color Firsthttps://medium.com/devsdesign/4-reasons-why-you-should-design-without-color-first-c0e38180f689

デザインの最初の段階では色を使うべきではない理由をまとめています。

  1. レイアウトと空白に焦点を当てられる
  2. クライアントが正しい質問をするようになる
  3. デザインをクリーンにできる
  4. 一貫性を持たせられる

とくに2は納得できます。クライアントは色のことに口出ししがちなので,最初の段階で色の議論にならないようにするためですね。

図2 デザインの最初の段階では色を使うべきではない理由

図2 デザインの最初の段階では色を使うべきではない理由

3. Choosing The Right UI Animation Tool – MovingUI – Mediumhttps://medium.com/movingui/choosing-the-right-ui-animation-tool-91c20c8197f2

UIのためのアニメーション作成ツールを比較し,選ぶための参考となる記事です。

取り上げているツールは以下の5つ。

  • Adobe After Effects +Lottie
  • Flow
  • Haiku
  • Kite Compositor
  • Sketch + Timeline Plugin

Flowによる記事ですが,他社のツールについても良い点,悪い点を詳細にまとめています。

最後にそれぞれのツールの特徴をまとめていますが,Flowについては「高い忠実度でアニメーションをプロダクトに組み込むことの優先度が高い場合のためのもの。そのコード生成の品質は比類のないものです」とのことでした。

図3 UIアニメーション作成ツールの比較

図3 UIアニメーション作成ツールの比較由

4. 21 CSS Hotspotshttps://freefrontend.com/css-hotspots/

昔で言うところのクリッカブルマップのように,画像内の任意の箇所をクリックしてアクションを起こすコーディングの例をまとめています。

画像をレスポンシブで扱うことが普通になって作りにくくなった効果ですが,必要となるケースもあるので,チェックしておくと便利そうです。

図4 CSSによるクリッカブルマップ的な効果の作例いろいろ

図4 UIアニメーション作成ツールの比較由

5. “Marie Kondo” your Sketch files with these plugins – UX Collectivehttps://uxdesign.cc/marie-kondo-your-sketch-files-with-these-plugins-bcbe9321ea8e

Sketchファイルを「Marie Kondo」する,つまり「片付ける,整理する」ためのプラグインを紹介しています。

レイヤーやアートボードの名前をバッチ処理で付け替えるもの,スタイルやシンボルを整理するものなどがあります。

「Marie Kondo」あるいは「Kondo」が英語の動詞化しているとは聞いていましたが,デジタル系の記事にまで出てきたのが面白くて取り上げました。

図5 Sketchファイルを整理するプラグインの紹介

図5 Sketchファイルを整理するプラグインの紹介

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

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

Moose - Photo Creatorhttps://photos.icons8.com/creator

人物,背景などを選んで組みあわせることで,コラージュ写真が作れるサービスです。いかにもストックフォト,しかもアメリカンという感じの素材が多いので,日本で使うには用途は限られそうではあります。

モデル(人物,ペットなど⁠⁠,オブジェクト(パソコン,文具,コップ,果物,インテリアなど⁠⁠,背景(おしゃれな屋内中心,壁や海辺なども⁠⁠,テキストを組み合わせて画像が作れます。素材は検索もできます。

移動,サイズ変更,重ね順の変更なども直感的に作業できて使い勝手は良いです。キャンバスサイズは4:3,16:9などのほか,InstagramのストーリーやFacebookのカバーなども選べます。PNGファイルは無料でダウンロードでき,有料でレイヤーに分かれたPhotoshopファイルも入手できます。

図6 コラージュ写真が作れるサービス

図6 コラージュ写真が作れるサービス

今週の気になるWebネタ

GoogleマップのARナビ機能,一部ユーザー向けにテスト中。スマホをかざして矢印に従えば目的地に着く便利さ - Engadget 日本版https://japanese.engadget.com/2019/02/10/google-ar/

GoogleマップのARナビゲーション機能がテスト中だそうです。カメラで写した風景の中に道案内の矢印が表示され,方向音痴の人でも迷わなそうです。

一見,技術的に簡単そうに思えますが,GPSによる位置情報もデバイスの向きの情報も誤差がある可能性があるため,かなり高度なことをしているとのこと。カメラの映像とストリートビューの写真を比較するときに,ストリートビュー撮影時からの時間経過の影響を受けないようディープラーニングで変化しない部分を見極めるなど,いろんな技術を組み合わせています。

ずっとスマホの画面を見ながら歩いていると危険なので,曲がり角などのポイントでだけ指示が表示され,長い間スマホをかざしていると警告が出るそうです。仕組み的にはストリートビューに対応している国では適用できそうなので,日本で使えるようになるのが楽しみです。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/