週刊Webテク通信

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

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

おすすめ記事

記事・ニュース一覧