週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 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デザイナー&ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール(ソフトウェア)の案内,デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote