週刊Webテク通信

2022年3月第2週号 1位は，中国語と英語でのアプリUIの違いの考察，気になるネタは，LAN用メッセンジャー「IP Messenger」に初の商用版Pro

Webテク, Webデザイン, Web広告, Flexbox, UI, CSS, SNS, 画像, メッセンジャー

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

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

1. A few UI differences between Chinese and English apps | by Megan Ng | Feb, 2022 | UX Collectivehttps://uxdesign.cc/a-few-ui-differences-between-chinese-and-english-apps-e72400bb08da

中国語と英語でのアプリのUIの違いについて考察した記事です。英語に比べて中国語UIではホワイトスペースが少なめで詰め込まれたものが好まれるとのこと。また，カラフルな配色が多いなど中国のUIの傾向は日本に近いと感じました。

以下の項目で中国語と英語でのUIの違いを解説しています。

  1. ホワイトスペース
  2. プロモーションにポップアップを使う
  3. アプリアイコン
  4. アプリのスプラッシュ画面に広告が入る
  5. 色を使う
  6. 動物をシンボルに使う

図1　中国語と英語でのアプリUIの違いの考察

図1　中国語と英語でのアプリUIの違いの考察

2. Flexbox Dynamic Line Separator - Ahmad Shadeedhttps://ishadeed.com/article/flexbox-separator/

Flexboxでアイテムとアイテムの間に区切り線を付けるテクニックを紹介しています。スマホサイズではアイテムが縦に並んで水平線の区切り，デスクトップサイズでは横に並んで縦線での区切りとなるCSSが意外と簡単に記述できます。

なお，余談ながらTailwind CSSではFlexbox，Gridでのアイテム間の区切り線を簡単に付けることができて便利です。

図2　Flexboxでアイテム間に区切り線を付けるテクニック

図2　Flexboxでアイテム間に区切り線を付けるテクニック

3. How to Create a Section Divider Using CSShttps://www.freecodecamp.org/news/section-divider-using-css/

画像を使わずCSSだけで領域間の区切りを斜めにしたり，区切り部分に図形を追加する方法を解説した記事です。

簡単に区切り用のCSSを生成できるジェネレーターも紹介しています。

図3　CSSだけで領域間の区切りを斜めにしたり図形を追加する方法

図3　CSSだけで領域間の区切りを斜めにしたり図形を追加する方法

4. 13 Inspiring Examples of Contact Page Design - Qode Interactivehttps://qodeinteractive.com/magazine/examples-of-contact-page-design/

コンタクトページ（連絡先ページ）のデザインの参考になるサイトを多数紹介しています。

良いコンタクトページを作る上で気をつける点もまとめていました。

  • 機能性
  • ユーザーフレンドリーなUX
  • 一貫性のある高品質のデザイン

図4　コンタクトページのデザインの参考になるサイトいろいろ

図4　コンタクトページのデザインの参考になるサイトいろいろ

5. Writing Logic in CSS • i am schulzhttps://iamschulz.com/writing-logic-in-css/

CSSのプログラム言語的な部分にスポットを当てて，条件分岐や繰り返し，計算式などの記述方法を解説した記事です。

この記事で「* + *」をOwl Selectorと呼ぶことを知りました。確かにフクロウの顔に似てますね。

図5　CSSのプログラム言語的な部分を解説

図5　CSSのプログラム言語的な部分を解説

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

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

Postr | Convert your social network post to image with nice designhttps://postr.me/

SNSの投稿を背景色付きの画像に変換してダウンロードできるサービスです。Twitter，Facebook，Instagram，YouTubeの投稿に対応しています。

投稿のリンクを入れて背景色を選びます。色は自由に選べますが，グラデーションは用意されたものから選ぶだけです。生成される画像は正方形だけで，サイズのカスタマイズもできません。

Chrome拡張機能からも使えます。SNSの投稿を別のSNSで紹介する場合など，ただスクリーンショットを撮るよりも見映えの良い画像が作れて便利だと思います。

図6　SNSの投稿を背景色付きの画像に変換

図6　SNSの投稿を背景色付きの画像に変換

今週の気になるWebネタ

LAN用メッセンジャー「IP Messenger」に初の商用版Pro | TECH+https://news.mynavi.jp/techplus/article/20220304-2285372/

IP Messengerの商用版が1ユーザあたり年額1,980円で登場しました。Pro版としてログ監査機能などがついています。

わたしは会社員時代にIP Messengerを使っていたことがあります。20数年前なはずです。昔話としてIP Messengerの話題が出ることはありますが，新製品としてIP Messengerの話題に触れる日が来るとは思っていませんでした。

LAN内で使うツールなのでリモートワーク時代にはそぐわないですが，シンプルで使いやすいところから今でも社内でのチャットツールとして人気があるようです。有料版が登場したことは，今後も開発が続いていく安心感を与える効果もあると思います。

Webテク, Webデザイン, Web広告, Flexbox, UI, CSS, SNS, 画像, メッセンジャー

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote