gihyo.jpサイトのロゴ

週刊Webテク通信

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

2018-12-06

ネットで見かけた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　ウェブデザインのためのマーケットプレース

おすすめ記事

記事・ニュース一覧