週刊Webテク通信

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

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

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

1. Design Patterns and Sources – Human Friendlyhttps://uiux.blog/design-patterns-and-sources-45c40056fc41

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

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

  1. デフォルト値を入れておく
  2. ユーザーが今どこにいるのか常に分かるようにする
  3. 場合によって(ラジオボタンやセレクトボックスなど)要素を変更する
  4. 表組みの数字は右揃え
  5. 場合によって数字の表記を変える
  6. 無限スクロールとフッター
  7. デザインパターンのソースを確認する

図1 デザインパターンを使用するときに気をつけること

図1 デザインパターンを使用するときに気をつけること

2. Advanced vertical margins – Hacker Noonhttps://hackernoon.com/advanced-vertical-margins-4ac69f032f79

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

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

図2 縦方向のマージンの取り方のCSSテクニック

図2 縦方向のマージンの取り方のCSSテクニック

3. Smooth Scrolling and Accessibility | CSS-Trickshttps://css-tricks.com/smooth-scrolling-accessibility/

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

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

図3 スムーズスクロールとアクセシビリティ

図3 スムーズスクロールとアクセシビリティ

4. Beautiful, Yet Effective Examples of Mobile Form Designhttps://1stwebdesigner.com/mobile-form-design/

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

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

図4 モバイルでのフォームデザインの事例いろいろ

図4 モバイルでのフォームデザインの事例いろいろ

5. Top 10 Stunning Free Wireframe Apps You Must Try in 2017https://medium.com/@Devin_46414/top-10-stunning-free-wireframe-apps-you-must-try-in-2017-7503c917655f

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

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

図5 ワイヤーフレーム作成ツール10選

図5 ワイヤーフレーム作成ツール10選

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

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

Upscribe > Embeddable Newsletter Signup Formshttps://upscri.be/

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

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

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

図6 ニュースレターの購読フォームをMediumに設置できるサービス

図6 ニュースレターの購読フォームをMediumに設置できるサービス

今週の気になるWebネタ

GoogleのAutoDrawはAIを使って落書きをプロの絵に変えてくれる | TechCrunch Japanhttp://jp.techcrunch.com/2017/04/12/20170411googles-autodraw-uses-machine-learning-to-help-you-draw-like-a-pro/

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

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

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

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入