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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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