週刊Webテク通信

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

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

ネットで見かけた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設定をプレビューしながら行えるサービス

今週の気になるWebネタ

Hulu,リニューアルでURLをhappyon.jpに変更--5月17日から - CNET Japanhttps://japan.cnet.com/article/35100920/

HuluがリニューアルにともないURLを「happyon.jp」に変更したそうで,⁠なぜ?」⁠URLがダサい」などの声が上がっています。わたしはHuluからのメールで知ったのですが,ネットニュースで確認するまでフィッシングメールか何かかと疑いました。

URLを変更するという異例の発表に,日本独自の展開を進めて将来的には Huluブランドを手放すのではないかという憶測の記事が出回り,日本版の運営元がウワサを否定するという一幕もありました。

URLが変わることでブックマーク変更や再ログインが必要となり,機会損失につながりかねないとも思えます。でも,月額サービスなので解約するにもログインしないといけませんし,アプリの場合はアップデートすればいいわけなので,それほど問題ではないのかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入