週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけた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 人物イラストアイコンを生成するサービス

今週の気になるWebネタ

"アルバム"の老舗,無料の容量無制限画像保存クラウドストレージサービスをローンチ - ナカバヤシ | マイナビニュースhttps://news.mynavi.jp/article/20190219-773954/

アナログ時代の写真のアルバムといえばナカバヤシ「フエルアルバム」が定番でした。昨年は発売50周年のアニバーサリーイヤーを迎えたそうです。そのナカバヤシが,無料で容量無制限のクラウドストレージサービスを開始しました。

iOS・Androidアプリ「Fueru アルバム」を使い,スマホ内の写真画像を自動でバックアップできます。無料で提供するのは,物理的なアルバム(フォトブック)作成のサービスなどで収益化するための囲い込みでしょう。

ナカバヤシはすでに,フエルフォトブックというサービスを提供しており,Webやアプリでフォトブックを作って注文できるようになっています。フエルアルバムのようにあとからシートを追加できるのもポイントです。今回調べてみてフエルフォトブックを頼みたくなってきたので,これもクラウドストレージサービスをリリースした効果とも言えそうです。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/