週刊Webテク通信

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

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

ネットで見かけた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 シンプルな操作でカラーパレットを作成できるサービス

今週の気になるWebネタ

YosemiteではLightningケーブルで接続したiOSデバイスの画面を収録可能に - Macの手書き説明書http://veadardiary.blog29.fc2.com/blog-entry-5362.html

OS X Yosemiteでは,QuickTime Playerでのムービー収録時に,Lightningケーブルで接続したiOS端末の画面を入力ソースにできるようになりました。Macの画面にiOS端末の画面を映すことができるので,いろいろと便利そうです。

セミナーや勉強会などで,iPhoneの画面をプロジェクターで映す場合にも使えますね。これまでも,ReflectorやX-mirageのようなソフトをMacに入れてAirPlayで表示するという方法がありましたが,WiFiを使っての接続なのでセミナー会場の環境では不安定だったりするケースがありました。

これで,Macの画面操作を録画することも,iOS端末の画面を録画することも,QuickTime Playerだけでできるようになりました。便利になる一方,サードパーティのアプリが淘汰されていく流れになりそうです。とはいえ,ReflectorやX-mirageは無線で使えて複数端末の画面を表示できるなどの機能もあるので,なくなることはないと思いますが…。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入