週刊Webテク通信

2020年10月第5週号 1位は，CSSグリッドの完全版チュートリアル，気になるネタは，AdobeがiPad用IllustratorとiPhone用Frescoをリリース

Webテク, Webデザイン, Web広告, CSSグリッド, UI, UX, レスポンシブデザイン, 動画, Illustrator

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

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

1. The Complete CSS Grid Tutorialhttps://jst.hashnode.dev/css-grid-tutorial

CSSグリッドの完全版チュートリアルです。CSSグリッドについて初歩から丁寧に解説して，図版も豊富です。

1ページですがかなりのボリュームがあって，まさにComplete（完全）と名乗るにふさわしい充実した内容でした。

これのFlexbox版があったらいいのにと思ったら，最後に「The Complete CSS Flex Tutorial」へのリンクがありました。こちらも充実の内容です。

図1　CSSグリッドの完全版チュートリアル

図1　CSSグリッドの完全版チュートリアル

2. Web Layout Best Practices – 12 Timeless UI Patterns | Toptalhttps://www.toptal.com/designers/ui/web-layout-best-practices

時間を超えて使われるUIパターンを12種類紹介しています。そのときどきの流行ではなく，ずっと使われ続けている便利で使いやすいUIです。

  1. カードスタイルのWebレイアウトパターン
  2. スクリーン分割レイアウト
  3. 大きなタイポグラフィ
  4. パーソナライズ
  5. グリッド
  6. 雑誌のようなスタイルのWebレイアウト
  7. シングルページレイアウト
  8. FパターンとZパターン
  9. 非対称
  10. クリーンでシンプルなWebレイアウト
  11. ナビゲーションタブ
  12. カルーセル

図2　時間を超えて使われるUIパターン12種

図2　時間を超えて使われるUIパターン12種

3. 10 Usability Mistakes Most Designers Make on Checkboxeshttps://uxmovement.com/forms/10-usability-mistakes-most-designers-make-on-checkboxes/

ほとんどのデザイナーが間違えるチェックボックスのユーザビリティについてまとめています。

  1. 否定文をラベルに使わない
  2. 注文が二重に追加されてしまうようなアイテムを作らない
  3. チェックできる領域を大きくする
  4. 縦並びより横に並べる方が一目でわかりやすい
  5. 複数選択できない内容のときはチェックボックスを使わない

図3　間違えやすいチェックボックスのユーザビリティについて

図3　間違えやすいチェックボックスのユーザビリティについて

4. Figma Vs Adobe XD: Which is Better for UX Prototyping - noupehttps://www.noupe.com/design/figma-vs-adobe-xd.html

FigmaとAdobe XDのどちらがUXプロトタイピングに使うのに良いかを比較した記事です。

以下の項目で比較していますが，用途に応じて選びましょうという感じの結論でした。

  1. Webベースとソフトウェア
  2. コラボレーション機能
  3. 価格
  4. デザインの仕様書を作る
  5. 機能性
  6. 画面サイズに応じたコンポーネントの調整
  7. コンポーネント機能
  8. 素材の管理システム
  9. サードパーティのアドオン
  10. プロトタイピング
  11. グリッドとカラム

図4　FigmaとAdobe XDを11項目で比較

図4　FigmaとAdobe XDを11項目で比較

5. A step-by-step process for creating responsive logo designs | Dribbble Design Bloghttps://dribbble.com/stories/2020/10/20/responsive-logo-design-process

レスポンシブなロゴデザインの手順を紹介しています。ここでのレスポンシブは，サイズや用途によって変化するといった意味です。

  1. 1色のバージョン
  2. フルカラーバージョン
  3. 小さいサイズのバージョン
  4. グレースケールバージョン
  5. 縦長サイズバージョン

図5　レスポンシブなロゴの作り方

図5　レスポンシブなロゴの作り方

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

先週の気になるWebサービス

Deep Wordhttps://www.deepword.co/

Deep Wordは，人が喋っている短い動画と音声ファイルを元に，その音声をその人が喋っている動画を生成するサービスです。

いわゆるディープフェイク動画の技術ですね。口パクをさせるだけなので，喋っている言語は英語以外でも問題ないと思います。

無料プランで作れる動画は月5本，1本の長さ1分まで，サイズ720pです。次の14.99ドルのプランではフルHDサイズで作れますが，月10本，1本の長さ6分までとかなり制限があります。

わたしが喋っている動画と，ポッドキャストの音声データとで動画を生成したので興味のある方はご覧ください。

図6　元となる動画と音声ファイルから人が喋る動画を生成するサービス

図6　元となる動画と音声ファイルから人が喋る動画を生成するサービス

今週の気になるWebネタ

AdobeがiPad用IllustratorとiPhone用Frescoをリリース | TechCrunch Japanhttps://jp.techcrunch.com/2020/10/21/2020-10-20-adobe-illustrator-launches-on-ipad-and-fresco-on-iphone/

ついにAdobe IllustratorのiPad版がリリースされました。また，iPad版しかなかったお絵かきアプリのFrescoにiPhone版が登場しました。

いよいよiPadでもPhotoshopとIllustratorが揃い，デザイン界隈では話題となっています。いよいよiPadで仕事ができるといった声もちらほら見かけました。

実は，ベクターもCMYKもiPadで扱えるアプリは既にありました。でも，Adobeの定番ツールの登場で，やっとでiPadでのデザイン作業に興味を持つ人が増えそうです。

Webテク, Webデザイン, Web広告, CSSグリッド, UI, UX, レスポンシブデザイン, 動画, Illustrator

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote