週刊Webテク通信

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

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

ネットで見かけた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 画像を手描き風に変換するサービス

今週の気になるWebネタ

Apple,iCloudでメール非公開とカスタムドメインを可能に 「iCloud+」の一部機能をβ版で提供開始 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2108/26/news087.html

AppleがiCloudベータ版で「iCloud+」の一部機能を提供開始しました。追加されたのは「メールを非公開」「カスタムメールドメイン」です。

「メールを非公開」は転送用のメールエイリアスを作れる機能で,ランダムなメールアドレス名が割り当てられるようです。新しいサービスに登録するときなどに,いつでも削除できるメールアドレスを使う人が増えそうですね。

「カスタムメールドメイン」はカスタムドメインを使用してメールを送受信できる機能です。Gmailのようにほかのアカウントのメールを見に行くのではなく,iCloudでそのドメインのメールを管理するように移行する方式でした。なのでドメインのDNSレコードの設定などが必要です。移行後はiCloud上でメールアドレスの追加ができます。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote