週刊Webテク通信

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

ネットで見かけた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の拡張機能いろいろ

おすすめ記事

記事・ニュース一覧