週刊Webテク通信

2015年11月第1週号1位は、最近デザインリニューアルされたサイトと変更箇所の紹介、気になるネタは、鍵をひねってウェブサービスを操作するスイッチ「Hackey」

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

1. 6 big redesigns of summer 2015 | Web design | Creative Bloqhttp://www.creativebloq.com/web-design/big-redesigns-summer-2015-101517324

この夏デザインリニューアルされたサイト6つを取り上げて、変更されたポイントを解説しています。

同時期にリデザインされたサイトのまとめは、最近の傾向がよくわかって参考になりますが、それほど大きな特徴はないようです。すでにシンプル化、フラット化が済んだ上での、よりユーザーの反応が高くなるための調整という感じがしました。

しいて傾向を挙げるとすると、アクションを促す部分がシンプルではっきりしたボタンになっているところかもしれません。

図1 最近デザインリニューアルされたサイトと変更箇所
図1 最近デザインリニューアルされたサイトと変更箇所

2. User Experience Design — Best sources to learn UX — Personal Growth — Mediumhttps://medium.com/keep-learning-keep-growing/user-experience-design-best-sources-to-learn-ux-c67bf80484ce#.1omjsfgx2

ユーザーエクスペリエンスデザイン(UXデザイン)を学べる電子書籍、サービス、サイトをまとめた記事です。

有料の電子書籍や学習サイトなど、しっかり学びたい人向けの内容となっていました。

図2 UXデザインを学べるサイトやサービスいろいろ
図2 UXデザインを学べるサイトやサービスいろいろ

3. Background Image Shapes | CSS-Trickshttps://css-tricks.com/background-image-shapes/

斜めになった図形を使って画像をトリミングするテクニックを紹介した記事です。

以下の5つの項目を実現することを目標とします。

  1. CMSで管理した画像を割りあてる
  2. レスポンシブ
  3. 画像はアニメーションして切り替わる
  4. 対応していないブラウザにも代替手段を用意する
  5. Flashなどを使わずセマンティックに構築する

そして、以下の4つの方法を試し、採用になったのは最後の方法とのことでした。

  1. CSS Transform(多くの計算が必要でブレイクポイントの設定が難しい)
  2. CSS clip-path(作りやすいがIEが非対応)
  3. SVG (多くのブラウザで対応しているがちょっと期待はずれ、Firefoxでバグ)
  4. SVG +

また、CSS clip-pathとTransformを使って領域を斜めに切り取る方法を紹介した、Angled Edges with CSS Masks and Transforms | Vigetという記事もありました。

図3 斜めになった図形を使って画像をトリミングするテクニック
図3 斜めになった図形を使って画像をトリミングするテクニック

4. CSSGramhttp://una.im/CSSgram/

CSS FiltersとCSS Blend Modesを使って、インスタグラムのフィルターのような効果を画像に適用する軽量のライブラリです。

classを指定するだけで簡単に適用できるので、いろいろと便利に使えそうです。とはいえ、Internet Explorerに対応していないので、画像にこの効果がかかっていないと成立しないケースでは使えないと思います。

図4 インスタグラムのフィルターのような効果をCSSで
図4 インスタグラムのフィルターのような効果をCSSで

5. NavNav - 90+ Responsive Navigation Bar Menu Tutorials, Examples, and Demos (CSS, jQuery, JavaScript)http://navnav.co/

レスポンシブなナビゲーションのサンプル、デモ、チュートリアルをまとめたサイトです。

ドロップダウン、オフキャンバスなどカテゴリごとに見ることもできます。

図5 レスポンシブなナビゲーションを作るための情報源となるまとめサイト
図5 レスポンシブなナビゲーションを作るための情報源となるまとめサイト

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

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

10 Tools for Collecting Your Design Inspiration | Design Shackhttp://designshack.net/articles/business-articles/10-tools-for-collecting-your-design-inspiration/

今回は、デザインのインスピレーションを得るのに便利な、Webページをコレクションするツールを10個掲載した記事を紹介します。

Historiousは、オンラインブックマークのようなサービスで、登録したページをキャッシュする機能もあります。Licorizeも同様のサービスですが、こちらは集めたページを誰かに紹介する手段に力が入れてあり、オンラインマガジンを作ったり、自分のポートフォリオに使ったりできるようです。

EmberはWebページ全体のスクリーンショットを撮って管理できる便利なツールなのですが、これはWebサービスではなくMacのアプリケーションでした。

図6 Webページをコレクションするツール10選
図6 Webページをコレクションするツール10選

おすすめ記事

記事・ニュース一覧