週刊Webテク通信

2018年12月第1週号 1位は,モバイルアプリのUXデザインでやるべきこと&やらないこと,気になるネタは,「Microsoft Office」のアイコンデザイン、6年ぶりに刷新へ

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

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

1. Mobile App UX Design: Do's and Don't - MobileAppDailyhttps://www.mobileappdaily.com/2018/11/22/mobile-app-ux-design-dos-donts

モバイルアプリのUXデザインで、やるべきこと&やらないことをまとめています。

やるべきこと
  1. デザインの前にリサーチする
  2. 必須機能が含まれていることを確認する
  3. 不要なものを取り除く
  4. ユーザーからのフィードバックをバックアップしておく
  5. ナビゲーションを明白にする
  6. 指で操作しやすくする
  7. はっきりとした文字を使う
  8. インタラクションを分析する
  9. 不要な文字入力を減らす
  10. テストを繰り返す
やらないこと
  1. 最初の段階で完璧にしようとしない
  2. ターゲットユーザーを忘れない
  3. 認証画面からスタートしない
  4. 隠語を使わない
  5. ユーザーに出す情報を制限しない
  6. インタラクションを制限しない
  7. 行き止まりのページを作らない
  8. ブラウザへのリンクをしない
  9. ウェブサイトをそのまま複製しようとしない
  10. アプリの評価をすぐに求めない

図1 モバイルアプリのUXデザインでやるべきこと&やらないこと

図1 モバイルアプリのUXデザインでやるべきこと&やらないこと

2. DevTools for Designers | CSS-Trickshttps://css-tricks.com/devtools-for-designers/

ブラウザ上で利用できるデベロッパーツールについて、デザイナー向けにまとめた記事です。

ブラウザ標準のデベロッパーツールのほかに、Googleが最近リリースしたVisBug、CanvasFlipの Visual Inspectorという二つの拡張機能も紹介しています。

図2 デザイナーのためのデベロッパーツールのまとめ

図2 デザイナーのためのデベロッパーツールのまとめ

3. Best UI UX Design Pattern Examples Library | Design Knowledge Basehttps://www.waveguide.io/

UI/UXデザインパターンの優れた実例を集めたライブラリサイトです。

以下の種類に分けてたくさんのデザインを紹介しています。

  • UXパターン
  • ランディングページ
  • モバイルランディングページ
  • iOS/Androidアプリのスクリーンショット

図3 UI/UXデザインパターンのライブラリサイト

図3 UI/UXデザインパターンのライブラリサイト

4. CSS tabs: Snippets that you can use in your website's codehttps://www.designyourway.net/blog/css-html/css-tabs/

CSSによるタブインターフェイスのコード集です。

シンプルなものから、ひとひねりあるものまで、いろいろなタブのコードをCode Penからまとめています。

図4 CSSによるタブインターフェイスのコード集

図4 CSSによるタブインターフェイスのコード集

5. NES.css - NES-style CSS Frameworkhttps://bcrikko.github.io/NES.css/

ファミコンをイメージしたCSSフレームワークです。8ビットの感じが味わえて面白いです。ドット絵のアイコンもCSSだけで生成しています。

英語であれば、かなりそれっぽいサイトが作れそうです。日本語ではこの雰囲気に合う8ビット風フォントがウェブフォントとして使えないのが残念なところですね。

図5 ファミコンをイメージしたCSSフレームワーク

図5 ファミコンをイメージしたCSSフレームワーク

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

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

Buy Code, Scripts, Themes, Plugins and more | Codesterhttps://www.codester.com/

Codesterは、ウェブデザインのためのグラフィック素材やテンプレート、コードを購入できるマーケットプレースです。

以下のものが販売されており、無料で提供されているものもあります。

  • スクリプトとコード(PHP, JavaScript, CSS, Python, Javaなど)
  • テンプレート( Android, Buildbox, Cordova, iOS, Reactなど)
  • テーマ( HTML, WordPress, Joomla, Drupal, Shopify, WooCommerceなど)
  • プラグイン( WordPress, Magento, X-Cart など)
  • グラフィックス(ユーザーインターフェイス、アイコン、ロゴ、ゲーム素材、テクスチャーなど)

デザイン素材からコード類まで、ひとつの場所で入手できることがメリットです。

また、自分で販売することもでき、販売額から引かれる手数料が30%と少ないところも特徴のようです。

図6 ウェブデザインのためのマーケットプレース

図6 ウェブデザインのためのマーケットプレース

今週の気になるWebネタ

「Microsoft Office」のアイコンデザイン、6年ぶりに刷新へ - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1811/30/news081.html

Microsoft Officeのアイコンデザインが刷新されるそうです。一部アプリを除き、頭文字の入ったパネルが統一されているのが特徴的です。

Windows 10のデザインシステム「Fluent Design System」に沿ったデザイン改善の一環とのことで、今後はアプリのUIアイコンもこの路線になっていくのでしょう。フラットデザインをベースにグラデーションを多用しているのは最近のデザイントレンドに沿っていると思います。

何をやってもツッコまれやすいMicrosoftですが、アイコンデザイン自体は好意的に受け止められているようです。Googleのマテリアルデザインと同様に、Fluent Design Systemもこれからのウェブデザインに影響を与えるのかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

バックナンバー

週刊Webテク通信

  • 2018年12月第1週号 1位は,モバイルアプリのUXデザインでやるべきこと&やらないこと,気になるネタは,「Microsoft Office」のアイコンデザイン、6年ぶりに刷新へ

バックナンバー一覧

コメント

コメントの記入