週刊Webテク通信

2016年8月第4週号 1位は,段階的な情報開示についてのまとめ,気になるネタは,グーグル,電話番号でつながるビデオ通話アプリ「Duo」をリリース

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

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

1. The art of progressive disclosure in web design | Webflow Bloghttps://webflow.com/blog/the-art-of-progressive-disclosure-in-web-design

段階的に情報を開示していくといった意味の「progressive disclosure(プログレッシブ ディスクロージャー)⁠についてまとめた記事です。

以下のようなユーザーインターフェイスが,Webデザインにおける「プログレッシブ ディスクロージャー」です。

  • 拡張するナビゲーションメニュー(ドロップダウン,メガメニュー)
  • スライダーとカルーセル
  • ハンバーガーメニュー
  • 「続きを読む」リンク
  • ページネーション
  • アコーディオン要素

なお,Webサイト制作ツールWebflowのブログなので,後半はWebflowでプログレッシブ ディスクロージャーを実現する方法が解説してあります。

図1 段階的な情報開示についてのまとめ

図1 段階的な情報開示についてのまとめ

2. Reducing Complexity: A New Trend in Mobile Design | NOUPEhttp://www.noupe.com/design/reducing-complexity-98575.html

「複雑さを減らす(Reducing Complexity)⁠という,モバイルデザインの新しいトレンドについて解説した記事です。

Instagram,Airbnb,Apple(のMusic)アプリのデザインリニューアルの例と,⁠複雑さを減らす」ヒントについてまとめてあります。

  1. 色をなくす
  2. 見出しと文字をより大きく太く黒くする
  3. シンプルでミニマルなアイコンを使う
  4. ホワイトスペース(空白)を3倍,4倍にする
  5. アプリアイコンを明るく輝いたものにする

5は,個性とブランドの確立を行える唯一の場所がアプリアイコンだからということです。それ以外はシンプルにということですね。

図2 モバイルデザインの新しいトレンドReducing Complexity

図2 モバイルデザインの新しいトレンドReducing Complexity

3. The Pros and Cons of Long-Scrolling in Web Design - Speckyboy Design Magazinehttps://speckyboy.com/2016/08/16/pros-cons-long-scrolling-web-design/

ロングスクロールサイトの良い点悪い点などをまとめています。

長いスクロールとアニメーションとホバーエフェクトの組み合わせは強力で,記憶に残るWebサイトを作れるということです。

悪い点としては,小さい画面ではスクロールがより長くなってしまうことや,モバイル端末との親和性が現時点では良くないことなどが挙げられます。

図3 ロングスクロールサイトの良い点悪い点

図3 ロングスクロールサイトの良い点悪い点

4. Kissui.scrollanim - CSS3 and JavaScript scroll animationhttp://scrollanim.kissui.io/

スクロールに合わせてアニメーション効果を加えるCSS3&JavaScriptのライブラリです。

非常に軽量で簡単に使うことができます。

図4 スクロールに合わせてアニメーション効果を加える軽量ライブラリ

図4 スクロールに合わせてアニメーション効果を加える軽量ライブラリ

5. What’s new for designers, August 2016 | Webdesigner Depothttp://www.webdesignerdepot.com/2016/08/whats-new-for-designers-august-2016/

Webデザインに役立つツールや素材,サービスなどをまとめた記事です。

UIキット,CMS,カラーツール,モバイルアプリ,Webサイト構築ツール,グラフィックデザインアプリ,フリーフォントなどが紹介されています。

図5 Webデザインに役立つツールや素材,サービスなど

図5 Webデザインに役立つツールや素材,サービスなど

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

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

CuePin.com - Design Collaboration Toolhttps://www.cuepin.com/

CuePinは,画像にコメントを書き込むことで,グループでのやりとりを行うためのサービスです。最初に断っておくと,日本語でコメントすると「???」に化けてしまうので,残念ながら日本での実用性はあまりなさそうです。

アップロードした画像上の特定の箇所に「ピン」を刺してそこにコメントを残します。ピンにカーソルを合わせるとコメントが表示されますし,コメントの一覧表示も可能です。

複数の画像を扱えるのはもちろんですが,同じ画像のバージョン違いのものは履歴管理できるようになっています。URLで共有することも可能で,ログインしていなくてもコメントも含め閲覧できます。

図6 画像にコメントを書き込むコラボレーションツール

図6 画像にコメントを書き込むコラボレーションツール

今週の気になるWebネタ

グーグル,電話番号でつながるビデオ通話アプリ「Duo」をリリース 発信者の状況を事前に確認できる「ノックノック機能」が秀逸 | アプリオhttp://appllio.com/20160816-8459-google-duo

Googleからビデオ通話に特化したアプリ「Duo」が登場しました。Google IDは不要で,電話番号だけで相手とつながれます。もちろん相手もこのアプリを入れていないとダメですが。

呼び出し中に相手の映像がリアルタイムで表示される「ノックノック機能」は,ありそうでなかったと思いますが,便利そうです。⁠えっ,こっちの映像も,もう相手に見られてるの?」と誤解される可能性もありそうですが…。

連絡先リストに追加されている人からしか着信できないので,リアルタイム映像で知らない人が登場してしまう心配はないそうです。また,通話は暗号化されてセキュアなのも特徴ですが,一般の人向けアプリなのでそこまでのアピールポイントにはならないかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入