週刊Webテク通信

2021年10月第2週号1位は、Figmaでのデザイン作業をスピードアップする方法、気になるネタは、InstagramがIGTVブランドを廃止、リール以外のビデオを「Instagram Video」フォーマットに統一

ネットで見かけた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. コンポーネントが正しくリサイズされないとき間隔の設定を変更する
図1 Figmaでのデザイン作業をスピードアップする方法
図1 Figmaでのデザイン作業をスピードアップする方法

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

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

  • テキストとテキストが含まれる領域を適切なサイズにする
  • レイアウトに複数カラムを活用する
  • 大事な要素は手が届く範囲に表示する(カーソルを動かす距離が長くならないように)
  • 予測可能なデザインパターンを使う
  • 大画面の画素数を有効に使う
図2 大画面に対応したWebデザインのヒント
図2 大画面に対応した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はロゴなどを控え目じゃなく大きく使うことです。

図3 今月のデザイントレンドを3つ
図3 今月のデザイントレンドを3つ

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

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

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

図4 CSSで角丸をコントロールする裏技的なテクニック
図4 CSSで角丸をコントロールする裏技的なテクニック

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

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

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

図5 スクロールエリアに影を付ける方法
図5 スクロールエリアに影を付ける方法

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

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

Doodle Ipsumhttps://doodleipsum.com/

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

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

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

図6 イラストを使ったダミー画像生成サービス
図6 イラストを使ったダミー画像生成サービス

おすすめ記事

記事・ニュース一覧