週刊Webテク通信

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

ネットで見かけた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 バッジを作る画面

おすすめ記事

記事・ニュース一覧