2/22(土)開催!~デバイスの多様化に追いつけ!~スマートデバイス向けサイト制作の思考術

2月22日(土)13:00~17:30(開場:12:30) 青森市文化観光交流施設ワ・ラッセ 交流学習室(2) 講師:松田 直樹さん(株式会社まぼろし) 主催:NPO法人 あおもりIT活用サポートセンター http://www.aoit.jp/3565.html
2
CalmTech @calmtech

スマートデバイス向けサイト制作の思考術」が開場しましたー。本日は、ねぶのた家 ワ・ラッセ。毎度お世話になっております。 http://t.co/uSDNanJYn9 #aoit0222

2014-02-22 12:41:51
CalmTech @calmtech

いよいよ、「スマートデバイス向けサイト制作の思考術」がスタートです。#aoit0222

2014-02-22 13:03:07
CalmTech @calmtech

スライド、濃いグレーベースのフラットスタイルですね・・・やはり、そこは言及するのでしょうね。 #aoit0222

2014-02-22 13:03:55
CalmTech @calmtech

キッコーマンのボトルデザインをした、榮久庵 憲司 氏を紹介。名前ではぴんとこなくても、ものを見ると開場から「おー」と。入りがこれまでにないパターンですね。#aoit0222

2014-02-22 13:07:24
CalmTech @calmtech

ロンドン5輪は、PVの60%以上がスマホだった。#aoit0222

2014-02-22 13:07:32
CalmTech @calmtech

日本のスマートフォンOSシェア紹介。AndroidとiOSで2分している。 #aoit0222

2014-02-22 13:08:14
CalmTech @calmtech

Android OS内のシェアだと、2.3が最多。2013.05.01時点でのデータ。2系はクセがある・・・自動シャットダウンとか意図しない機能が一杯と。 #aoit0222

2014-02-22 13:09:16
CalmTech @calmtech

現在、Android OSは4系が主流になりつつあるが、JavaScript・・・となると、またまためんどうとのこと。西畑さんをお呼びすればいいそうですw #aoit0222

2014-02-22 13:10:12
CalmTech @calmtech

スマートフォンでフルHDが2013年から出てきている。iPhoneのRetinaはちょうど中間レベルの解像度。#aoit0222

2014-02-22 13:12:08
CalmTech @calmtech

スマートフォンサイトの制作経験について会場で挙手。1割。まだまだ少ないですね。#aoit0222

2014-02-22 13:12:41
CalmTech @calmtech

pxとdpの違いについて解説。この辺、基礎知識ですが、なんとなーくの人は多いのかも知れませんね。 #aoit0222

2014-02-22 13:14:03
あおもりIT活用サポートセンター @AoitJp

「~デバイスの多様化に追いつけ!~スマートデバイス向けサイト制作の思考術」セミナー始まりました! 株式会社まぼろしの松田さんより、現在のスマートフォンを取り巻く環境のお話をしていただいてます。 #aoit0222 http://t.co/KuzUMqZQuD

2014-02-22 13:15:00
拡大
CalmTech @calmtech

device-pixel-ratio = 2 で数値の変換を解説。1dpあたり、何px必要なのか?と考えると良いかも。#aoit0222

2014-02-22 13:15:26
CalmTech @calmtech

Androidのdensity bucketをちらっと。アプリ開発ですと、画像の管理がまたね・・・気を遣わないといけないポイントが増えますよね。#aoit0222

2014-02-22 13:17:54
CalmTech @calmtech

viewportの設定でよく使っているのは、width=device-width, initial-scale=1.0 と。この辺は大分パターンとして定着してきていますね。#aoit0222

2014-02-22 13:18:50
CalmTech @calmtech

device-width = resolution / device-pixel-ratio でブラウザの幅が求められる。320 or 640 がやはり考えやすいとのこと。 #aoit0222

2014-02-22 13:20:42
CalmTech @calmtech

スマートフォンに適したUIセオリーということで、いよいよ本題へ。まずは、指操作による死角の発生について。#aoit0222

2014-02-22 13:21:43
CalmTech @calmtech

iPhone5なってし、片手で操作できる範囲として、上部は届きにくくなりましたね。中央の少し上から、一番下までが片手の親指で届く範囲。 #aoit0222

2014-02-22 13:22:40
あおもりIT活用サポートセンター @AoitJp

スマートフォンの基本についてお話しいただいた後、ユーザビリティが高いレイアウトの仕方をお話しいただいています。片手で操作できる配置が大事!考えてみれば当たり前ですが、意外と忘れがちです。 #aoit0222

2014-02-22 13:24:51
CalmTech @calmtech

片手で日本人には届かないけど、欧米人には届くんですかね?身長180cm弱なのに、片手で届かないエリアに主要UIがあるとか誰得?と常々思うなど。#aoit0222

2014-02-22 13:25:00
CalmTech @calmtech

フォントサイズは基本的に14ptを使用しましょう。16px相当。可読性のアンケートは54.8%が14ptだと読みやすいと回答しているとのこと。IMJモバイルユーザビリティ研究所調べ #aoit0222

2014-02-22 13:25:26
あおもりIT活用サポートセンター @AoitJp

スマートフォンではフォントサイズは14pt以上が読みやすい! #aoit0222

2014-02-22 13:25:47
CalmTech @calmtech

ボタンのサイズは高さ44pxをiOSでは、推奨。iOSヒューマンインターフェースガイドラインは、色々と学ぶことが多いです。http://t.co/GVN5vDxJlR #aoit0222

2014-02-22 13:28:06
あおもりIT活用サポートセンター @AoitJp

ボタンの高さは実際の大きさで7~10mmだと押しやすい。思ってたより大きいですね。 #aoit0222

2014-02-22 13:29:34
CalmTech @calmtech

ボタンは見つけやすさ、押せそうとういのが大事。押せるというルックについては、周りの環境とのバランスも大事。キッコーマンのボトルは、食卓におかれた状態のことも考えられて、つかみやすい位置がデザインされている。#aoit0222

2014-02-22 13:32:39
1 ・・ 4 次へ