週刊Webテク通信

2021年10月第1週号 1位は，グラフィックデザインからUI／UXデザインに移行するためのガイド，気になるネタは，Dropbox，テレワーク環境向け3つの新製品 - 動画コラボレーションなど

Webテク, Webデザイン, Web広告, UI, UX, タイポグラフィ, カラーパレット, クラウドサービス, 画面収録, 音声録音

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

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

1. Graphic Design to UI/UX: A Comprehensive Guide to Transitioninghttps://designerup.co/blog/transitioning-from-graphic-design-to-ui-ux/

グラフィックデザインからUI／UXデザインに移行するためのガイドです。グラフィックデザインとUI／UXデザインの違いや，UI／UXデザインにおいて考えるべきことが解説されていて参考になります。

  • なぜUI／UXを学ぶのか
  • グラフィックデザイン vs UXデザイン
  • 静止画ではなく動きのあるグラフィックスとして考える
  • 自分自身の経験を分析する
  • オーバーラップしているところを見つけて知識の溝を埋める
  • プロダクトデザインの現実を理解する
  • 適切な分野でより多くの経験を積む
  • 焦点を絞る
  • スキルではなくROI（投資利益率）を売りにする
  • ただプロセスを見せるだけでなく語りかける

図1　グラフィックデザインからUI／UXデザインに移行するためのガイド

図1　グラフィックデザインからUI／UXデザインに移行するためのガイド

2. Top Tips on How To Make a Typography by Gapsy Studiohttps://gapsystudio.com/blog/how-to-make-a-typography/

Webサイトのタイポグラフィを正しく使う方法を解説した記事です。

完璧なタイポグラフィをデザインする10のヒントをまとめていました。

  1. 大中小どのサイズのテキスト？
  2. テキストの配置は中央揃えか左揃えか？
  3. 最適な一行の文字数はどのくらい？
  4. 引用符に何を使うか？
  5. 見出しをどうスタイリングするか？
  6. 特別なタイポグラフィ用語：ユニット，カーニング，リーディング
  7. 同一要素の一般的なスタイル
  8. セリフ体かサンセリフ体か？
  9. 文字の色をどうする？
  10. 読みやすさを最優先すべき

図2　Webサイトのタイポグラフィを正しく作る方法

図2　Webサイトのタイポグラフィを正しく作る方法

3. 20 Best New Sites, September 2021 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/09/20-best-new-sites-september-2021/

2021年9月の新しいサイトのギャラリーです。ブランディングの継続性の良い例となるサイトがいくつか紹介されています。

ブランディングの継続性は，ロゴを隅に配置して同じ色とフォントを使うことだけではないそうです。仮にロゴがなくてもブランドの同一性や個性をうまく表現すれば，ユーザーはブランドを識別できるとのことでした。

図3　2021年9月の新しいサイトのギャラリー

図3　2021年9月の新しいサイトのギャラリー

4. Flowrift - Beautifully designed Tailwind CSS UI blocks.https://flowrift.com/

Tailwind CSSで記述されたUIブロック集です。それほどブロックの数はないですが，カテゴリは20種類あります。

Tailwind CSSはフレームワークそのものにコンポーネントがないですが，その分こういったコンポーネント集から必要なものだけを選んで使えるところが良いと思います。

図4　Tailwind CSSで記述されたUIブロック集

図4　Tailwind CSSで記述されたUIブロック集

5. Actionable Color Paletteshttps://colorpalettes.colorion.co/

5色のカラーパレット集を30種類以上用意したサイトです。サイトのメインビジュアルっぽいデザインにカラーパレットを当てはめた例を表示できます。

パレットを書き出す機能はなく，各色ごとにカラーコードをコピーできます。

図5　5色のカラーパレットいろいろ

図5　5色のカラーパレットいろいろ

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

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

Searchablehttps://www.searchable.ai/

Searchableは複数のクラウドサービスのファイルを横断的に検索できるサービスです。今のところDropboxとGoogle Drive，Gmailに対応しています。今後AirTable，Box，Trelloなど対応サービスを増やしていくようです。

横断的に検索して探せるのはもちろん，複数のクラウドサービスからファイル一覧をまとめて見られるのも便利です。Gmailの添付ファイルを探せるところも重宝しそうです。Dropbox，Google Driveのファイルはそれぞれのサービス上で開けますが，Gmailの添付ファイルはダウンロードするようになっています。

ファイルはSearchable上でプレビューできるのですが，残念ながら日本語が文字化けしました。PDFファイルなら日本語も問題ないです。機械学習とAIで必要な情報を瞬時に見つけるそうなんですが，そのへんもたぶん日本語対応していないのでしょう。ともかく今後に期待のサービスだと思います。

図6　複数のクラウドサービスのファイルを横断的に検索できるサービス

図6　複数のクラウドサービスのファイルを横断的に検索できるサービス

今週の気になるWebネタ

Dropbox，テレワーク環境向け3つの新製品 - 動画コラボレーションなど | マイナビニュースhttps://news.mynavi.jp/article/20210929-1985313/

Dropboxからスクリーンショットや画面収録，音声録音ができるツール「Dropbox Capture」が発表されました。現在ベータ版が入手できます。先日Slackに同様の機能が搭載されたばかりで，テレワークのための非同期コミュニケーション向け機能がトレンドのようです。

また，グループでの動画のレビュー／校正ができるツール「Dropbox Replay」も便利そうです。動画のフレーム単位でコメントや注釈を付けられます。遠隔地のチームメンバーがリアルタイムで同じ動画を見る機能もあります。

3つ目の新ツール「Dropbox Shop」はデジタルコンテンツ販売を簡単に実現するものです。これら3つのツールは，それぞれ先行している競合ツール／サービスがいくつも思い浮かびます。競合としては強力なライバル出現ですが，こういうジャンルのツールがあるんだとジャンルの認知度を上げてくれる効果もありそうです。

Webテク, Webデザイン, Web広告, UI, UX, タイポグラフィ, カラーパレット, クラウドサービス, 画面収録, 音声録音

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote