たにぐちまこと氏が教える! Web担当者が知っておきたい、企業サイトの賢いスマートフォン対応とは?

taniguchi_1000

20.Aug.2011

使って気持ちいいスマートフォンサイトになるためのデザイン

 

スマートフォンサイトにとってのデザインや情報設計は重要である。スマートフォンは日常生活で身近な位置にある情報収集デバイスであり、使っていて気持ち良いかどうかも加味する必要があるからだ。たにぐち氏にデザイン視点で良いスマートフォンサイトを挙げてもらった。

「デザインはすごく重要ですね。もともと、表示できる領域にも制限があるため、機能が少し足りなくても、デザインが良い方が使いたくなりますから。ユーザーはそれが理由でお気に入りやホームに置いておきたくなると思います。例えば、画像検索サイトのNAVERはうまく作ってあります。色がきれいに統一されていて、シンプルで見やすいサイトになっていますね」

http://image.naver.jp/m/

検索サイト「NAVER画像検索」の日本版スマートフォンサイト 飲韓国国内では、GoogleやYahooといった他社を圧倒するシェアを誇り、日本でも独自の人気を得ている。 画像検索では結果画面に表示される画像のクオリティが高いことでも定評がある。

見た目が気持ち良いという観点と同じく、デザイン上の工夫で、たにぐち氏が制作時に気をつけているポイントがあるという。

「例えば、リンクの問題です。PCサイトの場合、ポイントを近づけると指アイコンが表示されるので、ある程度、自由な表現をすることができます。一方、スマートフォンでは、マウスオーバーが使えないためクリッカブルな部分を明確する必要があります。それに伴うデザインの制約が発生する場合もあります。さらに、人には癖があるんです。例えば、親指で操作する場合、人差し指で操作する場合などです。タップできる範囲も異なる上、指の影となるデッドスペースなどの配慮も生まれますから、この辺り、スマートフォンをデザインする際に意識する必要がありますね。ちなみに、iPhoneではボタンの大きさは44px以上を推奨というデザインガイドラインもあったりします。一方で、PCサイトで議論されるファーストビューの考え方は特に必要ないと言われています」

 

  • ポイント10 スマートフォンサイトにおけるデザインと機能は、6:4くらいの力の入れ具合である

 

今、注目していることは?

最後に、たにぐち氏にこれからのスマートフォンサイトで期待していることを聞いてみた。

「今一番感じているのはWebアプリの可能性ですね。これまでは、Objective-C(iPhone)や Java(Android)といった、本格的なプログラミング言語を習得しなければ、スマートフォンアプリを制作することはできませんでした。しかし、HTML5の進化とWebブラウザーの高機能化で、アプリに近いことをWebサイトでも実現可能になってきています。TwitterやGmailなどが、Webアプリ化していることに加え、Titanium MobileなどWebの技術でネイティブなアプリを作ることができるプロダクトも登場しています。

HTML5が発達することで、Webの知識でソフトウェア的なものを作れるようになりつつありますよね。例えば閑歳孝子さん(@kansai_takako)が作った「Zaim みんなの家計簿」というアプリがリリースされて話題になっていたのですが、家計簿として使えて、これを「シェア」できるアイデアが入っているのが面白いですよね。こんなソフトを、開発者ではない方が自分のアイデアと知識で作れる世界というのは、今後が非常に楽しみです。今まではWebとソフトウェアは分断された世界でしたが、これからはWebとしてのナレッジを生かしたアプリがたくさん生まれていくと思いますね。そこでスマートフォンの面白さも再発見されていくのではないでしょうか」

Zaim みんなの家計簿の画面

Zaim みんなの家計簿 たにぐち氏が注目するiPhone対応の家計簿アプリ「Zaim」 。シンプルな操作感で家計簿を楽しく管理できる。 また、facebook、twitterとの連携機能を備え外部に入力などを告知することもできる

現在、3ヶ月先が分からないスマートフォンサイトの世界。たにぐち氏のポイントからも、積極的にいろんなサイトを見て、新しい技術を自分で把握し、サイトの構想に加えてゆくのが大切だ。スマートフォンは、まだまだ未開拓の可能性を秘めている。今回、たにぐち氏に紹介いただいたことは、これからスマートフォン対応したいと考えたときに、チェックシートとして参照してみてほしい。

  • Top
  • Ideas
  • たにぐちまこと氏が教える! Web担当者が知っておきたい、企業サイトの賢いスマートフォン対応とは?

You might like these

アクセシビリティからはじめるWebサイトのUI/UXデザイン

EVENT

WebのUI(インターフェース)、そこから生まれる体験のデザインプロセスを考えるワークショップ ”Webアクセシビリティ”と聞くと、JIS規格やWCAGといったガイドラインへの対策を想起しがちで...

2016年03月03日 19:00-21:30

loftwork COOOP(渋谷・道玄坂)

Aug.20.2011 UP

未来の千葉市サイトを考える

EVENT

UXデザイナー坂本貴史さん、Code for Chibaによる 千葉市サイトのペーパープロトを作成する実践ワークショップ 「市役所のWebサイトでは必要な情報が見つけにくい」そういった声をよく聞き...

2015年08月05日 19:30-21:30

loftwork COOOP(渋谷区・道玄坂)

Aug.20.2011 UP

石嶋未来 Bootstrap3からはじめる! レスポンシブWebサイト構築ワークショップ

WORKSHOP

  紹介文 同じコードを書いて同じ場所でつまづいていませんか? Bootstrapで同じコードは二度と「書かない」! Bootstrapというとエンジニアさんや上級者が使うものと...

Aug.20.2011 UP

坂本貴史さんと、Webサイト制作をより楽しくするドキュメンテーションを考えませんか?

IDEAS

Webサイトを立ち上げる、または、リニューアルする際に、何から考えますか?  昨今では、Webサイトは単なる情報掲載以上に、訪れたユーザーにサイトを体験してもらい、その次に情報を得たり、問い合わせ、ソ...

Aug.20.2011 UP

4月12日開催レポート!樽本徹也氏:注目のキーワード、Agile,UCD,UX,リーンスタートをWeb制作から考える企画「IA meets Lean/Agile UX 」

REPORTS

利用品質ラボの樽本徹也氏をお迎えし、IA meets Lean/Agile UX ~リーン/アジャイルな201x年型Web制作スタイルの可能性~を開催しました。...

2012年04月12日 19:00~21:00

loftwork 8F SeminarRoom

Aug.20.2011 UP

IA meets Lean/Agile UX in 京都 ~アジャイル・UX・リーンな時代 Ver.2~

EVENT

2012年05月15日 19:30~21:30

ロフトワーク 烏丸

Aug.20.2011 UP