週刊Webテク通信

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

ネットで見かけた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で作ったリンク集の画面例とサービスの解説

おすすめ記事

記事・ニュース一覧