週刊Webテク通信

2021年8月第1週号 1位は，UI／UXのちょっとしたテクニックいろいろ，気になるネタは，ザッカーバーグ氏は110兆円規模のフェイスブックを「メタバース」企業にすると投資家に語る

Webテク, Webデザイン, Web広告, UI, UX, CSS, HTML, JavaScript, SVG, メタバース

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

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

1. UI & UX Micro-Tips: Volume Eight. | Marc Andrewhttps://marcandrew.me/ui-ux-micro-tips-volume-eight/

UI／UXのちょっとしたテクニックをまとめています。シリーズ第8弾です。

  1. メッセージの文章は，アクションじゃなくゴールから始める
  2. 影は，一つの光源からできているようにデザインする
  3. ホワイトスペースを使って，視覚的な階層をより明確にする
  4. 本文に適切な行の長さにすることで，読みやすさを向上させる
  5. なにもない状態でもユーザーにヒントを与えて，最初の行動を促す
  6. 最適な読みやすさのために，書体のx-heightに基づいた行間を設定する

図1　UI／UXのちょっとしたテクニックいろいろ

図1　UI／UXのちょっとしたテクニックいろいろ

2. 6 useful frontend techniques that you may not know about - DEV Communityhttps://dev.to/ra1nbow1/6-useful-frontend-techniques-that-you-may-not-know-about-47hd

意外と簡単なコードで実現できるHTML，CSS，JavaScriptのテクニックを6つ紹介しています。

スマートフォン向けの，バイブレーションを有効にする方法，画面を引っ張ってリロードする「Pull to refresh」を無効にする方法などもありました。

図2　フロントエンドのテクニック6つ

図2　フロントエンドのテクニック6つ

3. Design Vault – UI patterns & design inspiration from real productshttps://designvault.io/

UIパターン／UIデザインを実際のプロダクトから集めたライブラリーサイトです。モバイルアプリやWebサービスのUIを豊富なスクリーンショットや動画（GIFアニメ）で見られます。

海外で人気のアプリのUIを，実際にインストールしなくても研究できて便利です。

図3　UIデザインのライブラリーサイト

図3　UIデザインのライブラリーサイト

4. CSS Shorthand Properties- Useful CSS Shorthand – Rezaul karimhttps://mrezaulkarim.com/css-shorthand-useful-css-shorthand-properties/

CSSをショートハンドでまとめて記述する方法をまとめた記事です。16種類もの記述例を掲載しています。

参考にしたコードがショートハンドで書かれていて理解に苦しむケースもあるので，こうやってまとまったページがあると便利です。

図4　CSSのショートハンドでの記述方法いろいろ

図4　CSSのショートハンドでの記述方法いろいろ

5. 12 Neon Colored Websites for Palette Inspiration - SpyreStudioshttps://spyrestudios.com/12-neon-colored-websites-for-palette-inspiration/

ネオンカラーのWebサイトのギャラリーです。ネオンのような蛍光色っぽい色が使われています。

ネオンカラーのパレットを作るための「Neon Color Scheme Generator」も紹介していました。

図5　ネオンカラーのWebサイトのギャラリー

図5　ネオンカラーのWebサイトのギャラリー

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

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

Pattern Monster - SVG Pattern Generatorhttps://pattern.monster/

Pattern MonsterはSVGの背景パターンを作成，カスタマイズできるサービスです。単純なものから複雑な模様まで豊富なパターンをベースに使えます。

各パターンはサイズ，角度，色などを細かく調整できます。色は透明度も設定できて，背景を透明にすることも可能です。「⁠Inspire Me」ボタンを押すと，パラメーターを変更したパターンがランダムに適用されます。

作ったパターンはCSS，SVGのコードをコピーするか，SVG／PNGファイルでダウンロードできます。そのままでも魅力的なパターンが揃っており，カスタマイズ方法もわかりやすい便利なサービスだと思いました。

図6　SVGの背景パターンを作成，カスタマイズできるサービス

図6　SVGの背景パターンを作成，カスタマイズできるサービス

今週の気になるWebネタ

ザッカーバーグ氏は110兆円規模のフェイスブックを「メタバース」企業にすると投資家に語る | TechCrunch Japanhttps://jp.techcrunch.com/2021/07/30/2021-07-28-zuckerberg-is-turning-trillion-dollar-facebook-into-a-metaverse-company-he-tells-investors/

Facebookを「メタバース企業」にするとCEOのマーク・ザッカーバーグが語りました。メタバースとは，デジタル空間で人々と一緒にいることができる仮想環境とのこと。「⁠セカンドライフ」や「フォートナイト⁠」⁠，「⁠どうぶつの森」をイメージすればよさそうです。

パソコンからモバイルにプラットフォームの主戦場は移行しましたが，その次はメタバースということです。FacebookはVRハードウェアメーカーOculusを買収したり，ソーシャルVRサービス「Horizon」を開発したり（現在招待制ベータ）と布石を打ってきたわけですね。

細田守監督の映画「竜とそばかすの姫」も，メタバースを描いた映画とも言えそうです。なお，メタバースには明確な定義や具体的なプロダクトはまだない段階とのこと。なので「竜とそばかすの姫」も「どうぶつの森」も「Horizon」も「メタバース的」なものと表現するのが良さそうです。

Webテク, Webデザイン, Web広告, UI, UX, CSS, HTML, JavaScript, SVG, メタバース

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote