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

1. What are Design Systems? | Dribbble Design Bloghttps://dribbble.com/stories/2019/02/22/what-are-design-systems

デザインシステムとは何かを知るヒントとして、いくつかの実例を紹介しています。

この記事によると、一般的なデザインシステムの定義は「ブランドの言語を視覚的に表現し、チームが製品を設計および開発する際に従うための包括的なガイドとして役立つ、再利用可能なコンポーネントのまとまり」とのことです。

また、効果的なデザインシステムは以下の条件を満たすべきとのことでした。

• スケーラブルであること
• チームのフィードバックを考慮に入れること
• エンドユーザーに利益をもたらすもの
• 制約を受けないこと
• 定期的に微調整すること

2. Decluttering a Landing Page for Better Design and Higher Conversion Rates - Designmodohttps://designmodo.com/landing-page-conversion-rates/

より良いデザインと、より高いコンバージョンのために、ランディングページを整理するヒントを紹介した記事です。

• 明快なメイン要素が大きな印象を残す
• 短いコピーが要点にたどり着く
• 求めていないものは得られない
• 購入への道筋を明確にする

3. ICONSVG - Quick customizable SVG icons for your projecthttps://iconsvg.xyz/

カスタマイズできるSVGアイコンを提供しています。変更できるのはサイズ、線の太さ、線の色、角と端の線の形状です。

生成されたコードをコピーして使えますし、SVGファイルとしてダウンロードも可能です。

4. react-insta-storieshttps://mohitk05.github.io/react-insta-stories/

Instagramのストーリーのような挙動の画像スライドを、Reactを使って実現しています。

画像の右側をクリックしたら次へ、左側をクリックしたら前へ、クリックし続けると停止、という最近モバイル環境で流行しているインターフェイスを、ウェブ上で使えるのは面白いです。

パソコンだけでなくモバイルのブラウザでも動作しますが、クリックし続けたときに画像を選択してしまい「コピー／調べる」などのメニューが出てしまうのが惜しいと思いました。

5. How Facebook Designs Microinteractions for Feature Discoveryhttps://medium.com/@yonatandoron/how-facebook-designs-microinteractions-for-feature-discovery-c79cfe998a77

機能を見つけてもらうためのマイクロインタラクションを、Facebookがどうデザインしたかをまとめています。

星型の図形がキラキラっとアニメーションするのを、CSSのclip-pathで実現する方法を詳しく解説していて興味深いです。

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

• まるで本物--実在しない人の顔写真をAIで生成するウェブサイトが公開 - CNET Japan
  モーフィングと勘違いしてる人もいるようですが、AIが学習結果をもとにゼロから生成しているそうです
• プロジェクト管理ツール「Backlog」がビジネスチャット「Slack」などと連携 - CNET Japan
  「⁠Backlogで課題の登録や更新、コメントなどのアクションがあった際に、指定したチャンネル／ルームに通知される」設定ができるようです
• 折りたたみスマホにHuaweiも参戦 5G対応「HUAWEI Mate X」登場 価格は2299ユーロ（約29万円⁠）⁠ - ITmedia Mobile
  2019年半ばに発売予定で約29万円とのこと。開いた状態が正方形に近く、ほぼ正方形画面のタブレットってちょっと面白いと思いました

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

Joe Schmoe | An illustrated avatar collectionhttps://joeschmoe.io/

プロフィール画像などのダミーに使うための、人物イラストアイコンを生成するサービスです。ダミー画像生成のサービスと同様に、URLの末尾に入れる文字列でカスタマイズできます。

「random」でランダム生成、「⁠male」「⁠femail」と入れることで男性か女性かを選べます。イラストはSVGなので大きなサイズでも問題ないですが、絵柄がシンプルながらもちょっとクセがあるようにも感じました。

同様のサービスとして、Avatar Placeholder Library - DiceBear Avatarsというのもありました。こちらはドット絵のイラストがベースですが、図形のようなものや別テイストのイラストも選べます。