PCデザインの新しいカタチ「タッチジェスチャー」を意識したUIデザインのまとめ

windows8のUIがタッチジェスチャーを意識したデザインなのは皆さんご周知の通りかと思いますが、ここ最近、UIに合わせるようにPC/ノートPCでもタッチジェスチャーが可能になるモデルが次々と発表されています。

Windows開発部門トップのスティーブン・シノフスキー氏も「2年後、タッチできないPCは欠陥品に思われる」とコメントしており、今後のPCデザインもその部分を踏まえてUI設計する必要があるかもしれません。

そこで今回はPCから閲覧したときでもタッチジェスチャーを意識しているサイトを国内/国外別でまとめました。

まずは、どういった部分でタッチジェスチャーを意識してUI設計をしているかポイントを簡単にご紹介いたします。

  • ブロック要素全体にリンクを設定する
  • タッチがしやすいようにリンクエリアは最低でも「1cm × 1cm」以上でデザインする
  • 余白、または境界線をはっきりさせタッチポイントを明確化させる

このポイントを意識して以下に参考サイトをまとめてみました。

国内編

株式会社アイ・エム・ジェイ

株式会社アイ・エム・ジェイ

http://www.imjp.co.jp/

クライマークス

クライマークス

http://www.climarks.com/

EDGE<エッジ>

EDGE<エッジ>

http://www.paris-miki.co.jp/products/glasses/edge/

WEST 3rd

WEST 3rd

http://3rd.west-lock.co.jp/

キユーピー マヨネーズ

キユーピー マヨネーズ

http://www.kewpie.co.jp/mayonnaise/

コフレドール

コフレドール

http://www.kanebo-cosmetics.jp/coffretdor/

LIBERTY OF LONDON FOR AIGLE

LIBERTY OF LONDON FOR AIGLE

http://www.aigle.co.jp/liberty/

アディダス マイコーチ

アディダス マイコーチ

http://adidas.jp/mi/micoach/#/top

東京イラストレーターズソサエティ (TIS)

東京イラストレーターズソサエティ (TIS)

http://www.tis-home.com/

テレビマンユニオン音楽事業部

テレビマンユニオン音楽事業部

http://tvumd.com/

【あいうえぶ】3才からはじめるひらがな練習ドリル

【あいうえぶ】3才からはじめるひらがな練習ドリル

http://aiweb.s5-style.com/#!/home

CONDENSE

CONDENSE

http://www.condense-c.com/

Super me inc.

Super me inc.

http://superme.jp/

SAGA INC.

SAGA INC.

http://www.sagainc.co.jp/

DEPARTMENT PROJECT

DEPARTMENT PROJECT

http://www.d-department.com/jp/

海外編

Pulse

Pulse

http://www.pulse.me/
※こちらのサイト閲覧は会員登録が必要になります。ご注意ください。

Bbbttery Design Studio

Bbbttery Design Studio

http://www.bbbttery.com/new/

jointlondon

jointlondon

http://www.jointlondon.com/

Red Bull Music Academy Radio

Red Bull Music Academy Radio

http://www.rbmaradio.com/

RESERVED

RESERVED

http://www.reserved.com/en/home

LE SOUK

LE SOUK

http://www.lesouk.jp/

いかがでしたでしょうか。

まとめてみると見えてきたことがありますが、「グリッドデザインが適している」ということ。

もっと細かく言うと「グリッドデザイン+要素全体をリンクにする」という手法がタッチジェスチャーに最も適したUI設計なのではないかと感じました。

今後、タッチを意識したサイトの需要というのは増えてくると予想されますので、制作される際に、タッチジェスチャーのポイントを意識してUI設計してみてはいかがでしょうか。

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事