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

1. 17 Tips for Designing with Type on a Photohttps://designmodo.com/design-type-photo/

写真の上に文字を配置するときに使えるテクニックを17種類まとめています。

1. 写真と文字とのコントラストをつける
2. 画像の一部をテキストにする
3. ビジュアルが誘導する視点移動を利用する
4. 画像をぼかす
5. テキストをボックスに入れる
6. 背景部分にテキストを追加する
7. 大きくする（文字だけでなく写真を大きくする場合も）
8. 文字に色を追加
9. 写真の上に色を重ねる
10. シンプルに
11. 写真をずらす（文字の一部だけが画像に重なる状態）
12. 写真の上に文字を収める考え方を捨てる
13. 文字を縦書きにする
14. 動的な効果を利用する（以下3つで具体例を挙げる）
15. 視差効果を使う
16. 遠近法の実装
17. ホバー効果を追加する

2. Text fields & Forms design — UI components series - UX Collectivehttps://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0

フォームのテキストフィールドをデザインするためのテクニックを紹介しています。

収集するデータに適切な入力タイプを使用する，今の状態とユーザーの操作に合わせて外観を変更するなどの手法を，悪い例と良い例をビジュアルで示して解説しています。

パスワードを2回入力させるのは馬鹿げているというのは，使う側の立場からもうなずけます。パスワードを通常のテキストとして表示できるボタンをつけること，パスワードの要件を常に表示し，強度メーターをつけることがオススメされていました。

3. 6 Examples of Eye-Catching Landing Page Design | SpyreStudioshttps://spyrestudios.com/6-eye-catching-landing-page-design/

目を引くランディングページデザインの6つの例をまとめた記事です。

1. 簡潔でわかりやすいホームページを用意する
2. 適切なヒーローイメージが使われているか確認する
3. キャッチフレーズに焦点を当てる
4. 社会的な信頼の根拠となるものを利用する
5. 動画を活用する
6. ユーザーにフォーカスする

4. Top 10 Ecommerce Design Trends in 2020https://yourstory.com/mystory/top-ten-ecommerce-design-trends-2020

Eコマースのデザイントレンドを10個紹介した記事です。

1. ウェブサイトよりモバイルアプリに重点を置く
2. アニメーション，GIF，動画によるインタラクティブショッピング
3. 印象的な色とキャッチーなタイポグラフィー
4. インタラクティブな商品ビジュアルによるオリジナル写真
5. ランディングページと商品ページの両方を兼ねる
6. ストーリーを語り客と感情的なつながりを持つ
7. HTTPS暗号化でサイトのセキュリティを強化する
8. 人工知能を備えたチャットボット機能
9. 目立たせたい商品を強調させるためグリッドレイアウトを破る
10. 個人に向けた商品の説明文

5. 7 Reasons to Use Illustrations on Your Website (And Examples of How to Do It) | Codropshttps://tympanus.net/codrops/2020/05/25/7-reasons-to-use-illustrations-on-your-website/

ウェブサイトにイラストを使うべき7つのケースをまとめています。

1. 写真では完全に撮影できない場合
2. ブランドが独自のアプローチを必要とする独自の外観を持っている場合
3. 写真が多い競合サイトと差別化したい場合
4. すでに消費者からの信頼を確立しているブランドのスタイルを新しい会社が利用する場合
5. クリエイターが面白い話をしたりシェアする場合
6. アプリやリソースを販売している会社の場合
7. ターゲットが子供（またはその親）の場合

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

• マストドン「mstdn.jp⁠」⁠，6月30日に終了 「⁠中傷に対する法制強化に対応できない⁠」⁠ - ITmedia NEWS
  利用者が少ないという理由ではなく，ネット上の中傷に対する法制強化が実現された場合への対策というのは残念な気がします
• シヤチハタ，名前とQRコードを一緒に押せるはんこ SNSアカウントやブログをポン - ITmedia NEWS
  QRコードのハンコはありそうでなかったんじゃないでしょうか
• LINE，「⁠背景エフェクト」でビデオ通話の背景をバーチャルに | マイナビニュース
  LINEのビデオ通話にまでバーチャル背景が登場，でもパソコン版だけです

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

Nesto Pomodoro Timerhttps://nesto.cc/

BGM機能のついたポモドーロタイマーをウェブ上で利用できるサービスです。ポモドーロ・テクニックと呼ばれる時間管理術を実践するときに役立ちます。スマホでも使用できます。

ポモドーロ・テクニックの25分の作業，5分の休憩，4セットごとにとる15分の長めの休憩の3つのタイマーが用意されています。BGMを自然の音，環境音，ジャズ，クラシックから選べ，背景画像も変更できます。休憩時間にはBGMは再生されません。

ポモドーロタイマーのアプリはいくつもありますが，ウェブ上で使えるものは珍しいはずです。また，仕事に集中できるようにBGMが用意されているところも面白いです。このBGMは，実はYouTubeの動画を再生していたことに気づき驚きました。