週刊Webテク通信

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

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

ネットで見かけた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 ドメインやアカウントが取得可能か横断的に検索できるサービス

今週の気になるWebネタ

Facebookの「イベント」機能が単体アプリに - CNET Japanhttp://japan.cnet.com/news/service/35090279/

Facebookのイベント機能が単体アプリになり,まずは米国でiOS版がリリースされました。メッセンジャー,グループも単体アプリ化されて便利ですし,イベントにもニーズがあるでしょう。

メッセンジャーは単体アプリが出るとともに,Facebookアカウントがない人でも使えるようになりました。同様に,イベントへの参加表明などの機能もFacebookアカウントなしでも使えるようになれば,利便性が高まるはずです。

チケット機能と決済機能などが付いて,Facebookイベントで全てが完結できるようになると,他のイベント管理&チケット決済サービスがいらなくなりますね。そのためにもまずは,Facebookアカウントなしで利用できる機能追加に期待したいです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入