週刊Webテク通信

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

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

ネットで見かけた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 画面上から色を拾えるカラーパレットの無料コレクション

今週の気になるWebネタ

ドコモ,キャリアメールの持ち運びサービスを12月16日に開始 月額330円 - ITmedia Mobilehttps://www.itmedia.co.jp/mobile/articles/2112/15/news117.html

ドコモが他キャリアに先駆けて,キャリアメールの持ち運びサービスを開始しました。ドコモから他社に乗り換えても「@docomo.ne.jp」のメールアドレスが使えます。

IMAPに対応しているメールアプリで使えるとのことですが,当然IMAPやSMTPの設定が必要となります。いまだにキャリアメールが必要なユーザー層には難しそうで心配ですが,iPhoneではプロファイルをダウンロードして設定できるそうです。

KDDIとソフトバンクもキャリアメールの持ち運びは「2021年内に提供予定」と発表しています。このキャリアメールの持ち運びサービスが,「キャリアメールの終わりの始まり」になることを個人的には期待しています。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote