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

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

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

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

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

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

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

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

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

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

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

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

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

UI/UXデザインツール「Adobe XD」がAPI開放--他社サービスとの連携が可能に - CNET Japan
Adobe XDがプラグインを使ってツールをカスタマイズできるようになりました
はてなダイアリー、2019年春に終了「⁠苦渋の決断」で「はてなブログ」へ統合 - ITmedia NEWS
「⁠はてなブログに開発リソースを集中してしていく方が、ユーザーの皆さまの期待に沿える」とのことです
動画配信サービス「Facebook Watch⁠」⁠、提供エリアを日本を含む世界に拡大 - CNET Japan
Facebook Watch、IG TVと、Facebookは2つもYouTube対抗サービスを持ってるんですね

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

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

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

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

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

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

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