週刊Webテク通信

2018年2月第4週号 1位は，優れたデザインチームでも陥りがちなUXの間違い，気になるネタは，HomePodの“輪染み”防止用コースター、19.95ドルで予約受付中

Webテク, Webデザイン, Web広告, UI, パノラマ画像, スマートスピーカー

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

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

1. Really Bad UX Mistakes That Even Great Teams Makehttps://www.appcues.com/blog/bad-ux-mistakes

優れたデザインチームでも陥りがちなUXの間違いについて解説しています。

  • ノーマンドア（見ただけで開け方が分からなかったり，間違った動作をさせてしまう扉）を作ってしまう
  • （ドロップダウンメニューのような）最終手段のUIを最初に使ってしまう
  • パーソナライゼーションでユーザーデータを活用していない
  • 読み込み速度より見映えを優先する
  • 自分たちの製品を愛しすぎる

図1　優れたデザインチームでも陥りがちなUXの間違い

図1　優れたデザインチームでも陥りがちなUXの間違い

2. How to Design Readable Content for the Web | Design Shackhttps://designshack.net/articles/typography/how-to-design-readable-content/

ウェブデザインのための読みやすいコンテンツのデザイン方法をまとめた記事です。

  • 複数の段階に分けたテキストサイズを使うことで階層化する
  • 読みやすい書体を選ぶ
  • 画面を流し見する人のためにコンテンツを積み重ねる
  • ビジュアルを強調する
  • 行の長さを短くする
  • 焦点を作る

図2　読みやすいコンテンツのデザイン方法

図2　読みやすいコンテンツのデザイン方法

3. 30 Unique Design Tools to Make Working Easier in 2018https://onextrapixel.com/unique-design-tools-make-working-easier/

ウェブデザインに役立つツールを30種類紹介しています。

UIキット，アイコンなどの素材，デザインのインスピレーションを得られるサイト，アクセシビリティの確認ツールやフローチャートツールなど，いろいろなジャンルのツール類がまとめられていました。

図3　ウェブデザイン役立つツール30種類

図3　ウェブデザイン役立つツール30種類

4. 10 Creative Website Navigation Designs - 1stWebDesignerhttps://1stwebdesigner.com/creative-website-navigation/

独創的なナビゲーションデザインのウェブサイトを10個まとめた記事です。

メニューの配置に工夫しているもの，メニューが全画面に展開されるもの，ハンバーガーメニューの開き方がかっこいいものなど，いろいろなパターンのメニューを紹介しています。

図4　独創的なナビゲーションデザインいろいろ

図4　独創的なナビゲーションデザインいろいろ

5. 360°web ー画像アップでお手軽360° webサイト作成ーhttps://www.360web.jp/

360度カメラで撮影したパノラマ画像をアップロードして，360度パノラマ画像を背景としたウェブページを簡単に生成できるツールです。

スマホで見ると，スマホの移動に合わせて視点が動くので面白いです。

作ったページはダウンロードする仕組みなので，あとからHTMLやCSSを編集することも可能です。

図5　360度パノラマ画像を背景としたページを作れるサービス

図5　360度パノラマ画像を背景としたページを作れるサービス

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

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

Linktree https://linktr.ee/

Linktreeはリンク集を簡単に作れるウェブサービスです。Instagramアカウントと連携してプロフィール的なページとして使うためのサービスとなっています。

Instagramは写真投稿時に付けるテキストにURLを入れてもクリッカブルなリンクにならないので，唯一入れられるリンクがプロフィール内のウェブサイト欄となります。Linktreeで最新の記事やおすすめ記事，公式サイト，公式SNSなどのリンク集を作って，Instagramのプロフィール欄からそこに飛ばそうというアイデアです。

Instagramのアカウントと連携することで，プロフィール写真やアカウント名がそのまま表示されるので，見ているユーザーを違和感なく誘導できるわけですね。Instagramをビジネス目的に使ってる人に便利なサービスです。

図6　Instagramと連携させると便利なリンク集作成サービスLinktree

図6　Instagramと連携させると便利なリンク集作成サービスLinktree

図7　Linktreeで作ったリンク集の画面例とサービスの解説

図7　Linktreeで作ったリンク集の画面例とサービスの解説

今週の気になるWebネタ

HomePodの“輪染み”防止用コースター，19.95ドルで予約受付中 - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1802/16/news069.html

アメリカでは販売が始まったAppleのスマートスピーカーHomePodですが，木製のテーブルなどに置いておくと，白い“⁠輪染み⁠”ができるという問題があるそうです。

こんなのアメリカだったら訴訟問題とかになるんじゃないかと思いましたが，スピーカーをどけてしばらくすれば自然に消えることが多く，消えない場合も拭けばとれるそうで，そう大きな問題ではなさそうでした。

ということで，これを防止するための革製コースターが出たというニュースを目にしました。こういう隙間商品的なものって日本の方が得意なので，HomePodが日本でも同時発売されなかったことを残念に思いました。ダイソーはもう商品準備しているかもしれませんね。

Webテク, Webデザイン, Web広告, UI, パノラマ画像, スマートスピーカー

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote