週刊Webテク通信

2022年3月第3週号 1位は，成功するフッターに必要な5つの要素，気になるネタは，アップルの新27インチStudio Displayはほぼ本体のないiMac

Webテク, Webデザイン, Web広告, CSS, HTML, ブロックエディタ, バッジ, Apple, ディスプレイ

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

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

1. 5 Must-Have Elements of a Successful Footer in 2022 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2022/03/5-must-have-elements-of-a-successful-footer-in-2022/

成功するフッターに必要な5つの要素を紹介しています。

  1. ロゴの追加
  2. コールトゥアクション（ボタンなどアクションを起こさせる要素）を含める
  3. 法的な通知（プライバシーポリシーや免責事項など）
  4. 有用なリンクだけを入れる
  5. 連絡先情報

フッターにサイトの全てのリンクを入れるケースも多いですが，この記事では慎重に選んだリンクだけ載せることを推奨しています。メインのナビゲーションには商品情報などセールスに関わるリンクを入れ，フッターのリンクには返品ポリシーなどの情報コンテンツを入れるのに適しているとのことでした。

図1　成功するフッターに必要な5つの要素

図1　成功するフッターに必要な5つの要素

2. 10 Useful CSS Tricks for Front-end Developers - Stack Diaryhttps://stackdiary.com/useful-css-tricks/

便利なCSSのテクニックを10個まとめた記事です。ツールチップやアコーディオンなど，昔ならJavaScriptを使って動きを付けていたものを，CSSだけで実現するコーディング例がいろいろ載っています。

Web制作のベテランこそ知識がアップデートされてないことも多いので，今はこんなこともCSSだけでできるんだという発見があるかもしれません。

図2　便利なCSSのテクニック10個

図2　便利なCSSのテクニック10個

3. Top 11 design tools and resources to kickstart your projecthttps://setproduct.com/blog/top-design-tools

最近の新しいデザイン関連のツールを11個まとめた記事です。2022年の3ヶ月間のProductHunt（サービス，ツール，アプリ紹介サイト）で人気のものをセレクトしています。

3D，ノーコードのWebサイト作成ツールやアイコンなどがありました。

図3　最近の新しいデザイン関連のツールいろいろ

図3　最近の新しいデザイン関連のツールいろいろ

4. HTML and CSS in Emails: What Works in 2022? - Designmodohttps://designmodo.com/html-css-emails/

HTMLメール作成時に配慮すべきCSSの対応状況について解説した記事です。主要メールクライアントでの対応状況を数字で紹介していて参考になります。

Flexboxは84.85%のメールクライアントで対応しているものの，いまだにテーブルレイアウトが最善という解説でした。

図4　現在のHTMLメールでのCSSの対応状況について

図4　現在のHTMLメールでのCSSの対応状況について

5．10 Free WordPress Block Themes That Utilize Full Site Editinghttps://speckyboy.com/free-wordpress-block-themes-full-site-editing/

WordPressのブロックエディタに対応したテーマを10個紹介しています。フルサイト編集（Full Site Editing）のための無料のテーマです。

ブロックテーマとフルサイト編集によりWordPressのテーマの構築方法も変わって行きそうです。

図5　WordPressのブロックエディタに対応したテーマいろいろ

図5　WordPressのブロックエディタに対応したテーマいろいろ

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

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

Markdown Badgeshttps://mdb.pushkaryadav.in/

Webページやブログなどに表示するバッジを作れるサービスです。背景色のついたアイコン＆文字によるバッジのコードをマークダウン形式で入手できます。

言語やフレームワーク，ライブラリ名，ソーシャルメディアなどの名前があらかじめ用意されていて，選ぶと自動でアイコン付きのバッジが生成されます。バッジはSVG画像なので，直リンクで表示させられます。

カスタマイズの機能はありませんが，生成されたコードを変更することでテキストや色を変更できました。Web制作者がプロフィールに自分のスキルを載せるときに役立ちそうです。

図6　アイコンと文字によるバッジを作れるサービス

図6　アイコンと文字によるバッジを作れるサービス

図7　バッジを作る画面

図7　バッジを作る画面

今週の気になるWebネタ

アップルの新27インチStudio Displayはほぼ本体のないiMac | TechCrunch Japanhttps://jp.techcrunch.com/2022/03/09/2022-03-08-apple-studio-display/

AppleイベントでMac StudioとともにStudio Displayという名の27インチ5Kのディスプレイが発表されました。19万9800円からとなかなか高価ですが，なんとか手の届きそうなApple純正ディスプレイがラインナップされたのは喜ばしいと思います。

しっかりした性能のインカメラとスピーカー，マイクが付いているのは，Mac Studioを補完するためですね。Mac Miniと組み合わせるのにも良さそうです。また，対応機種は限られますが，iPadにも対応しています。

MacBook Proのディスプレイとして考えると，インカメラ・スピーカー・マイクが本体＆ディスプレイの両方に付いている状態はもったいなく感じてしまいます。Apple好きならコストを度外視して，ディスプレイに繋いでいるときも，持ち運んで使うときも，Appleクオリティのインカメラ・スピーカー・マイクが使えることをありがたく思うべきなのでしょう。

Webテク, Webデザイン, Web広告, CSS, HTML, ブロックエディタ, バッジ, Apple, ディスプレイ

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote