週刊Webテク通信

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

ネットで見かけた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 複数のクラウドサービスのファイルを横断的に検索できるサービス

おすすめ記事

記事・ニュース一覧