週刊Webテク通信

2022年2月第4週号 1位は，フォームの種類8つとそれをデザインするためのヒント，気になるネタは，ソニー，穴のあいた完全ワイヤレスイヤホン「LinkBuds」--聴きながら聞こえる体験へ

Webテク, Webデザイン, Web広告, CSSグリッド, HTML, CSS, UIデザイン, カラーファミリー, ワイヤレスイヤホン

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

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

1. Forms for the Win: 8 Types of Forms You Should Know How to Design | Design Shackhttps://designshack.net/articles/graphics/types-of-forms-you-should-know-how-to-design/

フォームの種類8つとそれをデザインするためのヒントを紹介しています。

  1. お問い合わせフォーム
  2. メールサインアップフォーム
  3. Eコマースフォーム
  4. 調査／フィードバックフォーム
  5. アカウントのサインアップ／ログイン
  6. 求人募集フォーム
  7. サポート／ヘルプリクエストフォーム
  8. 寄付フォーム

図1　8つのフォームの種類とデザインするためのヒント

図1　8つのフォームの種類とデザインするためのヒント

2. An Auto-Filling CSS Grid With Max Columns of a Minimum Size | CSS-Tricks - CSS-Trickshttps://css-tricks.com/an-auto-filling-css-grid-with-max-columns/

CSSグリッドでレスポンシブなタイルレイアウトを作るテクニックを紹介しています。最大のカラム数と最小のサイズを指定することで，領域の幅に合わせて自動でレイアウトされます。

横に並ぶセルの最大数と，セルの幅がどこまで狭くなるかの最小値，そして隙間の大きさを指定するだけなので，いろいろ応用できて便利だと思います。

図2　CSSグリッドでレスポンシブなタイルレイアウトを作るテクニック

図2　CSSグリッドでレスポンシブなタイルレイアウトを作るテクニック

3. 5 Awesome HTML and CSS projects to build (with codepen preview) - DEV Communityhttps://dev.to/babib/5-awesome-html-and-css-projects-to-build-5en5

いろいろなパターンのページのHTML＆CSSでのコーディング例をまとめた記事です。

以下の項目に分けてCodePenで共有されているコードを紹介しています。

  1. アンケートフォーム
  2. トリビュートページ
  3. ランディングページ
  4. 技術資料
  5. 個人ポートフォリオ

図3　HTML＆CSSでのコーディング例いろいろ

図3　HTML＆CSSでのコーディング例いろいろ

4. Web UI Design Examples and What You Can Learn From Themhttps://www.uxpin.com/studio/blog/web-ui-design-examples/

UIデザインのいくつかの例と，それらが優れている理由を解説した記事です。優れたユーザー体験を作るためのUIデザインの原則をまとめたチェックリストも掲載しています。

4つ目に紹介されているBennet Teaのページが印象に残りました。スクロールとともに商品が切り替わり，茶葉がアニメーションして表示されるのはインパクトがあります。スクロールして商品が変わると，値段とURLの末尾が変わるところもよくできています。

図4　UIデザインのいくつかの例とそれらが優れている理由

図4　UIデザインのいくつかの例とそれらが優れている理由

5. Toools.design – Design Resources Archive & Newsletterhttps://www.toools.design/

デザイン素材やツールをカテゴリ別にまとめたサイトです。イラスト素材，写真素材，アイコンなどの素材や，デザインツール，UXツール，参考になるブログやギャラリーサイトなどのカテゴリーがあります。

週に1回5つの新しいデザインリソースを紹介するニュースレターも発行しています。

図5　デザイン素材やツールをカテゴリ別にまとめたサイト

図5　デザイン素材やツールをカテゴリ別にまとめたサイト

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

先週の気になるツール／サービス

UI Colors | Tailwind CSS Color Shades Generator & Editorhttps://uicolors.app/create

カラーファミリーを作るサービスです。Tailwind CSSカラーシェードジェネレーターという名前ですがTailwind CSSを使っていない場合にも役立つはずです。

キーとなる色を選ぶと，10段階の色が生成されます。色相，彩度，明度を細かくコントロールすることも可能です。複数のカラーファミリーを並べて比較しながら作れるようになっています。

完成したカラーファミリーは，Tailwind CSS用のコードを生成して新しいカラーとして追加できます。また，SCSS，CSS，SVGとして書き出すことも可能です。

図6　Tailwind CSSなどで使えるカラーファミリーを作るサービス

図6　Tailwind CSSなどで使えるカラーファミリーを作るサービス

今週の気になるWebネタ

ソニー，穴のあいた完全ワイヤレスイヤホン「LinkBuds」--聴きながら聞こえる体験へ - CNET Japanhttps://japan.cnet.com/article/35183585/

ソニーから穴の開いた完全ワイヤレスイヤホンLinkBudsが発表されました。「⁠穴のあいた」イヤホンという言葉だけではイメージできなかったのですが，耳を塞がず外の音が聞こえるように穴が空いていました。

AirPods Proは外部音取り込みモードで外の音を聞けるようになっていますが，まさか耳の穴を塞がないというアプローチとは驚きました。カナル型は圧迫感があって嫌だという人にも良さそうです。

音漏れがどの程度なのか気になるところですが，それなりに外部音がある環境で使うことが前提なので，そこまで気にならないのかもしれません。ノイズキャンセルはないので，騒がしい場所でポッドキャストを聞くのには向かないのかなと思いました。

Webテク, Webデザイン, Web広告, CSSグリッド, HTML, CSS, UIデザイン, カラーファミリー, ワイヤレスイヤホン

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote