週刊Webテク通信

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

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

ネットで見かけた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

今週の気になるWebネタ

グーグルがRSSを復活させる | TechCrunch Japanhttps://jp.techcrunch.com/2021/05/20/2021-05-19-undead-again-google-brings-back-rss/

Google ChromeにRSSリーダー的な機能が付くようです。いまのところAndroid用の試験運用版での機能ですが,⁠RSSを復活」という記事のフレーズに反応してしまいました。

サイトの「フォロー」機能として提供され,フォローしているサイトの更新情報を時系列で見られるようです。RSSという名前は表に出てませんが,まさにRSSリーダー機能と言えますね。

RSSリーダーの定番だったGoogleリーダーが終了したのは2013年だそうで,およそ10年ぶりにRSSが見直されることになるのでしょうか。わたしはRSSリーダーとしてFeedlyを使い続けているのでChromeのフォロー機能はあまり使わないかもしれませんが,正式採用されることは願っています。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote