週刊Webテク通信

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

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

ネットで見かけた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 イラストを使ったダミー画像生成サービス

今週の気になるWebネタ

InstagramがIGTVブランドを廃止,リール以外のビデオを「Instagram Video」フォーマットに統一 | TechCrunch Japanhttps://jp.techcrunch.com/2021/10/07/2021-10-05-instagram-ditches-the-igtv-brand-combines-everything-but-reels-into-an-instagram-video-format/

InstagramがIGTVの名称を廃止することを発表しました。これまで動画は通常投稿としての動画,長尺用のIGTV,ショート用のリールの3つに分かれていましたが,今後は通常投稿で長尺(60分まで)の動画も扱えるようになります。

ちょっとわかりやすくなりましたが,ストーリーもありますし,やはり初心者が理解するのは難しいと思います。動画の長さに制限があることによる良さもあったと思うのですが,だらだら長い動画が増えてしまう可能性もありそうです。動画はこれまで同様フィード上では60秒まで表示されます。

ユーザーページにはこれまでのIGTVのタブの代わりに動画タブが登場して,そのアカウントが投稿した動画をまとめて見られるようになります。IGTVの単独アプリはなくなってしまうのではなく,名称などを変更して継続される予定とのことです。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote