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

1. 9 Figma Design System Tips. - Marc Andrewhttps://marcandrew.me/9-figma-design-system-tips/

Figmaでのデザイン作業をスピードアップするのに役立つ方法を紹介しています。

1. 色をまとめて変えるときは「Selection colors」機能を使う
2. 便利なショートカットを使ってレイヤーを整理する
3. テキストスタイルを早く選ぶには検索すればよい
4. カラースタイルを素早く使うにはリストオプションを選ぶ
5. レイヤーを素早く操作するにはキーボードショートカットを使う
6. コンポーネントを素早く差し替えるには便利なショートカットを使う
7. オートレイアウトのコンポーネントをリサイズするときレイヤーパネルの「目」を利用する
8. オートレイアウトを使うときにテキストの揃えの混乱を回避する
9. コンポーネントが正しくリサイズされないとき間隔の設定を変更する

2. The Challenge of Designing Websites for Large Screenshttps://speckyboy.com/designing-websites-for-large-screens/

大画面に対応したWebデザインのヒントをまとめています。

• テキストとテキストが含まれる領域を適切なサイズにする
• レイアウトに複数カラムを活用する
• 大事な要素は手が届く範囲に表示する（カーソルを動かす距離が長くならないように）
• 予測可能なデザインパターンを使う
• 大画面の画素数を有効に使う

3. 3 Essential Design Trends, October 2021 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/10/3-essential-design-trends-october-2021/

今月のデザイントレンドを3つ，例とともに紹介しています。

1. ヒーロータイポグラフィ
2. 丸いボタン
3. 大きなブランディング

1はヒーローエリアの主役を画像じゃなく文字にすること，3はロゴなどを控え目じゃなく大きく使うことです。

4. Conditional Border Radius In CSS - Ahmad Shadeedhttps://ishadeed.com/article/conditional-border-radius/

カードコンポーネントの角丸を，スマホサイズなどで横幅いっぱいになった場合には直角の角にするテクニックを解説しています。

Facebookで使われていた手法とのことで，max()，min()，calc()を使ってトリッキーな方法で実現していて興味深いです。

5. Scroll Shadows With JavaScript | CSS-Trickshttps://css-tricks.com/scroll-shadows-with-javascript/

CSSとJavaScriptを使って，スクロールに合わせて影を表示する方法を紹介しています。ページ内にスクロールする要素があった場合，スクロールできる方向の端に影を重ねます。

CSSだけでもできるのですが，iOSのSafariで機能しなくなったらしく，JavaScriptを使った方法を推奨していました。

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

• メルカリ内でショップを開ける「メルカリShops」開始 値下げ交渉なしで販売可 - ITmedia NEWS
  販売手数料は売上金の10％ですが，売上10万円までは販売手数料を無料にするキャンペーンを行うそうです
• YouTubeのライブ自動字幕起こし，全クリエイターが利用可能に - CNET Japan
  今は英語のみですが，今後数カ月のうちに自動字幕起こし機能に対応する13言語すべてで利用できるようになるとのこと
• テレビ動画アプリ「TVer⁠」⁠，最後まで視聴されると課金するインターネット広告を導入 - CNET Japan
  「⁠日本の大手動画媒体では初となる完全視聴ベースの課金形態」なんですね

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

Doodle Ipsumhttps://doodleipsum.com/

イラストを使ったダミー画像生成サービスです。イラスト素材を無料＆有料で提供しているBlushが提供しています。プロトタイプだけでなく実際に公開するサイトで使ってもよいようです。

イラストの作風（実質作者です）を選ぶとランダムにイラストが表示されます。画像サイズは縦横比を選ぶか数値で指定できます。背景色もカスタマイズ可能です。画像のURLだけでなく，埋め込みコードを生成する機能もあります。埋め込みコードにはイラストの作者名も入れられます。

読み込み時にランダムにその作風のイラストが表示されるURLを生成できると思ったのですが，実際は特定のイラストを表示するURLでした。Blushのイラスト素材を選ぶ新たな手段ということですね。