2017年4月第4週号 1位は、デザインパターンを使用するときに気をつけること、気になるネタは、GoogleのAutoDrawはAIを使って落書きをプロの絵に変えてくれる

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

デザインパターンを使用するときに気をつけることをまとめた記事です。

全く新しいデザインパターンを作るより、すでに多く使われているものを正しく利用するべきということで、間違ったデザインパターンの使い方をしないためのヒントを解説しています。

縦方向のマージンの取り方についてのCSSテクニックを紹介しています。

子セレクタと隣接セレクタをうまく使って要素間の縦の間隔を調整していくアプローチで、既に知られている方法なのかも知れませんが、個人的には目からウロコでした。

ページ内リンクでよく使われるスムーズスクロールをさらに工夫して、アクセシビリティを高めるための例をコードとともに解説した記事です。

ページ内でスクロールした先が必ずしも画面の上部に来ないこともあるので、わかりやすいようにアンカーとなっている見出しに枠線を付けるという手法が紹介されていました。

モバイル端末向けのフォームデザインの良い例を紹介しています。

画面サイズが小さく、カーソルのないモバイル端末に向けて、タッチ操作を考慮したフォームの例が3つ掲載されていました。

ワイヤーフレームを作るためのツールを10個まとめた記事です。

モックアップ作成に特化したものや、フローチャート図なども作れるドローツールなど、多数のツールが紹介されています。

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

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

Upscribeは、Medium上にニュースレター（メルマガ）の購読フォームを設置できるようにするサービスです。単独の購読フォームページも生成されるので、Mediumを使っていない人でも利用できます。

Upscribeでアカウントを作ってニュースレターのタイトルなどを設定すると、専用のURLが生成されます。Mediumの記事投稿時にこのURLを入力するだけで、購読フォームが埋め込まれるという仕組みです。また、このURLに直接アクセスすると単独の購読フォームが表示されます。

このサービス上で、登録されたメールアドレスの管理とメール配信ができます。画像は入れられませんが、文字の装飾やリンクなどを設定してHTMLメールとして送信できるようです。また、MailChimpのようなサービスと連携可能で、Google ドキュメントのスプレッドシートとも連携できます。

Googleから「AutoDraw」というAI機能搭載のドローツールが登場しました。手描きでラフな絵を描くと、登録されているクリップアートから似たものが候補として表示されます。

絵を変換するというより、手描きでクリップアート検索をすると言った方がよさそうです。クリップアートには自由に色を付けることができ、レイアウトして文字を入れたりして作品を作れるツールとなっています。

将来的には、配色やレイアウトもAIでアドバイスしてくれるなど、AIが活躍する場はいろいろありそうです。クリップアートを一般から募集しているので、選べるクリップアートが増えると、さらに実用的になっていくと思います。