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

1. Common webpage design mistakeshttp://blog-en.tilda.cc/articles-website-design-mistakes

ウェブデザインでのよくある間違いをまとめた記事です。

ランディングページで避けたい間違い

1. コンテンツが論理的にブロック分けされていない
2. アイテム同士の間隔が同じではない
3. パディングが狭すぎてユーザーがコンテンツのブロック分けを理解できない
4. テキストと背景画像とのコントラストがない
5. 1つのページにスタイルが多すぎる
6. 狭すぎる色の付いたブロック
7. 狭いカラムに文字をたくさん入れる
8. 文章量の多いセンター揃えのテキスト
9. イメージの重要な部分にテキストが被っている
10. 視覚的な階層構造の付け方を間違っている
11. 1かたまりのブロックが2つに分かれているように見える
12. タイトルが大きすぎる／長すぎる
13. ボタンの境界線の間違った使い方
14. 色を使いすぎる
15. メニューに入れる項目が多すぎる

記事ページでの間違い

1. 長くて詰まったテキスト
2. 見出しの前後の空白の長さが等しい
3. 見出しの階層構造がない
4. ブロックの上下の空白が等しくない
5. キャプションが画像に近すぎる
6. 小見出しと本文との間隔が狭すぎる
7. 目立たせたい要素と本文が近すぎる
8. コントラストが低い要素
9. 狭いテキストブロックに背景色を使う
10. 背景画像を使った領域同士の間にすきまがある
11. アクセントとなる要素が多すぎる
12. 文字のスタイルを使いすぎる
13. 文章量の多いセンター揃えのテキスト
14. 見出しが画像に近すぎる
15. 必要でないところで斜体を使う
16. 場違いの場所にブロックが配置されている

2. 10 Popular UI Design Trends on Dribbble in 2018https://icons8.com/articles/popular-ui-design-trends-dribbble/

Dribbbleに掲載されたデザインからUIデザインのトレンドをまとめています。

デザイナーが作品を投稿するSNSサイトのDribbbleにアップされたものなので，実際のプロダクトではないものや実験的なものも多いことを念頭において見る必要はあるかと思います。

1. 目立つイラストをウェブページに掲載する
2. モバイル用のイラストを用意する
3. スクリーン分割
4. 太く注意を引くタイポグラフィ
5. 陰影を使った紫色
6. アニメーションするグラフィックス
7. 文字で画像をマスク
8. フルスクリーンの背景画像
9. スキューモーフィズム（現実の物を模したデザイン）
10. 切り替え効果の実験

3. The Complete Illustrated Flexbox Tutorial – freeCodeCamphttps://medium.freecodecamp.org/the-complete-illustrated-flexbox-tutorial-d35c085dbf35

Flexboxの使い方を図解した，取扱説明書のような内容の記事です。

Flexboxの全てのプロパティについて図を使って解説しており，かなりのボリュームがあります。

4. 8 Secrets of the Perfect Link | Webdesigner Depothttps://www.webdesignerdepot.com/2018/07/8-secrets-of-the-perfect-link/

完璧なリンクを作るための8つの秘訣を紹介しています。

1. 良いリンクはボタンではない
2. 良いリンクは目的が明確である
3. 良いリンクは訪問済みリンクに考慮する
4. 良いリンクは常に青色
5. 良いリンクはアンダーラインがある
6. 良いリンクは目立っている
7. 良いリンクは良いマイクロコピーが使われている
8. 良いリンクは良いUXを促進する

5. 16 Adobe XD UI Kits by Top Designers - Freebie Supplyhttps://freebiesupply.com/blog/adobe-xd-ui-kits-by-top-designers/

Adobe XD用のUIキットをまとめた記事です。

ECサイト用，スマートウォッチ用，ゲーム機用などいろいろな用途向けのものがありました。また，ワイヤーフレーム用のUIキットもいくつか掲載しています。

なお，ここで紹介されているワイヤーフレーム用UIキットのWiresには日本語版もあります。

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

• 文章の「自動要約ツール⁠」⁠，ユーザーローカルが無償提供 - ITmedia NEWS
  重要部分がわかるように表示したり，3行／5行／10行のダイジェストを作ったりできて面白そうです
• freee，マツリカなど五反田のスタートアップ6社が一般社団法人「五反田バレー」を設立 | TechCrunch Japan
  freee，ココナラなど五反田にはスタートアップが集まりつつあるそうです
• グーグル，セキュリティキー「Titan Security Key」を発売へ - CNET Japan
  USB版とBluetooth版のセットで50ドルとのことです

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

CSS Duotone Generatorhttps://cssduotone.com/

CSSを使って画像をデュオトーンに変換するサービスです。画像をアップロードするとデュオトーンに加工され， HTMLとCSSが生成されます。

画像の色と背景色，ブレンドモードや透明度などを指定できます。あらかじめ用意された設定を使ったり，ランダムで設定を変更する機能もあります。なぜか最初はフチ付きですが，「⁠spacing」のスライダーでなくせます。

デュオトーンは最近のデザインのトレンドでもあるようなので，画像を加工しなくてもCSSで作れるサービスは重宝しそうだと思いました。作ったものをCodePenで開いてコードをいじれるのも便利です。