週刊Webテク通信

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

ネットで見かけた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に設置できるサービス

おすすめ記事

記事・ニュース一覧