ネットで見かけた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つのページにまとめる
• 変わった方法を使わない

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

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は納得できます。クライアントは色のことに口出ししがちなので、最初の段階で色の議論にならないようにするためですね。

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については「高い忠実度でアニメーションをプロダクトに組み込むことの優先度が高い場合のためのもの。そのコード生成の品質は比類のないものです」とのことでした。

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

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

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

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」が英語の動詞化しているとは聞いていましたが、デジタル系の記事にまで出てきたのが面白くて取り上げました。

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

• ルーターの再発明を狙うAmazonの野心 | TechCrunch Japan
  メッシュルーター企業を買収したのはEcho製品拡販のためとのこと
• 「Gmail」の右クリックに新機能--返信や転送、検索などが可能に - CNET Japan
  そもそもGmailで右クリックが使えることを知らなかったんですが、機能強化されたニュースです
• プレゼンや会議で便利に使えるプロジェクター用ソフトウェア「Webからプロジェクション⁠」⁠、エプソンより - 週刊アスキー
  会社内のプロジェクターが一元管理され、ブラウザから選ぶだけでプロジェクタに接続できるとのことで便利そうです

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

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

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

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

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