週刊Webテク通信

2021年12月第4週号1位は、UIデザインにおける6つの段階とその内容、気になるネタは、ドコモ、キャリアメールの持ち運びサービスを12月16日に開始 月額330円

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

1. 6 Stages of UI Design and What's Involvedhttps://designerup.co/blog/6-stages-of-ui-design-and-whats-involved/

UIデザインにおける6つの段階とその内容を解説しています。

  1. スケッチ
  2. ワイヤーフレームかグレーのボックス
  3. コンポーネントデザイン
  4. ユーザーフローとタスクフロー
  5. 忠実度の高いデザイン
  6. プロトタイプ

各段階で使うのに推奨するツールも紹介しています。

図1 UIデザインにおける6つの段階とその内容
図1 UIデザインにおける6つの段階とその内容

2. 8 Design Tips to Make Your Blog or Shop Stand Out - Codropshttps://tympanus.net/codrops/2021/12/17/8-design-tips-to-make-your-blog-or-shop-stand-out/

ブログやショップを目立たせるためのデザインのヒントを8つ紹介しています。

  1. マーキーブロックで注目を集める
  2. ダークモード
  3. 訪問者にショッピングカートを思い出させる
  4. 遅延遷移を使用する
  5. ユーザーエンゲージメント
  6. 優れたナビゲーションを用意する
  7. 縦横比が異なる画像を混在させる
  8. 写真に焦点を当てる
図2 ブログやショップを目立たせるための8つのデザインのヒント
図2 ブログやショップを目立たせるための8つのデザインのヒント

3. Logo Design Trends 2022: The Future of Logos — The Designesthttps://thedesignest.net/logo-design-trends-2022/

2022年のロゴデザインのトレンドをまとめた記事です。

  • シンプルな幾何学的形状と基本的な図形
  • 背の高いロゴ
  • 彩度の高い色とグラデーション
  • リアリズムではなく、シンボリズムとミニマリズム
  • らくがき&スケッチ
  • 文字を用いた大胆なロゴ
  • サンセリフ書体のロゴ
  • 花をモチーフにした装飾とさりげない装飾
  • 黒と白のロゴ
  • 3D vs フラットスタイル
図3 2022年のロゴデザインのトレンド
図3 2022年のロゴデザインのトレンド

4. 8 Outstanding eCommerce Microinteraction CSS & JavaScript Snippetshttps://speckyboy.com/ecommerce-microinteraction-css-js-snippets/

オンラインショップで役立つマイクロインタラクションの例をまとめた記事です。CSS&JavaScriptのコードを利用できます。

カートに商品を追加したときの、ちょっとしたアニメーションや仕掛けなど興味深いものがいろいろありました。

図4 オンラインショップで役立つマイクロインタラクションの例
図4 オンラインショップで役立つマイクロインタラクションの例

5. DoodleCSShttps://chr15m.github.io/DoodleCSS/

シンプルな手書き風のWebページが作れるHTML&CSSのテーマを提供しています。

ボタン、入力フィールドなどを囲む線が手書き風になっていて面白いです。手書き風の日本語フォントを組み合わせれば、日本語サイトでもいい感じになりそうだと思いました。

図5 シンプルな手書き風のHTML&CSSテーマ
図5 シンプルな手書き風のHTML&CSSテーマ

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

先週の気になるツール/サービス

ColorHuddle – Palettes with Exampleshttps://colorhuddle.co/

ColorHuddleは11種類のカラーパレットの無料コレクションです。その場でページにカラーパレットを適用させて確認できます。

カラーパレットはダウンロードするのではなく、カラーコードをコピーする仕組みにです。ページ上では常にカーソルがスポイドツールになっていて、色を拾えます。

グラデーションを使っているカラーパレットもあり、その場合グラデーションのCSSコードがコピーされます。シンプルながらセンスの良いサービスだと思いました。

図6 画面上から色を拾えるカラーパレットの無料コレクション
図6 画面上から色を拾えるカラーパレットの無料コレクション

おすすめ記事

記事・ニュース一覧