週刊Webテク通信

2017年12月第2週号1位は、2018年のUXはどこに向かっているのか、気になるネタは、グーグル、アマゾン「Fire TV」「Echo Show」上でYouTubeを提供停止に

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

1. The State of UX for 2018 - millermedia7https://millermedia7.com/state-ux-2018/

2018年のUXがどこに向かっているのかを解説した記事です。

  1. シンプルなナビゲーション
  2. 余計な要素を取り除き理解しやすいよう改善する
  3. 異なる目的でアニメーションを使う
  4. ビデオの優位性
  5. 感情に訴えるよく考えられたデザイン
  6. コンテンツはこれまで以上に重要
  7. 携帯電話に置き換わるものとしてのウェラブル端末
  8. 簡単な認証
  9. より高度なパーソナライゼーション
  10. キャッシュレスな支払い方法の増加
  11. AR(拡張現実)は次の大ブームとなる
  12. VRはまだ一時的な流行
図1 2018年のUXがどこに向かっているのか
図1 2018年のUXがどこに向かっているのか

2. 19 web design trends for 2018 | Webflow Bloghttps://webflow.com/blog/19-web-design-trends-for-2018

2018年に予想されるウェブデザインのトレンドをまとめた記事です。

  1. グリッドにとらわれないレイアウト
  2. イラストを重要な要素として使う
  3. ブルータリズムが主流の地位になりつつある
  4. 有機的な形や斜めの形状
  5. より一般的になったインタラクションとアニメーション
  6. ミニマリズムの反対のマキシマリズムの出現
  7. セリフフォントの活躍
  8. フロートしたナビゲーションメニュー
  9. video要素
  10. より没入感のある「マルチメディア」
  11. バリアブルフォント
  12. コンテンツのハブ
  13. CSSグリッド
  14. 完璧なデジタルデザインツールの探求
  15. デザインの多様性と包括
  16. ビデオに主軸を移す動きが続く
  17. UXライターの台頭が続く
  18. 体系化されたデザイン
  19. 原則から始めるデザイン
図2 2018年のウェブデザインのトレンド予想
図2 2018年のウェブデザインのトレンド予想

3. How Sketch and InVision have revolutionised our design workflow - News - Digital Artswww.digitalartsonline.co.uk/news/interactive-design/how-sketch-invision-have-revolutionised-our-design-workflow/

SketchとInVisonがウェブデザインのワークフローにどう革命をもたらしたかを解説しています。

特に、以下の3点を改善できた点が良かったとのことです。

  1. 高度なジェスチャーとトランジション
  2. 共同作業
  3. 効率
図3 SketchとInVisonがデザインワークフローにどう革命をもたらしたか
図3 SketchとInVisonがデザインワークフローにどう革命をもたらしたか

4. Empty Stateshttp://emptystat.es/

空(カラ、empty)の状態のアプリやサイトの画面を集めたギャラリーです。

たとえばメールの受信箱が空の場合、お気に入りにまだ1件も登録されていない場合など、何もない状態のデザインの参考になります。

図4 空の状態の画面ギャラリー
図4 空の状態の画面ギャラリー

5. Best of Chromehttp://bestofchrome.com/

Chromeの拡張機能を人気順や新着順で見られます。カテゴリで絞り込んだり、検索も可能です。

Chrome ウェブストアとは違った探し方ができるので、新たな拡張機能に出会うことができそうです。

図5 Chromeの拡張機能を人気順や新着順で見られるサービス
図5 Chromeの拡張機能を人気順や新着順で見られるサービス

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

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

The Front-End Checklist - 🔥 Your NEW Front-End Tool 🔥https://frontendchecklist.io/#section-head

今どきのウェブサイトに必要なフロントエンドのチェックリストを提供するサービスです。HEAD、HTML、WebFonts 、CSS 、JavaScript、Images、Accessibility、Performance、SEOに分けてチェックすべき項目を確認できます。

実装されている/問題ない項目にチェックを入れていくと、項目ごとに何パーセントチェック済みかが表示されます。それぞれのチェックリストには詳細情報があり、ドキュメントやツールへのリンクなどを記載しています。

プロジェクト名やURLを入れて、チェックリストとしてプリントアウトする機能もあります。ログインしてどこにチェックを入れたのかを保存しておくことはできませんが、プリントアウトしておいて後から手書きでチェックを入れるという手もありますね。

図6 フロントエンドのチェックリストツール
図6 フロントエンドのチェックリストツール

おすすめ記事

記事・ニュース一覧