週刊Webテク通信

2020年2月第4週号1位は、オンボーディグをデザインするためのヒント、気になるネタは、顔をプリントしたマスク、着けたまま顔認識でロック解除も--デザイナー考案

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

1. How To Design User Onboarding: Tips and Practices | Tubik Studiohttps://tubikstudio.com/design-onboarding/

オンボーディグをどうデザインするかをまとめています。オンボーディングとはもともと、企業で新人が新しい環境に適応し結果を出せるよう支援することを目的とした手順と技術のことです。ここでは、アプリを使いはじめの人への手引きを指しています。

オンボーディングの要素としては以下の項目が挙げられていました。

  • 初めての人のためのツアーとしてのチュートリアル
  • ウェルカムメッセージ
  • プログレスバーとインジケータ
  • 説明ビデオ
  • コンテキストや動作に合わせて現れるツールチップ
  • 何もない状態のヒント
  • チェックリスト
  • ホットスポット
  • パーソナライズされたオンボーディング
図1 オンボーディグをデザインするためのヒント
図1 オンボーディグをデザインするためのヒント

2. Web Design Best Practices For Your Next Website Projecthttps://kinsta.com/blog/web-design-best-practices/

ウェブデザインのベストプラクティスをまとめた長い記事です。美しさとビジネスに役立つこととが交わったところに焦点を当てているとのことです。

  • ウェブデザインのベストプラクティスをどう定義するか
  • ブランド基準
  • Webのベストデザイン/フォーマットの実践
  • コーディング標準
  • アクセシビリティ標準
図2 ウェブデザインのベストプラクティス
図2 ウェブデザインのベストプラクティス

3. Tailwind CSS vs Bootstrap: Learn about the differences @ Themesberghttps://themesberg.com/blog/design/tailwind-css-vs-bootstrap

最近人気のCSSフレームワークTailwind CSSを、Bootstrapと比較しています。それぞれの考え方の違いを解説し、Tailwind CSSがどういうものか説明する内容です。

Tailwind CSSは、CSSをたくさん記述しなくていいように、あらかじめ用意されたクラスをHTML内にいろいろと記述する設計になっています。

ほぼすべての種類のマージン、パディング、背景、フォントサイズ、フォントファミリー、テキストの色、影などのクラスが用意されているそうです。

図3 Tailwind CSSとBootstrapとの比較
図3 Tailwind CSSとBootstrapとの比較

4. DesignValley | The Ultimate Design Tools Depositoryhttps://www.designvalley.club/

デザインに関するツールを集めたギャラリーサイトです。投票やお気に入り機能もあります。

ストックフォト、ストックビデオ、アイコン、フォント、イラストなどの素材や、プロトタイピング、プレゼンテーション、アニメーション、モックアップといったデザインツールがまとめられています。

図4 デザインに関するツールを集めたギャラリーサイト
図4 デザインに関するツールを集めたギャラリーサイト

5. 10+ Best Online Code Editors to Use in 2020https://catswhocode.com/online-code-editor/

オンラインで使えるコードエディタを11個紹介しています。セットアップ不要、コラボレーションしやすい、コストが低いかゼロといったメリットがあります。

HTML、CSS、JavaScriptのコードとプレビューを同時に見られるタイプのものは、CodePen以外にもいろいろあるんですね。

図5 オンラインで使えるコードエディタいろいろ
図5 オンラインで使えるコードエディタいろいろ

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

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

One Profile Info • A Free Modern Personal Profile Pagehttps://www.oneprofile.info/

One Profile Infoはプロフィールページを作成するサービスで、無料でも使えます。2カラムでカード型のボックスをいくつも並べたページが作れ、日本語の表示も特に問題ないようです。

この手のサービスの中ではかなり自由度が高い印象です。画像、動画をボックス内に自由に貼り付けられますし、Twitter、Instagramの最新の投稿は自動で埋め込めます。Faviconを設定できたり、Font Awesomeのアイコンをボタンに使えるのも、ほかでは見たことがない気のきいた機能だと思います。

年間12ドルの有料プランでは、自分専用の問い合わせフォームが使えるのが特徴です。ほかにもカスタムボックスが無制限で使え、独自ドメイン、Google Analyticsなども使えるようになります。

図6 プロフィールページを作成するサービス
図6 プロフィールページを作成するサービス

おすすめ記事

記事・ニュース一覧