週刊Webテク通信

2018年12月第2週号 1位は，ほとんどのデザインリニューアルはなぜ失敗するのか，気になるネタは，EdgeブラウザがついにChromiumを採用へ

Webテク, Webデザイン, Web広告, UI, JavaScript, CSS, イラスト, ブラウザ

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

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

1. Why most redesigns fail – freeCodeCamp.orghttps://medium.freecodecamp.org/why-most-redesigns-fail-6ecaaf1b584e

ほとんどのデザインリニューアルはなぜ失敗するのかを考察した記事です。

Snapchatアプリのリニューアルで，ナビゲーション構造とストーリーを見るためのタップ領域が変更され，ユーザーから否定的なレビューが殺到したエピソードを詳しく紹介しています。

また，Windows 7から8でコントロールパネルへのアクセス方法が変更されたことも，悪い例として挙げられています。

一方，Facebookのモバイルアプリが，ウェブ版と同じ上部の青いナビゲーションバーをやめて，iOSでは静的なタブ，Androidではスライドできるタブにしたことは，うまくいったリニューアル例として取り上げていました。

最後に我々が学ぶべき点について，以下の3項目でまとめています。

  1. 最も効果的なリニューアルは通常，最も美しいものではない
  2. リニューアルは目的地ではなくプロセス
  3. 小さなコンバージョンに焦点を当てる

図1　ほとんどのデザインリニューアルはなぜ失敗するのか

図1　ほとんどのデザインリニューアルはなぜ失敗するのか

2. How UI Illustrations Improve UXhttps://www.secretstache.com/blog/ui-illustrations/

UIにイラストを使うことで，UXがどう改善されるかを解説した記事です。

  1. テキストよりも早く要点を得られる
  2. ユーザーの旅を手助けする
  3. ダイナミックなブランド体験を作る
  4. UIの美的な魅力を強化する

図2　UIにイラストを使うとUXがどう改善されるか

図2　UIにイラストを使うとUXがどう改善されるか

3. The Best JavaScript and CSS Libraries for 2018 - Tutorialzinehttps://tutorialzine.com/2018/12/the-best-javascript-and-css-libraries-for-2018

2018年のお気に入りのJavaScript＆CSSフレームワーク，ライブラリ，ツールを紹介しています。

サイトのジェネレーターやエディターなど，サイトを構築するためのものが多く取り上げられている印象でした。

図3　2018年のJavaScript＆CSSライブラリのまとめ

図3　2018年のJavaScript＆CSSライブラリのまとめ

4. Tiny Details: A Look at Hamburger Menu Reveal Transitionshttps://speckyboy.com/hamburger-menu-reveal-transitions/

ハンバーガーメニューが現れるときのアニメーション効果が印象的なサイトをまとめた記事です。

ハンバーガーメニューの存在がわかりにくいサイトも結構あるのですが，メニューを出すボタンが必ずあるという前提でページを見れば，すぐに見つけられるものだと気付きました。

図4　ハンバーガーメニューの表示効果が印象的なサイトいろいろ

図4　ハンバーガーメニューの表示効果が印象的なサイトいろいろ

5. 20 Freshest Web Designs, December 2018 | Webdesigner Depothttps://www.webdesignerdepot.com/2018/12/20-freshest-web-designs-december-2018/

優れたデザインの新しいサイトを集めたウェブデザインをまとめています。

赤色が流行っているようです。

図5　2018年12月のウェブデザインのギャラリー

図5　2018年12月のウェブデザインのギャラリー

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

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

Humaaans: Mix-&-Match illustration libraryhttps://www.humaaans.com/

今回は，Webサービスではないのですが「Humaaans」というイラストのライブラリを紹介します。簡単に人物イラストを作れる，とても興味深いものです。

いろいろなポーズや服装が用意された人物のイラストがセットになっています。顔，上半身，下半身，靴とパーツに分かれており，様々な組み合わせが可能です。シンプルで無機質なイラストで，ネットサービスのランディングページでよく見かけるタイプのイラストという印象です。

Sketch用とInVision Studio用のファイルがありますが，Sketchで使う方が便利だと思います。Sketchでは，シンボルのオーバーライド機能を使って，プレビュー付きのプルダウンからパーツを差し替えていけます。

図6　人物イラストを簡単に作れるライブラリ

図6　人物イラストを簡単に作れるライブラリ

今週の気になるWebネタ

Microsoft Edge，Chromiumベースに――旧Windowsでも作動，macOS版も登場へ | TechCrunch Japanhttps://jp.techcrunch.com/2018/12/07/2018-12-06-microsoft-edge-goes-chromium-and-macos/

Windows 10のデフォルトブラウザ「Microsoft Edge」が，独自のレンダリングエンジンを捨てて，Google Chromeと同じChromiumをベースとしたブラウザに生まれ変わるそうです。

ウェブ関連の制作に関わっている人にとっては大歓迎なニュースなのですが，ウェブ業界がお祭り状態にはなっていないようです。マイクロソフトのブラウザ界での存在感がすでに薄くなっていたからなのでしょう。

Chromiumベースとすることで，Mac用のEdgeが提供されるらしいというのも気になります。ブラウザの種類が増えれば，その分ブラウザチェックが必要になるじゃないかという気もしますが，MacでもEdgeのチェックができる環境を提供することが重要なようです。

Webテク, Webデザイン, Web広告, UI, JavaScript, CSS, イラスト, ブラウザ

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote