週刊Webテク通信

2018年1月第2週号1位は、2017年に人気のUIデザインツールまとめ、気になるネタは、AmazonはFire TVのYouTubeアプリをアップデートしてユーザーをWebブラウザーに誘導

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

1. Reviewing the most popular UI design tools in 2017https://designrevision.com/reviewing-popular-ui-design-tools-2017/

2017年に人気のUIデザインツールについて評論した記事です。Sketch、Adobe XD、Gravit Designer、Affinity Designer、Figma、Photoshopの各ツールについて、詳細な解説と良い点・悪い点をまとめています。

全部読むのが面倒という人のために、以下の内容が最初にまとめられていました。

  • UIデザインに真剣に取り組みMacを使っているのならSketch
  • デザインとプロトタイプの両方を同じツールで行いたいのならAdobe XD
  • 専門デザイナーがいない小規模のリモートチームに参加していて、リアルタイムのコラボレーション機能を備えたツールを探している場合はFigma
  • クロスプラットフォームで使える強力なベクター編集ツールが必要な場合は、Affinity DesignerまたはGravit Designer
図1 2017年に人気のUIデザインツールまとめ
図1 2017年に人気のUIデザインツールまとめ

2. Web Design Trends 2018: What Will Make an Impact This Year?https://www.shopify.ca/partners/blog/web-design-trends-2018

2018年のウェブデザインのトレンドをまとめています。

  1. バリアブルフォント
  2. より創造的なレイアウト
  3. WebVRの台頭
  4. 人工知能
  5. 持続可能なデザイン
  6. 包括的なデザイン
  7. 倫理的なデザイン
  8. デザインシステム
  9. 声によるユーザーインターフェイス
  10. ホームページの終焉
  11. ブランド体験
  12. ストーリーを語る力
図2 2018年のウェブデザインのトレンド
図2 2018年のウェブデザインのトレンド

3. Chrome is turning into the new Internet Explorer 6 - The Vergehttps://www.theverge.com/2018/1/4/16805216/google-chrome-only-sites-internet-explorer-6-web-standards

ChromeがかつてのInternet Explorer 6のような存在になりつつあることに警鐘を鳴らす記事です。

Web標準規格を無視したり、Chromeでしか動作しないサービスが出てきていることから、ChromeがIntrnet Explorer6と同じような道を歩み始めているのではないかと指摘しています。

ウェブブラウザの歴史をざっと振り返ることができるのも、この記事の面白いところです。

図3 ChromeがIntrnet Explorer 6のようになりつつある件について
図3 ChromeがIntrnet Explorer 6のようになりつつある件について

4. CSS Background Patterns From CodePen - Freebie Supplyhttps://freebiesupply.com/blog/css-background-patterns/

CSSだけで作った背景パターンを、コード共有サービスCodePenから紹介しています。

ドットや斜線、チェック柄のようなものから、ハート型や複雑な模様までいろいろなパターンがありました。

図4 CSSだけで作った背景パターンいろいろ
図4 CSSだけで作った背景パターンいろいろ

5. Fun Times With Sizing Grid Elements | CSS-Trickshttps://css-tricks.com/fun-times-sizing-grid-elements/

CSSグリッドのグリッド要素がグリッド領域のサイズと必ずしも同じではないという事実を利用した、面白い効果の実験です。

フォームのフィールドのサイズ変更や、カーテンのように開く効果を実装した例を紹介しています。

図5 グリッド要素のサイズ変更を面白い方法で実装した例
図5 グリッド要素のサイズ変更を面白い方法で実装した例

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

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

Listly | Fully-automated Web Scrapinghttps://www.listly.io/

Listlyはウェブページから情報を収集してExcelファイルに変換するサービスです。たとえばECサイトから商品リストのExcelファイルを生成できます。

例として掲載されているECサイトからの情報取得の場合、サムネイル画像のURL、ブランド名、商品名がリンク付きのExcelファイルに変換されています。自社サイトの場合は元々データベースを持っているはずなので、ライバルサイトを研究するなどグレーゾーンな使われ方が想定されている気がします。

ログインせずに試すことができますが、ログインすると複数サイトをまとめて処理したり、スケジュールを設定して一定間隔ごとに情報取得できるようになります。Chromeの拡張機能もあり、これを使えばログインが必要なページの場合も情報取得できるそうです。

図6 ウェブページの情報を収集してExcelファイルに変換するサービス
図6 ウェブページの情報を収集してExcelファイルに変換するサービス

おすすめ記事

記事・ニュース一覧