週刊Webテク通信

2020年11月第1週号 1位は，CSSによって要素を隠す方法の比較，気になるネタは，Appleが簡単動画作成アプリClips 3.0発表，縦位置ビデオサポートでTikTok世代を狙う

Webテク, Webデザイン, Web広告, CSS, カラーパレット, フッター, 動画作成

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

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

1. Comparing Various Ways to Hide Things in CSS | CSS-Trickshttps://css-tricks.com/comparing-various-ways-to-hide-things-in-css/

CSSによって要素を隠すいろいろな方法とそれらの比較です。

以下の4つの項目を踏まえて比較しています。

  1. アクセシビリティ：非表示の要素はスクリーンリーダーで読み取られるか
  2. ドキュメントフロー：非表示の要素はレイアウトに影響を与えるか
  3. レンダリング：非表示の要素のボックスモデルはレンダリングされるか
  4. イベントトリガー：非表示の要素はクリックやフォーカスを検出するか

方法としては以下の5種類と，おまけ的にtext-indentプロパティを使った方法を解説していました。

  1. displayプロパティを使った方法
  2. visibilityプロパティを使った方法
  3. opacityプロパティを使った方法
  4. positionプロパティを使った方法
  5. visually hiddenクラスを使った方法

図1　CSSによって要素を隠す方法の比較

図1　CSSによって要素を隠す方法の比較

2. Practical Guide to Color Theory for UI designershttps://designerup.co/blog/practical-guide-to-perfect-ui-color-palettes/

色のセオリーとUIデザインに用いるカラーパレットに関する実用的なガイドです。

6つの主要なカラーカテゴリを紹介しています。UIに使う色は，1つのカラーカテゴリとニュートラル＆シェードを組み合わせると良いと解説していました。

  1. ジュエルトーン
  2. パステル
  3. アースカラー
  4. ニュートラル
  5. 蛍光灯／ネオン
  6. シェード

図2　UIデザインのための色のセオリー

図2　UIデザインのための色のセオリー

3. Website Footer Best Practices & Examples to Learn From in 2020 - Noupe Online Magazinehttps://www.noupe.com/design/website-footer.html

ウェブサイトにおける良いフッターデザインの作り方と，学ぶべき実例を紹介した記事です。

フッターに必要なもの
  • 利用規約
  • プライバシーポリシー
  • コピーライト表記
フッターにあると良いもの
  • お問い合わせ
  • サイトマップ
  • わたしたちについて
  • ソーシャルメディアへのリンク

図3　良いフッターデザインの作り方と実例

図3　良いフッターデザインの作り方と実例

4. Free Mockups, Templates & Icons for Your Next Design Project | Dribbble Design Bloghttps://dribbble.com/stories/2020/10/29/free-design-mockups-templates-icons

無料で配布されているモックアップ，テンプレート，アイコンをまとめています。

ビジュアルでどういうものかわかるものばかりなので，まずは画像だけをまとめてレイアウトするという記事の見せ方が新鮮でした。

図4　フリーのモックアップ，テンプレート，アイコンいろいろ

図4　フリーのモックアップ，テンプレート，アイコンいろいろ

5. Minimal CSS Frameworks — dailydevlinkshttps://dailydevlinks.com/minimal-css-frameworks/

ミニマルなCSSフレームワークを9つ紹介しています。

最近流行の，HTMLタグへのclass指定なしでそれなりの見た目に調整する，「⁠クラスレス」なフレームワークもいくつかありました。

図5　ミニマルなCSSフレームワークいろいろ

図5　ミニマルなCSSフレームワークいろいろ

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

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

PatternPad - Editorhttps://patternpad.com/editor.html
CSS Background Patterns by MagicPatternhttps://www.magicpattern.design/tools/css-backgrounds

今回はパターンを作成するサービスを2つ紹介します。PatternPadはSVG形式を含む画像ファイル，CSS Background PatternsはCSSを生成します。

PatternPadは丸や四角，半円，三角形などの図形の組み合わせのパターンを作れます。ランダム性のあるパターンが作れて，使用する図形を指定する，色を変更・追加するなどのカスタマイズができます。SVG，JPEG，PNGでダウンロードできます。

CSS Background Patternsは，ストライプ，斜線，チェック柄などの単純な繰り返しパターンのCSSを作れます。図形の色と背景色を選べて，透明度，間隔を調整できます。「⁠鬼滅の刃」の主人公の服の市松模様も作れますね。

図6　図形の組み合わせでパターンを作るPatternPad

図6　図形の組み合わせでパターンを作るPatternPad

図7　CSSのパターンを作るCSS Background Patterns

図7　CSSのパターンを作るCSS Background Patterns

今週の気になるWebネタ

Appleが簡単動画作成アプリClips 3.0発表，縦位置ビデオサポートでTikTok世代を狙う | TechCrunch Japanhttps://jp.techcrunch.com/2020/10/29/2020-10-28-apple-eyes-the-tiktok-generation-with-an-updated-version-of-clips/

Appleのカジュアルな動画作成アプリClipsの新バージョンでは，縦長動画をサポートしたそうです。従来はInstagram動画をターゲットとした正方形動画しか作れませんでした。

縦型ビデオのサポートがClipsに対する要望で最も多かったとAppleも発表していたとのことです。iMovieへの縦長動画対応への要望もきっとAppleに届いているはずですよね。

iPhoneで縦長動画で動画を撮るケースは多いと思うのですが，Apple標準のiMovieが縦長動画に対応していないことを不満に思っている人は多いはずです。Clipsに続きiMovieの縦長動画サポートの日も近いと信じたいです。

Webテク, Webデザイン, Web広告, CSS, カラーパレット, フッター, 動画作成

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote