FC2ブログ

blogaomu2.1はこの度、http://blogaomu.comに引っ越しました。最新の更新はblogaomu.comにて行なっておりますので、ブックマーク・RSS等の設定をお願い致します。

第5回デザイン勉強会@赤羽 に行ってきました

こんにちは。2/17に行われたデザイン勉強会@赤羽「スマートフォンサイト制作におけるデザインの考え方」に参加してきましたので、その時のメモを残しておきます。
間違い等あったらコメントか@TAKAyuki_atkwskにツッコミください。

勉強会メモ

今回お話いただいたのはMONOspaceの板橋さん。
  • フリーデザイナー 86世代
  • webは独学だそうです。
  • Webサイト、iPhoneアプリ(この2つは受託)、自サービスの開発
  • Start up界隈、家入さん界隈で活動している
  • 最近ではchocokureをリリースした

■スマフォサイトに対応させる意味は?
  • usablity : スマフォから見るとPCサイトが見づらい(文字小さいなど)→だからスマフォ用のサイトを作ろう
  • 移動時間に向けたアプローチ : 紙、新聞→スマフォでもアクセスできる(通勤時間でも手軽に読める、時間の有効活用)
  • 拡散効果 : スマフォからの拡散が圧倒的に多い(一人でスマフォ触ってる時は暇なとき。→ツイートしやすい)
  • スキルのアピール : 最先端のスキルをアピールできる(トレンドとソースの綺麗さ)←その手の人から目をかけられやすい

■PC用サイトとスマフォサイトのデザイン設計の違い
  • 画像について
    • モバイルは回線が遅い。画像→テキスト、CSS3、HTML5等で代替
    • サイトの軽量化を意識する
  • カラム
    • 1画面に1コンテンツ
    • できるだけカラムを付けない。facebook風のグローバルナビゲーションが流行っているそうですな。
  • global menu
    • 4つ以上は窮屈
    • 隠れた場所にあるのが理想的
    • 例)Path のメニュー
  • カラー
    • メニューバーが画面の4分の1を占める→カラーの印象が大きい
    • 3色以上は使わないほうがよい
  • テキスト
    • 14pxをベースにする(apple推奨)
    • <h3>以下は使わない傾向

■デザイントレンド
  • CSS3によるアニメーション 例:Pathのグローバルナビゲーション
  • テキストシャドウ
  • CSS3による画面推移 例:Flipbord
  • グラデーション 例:Livedoorニュース
  • エンボス加工による入力ボックス

■リリースの考え方
  • iPhone > Android
    • iPhone版のブラッシュアップ版としてAndroid版を作るという考え方
    • Androidは機種によって解像度違うなど対応が大変になる
  • アプリかスマフォか?
    • 毎日使うコンテンツはアプリにしたほうが良い→アクセスしやすい
  • 女性向けはスマフォ先行(拡散力が半端ない!)
  • 男性向けはWeb先行(会社でPCからwebサイトを見る機会が多い)

  • ■参考サイト
    MONOspace
    Web Design & CSS Inspiration for the Mobile Web ― CSS iPhone
    iphoneやスマートフォン専用サイトのデザイン作成の参考にするまとめサイトをまとめました[11サイト+おまけ6] | HTML5でサイトをつくろう

    感想

    スマフォサイトの思想について「なるほど」と思う部分が多く興味深かったです。ユーザビリティと拡散力というところに意識が行っているなという感じがしました。
    スマフォにも対応したいと考えるときにはコンテンツに合わせて、スマフォサイト対応するか、アプリでリリースするか、Webサイトだけで十分かという判断が求められそうです。
    スポンサーサイト

シェアはこちらからどうぞ

このエントリーをはてなブックマークに追加

コメントの投稿

非公開コメント

プロフィール

TAKAyuki_atkwsk

お知らせ
最新記事
最新記事のRSSフィード

最新コメント
最新トラックバック
カテゴリ
タグクラウド
月別アーカイブ
ブクログ
携帯百景