アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
jQueryでスライドメニュー（横から出てくるやつ）を実装する - Qiita
スライドメニューを実装できるjQueryプラグインを書いたので、使い方をメモします。 ダウンロード https://github.com/kami30k/jquery.sidemenu.js https://github.com/kami30k/jquery.sidemenu.js/archive/master.zip デモ 使い方 まず、必要なファイルをインクルードします： <link rel="stylesheet" href="jquery.sidemenu.css"> <script src="jquery.js"></script> <script src="jquery.sidemenu.js"></script> 次に、サイドメニューにdata-role="sidemenu"、表示用リンクにdata-role="sidemenu-toggle"を付与します。 あとは、サイドメ
10代はソーシャルメディアをこう使っている！大人たちが知らないナウでヤングなコミュニティと、意外なSNSの使い方。 « 株式会社ガイアックス
こんにちは、ソーシャルメディアラボの渕上です。 先日執筆した以下の記事で、「ソーシャルメディアネイティブの声に耳を傾けないといけない」という趣旨の内容を書きました。 20年前、すでにソーシャルメディアの萌芽が！今年の新成人が生まれた1995年をIT業界の歴史から振り返ってみた。 いつの時代も若い世代が新しい技術やコンテンツを産み出します。数多あるソーシャルメディアも、その若い世代に受け入れられるような施策をしているでしょう。 しかし、我々は様々なサービスを使いこなしているように見えて、実はそうしたソーシャルメディアネイティブは大人が知らないサービスを使っていたりするようです。 今、ソーシャルメディアネイティブはどんなサービスを、どのように使っているのでしょうか？今回は、主に10代が使っているソーシャルメディアやWebサービスについて調べてみました。 ■目次 オトナが知らない、10代のソーシ
「渋谷で数人でつくったゲーム」が世界150カ国で1,000万ダウンロード。脳トレ対戦アプリ「BrainWars」創業者がソシャゲじゃなく教育ゲームをつくった理由。
「渋谷で数人でつくったゲーム」が世界150カ国で1,000万ダウンロード。脳トレ対戦アプリ「BrainWars」創業者がソシャゲじゃなく教育ゲームをつくった理由。 リリースから8ヶ月で世界1,000万ダウンロードを達成した「BrainWars」のトランスリミットさんにお話を伺いました。どうして世界150カ国のユーザーにつかわれるアプリをつくることが出来たのか？ ※株式会社トランスリミットCEO 高場 大樹さんとスタッフのみなさん。 なぜBrainWarsが生まれたのか？ BrainWars（ブレインウォーズ）について教えてください。 高場： BrainWarsは世界中のプレイヤーとリアルタイムで対戦できる脳トレゲームアプリです。ダウンロード数としては、2014年5月にリリースしてこれまでに約1,000万ダウンロードされています。 特徴としては海外のユーザーが95%を占めているところ。国別で
モバイル系ブラウザのUA文字列 - fragmentary
何の役に立つか自分でもさっぱりわからないと思いながら、ここ1年半ほどGoogle Spreadsheetsにブラウザのアップデート情報を記録している。 Browser Updates できるだけ情報を入れてるけど、抜けも結構ある。ChromeはStable Channelが入ったマシンがないので細かい情報はないし、Firefox ESRとかは要らんだろうと思って入れてない。 さて、もともとデスクトップだけだったんだけど、最近Chrome for AndroidとOpera Beta（Chromiumベース）が出たので追加し始めた。Opera Betaには chrome://versionみたいなのがなくてしんどい…… それで、UA文字列にバリエーションがけっこうあって複雑だなあと思ったので、ちょっと書いてく。 スマートフォンとタブレット まず、スマートフォンとタブレットでUA文字列が少し違
WordPress｜PCとスマホで記事中に表示させるコンテンツを切り替える方法
WordPress｜PCとスマホで記事中に表示させるコンテンツを切り替える方法Published by Keiichi Yorikane on 2013年2月12日2013年2月12日 Google Analyticsを見ると、Handmade Future ! にアクセスしてくださる方の環境は、4割がモバイル（スマートフォン＆タブレット）です。 ほとんどのブログやWebサイトは大差ないはずです。それどころか、スマートフォンからのアクセスが上回る時代が近いうちに来るでしょう。もはやスマートフォン対応は必須ですよね。 スマートフォン対応には大きく2つの方向性があります。1つはスマートフォン用のサイトを構築する方法。もう1つは、Handmade Future ! もそうですがレスポンシブデザインです。PCで閲覧している方は、ブラウザの横幅を小さくしてみてください。Handmade Future
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
ユーザにアプリを見つけてもらう「ASO（App Store最適化）」についてお話します。
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
スマートフォン（iphone、androidなど）とタブレット（ipad,androidタブレット）を判別する方法 - maxfactory | モバイル関連の技術メモ
ユーザエージェントでの振り分けは、それぞれ下記が判別の条件になります。 デバイス 振分けルール iphone ユーザエージェント内に「iPhone」の文字列が含まれていること ipad ユーザエージェント内に「iPad」の文字列が含まれていること android ユーザエージェント内に「Android」と「Mobile」の文字列が含まれていること かつ 「SC-01C」の文字列が含まれていないこと androidタブレット ユーザエージェント内に「Android」の文字列が含まれていること かつ 「Mobile」の文字列が含まれていない、または、「SC-01C」の文字列が含まれていること BlackBerry ユーザエージェント内に「BlackBerry」の文字列が含まれていること windows mobile ユーザエージェント内に「IEMobile」の文字列が含まれていること
スマートフォン・タブレットの振り分けをどう考える？
デバイスの振り分けをどう考えるか、 ということについて書いてみたいと思います。 今回は、PC/タブレット/スマートフォンと振り分ける場合の参考です。 パターンは4パターン。 ちなみにiPad/Garapagosが出たてくらいまでは、画面解像度とUserEgentで判定して振り分けていたみたいなんだけど、 iPadはもはや次のモデルでは2000px以上の解像度であるし、 今後のモデルがどんどんと高解像度化されることを考えると、少しキリがない感もあるよね。 ただ、高解像度化されても画面サイズは変わらないわけだから、フォントと画像サイズは気にかけなければいけないかもしれないねえ。 1)Media Queriesで分ける もっとも一般的なやり方。IEの対応だけ気をつけないと。 2)Javascript + UserAgentで振り分けてリダイレクト先を分岐 そもそもHTML側を分けておくという考え
iView Slider
画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサムネイルをアニメーションで表示できるjQueryのスライダーで、イメージスライダー、コンテンツスライダー、バナー広告、プレゼンテーションなどさまざまな用途で利用できます。 IE6/7/8/9, Firefox, Chrome, Safari, Operaなど、主要ブラウザを全てサポート。 iOS, Androidのスマートフォンもサポート。 サイズは変更可能で、レスポンシブレイアウトに対応。 フレ
briccolog » スマホサイト支援ツール「Adobe Shadow」使用レポート
外苑前のWEB制作会社ブリコルールのスタッフによる、役に立つ情報から役に立たない情報まで。いろんなところにアンテナ張ってるつもりです。 Adobeからスマホサイトの制作支援ツール Adobe Shadowが公開されました！ Adobe Shadow | preview mobile web – Adobe Labs 概要については上条氏のブログに詳しいです。 スマホサイト制作を支援する Adobe Shadow の Labs リリース 1 公開 – akihiro kamijo まだLabsリリースなので正式版ではないようですが、非常に便利そうな印象だったので、早速使ってみました。 必要な環境 PC Windows 7 またはMac OS X v10.6, 10.7 WEBブラウザ Google Chrome Chrome用の拡張機能を介してスマホ側を操作します。今のところ、他
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
必読！5分でわかるレスポンシブWebデザインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
二度目まして。デザイナーの野田です。 レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ レスポンシブWebデザインとは 「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 現在はPCやスマートフォンなど、デバイス毎に各HTMLファイル
レシート撮影で家計簿をつけられるアプリ！ 出費ジャンル別にグラフ化も | ライフハッカー・ジャパン
突然ですが、皆さんは家計簿つけてますか？ 家計簿というと、項目に入れる作業が面倒だったり、レシート自体がどこかに行ってしまったり...。 そんな方に朗報です。TABROIDがレビューしている『カメラde家計簿～にゃんぱいあ~』は、買い物レシートを撮影するだけでデータ化。しかも出費ジャンル別にグラフ分けまでしてくれるスグレモノ。実際に使用している動画はこちらをご覧ください。 以前ライフハッカー［日本版］では、『スナップショット家計簿 - たいやきくん』 という、同じくレシート読み取り式の家計簿アプリを取り上げました。こちらのアプリも、カメラで撮るだけとお手軽。こちらのアプリの実際の使用感はこちらの動画をご覧ください。 さてこの2つのアプリ、操作性などにほとんど違いはないように思えますが、果たして両者を比較するとどちらのアプリが優れているのでしょうか？ その比較の模様は、下記のネタ元にてご確認
HTML5で使えるスマートフォンの機能 | DevelopersIO
HTML5を使ったスマホアプリ開発に興味があったので、カメラやGPSなどスマートフォンの機能がどこまで使えるのか試してみました。 Webアプリケーションなのでブラウザに依存しますが、以下のサイトにモバイルブラウザ別対応状況が書かれています。 http://mobilehtml5.org 試したのは以下の機能です。端末はGalaxy NexusとiPod Touch 4世代を使いました。 Androidのバージョンは4.0.4でブラウザはChromeと一部Firefoxです。iOSは5.0.1、Safariで試しました。 スマートフォンで確認できるようにサンプルを作ったので試してみて下さい。 タッチイベント(Touch Events) マルチメディア(Multimedia) 位置情報の取得(Geolocation API) 加速度センサー(Motion Sensors) ファイルアクセス(F
スマホのWeb開発に、Adobe Shadowが神ツールな件 | fladdict
スゴイ。ヤバい。 Adobe Shadowは、Adobeのラボがリリースした、スマホコンテンツの開発支援ツール。 何ができるかというと、PCのブラウザで表示したURLのコンテンツを、iPhoneやiPadで同時に表示してくれる。 PCでサイトをリロードするだけで、iPhoneやiPadでも自動でブラウザがリロードされて、表示を検証できる！！ iPhoneやiPadはURLの入力が面倒だし、PCで作業する度にデバイスを移動するのが大変だった。 Adobe Shadowを使うと、PCでリロードするだけで、全環境で表示の確認がすぐできる。これは作業がはかどる。 使い方 Mac / PC に Adobe Shadowをインストール ブラウザ（Chrome)にAdobe Shadowの拡張をインストール iPhone, iPad, android, kindleに Adobe Shadowアプリをイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cmmntr.com
スマートフォン対応、気をつけたいトラブル
