週刊Webテク通信

2019年4月第4週号 1位は, Adobe XDとSketchの機能比較,気になるネタは,Pinterestが上場,初日は公開価格を28%上回る

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

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2019年4月15日~4月21日の間に見つけた記事のベスト5です。

1. Design Tool Showdown – Adobe XD vs Sketch | Toptalhttps://www.toptal.com/designers/ui/adobe-xd-vs-sketch-2019

Adobe XDとSketchの機能比較をもとに,デザイナーは今XDに乗り換えるべきかを考察した記事です。

ユーザーインターフェイス
→SketchにはXDにはない便利なツールバーがある
リピートグリッド
→XDは独自のリピートグリッド機能がある
シンボルとアセットパネル
→アセットパネルのUI要素を組み合わせることでXDが少し優位
レスポンシブデザインツール
→プラグインを使わなくてもUI要素をレスポンシブにできるXDが優位
アドオンとプラグイン
→Sketchには豊富なプラグインがある
自動アニメーションを使ったプロトタイピング
→XDにはマイクロインタラクションのサポートという優位な点がある
共有とコメント
→XDはオンラインの共有とコメント機能を持つ
開発者との受け渡し
→XDはサードパーティのツールが不要
バージョン管理とリアルタイムコラボレーション
→プラグインを使うとはいえSketchにはバージョン管理がありXDにはない

図1 Adobe XDとSketchの機能比較

図1 Adobe XDとSketchの機能比較

2. Feeling empty in whitespace: my love and hate relationship with negative spacehttps://uxdesign.cc/feeling-empty-in-whitespace-my-love-and-hate-relationship-with-negative-space-4db7f1488260

ホワイトスペースについて実例を元に良い例,悪い例を紹介した記事です。

空白が物足りなく感じる悪いホワイトスペース,空白を埋めるものが不要に感じる良いホワイトスペースについて解説しています。

図2 ホワイトスペースの良い例,悪い例

図2 ホワイトスペースの良い例,悪い例

3. Color accessibility: tools and resources to help you design inclusive products, by Stéphanie Walter - UX designer & Mobile Expert.https://stephaniewalter.design/blog/color-accessibility-tools-resources-to-design-inclusive-products/

カラーアクセシビリティに関する記事やツールなどをまとめています。

色覚異常シミュレータ,色のコントラストを確認するのに役立つツールなどを紹介しています。

図3 カラーアクセシビリティに関する記事やツール

図3 カラーアクセシビリティに関する記事やツール

4. A JavaScript-Free Frontend - DEV Community 👩‍💻 👨‍💻https://dev.to/winduptoy/a-javascript-free-frontend-2d3e

JavaScriptを使わないウェブアプリというシリーズの記事です。

以下のことをJavaScriptを使わずに実装するヒントを紹介しています。

  • ドロップダウン,モーダル,フィルタリングUI
  • detailsとsummaryタグを使った開閉するコンテンツ
  • フォームの値チェック
  • 図4 JavaScriptを使わずにインタラクションを実装するヒント

    図4 JavaScriptを使わずにインタラクションを実装するヒント

    5. Gimlihttps://gimli.app/

    Gimliは,Visual Studio Codeのエクステンションとして使えるビジュアルエディタです。テキストエディタに後からビジュアル編集ツールが追加されるというのが面白いですね。

    現在開発中とのことで,Kickstarterで支援を募っています。2019年の第3/第4四半期にベータリリース,2020年始めにリリース予定とのことです。ベータ版を使ってみたいと思い,わたしも支援しました。

    図5 Visual Studio Codeのエクステンションとして使えるビジュアルエディタ

    図5 Visual Studio Codeのエクステンションとして使えるビジュアルエディタ

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

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

    Spider - a smart point&click web scraping toolhttps://spider.amie-chen.com/

    SpiderはChromeの拡張機能で,ウェブページ上のデータを抽出してJSON/CSVでダウンロードできるサービスです。データを取得したいページ上で起動させると,デベロッパーツールのようにSpiderのインターフェイスが表示されます。

    同じフォーマットでデータが並んでいるウェブページ,たとえばECサイトの商品一覧やグルメサイトの店舗一覧から,商品名,価格,概要などを一気に抽出してダウンロードできます。取得したい項目をクリックするだけで,ページ内の同じ要素を自動認識して抽出します。

    デモ動画があるので,それを見るとすぐに使い方や用途が理解できると思います。ウェブデザインの初期やプロトタイプの段階でダミーのデータが欲しい場合に,ほかのサイトからちょっと拝借という用途にも便利かもしれません。

    図6 ウェブページ上のデータを抽出するChrome拡張

    図6 ウェブページ上のデータを抽出するChrome拡張

    今週の気になるWebネタ

    Pinterestが上場,初日は公開価格を28%上回る - CNET Japanhttps://japan.cnet.com/article/35136014/

    Pinterestがニューヨーク証券取引所で新規株式公開(IPO)しました。堅実なデビューを果たし,評価額は約130億ドル(約1兆4560億円)になりました。

    日本では2012年ごろに「Facebookの次に流行るSNS」といった文脈でブームの兆しを見せたPinterestですが,その後フェードアウトしていった印象です。オリンピックのロゴ盗作疑惑のときにPinterestの話題が出たように,デザイナー界隈では使われているのかもしれません。

    現在のPinterestは「ビジュアルディスカバリーエンジン」と名乗っており,SNS的な要素より画像検索エンジンというポジションで評価されています。日本でも若者にじわじわと人気が高まっているらしいので,今度こそ本当のブレイクを果たすときがくるのかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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