週刊Webテク通信

2021年4月第2週号 1位は,コンポーネントをまとめたギャラリーサイト,気になるネタは,DiscordがClubhouseのような音声イベント用チャンネルの提供を開始

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

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

1. The Component Galleryhttps://component.gallery/

Webデザインで使われるコンポーネントをまとめたギャラリーサイトです。いろいろなフレームワークやデザインシステム,スタイルガイドなどのコンポーネントをカテゴリーにわけています。

プレビュー画像などはなく名前で並んでいるだけなので,各リンク先を見るまでどういうデザインかわからないのがちょっと残念です。

デザインシステムの一覧表示もできるので,そのリストから気に入りそうなものを探すのもいいと思います。

図1 コンポーネントをまとめたギャラリーサイト

図1 コンポーネントをまとめたギャラリーサイト

2. 8 Common Website Layouts Built with CSS Gridhttps://speckyboy.com/common-website-layouts-css-grid/

一般的なレイアウト8つをCSSグリッドでコーディングした例をまとめています。

  1. Holy Grailレイアウト(聖杯レイアウト)
  2. カードUI
  3. レスポンシブなマルチカラム
  4. 製品の機能リスト
  5. 入れ子になったグリッドレイアウト
  6. 幅が可変するコンテンツエリア
  7. 価格表
  8. レンガ組みの写真ギャラリー

図2 CSSグリッドで作った一般的なレイアウト8種類

図2 CSSグリッドで作った一般的なレイアウト8種類

3. Let’s Create an Image Pop-Out Effect With SVG Clip Path | CSS-Trickshttps://css-tricks.com/lets-create-an-image-pop-out-effect-with-svg-clip-path/

SVGのクリップパスで画像を切り抜くことで,ポップアップする効果を実現する方法を紹介した記事です。丸く切り抜かれた画像を背景に,人物が飛び出すアニメーションでインパクトがあります。

レスポンシブへの対応やSEOとアクセシビリティへの配慮など,細かいところまで考えられています。

図3 SVGのクリップパスを使ったポップアップ効果

図3 SVGのクリップパスを使ったポップアップ効果

4. 14 Inspiring Examples of Interactive Maps in Web Design - Qode Interactivehttps://qodeinteractive.com/magazine/interactive-maps-in-web-design/

インタラクティブなマップが使われたWebデザインのギャラリーです。

マップ内を自由に移動できる,ゲーム的なUIの凝ったサイトを多数紹介しています。

図4 インタラクティブマップが使われたWebデザインいろいろ

図4 インタラクティブマップが使われたWebデザインいろいろ

5. Create VS Code Themes Easily - Theme Studio - The VS Code Theme Editorhttps://themes.vscode.one/

VS Codeのテーマを簡単に作れるサービスです。

色を指定していくだけなので確かに簡単なのですが,変更できる箇所が多すぎて大変です。人が作ったテーマを元に変更を加えることもできて,その方が手軽にテーマを作れそうです。

図5 VS Codeのテーマを簡単に作れるサービス

図5 VS Codeのテーマを簡単に作れるサービス

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

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

CSS Filters Generator - Modify images with CSS/SVG only - JustCode.todayhttps://justcode.today/filters/

CSSフィルターとSVGフィルターを同時に適用できるジェネレーターです。

画像のURLを指定するかアップロードすることで,その画像に対してフィルターをかけたイメージを見られます。各パラメーターはスライダーで調整できるので操作感が良いです。

CSSとHTMLはリアルタイムに生成されてコピーできます。また,このジェネレーターでフィルターをかけた状態をCode Penに引き継いで,さらに編集できるようにもなっていました。

図6 CSSフィルターとSVGフィルターを適用できるジェネレーター

図6 CSSフィルターとSVGフィルターを適用できるジェネレーター

今週の気になるWebネタ

DiscordがClubhouseのような音声イベント用チャンネルの提供を開始 | TechCrunch Japanhttps://jp.techcrunch.com/2021/04/01/2021-03-31-discord-stage-channels-voice-events/

Discordの新機能Stage Channels(ステージチャンネル)で,Clubhouseのようにスピーカーとオーディエンスを分けてのボイスチャットルームが作れるようになりました。まさにステージと観客といった見た目になっています。

Clubhouseと同様に,オーディエンスが手を上げてスピーカーになる機能もあるようです。TwitterのSpaces,DiscordのStage Channelsと続けざまに真似されたClubhouseのUIですが,ひとつのジャンルを確立したとも言えるでしょう。

最近,いつの間にかPinterestにもストーリー風機能が付いていて驚いたんですが,良いものはどんどん取り入れる方がユーザーの満足度も高いのかもしれません。良いもの,受けているものは,どんどんいろんなサービスに真似される状況はしばらく続きそうです。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote