週刊Webテク通信

2020年8月第4週号1位は、レスポンシブデザインとアダプティブデザインの比較、気になるネタは、C Channel、アプリサービスを9月末で終了へ--SNSでのコンテンツ配信にシフト

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

1. Responsive vs. Adaptive: 7 Best Mobile Web Design Practiceshttps://designmodo.com/responsive-vs-adaptive/#best-mobile-web-design-practices

レスポンシブデザインとアダプティブデザインの比較と、モバイル向けウェブデザインのためのヒントを紹介しています。

モバイル向けウェブデザインのヒントは以下です。

  • ユーザーの行動を理解する
  • ナビゲーションを捨てる
  • オプションを制限する
  • 簡素化する
  • 画像と動画
  • 画面上のどこに配置するか
  • 連絡先情報から電話をかけられるようにする
図1 レスポンシブデザインとアダプティブデザインの比較
図1 レスポンシブデザインとアダプティブデザインの比較

2. How to create a great Design System for your brand | by Simon Vieira | Aug, 2020 | UX Collectivehttps://uxdesign.cc/how-to-create-a-great-design-system-for-your-brand-5a28f0ab7ae4

ブランドに最適なデザインシステムの作り方についてまとめた記事です。

優れたデザインシステムを作成する方法として、以下の手順ごとに解説しています。

  • 方向性を決める
  • スケッチする
  • デジタルプロトタイプを作る
  • デザインシステムを構築する
図2 ブランドに最適なデザインシステムの作り方
図2 ブランドに最適なデザインシステムの作り方

3. The Most Appreciated Web Solutions of 2020 | Webdesigner Depothttps://www.webdesignerdepot.com/2020/08/the-most-appreciated-web-solutions-in-2020/

今年最も評価されたウェブソリューションをまとめた記事です。

WordPressのテーマとプラグイン、ロゴ作成のツール、ウェブサイトビルダーなどが紹介されていました。

図3 今年最も評価されたウェブソリューションいろいろ
図3 今年最も評価されたウェブソリューションいろいろ

4. Japanese Minimalism in UI Design for Digital Products - noupehttps://www.noupe.com/design/japanese-minimalism-in-ui-design.html

UIデザインにおける日本のミニマリズムについて、概要や原則などを紹介しています。

日本のミニマリズムは伝統的な禅宗の美学に根ざしているとのことです。⁠間」のことを「MA」と書いて間の説明をしていたり、なかなか興味深い内容でした。

図4 UIデザインにおける日本のミニマリズムについて
図4 UIデザインにおける日本のミニマリズムについて

5. 150 Amazing Examples of CSS Animation & Effectshttps://1stwebdesigner.com/css-effects/

CSSを使ったアニメーションと効果の作例を大量にまとめています。

作例の説明文もなくただ並べているだけですが、約100個過ぎたあとカテゴリ分けして紹介していました。

図5 CSSを使ったアニメーションと効果いろいろ
図5 CSSを使ったアニメーションと効果いろいろ

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

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

Brand Book Builder by Gingersauce — PRO Tool for Design & Brandinghttps://gingersauce.co/

Brand Book Builderは「ブランドブック」を簡単に作れるサービスです。ブランドブックはそのブランドのロゴや使用するフォントやカラーパレットなどをまとめたものです。

ウィザード形式で順番に質問に応えていくことでブランドブックが作れます。ロゴはSVGデータしか受け付けてくれません。完成したブランドブックはブラウザ上で読む電子書籍のようなもので、ページめくりして読んでいきます。

デザインは3種類から選ぶことができ、デザイン性の高いブランドブックを作ってくれます。ロゴの使い方、カラーパレット、使用フォントがまとめられるので、新たにサイトを作るときのガイドラインとしても利用できそうです。

図6 オンラインのブランドブックを作るサービス
図6 オンラインのブランドブックを作るサービス

おすすめ記事

記事・ニュース一覧