gihyo.jpサイトのロゴ

週刊Webテク通信

2021年9月第1週号1位は、効果的な会社概要ページをデザインするヒント、気になるネタは、Apple、iCloudでメール非公開とカスタムドメインを可能に

2021-09-02

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

1. 7 Essential Design Tips for a Killer “About Us” Page | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/08/7-essential-design-tips-for-a-killer-about-us-page/

効果的な会社概要ページ（About Us Page）をデザインするためのヒントをまとめています。

  1. 何を含めるかを決める
  2. ミッションステートメントを明確にする
  3. 信頼を高める要素を入れる
  4. ブランドの個性を伝える
  5. 訪問者を時間の旅に誘う
  6. 企業の中には人がいることを見せる
  7. ビジュアルで価値を示す
図1　効果的な会社概要ページをデザインするヒント
図1　効果的な会社概要ページをデザインするヒント

2. 10 Tips for Working With Bold Colors in Web Design | Design Shackhttps://designshack.net/articles/graphics/bold-colors-in-web-design/

Webデザインで大胆な色を扱う10のヒントをまとめた記事です。

  1. 狙い通りの印象を感じてもらう配色にする
  2. 伝統的ではないやりかたで強調する
  3. あなたらしく強調する
  4. 驚くようなテキスト要素を作る
  5. 厳格な美学に対抗する
  6. 存在感を示す
  7. 注目を集める
  8. 楽しくする
  9. 鮮やかな背景を設定する
  10. トレンディな一面を見せる
図2　Webデザインで大胆な色を扱う10のヒント
図2　Webデザインで大胆な色を扱う10のヒント

3. TOP 10 Chrome Extensions for UI UX Designers – The Web Designerhttps://the-webdesigner.co/top-10-chrome-extensions-for-ui-ux-designers/

UI／UXデザイナーに人気のあるChrome拡張機能を紹介しています。

ユーザビリティのチェックができるものや、CSSや色を抽出するためのもの、デザインのインスピレーションを得るものなどがありました。

図3　UI／UXデザイナーに人気のあるChrome拡張機能いろいろ
図3　UI／UXデザイナーに人気のあるChrome拡張機能いろいろ

4. Practical Uses of CSS Math Functions: calc, clamp, min, max | Modern CSS Solutionshttps://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max/

CSSの数学関数の実用的な使用法を解説した記事です。calc()、clamp()、min()、max()の4つについて、基本的な使い方や使用例を紹介しています。

clamp()、min()、max()は最近すべてのモダンブラウザでサポートされて注目されています。これらの数学関数を利用してレスポンシブなサイズ設定を行う方法がまとめられていて参考になります。

図4　CSSの数学関数の実用的な使用法を解説
図4　CSSの数学関数の実用的な使用法を解説

5. Why are hyperlinks blue?https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/

ハイパーリンクがなぜ青色なのかを過去にさかのぼって研究した結果を発表しています。

ハイパーリンクが1987年に作成されたときにはモニタが白黒だったため色はなく、1993年にリリースされたMosaicが青いハイパーリンクを使った最初のブラウザだそうです。

青色である明確な理由はないようですが、Windows 3.1で選択色として青が使われていたことの影響という説を、この記事の作者は気に入ってるようです。また、カラーモニタの人気が高まった時期だったので、色を付けることが好まれたのも理由とのことでした。

図5　ハイパーリンクはなぜ青色なのか
図5　ハイパーリンクはなぜ青色なのか

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

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

INSTAD.IO - Free image tracer,color vectorizer with hand-drawn styling.https://instad.io/

INSTAD.IOは、画像を手描き風に変換するサービスです。ベクター画像として書き出せるのでいろいろな用途に使えそうです。

JPEG、PNGのビットマップ画像かSVGのベクター画像をアップロードすると、手描き風画像に変換されます。どのくらいラフにするかの度合いや塗りのパターン、線や塗りの調整などができます。また、あらかじめプリセットとしておすすめの設定が用意されています。

4種類から選べるアニメーションを適用してMP4かGIFで保存することも可能です。グラフやダイヤグラムを手描き風にして、プレゼン資料などにインパクトを持たせる使い方を想定しているようです。

図6　画像を手描き風に変換するサービス
図6　画像を手描き風に変換するサービス

おすすめ記事

記事・ニュース一覧