週刊Webテク通信

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

ネットで見かけた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 会話形式で条件分岐をするチャットボットが作れるサービス

おすすめ記事

記事・ニュース一覧