週刊Webテク通信

2018年9月第1週号 1位は,デザインライブラリの作り方を実例を元に解説,気になるネタは,LenovoのYoga Book C930はキーボードの代わりに電子ペーパーを搭載

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

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

1. What is a design library? – UX Collectivehttps://uxdesign.cc/https-medium-com-theophilusbob-custom-design-library-a00da438228b

デザインライブラリの作り方を,実例を元に解説した記事です。ツールはFigmaを使っています。

以下の3つの項目を実現したデザインライブラリを作ることで,設計の効率化と一貫性を持たせた,有効なユーザーインターフェースを作れるとのことです。

  1. 再利用とカスタマイズが可能な,スタイルとコンポーネントを作成する
  2. すべてのドキュメントにわたってテキストとレイヤーの属性を一致させる
  3. 整然としたインターフェイス設計のドキュメントを作成する

図1 デザインライブラリの作り方を実例を元に解説

図1 デザインライブラリの作り方を実例を元に解説

2. Best Practices For Mobile Form Design — Smashing Magazinehttps://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/

モバイル向けフォームデザインのベストプラクティス(最善の方法)をまとめた長い記事です。

以下の項目に分けて,それぞれ細かくテクニックを解説しています。

  • 入力フィールド
  • フィールドラベル
  • 構造
  • アクションボタン
  • フィードバック

図2 モバイル向けフォームデザインのベストプラクティス

図2 モバイル向けフォームデザインのベストプラクティス

3. 17 CSS Thumbnailshttps://freefrontend.com/css-thumbnails/

サムネイル画像のデザイン&コーディング例をまとめた記事です。

サムネイルを揃えて並べる,テキストやボタンを載せる,ホバー時にテキストやボタンが現れるような効果を追加する,といったいろいろなパターンの例をCode Penから紹介しています。

図3 サムネイル画像のデザイン&コーディング例いろいろ

図3 サムネイル画像のデザイン&コーディング例いろいろ

4. Carousels on Mobile Deviceshttps://www.nngroup.com/articles/mobile-carousels/

モバイルでのカルーセルは見つけられにくく,タッチスクリーン向けに正しく実装されていない場合も多いとのことで,モバイルデバイスにおけるカルーセルのユーザビリティについての注意点などを解説しています。

モバイルでのカルーセルはスワイプ対応が必須で,黒いドットが表示されているだけではカルーセルだと気付いてもらえにくいとのことです。

図4 モバイルデバイスにおけるカルーセルのユーザビリティについて

図4 モバイルデバイスにおけるカルーセルのユーザビリティについて

5. Designing Illustrations for Small Screens – Meg Robichaud – Mediumhttps://medium.com/@megdraws/designing-illustrations-for-small-screens-a352a5712fa0

小さい画面向けのイラスト制作のヒントをまとめた記事です。

アイコンデザインから学べること,文字のデザインから学べることなど,小さな画面でもわかりやすいイラスト制作のテクニックを解説しています。

図5 小さい画面向けのイラスト制作のヒント

図5 小さい画面向けのイラスト制作のヒント

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

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

Conversations by Typeformhttps://labs.typeform.com/cui/

Conversationsはフォーム作成&管理サービスのTypeformが提供する,自動応答の会話型フォームです。現在,早期アクセスのユーザーを募集しています。

モバイルでの小さな画面で離脱しないため,カード型レイアウトを用いて1質問につき1カードで展開していくフォームが最近流行ってきています。その延長線上で,フォーム作成サービスがチャット型のフォームを提供するのは当然の流れだと感じました。

会話の内容に応じて返答するのは,条件分岐を使っているようです。日本語でどの程度使えるのか不明ですが,答えの候補を表示して選んでもらうこともできるので,日本語でもそれなりに使えるはずだと思います。

図6 自動応答の会話型フォーム

図6 自動応答の会話型フォーム

今週の気になるWebネタ

LenovoのYoga Book C930はキーボードの代わりに電子ペーパーを搭載 | TechCrunch Japanhttps://jp.techcrunch.com/2018/08/31/2018-08-30-lenovos-yoga-book-c930-swaps-the-keyboard-for-an-e-ink-display/

Lenovoの新しいYoga Bookは,キーボード部分が電子ペーパーで,キーボード/付属ペンでの手書きメモ/電子書籍リーダーとして使えます。

電子ペーパーキーボードは,キーが沈み込むアニメーションや,タイプ時に音を出したりバイブレーションすることで,入力している感触を得られるようです。とはいえ,いくつかのレビュー記事を見る限り,打鍵感はなく打ちやすいとまでは言えないようです。

ちなみに,Appleが電子ペーパーを利用して表示内容を変更できるキーボードを開発しているという噂は2016年に出ています。そのときに開発中とされたものは,全面電子ペーパーではなく,物理的なキーに電子ペーパーが埋め込まれているものでした。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入