週刊Webテク通信

2019年2月第5週号1位は、デザインシステムを知るヒントとして実例を紹介、気になるネタは、"アルバム"の老舗、無料の容量無制限画像保存クラウドストレージサービスをローンチ

ネットで見かけた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

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

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

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

  • スケーラブルであること
  • チームのフィードバックを考慮に入れること
  • エンドユーザーに利益をもたらすもの
  • 制約を受けないこと
  • 定期的に微調整すること
図1 デザインシステムを知るヒントとして実例を紹介
図1 デザインシステムを知るヒントとして実例を紹介

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

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

  • 明快なメイン要素が大きな印象を残す
  • 短いコピーが要点にたどり着く
  • 求めていないものは得られない
  • 購入への道筋を明確にする
図2 ランディングページを整理するヒント
図2 ランディングページを整理するヒント

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

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

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

図3 カスタマイズできるSVGアイコンを配布
図3 カスタマイズできるSVGアイコンを配布

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

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

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

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

図4 ストーリーのような挙動をウェブでも実現するスクリプト
図4 ストーリーのような挙動をウェブでも実現するスクリプト

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

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

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

図5 ちょっとしたアニメーションをCSSのclip-pathで実現する例
図5 ちょっとしたアニメーションをCSSのclip-pathで実現する例

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

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

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

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

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

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

図6 人物イラストアイコンを生成するサービス
図6 人物イラストアイコンを生成するサービス

おすすめ記事

記事・ニュース一覧