![事例紹介 | 株式会社インフォバーン](https://cdn-ak-scissors.b.st-hatena.com/image/square/26c3e362873fd978d51427b4ae835eb008a470ca/height=288;version=1;width=512/https%3A%2F%2Fwww.infobahn.co.jp%2Fwp-content%2Fuploads%2F2022%2F07%2Finfobahn_og-1.jpg)
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
スマートフォン、タブレット、ラップトップタイプのタブレットなど、タッチデバイスに最適なナビゲーションの考察を紹介します。 単に見た目のレスポンシブではなく、操作性を考慮したレスポンシブです。 Responsive Navigation: Optimizing for Touch Across Devices 下記は各ポイントを意訳したものです。 各デバイスのサイズ 各デバイスのタッチ方法 タッチデバイスに最適なナビゲーションの位置 デモ スマフォ・タブレット・ラップトップタブレットのサイズ まずは、デバイスごとのスクリーンサイズを確認してみます。 過去2ヵ月にリリースした主要なスマートフォンのサイズ一覧です。
Webサイトをデザインするときは、単なる見た目の美しさだけでなく、情報の見やすさや使いやすさなどの「ユーザビリティ」や、高齢者や障がい者の方も快適に使える「アクセシビリティ」に留意する必要があります。さらに、スマートフォンサイトのデザインでは携帯電話端末ならではの特性も考慮しなければなりません。 デザインに必要な環境を整える WebサイトのデザインではいきなりHTMLを書くのではなく、まずPhotoshopやFireworksなどの画像作成ソフトを使って「デザインカンプ」を作成し、画像パーツを切り出してHTML化していくのが一般的です。こうした流れはスマートフォンサイトの場合でも変わりません。 ブラウザー枠を用意しよう PCサイトを制作するときには、デザインカンプを実際のサイトのイメージに近づけるため、Webブラウザーの枠を含む状態でデザインすることがよくあります。そこで、スマートフォンサ
In darts, the bulls-eye is harder to hit than any other part of the dartboard. This is because the bullseye is the smallest target. The same principle also applies to touch targets on mobile devices. Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap. But exactly how b
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto. While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts. The goal is to have a ~5-10k modular library that downloads and executes fast, with a familiar and versatile API, so you can concentrate on getting
スマートフォンやタブレット端末などタッチスクリーンデバイスにおけるユーザーの指の動きを表すアイコンやステンシルを配布されているサイトの紹介です。 仕様書を書く時にこういうジェスチャー素材を入れておくと、動きに対するイメージの認識のズレがなくなるので助かります♪ デバイスごとにジェスチャーをまとめられているサイトもあるので、アプリの仕様を考える時など、この端末はどんな動きができるんだっけといった悩みも解消してくれます。 実写のジェスチャーアイコン 2012/5/23 High quality multitouch gesture for devices License: Creative Commons Attribution 3.0 マルチタッチジェスチャー素材9種類。 きれいな女性の手で、サイズは実物大! PSD形式で、赤い部分と手は別レイヤになっています。
[対象: 中〜上級] SMX Advanced Seattle 2012 セッションレポート第2弾は、英GoogleのPierre Far(ピエール・ファー)氏による「スマートフォン向けサイトの最適化」です。 Far氏のプレゼンテーションは、直前にGoogle Webmaster Central Blogで公式アナウンスがあったスマートフォンサイト構築の推奨に関する記事とその詳細を説明しているドキュメントとほぼ同じ内容です。 Far氏のプレゼンと公開されたばかりのドキュメントを合わせて、Googleが推奨するスマートフォンサイトを構築する際の最適化についてレポートします。 スマートフォン向けサイトの最適化 3タイプの構成のスマートフォン向けサイトをGoogleはサポート レスポンシブ・ウェブデザイン (Responsive web design) — デスクトップとモバイルで同じURL・同
はてなでスマートフォンアプリの開発を担当している、id:ninjinkunこと浅野慧です。近年、スマホアプリは「ユーザー体験(UX)」が非常に重要と言われており、筆者もUXの勉強に勤しむ毎日です。そんな中、エンジニア&クリエイターを支援するコミュニティ「Web CAT Studio(運営:リクルートエージェント)」が「スマートフォンUXの最前線」という勉強会を開催すると聞いて、お邪魔してきました。勉強会当日のレポートと、Web CAT Studioが積極的に勉強会を開催している理由を伺ったインタビューをお送りします。記事の終わりには、関連書籍のプレゼントのお知らせも! (※この記事はWeb CAT Studio/株式会社リクルートエージェントの提供によるPR記事です) ▽ スマートフォンUXの最前線 : ATND 「UX」とは「ユーザー・エクスペリエンス」「ユーザー体験」の略で、簡単に言う
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
もう一週間も前のことになるが、今回のゴールデンウィークは、いろいろなニュースが流れてきた。特に一番印象的だったのは、夜中に私のTwitterに飛び込んできたCNETのこちらのニュース。分かっていたこととはいえ、今更グラフでちゃんと見せられると結構ショックだった。 Apple, Samsung put hammerlock on smartphone profits-CNET (2012/5/4) 携帯電話市場における「プロフィットプール」つまりその業界の企業が出している利益全体を、誰がどのように分け合っているのか。Asymco社が算出した結果、2011年第四四半期において、アップルが全体の73%、サムスンが26%、台湾のHTCが1%を取っているという報告がされたという。 そのニュースに掲載されていた、2007年からの業界のプロフィットプールのシェア変遷を描いたグラフがこちらである。 このプ
5. Our mission 我々のミッション 新しいコミュニケーションを提供し、 より多くの人々の生活を楽しくする Enjoyment to users by providing new types of communication. Our goals; Variety ways of communication to real social graphs. Providing new communication concept and tools. Public > Niche Better communication, better life 6. 16 Apps in mixi and other Platforms. mixiを中心に16個ソーシャルアプリをリリースしています。 More than 11Milion Registered Users. 合計1100万人以上のユー
There are several ways to define a block of JavaScript functionality. Learn which is the most appropriate one for your particular use case.
スマホサイト案件の見積もりについて 「Android案件の見積り」や「スマホ案件の見積もりについて」を受けて、アプリではなくHTML+CSSでつくるスマホサイト制作の見積もりではまりやすいポイントをまとめています。 HTML+CSS構築ではPCの0.7倍くらいの単価 スマホサイトはPCより小さいのでHTML+CSSの構築コストも安くみます。ただ、CSS3で作ったほうが良いところで画象の切り出しより手間がかかることもあります。ならすとページ単価はPCの0.7倍くらいの感じじゃないでしょうか? 検証コストは増大 対応端末が多く検証コストはPCと比較して増大します。iPhone3G、iPhone3GS、iPhone4、iPhone4Sの中から2端末ぐらい(iOS4.x系とiOS5系)。Android2.2、Android2.3から売れてる端末で2端末ぐらい検証するのがよいでしょう。(場合によって
先日、以下の記事が話題になってました。 AppleのiPhone、米新規スマートフォン購入者シェアでAndroidを追い上げ――Nielsen調べ iPhoneとAndroid、大接戦だったようですね。そしてつい最近はこんなニュースも。 Apple決算、売上高純利益ともに過去最高 iPhone販売台数は3704万台 iPhone人気が上がれば上がるほど、Appleの業績もアップしてる様子。Androidではそういう話はあまり聞かない気もしますが・・・まあそれはさておき。 昨年は日本でもスマートフォンが大ブームでした。当然、今後も注目を浴びることは間違いないでしょうがiPhoneとAndroidは、今後どういう展開を繰り広げていくのか、が気になるところですね。 てことで、その辺の動向についてGoogle先生に聞いてみたメモ。 参考にしたのは「Google Insights for Searc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く