週刊Webテク通信

2017年6月第2週号1位は、UXに悪影響を与えるUI7選、気になるネタは、子ども向けの動画視聴アプリ「YouTube Kids」日本でも提供開始

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

1. 7 UI Choices That Damage UX | Webdesigner Depothttps://www.webdesignerdepot.com/2017/05/7-ui-choices-that-damage-ux/

UXに悪影響を与えるUIを7つ紹介しています。

  1. 望まれていないモーダルウィンドウ
  2. 罪悪感に訴えるコピーライティング
  3. 全画面オーバーレイ
  4. スライドインする広告
  5. カスタムスクロール
  6. クリッカブルな余白のないナビゲーションメニュー
  7. 1アイテム1ページで複数ページに分けられた記事
図1 UXに悪影響を与えるUI7選
図1 UXに悪影響を与えるUI7選

2. Designing a Small Business Website: Wants vs Needs | Creative Cloud blog by Adobehttps://blogs.adobe.com/creativecloud/designing-a-small-business-website-wants-vs-needs/

規模の小さい企業のウェブサイト制作について、成功のために必要なことに絞るべきということを説明した記事です。

  1. 1つのことを正しく行う
  2. エンドユーザーが誰かを決める
  3. ターゲットユーザーに合わせたデザインをする
  4. 訪問者を段階的に誘導する
  5. モバイルファーストにする
  6. 重要なページを全て作る
図2 規模の小さい企業のウェブサイト制作について
図2 規模の小さい企業のウェブサイト制作について

3. 5 Simple & Lightweight CMSs for Web Designershttps://speckyboy.com/simple-lightweight-cms-web-designer/

シンプルで軽量なCMSをまとめた記事です。データベース不要のものなど、簡単に構築できてレスポンスも良いCMSが紹介されています。

その昔Blosxomというデータベース不要のブログシステムを使っていたこともあり、個人的にもシンプル&軽量でちょっとマイナーなCMSに興味があります。

図3 シンプルで軽量なCMSいろいろ
図3 シンプルで軽量なCMSいろいろ

4. CSS Forms From CodePen - Freebie Supplyhttps://freebiesupply.com/blog/css-forms-from-codepen/

フォームのデザイン&コーディング例を、コード共有サイトCopePenから多数紹介しています。

ちょっとしたアニメーション効果があるもの、対話型になっているものなど、参考になりそうなものが揃っています。

図4 フォームのデザイン&コーディング例を多数紹介
図4 フォームのデザイン&コーディング例を多数紹介

5. Chat UIs & Interaction Design – Inspiration Supply – Mediumhttps://medium.com/inspiration-supply/chat-uis-interaction-design-7b62523f3dc4

チャットのUIとインタラクションデザインのサンプルをまとめています。

アプリやサイトの実例ではなくデザインコンセプト的なものですが、その分動きに凝ったものが多く刺激的です。

図5 チャットのUIとインタラクションデザインのサンプル
図5 チャットのUIとインタラクションデザインのサンプル

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

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

Web Design Museumhttps://www.webdesignmuseum.org/

Web Design Museumはウェブデザインの博物館的なサイトで、1996年からの800以上の厳選されたサイトを「展示」しています。

年、カテゴリ(業種⁠⁠、スタイル(デザインのスタイル)によって絞り込むことができますし、企業名/ブランド名からサイトの歴史をたどっていくタイムライン表示もあります。複数カテゴリで絞り込めたり、検索もできたりと機能が充実しています。

ウェブデザインのトレンドを振り返れますし、GoogleやAppleなどの昔のサイトを懐かしく見ることもできます。サイトのキャプチャー画像なので、HTMLやCSSは見られませんが、ウェブデザインの歴史を簡単に振り返ることができる便利なサイトです。

図6 ウェブデザインの歴史を振り返る博物館的なサイト
図6 ウェブデザインの歴史を振り返る博物館的なサイト

おすすめ記事

記事・ニュース一覧