2011年6月28日のブックマーク (12件)

  • fladdict » スマホのUI考 〜 ボタンについて

    SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ

  • スマホのUI考2 〜 フィードバックについて | fladdict

    UIについて徒然と考える自分用メモ、2回目はフィードバック。ユーザーに「何かがおきたよ!」と如何に明解に知らせるか?1回目はこちら 随時増えたり減ったりするよ。自分の主観だから間違ってることもチラホラあるかもよ。 振り返ってみてTiltShiftGenでは、遷移系のフィードバックは少なめにして、情報系のフィードバックを多めに調整してたんだなぁとシミジミ。多分、ブラーの処理が重かったからだと思う。隙をみてバージョンアップしたい。 一般論 ・フィードバックとは? ユーザーの操作に対して、結果を返すこと。操作の実感。 ・フィードバックのないアプリは痛覚の無い人間。 ・物理的なフィードバックもソフトウェア的フィードバックもなければ、ユーザーは何がおきているか知覚できない。 ・何かが起きたら必ずユーザーに通知する。 ・適切なフィードバックが行われるとユーザーは快感を感じる。 ・新雪に足跡をつけたり、

  • スマホUI考3 ~ ジェスチャ入力について | fladdict

    スマホUI考1 〜 ボタンについて スマホUI考2 〜 フィードバックについて スマホといえばジェスチャー入力、ジェスチャーといえばスマホ。そんなジェスチャーについて、つれづれと。 でも個人的には、ジェスチャーはほとんど要らないと思う。 ジェスチャ全般 ・ジェスチャは補助操作。メイン操作ではない。 ・ボタンでできる操作をプラスアルファで、ジェスチャでもできるようにする。 ・なぜならジェスチャの有無は視覚的にわからない。 ・ユーザーがジェスチャを理解しなくても操作できるのがよい。 ・またジェスチャー時に、画面のかなりの部分が指で隠れる。 ・極論ジェスチャなしでもアプリがリリースできる状態なのがよい。 ・つまり予算や工数があまったときに入れよう。 タップ ・マウスクリックではなくタップ。 ・ボタンの精度は指のサイズに依存する。 ・細かい座標指定はできない。 ・ロールオーバーがない。 ・触ってみ

    mochicreamdenoel
    mochicreamdenoel 2011/06/28
    Web制作 スマートフォン UI
  • Webサイトのスマートフォン対応 7つの基本ルール | Web担当者Forum

    個人利用を中心に急伸を続けるスマートフォン市場は、もはやニッチ市場ではなくなりつつある。過去に企業サイトの携帯電話(フィーチャーフォン)対応が問われたように、今後スマートフォン向けのサイト対応が課題になると考えられる。2010年はスマートフォン元年といわれていたが、2011年は企業のスマートフォンサイトへの投資検討が格化してくるだろう。 2010年、スマートフォンの市場規模は急成長し、『スマートフォン利用動向調査報告書2011』(MCPC監修、インプレスR&D発行)によると、2011年3月末(2010年度)の契約数は、前年の497万契約から63%増の810万契約となる見通しだ。調査によると、契約数は年平均40%以上で拡大を続け、2015年度には4,712万契約に、コンテンツ配信事業も急成長することが予測されている。こうした調査からも、今からサイトをスマートフォンに対応しておくことが決して

    Webサイトのスマートフォン対応 7つの基本ルール | Web担当者Forum
    mochicreamdenoel
    mochicreamdenoel 2011/06/28
    Web制作 スマートフォン
  • 「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた  -1.メニュー編-(※iPhone寄り) - Kaleidoscope

    【目次】 1.メニュー編 2.HTMLCSSで画像を操る編(前編) 2.HTMLCSSで画像を操る編(後編) 今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん!!」って方も多いのではないでしょうか? ということで、記事でも書いてみっかぁ!と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です( ̄▽ ̄;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhon

    「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた  -1.メニュー編-(※iPhone寄り) - Kaleidoscope
    mochicreamdenoel
    mochicreamdenoel 2011/06/28
    Web制作 スマートフォン UI
  • 携帯サイトのデザイン参考サイトまとめ -歌って踊れるプログラマー

    年末から、携帯サイトを構築しています。 え、スマートフォンやiPhoneジャネーノ!?とか言わないでください。 デザインができないので、参考になるサイトを探しつつ、自分用にまとめてみました。 モバイルサイトデザイン集のモバイルデザインアーカイブ By ニューインデックス株式会社様 オススメ度: ★★★★★ 掲載数 :★★★★★(約1700サイト/2010年1月現在) コメント :圧倒的なサイト数の多さ!そしてカテゴライズされているので見やすいです。 ▼一覧ページ。 モバミル イケてる携帯サイトデザイン By 面白法人KAYAC様 オススメ度: ★★★★★ 掲載数 :★★★★★(約600サイト/2010年1月現在) コメント :3キャリア分の画面キャプチャがあり、各キャリアの絵文字の表示の違いなどが非常にわかりやすいです。 ▼一覧 ▼QRコードと、3キャリアの表示の違いが見れま

    mochicreamdenoel
    mochicreamdenoel 2011/06/28
    Web制作 スマートフォン デザイン
  • スマートフォンアプリデザインに役立つ 基礎のまとめ!

    スマートフォンアプリデザインに役立つ 基礎のまとめ!:一撃デザインの種明かし(14)(1/4 ページ) 各キャリアが新Android携帯を続々と発表し、スマートフォンへの注目がますます盛り上がる中、アプリケーションも、iPhoneAndroidともに展開するものが増えてきました。 そういった中で、稿ではスマートフォンアプリのデザインのコツをまとめてみます! iPhoneAndroidともに展開しているアプリ3例 まずは、iPhoneAndroidともに展開している有名アプリを3つ紹介します。それぞれのスクリーンショットを見ながら違いを探してみてください。 【1】クックパッド レシピの投稿と検索ができるアプリです。PCサイトの雰囲気はそのままに、トップ画面を旬のキーワードと履歴、検索ボックスのみに絞ったシンプルなUIになっています。要素とコンテンツを極力減らすことで、レシピ検索に集中

    スマートフォンアプリデザインに役立つ 基礎のまとめ!
    mochicreamdenoel
    mochicreamdenoel 2011/06/28
    Web制作 スマートフォン デザイン
  • jQuery Mobile が必須スキルになる!と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。

    Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば! jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 家サイト jQuery Mobile Gallery http://w

    jQuery Mobile が必須スキルになる!と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
    mochicreamdenoel
    mochicreamdenoel 2011/06/28
    Web制作 スマートフォン
  • ChromeをiPhoneシミュレーターにできる拡張「IPSim」:phpspot開発日誌

    iPSim - Chrome Web Store ChromeiPhoneシュミレーターにできる拡張「IPSim」 IPSimを使えばChromeiPhoneシミュレーターにすることが出来ます。 インストールすると次のようにボタンが追加されます クリックするとシュミレーターが現れます。 縦・横方向での表示が可能。 以下、横表示の例 Chrome自体がWebKitベースなので実機でもそれほと差異がない点にも注目。 ChromeでサクッとiPhone対応したい場合に入れておくとよさそうですね。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 PHPフロントエンドのコンソールロギング用Chrome拡張「C

    mochicreamdenoel
    mochicreamdenoel 2011/06/28
    Web制作 スマートフォン Webサービスツール
  • わずか10分でスマートフォン用サイトが無料で作成できるウェブサービス「smart4me」を使ってみた

    リリースされたばかりですが、スマートフォン用のサイトを手軽に作れると言う事で早速試してみました。 普通のウェブサイトなら話題のabout.meであなたのプロフィールページを1分で作ってみようを参考にしてみるといいかもしれないです。 smart4meってどんなサービス? 以下引用を参考に。 smart4me(スマート フォーミー)とは?iPhoneAndroidなどスマートフォン向けサイトが無料で、簡単に公開できる、世界初のWebサービス! ブログ感覚で、ユーザー自身のスマホサイト(スマートフォン向けサイト)を簡単に公開が可能。 TwitterBlogなどのソーシャルメディアとも連携可能なので、あなたの最新情報をすべて集約できるなど、使い方はあなたのアイディア次第です! 早速ユーザー登録してみよう smart4me ユーザー登録はちゃちゃっと終わります。 登録したメールアドレス宛にメール

    わずか10分でスマートフォン用サイトが無料で作成できるウェブサービス「smart4me」を使ってみた
    mochicreamdenoel
    mochicreamdenoel 2011/06/28
    Web制作 スマートフォン
  • 初心者のためのスマートフォンサイトを作るときに見ておきたいサイト|WEB Drawer -WEB制作に関するメモサイト-

    スマートフォンサイトを格的に作るようになってきたので、いろいろ基的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない!」などの問題が回避できるかもしれません。 ASCII.jp:サイト制作の前に知りたいiPhone/Androidの仕様|実践!iPhoneAndroidサイト制作ガイド ASCII.jp:サイト制作の前に知りたいiPhone/Androidの仕様|実践!iPhoneAndroidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ

    初心者のためのスマートフォンサイトを作るときに見ておきたいサイト|WEB Drawer -WEB制作に関するメモサイト-
    mochicreamdenoel
    mochicreamdenoel 2011/06/28
    Web制作 スマートフォン
  • 最近よく使ってる、Web制作に役立つWebサービス的なやつ

    少し前に聞いてくれた方がいたのでついで にシェアしてみます。個人的に最近よく好ん で使っている、Web制作に役立つWebサー ビスみたいなものをご紹介。全部既出で 珍しいものは無いんですけど、一覧にする のもたまにはいいかもですね。 というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。 web計。 → 黄金比・白銀比をサクサク計算 計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。 web計。 simplelib → よく使うjQueryコードをパッケージで配布 めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能を

    最近よく使ってる、Web制作に役立つWebサービス的なやつ
    mochicreamdenoel
    mochicreamdenoel 2011/06/28
    Web制作 Webサービスツール
    • 2011年6月28日