週刊Webテク通信

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

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

ネットで見かけた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の動画をトリミングして共有できるサービス

今週の気になるWebネタ

Facebook,アルゴリズム変更─⁠─アプリでのリンク先滞在時間を加味 - BIGLOBEニュースhttp://news.biglobe.ne.jp/it/0422/imn_160422_9727211552.html

Facebookはユーザーやページからの投稿に,独自のアルゴリズムでのランク付けをしており,このアルゴリズムに頻繁に手を加えています。今回の変更は,リンクの付いた投稿では,リンク先が長い間見られた投稿ほど価値のある投稿として評価するということです。

「いいね!」は押されていないけど,多くの人がリンク先をクリックしてちゃんと読んでいる記事が評価されるわけですね。ビジネス用途でのFacebookページの投稿ではリンク先に誘導したいケースが多いため,ビジネスユーザーには気になる仕様変更でしょう。

なお,モバイルアプリではリンク先の滞在時間が計測できることからの実装のようで,Webブラウザからのアクセスは反映されないようです。リンク先を長い間開いて評価を上げようという企みは,モバイルアプリから行う必要があるわけですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入