週刊Webテク通信

2017年5月第3週号1位は、テーブルを操作するためのUIパターンいろいろ、気になるネタは、Hulu、リニューアルでURLをhappyon.jpに変更

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

1. Design Better Data Tables – uxdesign.cchttps://uxdesign.cc/design-better-data-tables-4ecc99d23356

テーブルを操作するためのユーザーインターフェイスのパターンをまとめた記事です。アニメーションGIFで操作を紹介していてわかりやすいです。

テーブル内の情報をフィルタリング、並べ替え、比較などを行うUIの例が網羅されており、クライアントにも開発者にも便利だと思います。

それぞれの実装方法には触れられていませんが、その機能の呼び名はわかるのであとは検索して探せばいいでしょう。

図1 テーブルを操作するためのUIパターンいろいろ
図1 テーブルを操作するためのUIパターンいろいろ

2. Basic Patterns of Mobile Navigation | Creative Cloud blog by Adobehttps://blogs.adobe.com/creativecloud/basic-patterns-of-mobile-navigation/

モバイルアプリの5つの基本的なナビゲーションパターンを調べ、それぞれの長所と短所を説明しています。

  1. ハンバーガーメニュー
  2. タブバー
  3. フローティングアクションボタン
  4. フルスクリーンナビゲーション
  5. 3Dタッチ
図2 モバイルアプリの基本的なナビゲーションパターンについて
図2 モバイルアプリの基本的なナビゲーションパターンについて

3. Death to Wireframes. Straight to High-Fidelity! | Toptalhttps://www.toptal.com/designers/ux/straight-to-high-fidelity

ワイヤーフレームを作るステップをなくすことを推奨する記事です。

ワイヤーフレームの問題点として以下の3つを紹介しています。

  1. クライアントが理解できない
  2. ユーザーテストに適しているとは限らない
  3. 開発者や品質管理者が後で苦労する

そして、ワイヤーフレームの段階をなくす方法を、6つのステップで解説していました。

  1. プロセスについてリサーチと探求を続ける
  2. スケッチをする
  3. しっかりした設計仕様書を作る
  4. デザインをはじめる
  5. いつデザインを止めるべきかを知る
  6. 確度の高いフィードバックとテスト結果を楽しむ
図3 ワイヤーフレームを作らないワークフローについて
図3 ワイヤーフレームを作らないワークフローについて

4. Figma vs. Sketch: Who Wins the War on Multiplayer Design? — SitePointhttps://www.sitepoint.com/figma-vs-sketch-who-wins-the-war-on-multiplayer-design/

複数人でデザイン作業を行う場合に使えるデザインツールとして、FigmaとSketchを比較して紹介しています。

Sketchは、InVisionのCraftプラグインとの組み合わせと、バージョン管理システムのGitLabとの組み合わせで使う場合とを解説していました。

図4 複数人でデザイン作業を行う場合のFigmaとSketchとの比較
図4 複数人でデザイン作業を行う場合のFigmaとSketchとの比較

5. 15 Inspirational Examples of Minimal Web Designhttps://1stwebdesigner.com/inspirational-minimal-web-design/

ミニマルなWebデザインのギャラリーです。優れたデザインの15個のサイトを紹介しています。

本当に必要な要素に絞った上で、空白を慎重に利用して明確なタイポグラフィで読みやすく設計したミニマルなデザインは、一見簡単に見えますが本当に重要な要素が何かを判断するのは難しいとのことでした。

図5 ミニマルなWebデザインのギャラリー
図5 ミニマルなWebデザインのギャラリー

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

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

Archetype, Digital Typography Design Tool by Our Own Thing, using Google web fontshttp://www.archetypeapp.com/

Archetypeは、テキスト周りのCSS設定をプレビューを確認しながら簡単に行えるサービスです。フォント、フォントサイズ、行間などを設定して、CSSを生成できます。

フォントサイズを決める際、h1はいくつでh2はいくつ…と決めていくのではなく、指定した比率でサイズが変化しているテキストの一覧を見て、このサイズをh1にしてこのサイズをh2にして…と当てはめていくところが良いと思いました。

フォントはGoogleフォントから選べて日本語フォントはリストにありません。ダミーのテキストももちろん英語なのですが、これは日本語テキストに打ち変えることも可能でした。

図6 テキスト周りのCSS設定をプレビューしながら行えるサービス
図6 テキスト周りのCSS設定をプレビューしながら行えるサービス

おすすめ記事

記事・ニュース一覧