今週、海外で話題になったWebデザインニュース (2018/07/30~2018/08/03)

はじめに

今日の記事では、2018/07/30~2018/08/03の間に海外で話題になったWebデザインのニュースをご紹介します。

今週は、Framer Xのベータ招待がついにはじまりました。
そのほかにもCSS Scanという新しいインスペクタツールやFirefoxブランドのロゴ刷新に関するニュース、Streamlineというアイコンサービスの3.0がリリースされました。

ぜひご覧ください！

Framer X

Framer Xとは

Framer XとはもともとプロトタイピングツールであるFramerが、Reactをデザイン上で触れるようにしたツールです。
むしろReactを使いながらGUIでデザインできるツールがFramer Xです。

特に、Framer X はAirBnb社のJon GoldとFacebook社のDaniel Edenのツイートがきっかけで非常に話題を呼んでいます。

"framer X is so good that I have no intention of trying to build design tools again"

— Jon Gold (@jongold) 2018年6月29日

We got a demo of Framer X and I can confirm: it’s going to be the best commercially-available design tool available.

A good problem/opportunity it presents: it’s going to leave a lot of appetite for even more powerful tools 😈

— Daniel Eden (@_dte) 2018年7月3日

両名とも、Framer Xを試してみた結果、現在市場に出回っているデザインツールの中では最高のものだとうたっています。

Framer XのTrailer

実際にどんなツール、Framer Xの公式Trailerがあるのでご覧ください。

Launchpad, Auto Layout など様々なSketchのプラグインを出している、AnimaがついにTimeline for Sketchをリリースしました。

今週発表された特徴

では改めて今週発表されたFramer X 特徴を見ていきましょう。

レスポンシブレイアウトが作れる

Framer X はカンバスをリサイズしたときに要素などを簡単に配置しなおすことができたり、自動的にリサイズしたりします。

インタラクションが簡単に作れる

スクロール、ページング、スクリーン間のトランジションなどのインタラクションがクリックをするだけでできます。

インタラクティブなコンポーネントが作れる

Framer X ではマップや画像ジェネレーター、ビデオなどインタラクティブなコンポーネントを作ることができます。

ツールの中にデザインストアが併設されている

インタラクティブデザインシステム、アイコン、UI要素など様々なものをFramer X 内に併設されているFramer X Storeで購入することができます。

React × デザイン

プロジェクト内にReactを使ってインタラクティブなコンポーネントを作ることができます。

以上、今回発表された機能です。

公式サイトはこちら
Framer X

CSS Scan

CSS Scanとは

次に今週リリースされたChromeとFirefoxの拡張機能のインスペクタツール、CSS Scanをご紹介します。

公式サイトはこちら
CSS Scan

すでにこういったツールはToybox, LiveStyleなどいくつかありますが、また新しいさらにUIをシンプルにしたCSS Scanというものが出てきました。

CSSディベロッパーツールよりもとにかく早く簡単にインスペクタ機能が使えます。

特徴

簡単にこちらのインスペクタツールの機能をまとめます。

• スタイルの確認が簡単にできる
• クリックすることでスタイルがコピーできる
• それぞれの要素のサイズを測ることができる
• すべての要素がアウトラインできる
• box-sizingやhoverのスタイルを無視して確認することができる

サイトを見る限り、8月3日時点ですでに490人が購入しているようです。
ちなみに、CSS Scanの値段が決まっていないので、自分の好きな値段で購入することができます。

Firefoxブランドロゴ投票

そのほかに今週話題に上がったものはこちらのブログ記事です。
Evolving the Firefox Brand

こちらはFirefoxのロゴをリブランドするという内容のもので、現在Mozillaで作成途中の２タイプのロゴセットの中からどちらがMozillaの新しいブランディングのロゴとして使用するのにふさわしいか、を読者に投票してもらうものです。

ちなみに、話題に上がっている2タイプのロゴはこちらです。

こちらのロゴがそのまま使われる、ということではなく、読者の投票も加味した上で修正などを行っていくものと思われます。

また、Mozillaはロゴの評価のポイントとして以下5点をあげています。

• この２つのロゴシステムはFirefoらしいか
• ビジュアル/デザイン面から見てそれぞれのロゴが調和しているか
• ロゴのデザインロジックは未来に生まれる新しいプロダクトにも応用することができるか
• Firefoxが象徴するスピード、安全、信頼、ウイット、イノベーションなどを表現できているか
• 利益よりも人を重んじるMozillaのポジションを表現できているか

ご興味がある方はぜひ元のブログをご覧ください。
Evolving the Firefox Brand

Streamline 3.0

今週そのほかに話題に上がったものはStreamline 3.0です。

新しいバージョンがローンチされ、アイコンの数が10,500個、アイコンのカテゴリは53カテゴリ、うちその中にサブカテゴリが720個と増えました。

さらに詳しい情報は公式サイトをご覧ください。

Streamline 3.0
サイト自体もアイコンが可愛らしく動いて、非常にユニークな作りになっています。

まとめ

以上、今日は今週話題のデザインニュースをいくつか取り上げてみました。

個人的には、Figma Platformに非常に可能性を感じますが、スケールが大きすぎて、どういうものに使えるのかイメージが湧かないので、いろんな動向を探ってみたいと思います。

他にでてきた新しいサービス、特にSlash Pixelsは本リリースがとても楽しみです。