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

1. How to simplify your design – UX Planethttps://uxplanet.org/how-to-simplify-your-design-69d97fde11b9

デザインを単純にする方法をまとめています。図解してあるのでわかりやすいです。

1. 価値を絞って製品を作る
2. 不要なものは全て削る
3. データを意味のある形に変換する
4. 迅速な意思決定できるようサポートする
5. 多すぎる選択肢はお客さんを不安にさせる
6. 複数の選択肢がある場合はオススメを知らせる
7. お客さんの注意を正しい方向に誘導する
8. 色とタイポグラフィを使ってコンテンツの階層を伝える
9. 組織化することで多くのものを少なく管理しやすく見せる
10. 関連した項目をグループ化する
11. 大きなタスクを小さなステップに分割する。1カラムのレイアウトにする
12. プロセスとシステムの状況を透明性を保って伝える
13. ユーザーのために計算する
14. 段階的に見せることで複雑さを隠す
15. 一般的に受け入れられているパターンとインタラクションに頼る
16. ユーザーの初めての体験となる操作は合理的にデザインする
17. 製品が使用されるときの人間工学と状況に留意する
18. インライン編集と値の自動提案をサポートする
19. 賢いデフォルト値を使って認知の負荷を減らす
20. エラーを防ぐ
21. アクセシビリティのためのデザイン

2. Everything you need to know about Loading Animationshttps://medium.com/flawless-app-stories/everything-you-need-to-know-about-loading-animations-10db7f9b61e

ローディング時に表示するアニメーションについてまとめています。

気をつける点について，以下の6つの項目で解説していました。

1. できる限り表示しないようにする
2. 残り時間のヒントを与える
3. なぜ待たないといけないのか説明する
4. 待っている間イライラさせない
5. 待っているという感覚を減らす
6. 企業からの発信やブランディングにつなげる

ほかにも，ローディングアニメーションのUIについての解説や，ツールと情報源の紹介もあります。

3. How Art Direction Will Help You Create Masterful Web Interfaces - Marvel Bloghttps://blog.marvelapp.com/art-direction-will-help-create-masterful-web-interfaces/

優れたインターフェイスを作るのにアートディレクションがどう役立つかを説明しています。

アートディレクションを使って，以下のことを考える必要があるとのことです。

1. 組織のブランドアイデンティティを吹き込んだものを作る
2. 際立っている驚くべき何かを作る
3. ユーザーの興味を引き付ける
4. デザインを選ぶとき推測するのではなく調査する
5. 最初から最後まで当初の目標を忘れない
6. あなたのウェブサイトの主なターゲットを特定する
7. どのメッセージを伝えるべきか決める
8. 製品を使ったときにユーザーに与えたい感情面での影響を決める
9. 付加価値を追求する（あなたのデザインはどのように貢献していますか？）
10. プロジェクトの最初からできるだけ早くブランドの本質を研究し，吸収する

4. Room to Breathe: Using Whitespace in the Hero Areahttps://speckyboy.com/whitespace-hero-area/

メインイメージでの余白の重要性と使い方について紹介した記事です。

いくつかの実際のサイトを例に，適切な余白によりユーザーの目を何に注目させているかなどを解説しています。

5. Blurred Borders in CSS | CSS-Trickshttps://css-tricks.com/blurred-borders-in-css/

CSSで写真の縁の部分をぼかすコーディング方法を紹介した記事です。

ボーダー部分の背景画像をCSSフィルター効果でぼかしています。

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

• 「Googleマップが劣化した」不満の声が相次ぐ ゼンリンとの契約解除で日本地図データを自社製に変更か - ITmedia NEWS
  Googleマップの地図データがゼンリンのものではなくなり，マップのクオリティが落ちてしまったと言われています
• Instagramアプリから商品を直接購入できる機能，ベータ提供に - CNET Japan
  オンラインショップの機能をInstagramが持つことになるようです
• スケッチを数秒でリアルな写真に変えるNVIDIAのAI | TechCrunch Japan
  人が描いたところが，写真をベースとしたリアルな岩や山などに変わります

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

Speak Humanhttp://speakhuman.today/

目的に合わせたマイクロコピー（短いキャッチフレーズや説明文）を生成するサービスです。5つのカテゴリでマイクロコピーをランダムに表示します。

カテゴリは以下の5種類です。英語なのでそのまま直訳して使うわけにもいきませんが，表現の仕方としては日本語の場合にも参考になるはずです。

1. メールアドレスを聞く
2. 承認したときのメッセージ
3. エラー
4. ネットショップ
5. ローディング

また，マイクロコピーの投稿も受け付けており，今後どんどん増えていくのかもしれません。投稿の受付にAirTableを使っているところも面白いと思いました。