週刊Webテク通信

2019年10月第3週号 1位は，明白なUIを作るヒント，気になるネタは，macOS Catalina，「Sidecar」の必要条件が明らかに あなたのiPadは使える？

Webテク, Webデザイン, Web広告, UI, CSS, 拡張機能, 写真, Sidecar

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

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

1. The Obvious UI is Often the Best UI - Google Design - Mediumhttps://medium.com/google-design/the-obvious-ui-is-often-the-best-ui-7a25597d79fd

明白なUIが良いUIであることが多く，そういったUIを作るヒントを解説しています。

  • 最下部のナビゲーションバーはより使用される
  • 他社のUIをコピーしても明白なデザインは保証されない
  • 明白なものとは何かを見つけるには，問題の解決方法を知る必要がある

図1　明白なUIを作るヒント

図1　明白なUIを作るヒント

2. Improve your CSS with these 5 principles - DEV Community 👩 👨https://dev.to/adrianbdesigns/improve-your-css-with-these-5-principles-35jd

CSSを改善する5つの原則をまとめた記事です。

  1. 命名規則
  2. 詳細度の原則
  3. DRY（Don't repeat yourself）の原則
  4. 単一責任の原則
  5. オープン／クローズの原則

図2　CSSを改善する5つの原則

図2　CSSを改善する5つの原則

3. Clipping, Clipping, and More Clipping! | CSS-Trickshttps://css-tricks.com/clipping-clipping-and-more-clipping/

CSSのクリップパス（clip-path）プロパティを使ったアイデアを紹介しています。

  • クリッピングパスを二重に適用したアニメーション効果
  • ズーム効果
  • ハイライト効果
  • 円形の拡張メニュー
  • トグルボタン

図3　CSSのクリップパスを使ったアイデアいろいろ

図3　CSSのクリップパスを使ったアイデアいろいろ

4. Dark mode in a website with CSS | Tom Browhttps://tombrow.com/dark-mode-website-css

端末がダークモードのときに，ウェブサイトもCSSでダークモードにする方法を解説した記事です。

純粋な白と黒ではない色を使い，画像の彩度も下げる工夫をしています。

図4　端末の設定に合わせてウェブサイトもダークモードにする方法

図4　端末の設定に合わせてウェブサイトもダークモードにする方法

5. CSS { In Real Life } | Building a Scrapbook Layout with CSS Gridhttps://css-irl.info/building-a-scrapbook-layout-with-css-grid/

スクラップブックに写真と紙を貼り付けたようなレイアウトをCSSグリッドで作る方法を解説しています。

重なり合った部分もある複雑なレイアウトですが，CSSグリッドを使えば結構シンプルに柔軟に実現できるんですね。

図5　スクラップブックのようなレイアウトをCSSで実現する方法

図5　スクラップブックのようなレイアウトをCSSで実現する方法

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

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

25+ Best Google Chrome Extensions for Designers and Developers | Design Shackhttps://designshack.net/articles/software/25-extremely-useful-google-chrome-extensions-for-designers-and-developers/

今回は，Webサービスではないですが，デザイナー・開発者に役立つGoogle Chromeの拡張機能をまとめた記事を紹介します。

  • カラーパレットの生成
  • 使用フォントを調べる
  • ルーラーを表示してサイズと位置を測る
  • ページ上のSVGアセットをプレビューして取得
  • 画面の録画とカメラからの録画，ナレーション録音を同時に行う
  • さまざまなタイプの色覚を持つ人々のWebサイトの見え方をテスト
  • リンク切れを確認
  • ウィンドウサイズを簡単に変更

など，興味深い拡張機能が25種類以上載っていました。

図6　デザイナー・開発者に役立つGoogle Chromeの拡張機能いろいろ

図6　デザイナー・開発者に役立つGoogle Chromeの拡張機能いろいろ

今週の気になるWebネタ

macOS Catalina，「Sidecar」の必要条件が明らかに あなたのiPadは使える？ - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1910/08/news083.html

macOS Catalinaがリリースされて，Macの外付けディスプレイ＆ペンタブレットとしてiPadを使える「Sidecar」が使えるようになりました。Apple Pencilを使っている人には注目の機能です。

ところがこのSidecar，iPadOS 13がインストールされたApple Pencil対応のiPadでしか使えないというのは納得いくものの，Macも比較的新し目のものにしか対応していないことに不満の声も出ているようです。

Appleは古い機種を切り捨てて最新の技術でSidecarを実現し，Sidecarに対応していない機種の人にはサードパーティが同様のツールを提供するという棲み分けになるのかもしれません。Luna Display，Duetはまだまだ出番がありそうですね。

Webテク, Webデザイン, Web広告, UI, CSS, 拡張機能, 写真, Sidecar

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote