週刊Webテク通信

2021年5月第4週号1位は、コンポーネント主導の新しいレスポンシブWebデザインの解説、気になるネタは、グーグルがRSSを復活させる

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

1. The new responsive: Web design in a component-driven worldhttps://web.dev/new-responsive/

コンポーネント主導の新しいレスポンシブWebデザインについて解説した記事です。

  1. ユーザーに対するレスポンシブ
    ユーザーのパソコンの設定によって、モーションを控えたり、ダークモードにしたり変化します
  2. コンテナに対するレスポンシブ
    今話題のCSSコンテナクエリを使うことで、親コンテナに基づいたレイアウトができるようになります
  3. フォームファクターに対するレスポンシブ
    デバイスのサイズや形状などに合わせたレイアウトを実現します。たとえば、折りたたみ式ディスプレイの端末に最適化したレイアウトなど
図1 コンポーネント主導の新しいレスポンシブWebデザインの解説
図1 コンポーネント主導の新しいレスポンシブWebデザインの解説

2. Choosing colors for mobile app design (5 key principles) | Dribbble Design Bloghttps://dribbble.com/stories/2021/05/20/choosing-colors-mobile-app-design

モバイルアプリで色を選ぶときの5つの原則をまとめています。

  1. 感情に合わせた色を選ぶ
  2. 競合他社がアプリのストアで使っている色を確認する
  3. (3色ルールのパレットに)4番目の色を追加する
  4. 基本から始める
  5. ルールを破ることを恐れない
図2 モバイルアプリで色を選ぶときの5つの原則
図2 モバイルアプリで色を選ぶときの5つの原則

3. Frustrating Design Patterns: Mega-Dropdown Hover Menus — Smashing Magazinehttps://www.smashingmagazine.com/2021/05/frustrating-design-patterns-mega-dropdown-hover-menus/

メガドロップダウンメニューをデザインする際に気をつける点、ホバーメニューの代替手段などを紹介した記事です。

メガドロップダウンメニューの問題点を指摘し、ホバー状態でメニューを開く代わりにクリック/タップにする提案をしています。また、モバイルの場合のメガドロップダウンの事例と、アコーディオンや分割メニューを使う方法を解説していました。

図3 メガドロップダウンメニューで気をつける点と代替手段
図3 メガドロップダウンメニューで気をつける点と代替手段

4. What Is Rapid Prototyping & Why Use It? (+ 5 Best Tools) | Design Shackhttps://designshack.net/articles/ux-design/what-is-rapid-prototyping/

ラピッドプロトタイピングのためのツールを紹介しています。ラピッドプロトタイピングのコツも最後にまとめてありました。

  1. Figma
  2. InVision
  3. Adobe XD
  4. Framer
  5. UXPin
図4 ラピッドプロトタイピングのためのツール5選
図4 ラピッドプロトタイピングのためのツール5選

5. he Best No-Code Tools for Developers in 2021https://www.freecodecamp.org/news/best-no-code-tools-for-developers/

ノーコードでのWebサイトやサービス/アプリ制作に役立つツールをまとめた記事です。14個のツールを掲載しています。

ノーコードでのWebサイト制作ツールとしては、やはりWebflowが選ばれていました。

図5 Webサイトやサービス/アプリ制作に役立つノーコードツール
図5 Webサイトやサービス/アプリ制作に役立つノーコードツール

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

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

Hashnode: Everything you need to start blogging as a developer!https://hashnode.com/

Hashnodeは技術者のための無料のブログサービスです。さきほどの4位の記事でノーコードツールのひとつとして紹介されていました。

独自ドメインでブログを作れて、デザインのカスタマイズ性もそれなりにありそうです。コミュニテイ的な機能もあり、書いた記事が見つけられやすいところはMediumやnoteと似た印象を持ちました。

記事はランキング、タグ、検索で探せます。検索機能も全文検索、タグ検索、人物検索を切り替えられて、動作も快適です。コンセプト的には日本のサービスだとZennに近いですが、より洗練されていると感じました。

図6 技術者のための無料のブログサービスHashnode
図6 技術者のための無料のブログサービスHashnode

おすすめ記事

記事・ニュース一覧