週刊Webテク通信

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

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

ネットで見かけた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 プロフィールページを作成するサービス

今週の気になるWebネタ

顔をプリントしたマスク,着けたまま顔認識でロック解除も--デザイナー考案 - CNET Japanhttps://japan.cnet.com/article/35149601/

装着者の顔写真をプリントしたマスクをサンフランシスコのデザイナーが考案し,購入受付しています。マスクを着けたままスマートフォンの顔認証でロック解除ができるそうです。

顔写真をアップロードして,プレビューで位置を調整してから注文するようで,ゴムバンドの色も肌に合わせられます。マスクは立体なので歪みがないように画像調整されますし,印刷のインクは天然染料で作られた無害なもので通気性も問題ないとのこと。

マスクをするとiPhoneの顔認証が使えないのがストレスですが,こういった発想はなかったのでやられたなと思いました。世界的なマスク不足が解消されるまで製造する予定はないというのは,しょうがないですね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/