CSS Nite in HIROSHIMA Vol.4に参加してきました。今回のテーマは『スマートフォンビジネスについて考えてみよう』でした。
異なる画面サイズに対応するレスポンシブWebデザインのエッセンス
株式会社スイッチ 鷹野 雅弘 氏
スマホ対応のアプローチについて
JQuery Mobile
- 簡単にモバイルウェブページを作れる
- jQuery Mobile Galleryでいろいろな例を見ることができる
- <div data-role="page">で一つのファイルに複数のページの記述ができる
スマートフォンでWebサイトを見るユーザの心理
- 『PCと同じ画面がでると思ったのに』と思う人も結構いる
- スマホ用に最適化された画面が必ずしも良いとは限らない → ユーザに選ばせるようにする必要がある
レスポンシブWebデザイン（本日のメインテーマ）
- ウィンドウの横幅が小さくなるとレイアウトが自動的に変わる
- htmlは同じだけど、CSSで調整している（参考：http://mediaqueri.es/）
キーとなる３つの要素
- A flexible grid (リキッド・レイアウト)
- Flexible images(画像:可変)
background background-size:cover とすると良い
- Media Queries(メディアクエリー)
Webサイトの見え方をチェックするオススメのシミュレータ
- Mobilizer（http://kachibito.net/software/mobilizer.html）
はじめてのjQuery Mobile 〜 モバイルフレームワークの新定番？
有限会社アップルップル 佐藤 歩 氏
スマートフォン対応の課題
- インタラクション（GUI要素の自然な振る舞いをデザインする）の実装コスト
- アンドロイドは解像度がまちまちで検証に非常に手間がかかる
- 課題はあるにせよ、制作需要は今後高くなると考える
このため、効率的な制作方法が今後必要になる
- JQuery Mobileがカギ
JQuery Mobileでできること
- スマホっぽいUIとアニメーションが使える
- HTMLにカスタムデータ属性を書くだけで実装できる
- クロスプラットフォームサポートしている
- JavaScriptを書かなくてもOK
- data-role属性でいろいろできる。
- 例：<div data-role="content">
Theme Rollerを使うと色合いを簡単に変更できる
JQuery Mobileを利用してデザインする際に安っぽく見えない良い事例
- オバマ大統領のモバイルサイト（ブラウザの横幅を変更するとレイアウトもあわせて変更されてます）
Adobeの最新ツールがスマートフォンビジネスをお手伝い!?
アドビシステムズ株式会社 岩本 崇 氏
Adobe Creative Suite 5.5 について
- CS5.5を使って、ネイティブアプリの作成もできる
- HTMLベースでアニメーションを作成できるEDGEというツールがある
- CSS Shadersを使うとブラウザで表示しているGoogleMapをたたむような効果が簡単にできる
- CSS Regionsを使うと星の切り抜き（文字のまわり込み）が簡単に表現できる
- PhoneGapを利用するとHTML5, JavaScript, CSSでネイティブアプリが作れる
- PhoneGapはオープンソースで誰でも利用できる
- MUSEを使うとUIベースで簡単にWebサイトを作成することができる
- Adobeでは、Creative Cloudというサービスを準備中（月々5,000円でCSに含まれているすべての機能を利用できる）
2011年、今現在のスマートフォンビジネスの実情とは
エス株式会社 上中田 健 氏
- エスでは、スマートフォンこそパーソナルコンピュータだと考えている
- 広島電鉄とコラボした『路面電車GOGO！』というiPhoneアプリを提供している
- 経営理念は『世界中に笑顔を』です
株式会社デジタライズ 佐東 弘一 氏
eat-appについて
- 食べたものを記録することを中心としたライフログアプリ
- もともとはガラケー向けのアプリだった
- 当時もライフログのアプリはあったが、食事に『特化』したアプリで勝負しようと思って開発を始めた
- ターゲットを明確に（年齢、習熟度 etc）
- 親しみやすさを意識したUIデザイン
- アプリはブラッシュアアップすることが重要
- Androidは端末によって解像度が違って開発は大変だけど、しっかり検証してUIをブラッシュアップした
- こういった取り組みによって、アプリとしては初めてGoog Design賞を受賞した
- サポートサイトの作成（しっかりとした使い方ガイド）
- プレスキットを作成（アイコン、画像、説明）して、メディアに掲載依頼をしっかりした
- レビューサイトに掲載されるとやっぱりDL数は伸びる
- ソーシャル系のサービスへの告知もやはり有効（facebook, mixi, twitter）
- 市場の声に耳を傾けこまめなバージョンアップを心がける
- デザイン大切
- どのようなカテゴリがニッチか
- レビュー重要
- バージョンアップ重要
- 自社の社会的認知の拡大
- 制作実績をつくる
- 開発スキルを蓄積する
アプリはプロモーション目的として考えおり、企業としてはこれでだけでも十分だと考えている
- 無料提供、ブランディング
ワタシのヤリカタ、ススメカタ - Androidアプリはこうしてつくる -
シュガースポット 佐藤 慎也 氏
クックパッド開発コンテスト24（24時間でアプリを製作して応募する企画）のときのこと
アイデア出し
- ツイッターで市場調査をした
- ツイッターでアイデアのヒアリングをした
- デザインはあとでやる
- 最初は画像はつかわない
- 動くことを最優先でつくる
- レイアウト調整
- アイコンの作成
- スプラッシュや画像の作成
- マーケット用の説明文の作成
- マーケット用の宣伝画像の用意
- 宣伝用のムービーの作成
- モチベーションアップ
- 宣伝効果
- 技術力アップ
- 精度の高い見積もりができる
- 単価を下げずに仕事がとれる
- 仕事の幅が広がる
株式会社インプレスビジネスメディア 安田 英久 氏
おさえておきたい基本のこと
Web担当者の基本のキ
- そのサイトは何のため
- お金をかけてサイトをつくるのだから、それによる利益をしっかり明確にする
- 例えば『なんぼ儲かるか』『何を達成するのか』を明確にする
- ROIのRを明確にする
- Rは基本的にお金だが、でもRは金額でなくてもかまわない（満足度など）
どんな人を対象にしているのか（対象を明確にしましょう）
ソーシャルメディアの基本のキ
- ソーシャルメディアは、人によって見ているものが違うということを認識すること
- 企業が使う場合、とりあえずはやってるからソーシャルメディアをやりはじめるのはNG
- やっぱり目的が大切
- フォロワーを増やすとか、いいねカウントを増やすということは目的とはいわない
- フォロワーを増やした状態で何をするかという目的をはっきりさせる
- 耳を傾ける、話をする、活気づける、支援する、統合する
ソーシャルで大切なのは共感（共感は右脳の判断）
- 電通さんもそう言っています
まとめ
- なにごとも明確な目的の設定が重要である
所感
Webについては、個人的にWebとかCSSとかあまり詳しくないのでどれもとても参考になった。Webサイトを製作するあたって、現存する多数のブラウザへの対応が大変であると聞いたことがあったが、スマートフォンへの対応でさらに大変になっていることがわかった。それを解決してくれそうなのが『JQuery Mobile』。
スマートフォンアプリについては、自分でもいくつかリリースしているが、アプリの製作、リリースすることに関して、デジタライズさんの考え方、取り組み方は大変共感した。特にアプリをリリースする際の準備や、ユーザさんの声にしっかりと耳を傾けて、こまめなバージョンアップを行うことでアプリがブラッシュアップされていく。この点については個人的にも実感しているところであり、勝手な想像ではあるが、きっとリリースしたアプリがユーザさんとともに成長していく感覚をデジタライズさんも感じているのではないかと思う。
ビジネス面については、インプレスの安田さんの講演でROIをしっかり考えることが重要であること。また、ROIの『R』は基本的にはお金だが、『それ以外のものもある』ということが確認できてよかった（なにごとも明確な目的の設定が重要）。スマートフォンアプリでできる『R』は、現状では、お金というようりは『それ以外のもの』のほうがあてはまりやすい（もしくは効果的に利用できる）と感じた。
以上
0 件のコメント:
コメントを投稿