週刊Webテク通信

2022年4月第1週号 1位は,UI/UXデザインのテクニックを6つ紹介,気になるネタは,TVer,リアルタイム番組の「追っかけ再生」可能に 民放の「公式テレビ配信サービス」へ

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

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

1. I wrote a book on UI/UX, here are my 6 tips for a great web & mobile designhttps://www.indiehackers.com/post/i-wrote-a-book-on-ui-ux-here-are-my-6-tips-for-a-great-web-mobile-design-4ffe3f92ed

UI/UXデザインのテクニックを6つ紹介しています。

  1. きれいなグラデーションを作るために自然をイメージした色を使う
  2. リアルなデザインを実現するするためにエレメントの下部に影をつける
  3. ボタンは常に角を丸くする
  4. Fパターン,Zパターンに従ってボタンを配置する
  5. ユーザーが常にガイダンス(手引き)を受けられるようにする
  6. クリック/タップできる領域を適切に設定する
  7. 画像の構図に三分割法を取り入れる

図1 UI/UXデザインのテクニックを6つ紹介

図1 UI/UXデザインのテクニックを6つ紹介

2. Advanced Figma tips & tricks 2022 | by Christine Vallaure | Mar, 2022 | UX Collectivehttps://uxdesign.cc/advanced-figma-tips-tricks-2022-20cbf9fdda45

Figmaのテクニックを23個もまとめた記事です。この回はパート2でパート1へのリンクもあります。

Photoshopの「結合部分をコピー」のように,フレーム内のデザインをエクスポートせずにPNGとしてクリップボードにコピーできるなど,知らない機能をたくさん知ることができました。

Figmaの操作をGIFアニメにして掲載しているので十分わかりやすいですが,同じ内容のYouTube動画も用意しています。テキスト記事と動画の好きな方で情報収集できるのはうれしいですね。

図2 Figmaのテクニックを23個紹介

図2 Figmaのテクニックを23個紹介

3. Minimal CSS Frameworks: 10 Great Choices - Stack Diaryhttps://stackdiary.com/minimal-css-frameworks/

最小限で軽量のCSSフレームワークを10個紹介しています。ポートフォリオや履歴書ページ,ブログなど単純なサイトには,ファイルサイズの大きいTailwind CSS,Bootstrapのようなフレームワークより,軽量なものの方がおすすめということです。

最小限のフレームワークの方が学習コストが低く,JavaScriptに依存しないのもメリットです。独自のclassを追加するときに干渉を気にすることが少ないので,カスタマイズが前提ならこの手のフレームワークをベースにするのもいいのかなと思いました。

図3 最小限で軽量のCSSフレームワークを10個紹介

図3 最小限で軽量のCSSフレームワークを10個紹介

4. SVG and CSS mesh gradient generator - Color Morphhttps://www.color-morph.com/

メッシュグラデーションのジェネレーターです。複数の色が混じり合うグラデーションをランダムに生成します。ベースの色や使用する色数を設定可能です。

CSSを表示してコピーするか,SVGとしてダウンロードして利用します。

図4 メッシュグラデーションのジェネレーター

図4 メッシュグラデーションのジェネレーター

5. 10 Free Collections of Feminine Logo Templates for Designershttps://speckyboy.com/free-feminine-logo-templates/

フェミニンなロゴの無料テンプレートを10個まとめた記事です。ほかにもいろいろな種類のロゴテンプレートを紹介した過去記事へのリンクもありました。

クラウドソーシングなどの影響でロゴデザインの単価が下がっていると嘆く声もありますが,こういったテンプレートベースでローコストに作ることで十分なケースもあることは確かだと思います。

図5 フェミニンなロゴの無料テンプレートを10個紹介

図5 フェミニンなロゴの無料テンプレートを10個紹介

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

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

Typebot - Open-source conversational apps builderhttps://www.typebot.io/

Typebotは会話形式で条件分岐をするチャットボットが作れるサービスです。問い合わせフォームやアンケートなどに使うと便利そうです。

選んだ選択肢によって分岐するだけでなく,入力内容によって処理を変える機能も用意されています。画像や動画も表示できて,Webサイトも表示できます。

作ったチャットボットはWebページやブログなどに埋め込み可能です。Typebotのトップページで埋め込まれたものを試せます。入力内容をメールで送ったり,Googleスプレッドシートと連携したりもできるようです。

図6 会話形式で条件分岐をするチャットボットが作れるサービス

図6 会話形式で条件分岐をするチャットボットが作れるサービス

今週の気になるWebネタ

TVer,リアルタイム番組の「追っかけ再生」可能に 民放の「公式テレビ配信サービス」へ - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2204/01/news157.html

民放の動画配信サービス「TVer」のサイトとアプリがリニューアルしました。リアルタイムで同時配信される番組を「追っかけ再生」で見られるようになったそうです。

TVer IDによるログイン機能が実装されたことで,お気に入り(以前の名称はマイリスト)を複数デバイスで共有できるようになりました。途中まで再生した番組の続きを別な端末で行えるなど,Netflixなどの動画配信サービスに利便性が近づきました。

一方で操作性が悪くなった部分も目立ち,Twitterでは「#TVer改悪」のハッシュタグでネガティブなツイートがたくさん投稿されていました。使い慣れたツールの操作感が変わると不満の声をあげる人が多いのはしょうがないですが,ユーザーの声を受けてさっそく一部機能が改善されていたのには好感を持ちました。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote