週刊Webテク通信

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

ネットで見かけた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 画像にコメントを書き込むコラボレーションツール

おすすめ記事

記事・ニュース一覧