gihyo.jpサイトのロゴ

週刊Webテク通信

2014年10月第5週号1位は、価格ページでの比較表をデザインする際のヒント、気になるネタは、YosemiteではLightningケーブルで接続したiOSデバイスの画面を収録可能に

2014-10-30

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

1. Pricing Page Design - Factors to Take Into Consideration -http://www.motocms.com/blog/web-design/pricing-page-design-factors/

価格ページでの比較表をデザインする際のヒントをまとめています。Webサービスなどで複数プランがある場合の、プラン選択のためにスペックなどが比較してある表ですね。

  • 違いに焦点を絞る
  • 違いを視覚的に表現する
  • 簡潔で優しい見た目にする
  • 価格に焦点を絞る
  • 見ている人から信頼を獲得する
  • 単純化する
  • より上位のプランを勧める
  • プランを選ぶための手助けとなるものを提供する
    （⁠よく利用されるプランを大きく表示するなど）
  • 選択できる数を減らす
    （⁠3つ～4つのプランが良い）
図1　プラン選択の価格表デザインのヒント
図1　プラン選択の価格表デザインのヒント

2. Parallax Scrolling: Best Practices, Examples & TutorialsVandelay Designhttp://www.vandelaydesign.com/parallax-scrolling-best-practices-examples-and-tutorials/

視差（パララックス）スクロールに関する情報をまとめた記事です。視差スクロールのサイトを設計する場合の方法論や、実例、チュートリアルなどを紹介しています。

方法論としては、古いブラウザではアニメーションはしないけれど全ての要素は見られるようにするという「fallback（フォールバック⁠）⁠」の考え方を勧めていました。

良い例とともに悪い例も紹介してあります。ユーザーが見たい項目に行けない、文字がテキストではなく画像になっている、などUIやUX上に問題のあるものが、悪い例として取り上げられていました。

図2　視差スクロールに関する情報まとめ
図2　視差スクロールに関する情報まとめ

3. 30 Examples of Website Search Interface Design - DzineBlog.comhttp://dzineblog.com/2014/10/30-examples-of-website-search-ui-design.html

検索窓、検索ページのインターフェイスデザインのショーケースです。

Pinterest、Tumblrなど、有名なサービスを中心に取り上げられていて、検索インターフェイスのデザインのトレンドが見えてきそうですね。

図3　検索インターフェイスのショーケース
図3　検索インターフェイスのショーケース

4. Amazing Examples of Web Interactive Websitehttp://designposts.net/amazing-examples-of-web-interactive-website/

インタラクティブな仕掛けが面白いWebサイトを多数紹介しています。

ユーザーを驚かせたり、むやみにカッコ良かったりというものよりも、操作の流れの中でちょっとシャレた効果が使われているようなものがトレンドですね。

図4　インタラクティブな仕掛けが面白いWebサイトいろいろ
図4　インタラクティブな仕掛けが面白いWebサイトいろいろ

5. Interactive Inspiration [108] | Visual Loophttp://visualoop.com/26402/interactive-inspiration-108

データを視覚化した要素を使ったWebデザインのショーケースです。

グラフとして扱っているものが多いのですが、インフォグラフィックスのヒントになりそうなビジュアルもいくつかありました。

図5　データを視覚化したWebデザインのショーケース
図5　データを視覚化したWebデザインのショーケース

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

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

Coolors - The super fast color palettes generator!http://coolors.co/

Coolersは、カラーパレットを作成するWebサービスです。シンプルな操作感が心地よく、それなりに機能も充実しています。

アクセスすると5色のカラーパレットが表示され、スペースバーを押す度にパレットが切り替わります。色の上でクリックすると、その色が固定されます。気に入った色を次々と固定していくことで、簡単にバランスの取れたカラーパレットが生成できます。

また、「⁠#」で始まる色の数値のところをクリックすれば、色を数値指定できます。パレットは固有のURLを持っているので、誰かとシェアすることも可能です。

カラーパレットを書き出す機能がないのですが、URLの末尾が使用されている色の数値の列記となっているので、これをコピーしておけばよさそうです。

図6　シンプルな操作でカラーパレットを作成できるサービス
図6　シンプルな操作でカラーパレットを作成できるサービス

おすすめ記事

記事・ニュース一覧