週刊Webテク通信

2016年10月第3週号1位は、UXを改善するためのアニメーション効果いろいろ、気になるネタは、Facebookの「イベント」機能が単体アプリに

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

1. Simple Methods for Improving UX with Subtle Motionhttps://speckyboy.com/ux-motion-design/

UXを改善するための簡単な手法として、ちょっとした動きを加えることを提案しています。

  • ページ遷移時のアニメーション
  • アニメーションと組み合わせた無限スクロール
  • アニメーションするチャートとグラフ
  • 雰囲気を出すためのスローモーションのアニメーション
  • 制御された部分別のスクロール
  • モーションデザインはフォームの入力を楽しくする
  • リンクテキストのアニメーションをカスタマイズする
図1 UXを改善するためのアニメーション効果いろいろ
図1 UXを改善するためのアニメーション効果いろいろ

2. Styling Underlines on the Web | CSS-Trickshttps://css-tricks.com/styling-underlines-web/

テキストのアンダーラインをCSSでスタイリングする方法をまとめた記事です。

「y」などベースラインの下に飛び出しているアルファベットとアンダーラインが重なる問題の対処方法や、太さや色、形を変えたアンダーラインの作り方を解説しています。

図2 アンダーラインをCSSでスタイリングする方法
図2 アンダーラインをCSSでスタイリングする方法

3. You Might Not Need JavaScripthttp://youmightnotneedjs.com/

JavaScriptを使わずに、HTMLとCSSだけで実現するUIコンポーネントを各種紹介しています。画像スライダー、モーダルウィンドウ、アコーディオンメニュー、タブ、ライトボックスなどのコードが掲載されていました。

実用性から考えるとJavaScriptを使わないことにこだわる必要はないのですが、スクロールインジケーターを非常にコンパクトなCSSで実現している例など、CSSの組み方がいろいろと参考になります。

図3 JavaScriptを使わずに実現するUIコンポーネントのいろいろな例
図3 JavaScriptを使わずに実現するUIコンポーネントのいろいろな例

4. 5 Top Landing Page Mistakeshttps://www.sitepoint.com/5-top-landing-page-mistakes/

ランディングページでよくある5つの失敗を紹介しています。

  1. コールトゥアクション(行動を喚起するボタンなどの要素)の不足
  2. 雑然としている、または醜いデザイン
  3. 不正確な宣伝文句
  4. 非効率または複雑な(会員登録、資料請求、商品の注文などの)申し込みの手順
  5. トラッキングや最適化の失敗
図4 ランディングページでよくある5つの失敗
図4 ランディングページでよくある5つの失敗

5. Using Adobe XD for Commercial Projects — Isaac Powellhttp://www.subtleoffwhitecolouring.com/thoughts/2016/10/11/using-adobe-xd-in-production

Adobe Experience Design(Adobe XD)は、実際の仕事に使えるのかを考察しています。現在プレビュー版のAdobe XDですが、処理速度が速く使っていて楽しいところが良いとのことです。

高度なプロトタイプを作るFlintoのようなツールの代わりにはならないのと、既存のプロジェクトのワークフローに急に導入するのは難しいという点を除けば、Adobe XDはオススメできるという結論でした。

図5 Adobe XDは実際の仕事に使えるのかを考察
図5 Adobe XDは実際の仕事に使えるのかを考察

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

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

Launchaco - Name a businesshttp://launchaco.com/

Launchacoは新たにビジネスを始める場合などに名前を決める際に、ドメインやソーシャルメディアのアカウントが取れるかどうか横断的に検索できるサービスです。

ドメインやソーシャルメディアのアカウントは、検索したあとすぐに取得できるようリンクが用意されています。ドメインは業者をいくつか選べます。Facebook、Twitter、Instagramのアカウントをまとめて取得可能かどうか調べられるのは便利です。

また、入力した名前が複数のフォントで表示されるのも面白いです。いくつかの系統の違うフォントで文字の並びを見られるので、社名やサービス名を考える際に大いに参考になるはずです。

図6 ドメインやアカウントが取得可能か横断的に検索できるサービス
図6 ドメインやアカウントが取得可能か横断的に検索できるサービス

おすすめ記事

記事・ニュース一覧