週刊Webテク通信

2016年4月第4週号1位は、信頼されるUIを作るためのヒント、気になるネタは、Facebook、アルゴリズム変更─⁠─アプリでのリンク先滞在時間を加味

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

1. How to Create a UI That Users Can Trust | Design Shackhttps://designshack.net/articles/ux-design/create-a-ui-that-users-can-trust/

信頼されるUIを作る方法をまとめた記事です。

信頼されないとユーザーがサイト上でフォームに入力したり購入したりのアクションを起こさないということで、信頼されるUIのためのヒントが以下の10項目でまとめられています。

  1. 明快でわかりやすいデザイン
  2. 透明性を高め、隠し事なく明瞭にする
  3. 整合性を意識する
  4. ユーザーが制御できるようにする
  5. 明快なパターンを使う
  6. 一目瞭然なナビゲーションを作る
  7. 問題を解決し質問に答える
  8. 明快で簡潔なコミュニケーション
  9. 流行を1つか2つ取り入れる
  10. テストを繰り返す
図1 信頼されるUIを作るためのヒント
図1 信頼されるUIを作るためのヒント

2. Quick Tip: Get to Know the CSS Object Fit and Position Properties | Tutorialzinehttp://tutorialzine.com/2016/04/quick-tip-get-to-know-css-object-fit-position/

CSSのObject-fitとObject-positionプロパティを使った、画像切り抜きのテクニックを紹介しています。画像の位置やフィットのさせ方などを、その場で試せるデモもあります。

バラバラのサイズの画像から、決まったサイズのサムネイルを作る場合に役立つテクニックです。

図2 CSSでの画像切り抜きのテクニック
図2 CSSでの画像切り抜きのテクニック

3. Awesome input focus effects - Usingcss3http://usingcss3.com/awesome-input-focus-effects/

フォームのinput要素にアニメーション効果を付けるサンプルとテクニックを紹介しています。最後の「Demo」ボタンのリンクからデモを見るとわかりますが、入力欄にフォーカスしたときの効果がいろいろとあって面白いです。

特に「Input with Label Effects」という項目の、プレイスホルダーとして入れた文字が入力時には上に移動する効果が魅力的です。

図3 フォームのinput要素にアニメーション効果を付けるテクニック
図3 フォームのinput要素にアニメーション効果を付けるテクニック

4. Interactive Web Design: 10 Great Exampleshttps://despreneur.com/interactive-web-design/

インタラクティブ性に優れたWebデザインを10個紹介した記事です。

ちょっと重たいページもありますが、操作感が気持ちよく、真似したくなるサイトばかりです。

図4 インタラクティブ性に優れたWebデザインいろいろ
図4 インタラクティブ性に優れたWebデザインいろいろ

5. 50 Ridiculously Cool & Useful Freebies for April 2016http://designwoop.com/2016/04/50-ridiculously-cool-useful-freebies-for-april-2016/

素晴らしく便利なフリー素材を大量に紹介しています。モックアップ素材、UI素材、フォント、アイコンなどが掲載されていました。

パソコンやスマートフォンの画面にはめ込み合成するためのPhotoshopファイルなど、モックアップ用の素材が多めです。

図5 モックアップ用素材などフリー素材いろいろ
図5 モックアップ用素材などフリー素材いろいろ

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

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

Eclipshttps://eclips.io/

Eclipsはネット上の動画を必要なところだけクリップできるWebサービスです。YouTubeかVimeoの動画を選び、イン点&アウト点を設定してトリミングします。

ブラウザの拡張機能を使うと、YouTubeやVimeoのサイト上で動画のトリミング&保存ができるようになります。

トリミングされた動画はこのサービス上で共有されます。ソーシャルメディアで共有したり、ブログなどに埋め込むこともできますが、このサービス自体が動画を共有して交流するソーシャルメディア的な位置付けのサービスを目指しているようです。

動画のトリミングや再生のためのUIがシンプルでよくできています。トリミング作業は最初ちょっとわかりにくいのですが、マニュアルがなくても自然に理解できると思います。

図6 YouTubeかVimeoの動画をトリミングして共有できるサービス
図6 YouTubeかVimeoの動画をトリミングして共有できるサービス

おすすめ記事

記事・ニュース一覧