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

1. 5 Secrets of Image-Rich Websites | Webdesigner Depothttps://www.webdesignerdepot.com/2018/10/5-secrets-of-image-rich-websites/

画像を豊富に使ったウェブサイトを設計する際に、気をつけるべき5つの事項を詳しく説明しています。

1. パフォーマンスを向上させる
   （⁠CSSスプライトを使う／画像を遅延読み込みする／先に画像が読み込まれる枠だけ表示する）

2. 画像をデザインの一部として扱う
   （⁠画像でデザインを補完する／画像を脇役として使う）

3. テキストと画像を共存させる
   （⁠ソフトなオーバーレイ処理をした背景画像の上にテキストを配置する／テキストと画像を混ぜる／テキストと画像を1つのインタラクティブな要素として扱う）

4. 正しいレイアウトを適用する
   （⁠標準的なグリッドを使う／「⁠ブルータリスト」なグリッドを使う／レンガ組みのグリッドを使う）

5. 目的に合わせた動きを加える

2. Micro nudge: a micro animation for behavioral changehttps://uxplanet.org/micro-nudge-a-micro-animation-for-behavioral-change-dd15ecd4fab3

ユーザーが忘れたかもしれない、または気づいていないかもしれない小さなタスクを実行するよう促すちょっとしたアニメーション「マイクロナッジ」について解説した記事です。

たとえばInstagramでスクロール時にスライドして現れるコメント入力欄がマイクロナッジの例です。コメントは忘れやすい小さなアクションで、マイクロナッジはリマインダとして機能するとのことです。

3. 8 Code Snippets to Make Your Pagination Pophttps://speckyboy.com/code-snippets-pagination/

ページネーションのデザイン＆コーディング例を多数紹介しています。

一般的ではないものを多く取り上げていて、スライダー風のもの、ページ番号を表示しないもの、タッチ操作で使いやすいもの、無限スクロールとページネーションを共存したものなどがありました。

4. Bad Practices on Birthdate Form Fieldshttp://uxmovement.com/forms/bad-practices-on-birthdate-form-fields/

生年月日を入力するフォームの悪い習慣と解決策を説明した記事です。

以下の悪い例について解説しています。

• 自分が慣れている表記ではない場合混乱する（⁠「⁠月／日／年」か「日／月／年」か）
• 月／日／年をそれぞれセレクトメニューでスクロールして選ぶのは時間がかかる
• カレンダーが表示される場合、小さな矢印ボタンをクリックして年と月を選ぶのが面倒

これらを踏まえ、分かりやすく簡単な方法は、月、日、年をそれぞれ別なフィールドの分けて入力させることです。また、それぞれのフィールドのサイズを調整することで、年は4ケタで入れる、月は数字で入れることを推測できるようになるとのことでした。

5. Common icon design problems you should avoid - Yellowstroke.comhttps://yellowstroke.com/2018/09/17/five-icon-design-problems/

避けるべきアイコンデザインの問題をまとめた記事です。

• 視覚的に複雑
• 抽象的
• 余白が不均衡
• 無関係なメッセージ
• 文化の違いに鈍感

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

• Facebookが3D写真機能を公開――iPhoneで奥行きのある写真が撮れる | TechCrunch Japan
  iPhoneのポートレードモードで撮影した写真が3D写真になるそうです
• Dropboxにユーザーのすべての画像とPDFを自動的にOCRする機能が登場 | TechCrunch Japan
  Pro以上のアカウントで自動化OCR機能が使えるようになります
• Facebook、「⁠Alexa」対応のビデオ通話デバイス「Portal」を発表 - CNET Japan
  Portal+はディスプレイをタテヨコ回転できるとのこと

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

Favicon Checker—See how your favicon hold up across popular browsers, including native dark and light modes.http://www.colinkeany.com/favicon-checker/

Favicon Checkerはファビコンの見え方を確認するためのサービスです。Chrome、Firefox、Safariでの表示をチェックできます。

ファビコン画像をアップロードするか、画像のURLを指定するだけで、表示イメージが一覧できます。アクティブではないタブでの表示、Firefoxでのダークモードでの表示も確認できるのがポイントです。

透過させたファビコンの場合に、ちゃんと認識できるかどうかを確認するのに便利なはずです。ナイトモードでの表示も考えてファビコンを作る必要があることを考えるきっかけにもなりました。