ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
jQueryでレスポンシブメニューを横スライドタイプでシンプルに実装する方法｜BLACKFLAG
少し前に「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」と題して、スマートフォン向けレイアウト時ではメニューをアコーディオン動作で展開するレスポンシブナビゲーションUIを紹介しました。 レスポンシブナビゲーションUIのパターンとしてはアコーディオン動作ではなく ハンバーガーメニューボタンを使って、画面のサイドからメニューボタンを スライドさせて表示させるタイプもあります。 今回はその画面横からスライドさせて メニューボタンを展開するタイプのレスポンシブメニューUIを jQueryを使ってできるだけシンプルな構成で作ってみたのでご紹介してみます。 「jQueryでレスポンシブメニューを横スライドタイプでシンプルに実装する方法」サンプルを別枠で表示 サンプルでは前回同様に ウィンドウサイズが768px以上ならばPC向けナビゲーション、 768px以下だったら
ダニー・サリバン氏による、アミット・シンガル氏へのインタビュー。”モバイルファースト”な生活を送ることで、気づいたこと。 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
2015年にも色々と動きがありましたが、その内の一つにモバイル関連の動きを挙げる方も多いと思います。（少なくとも、私はその内の一人です。）改めて確認する必要が無いほど、Googleはモバイル推しを継続していますが、アミット・シンガル氏は、ほぼ全ての検索をモバイルデバイスのみで行っているようです。1年以上、そうした生活を続けているとのことですが、その中で氏が感じたことをダニー・サリバン氏がインタビューの中で明らかにしています。我々の明日の作業に直接関わるといった類の話しではありませんが、非常に興味深い内容であり、それは”Google検索のトップの言葉だから”という理由だけではありません。– SEO Japan アミット・シンガル氏は、ほぼ全てのデジタルライフを、1年以上2つのスマートフォンのみで送っている。 Amit Singhal. Credit: Google ＊記事内のリンクは全て英語
[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js
スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub Feature.jsの特徴 Feature.jsの使い方 Feature.jsの特徴 Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。 WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。 touch タッチイベ
![[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/02491c4eeaaee338bf6a3bba36d56f47a7ba450b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016011204.png)
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
スマートフォンのSEO対策は必要？
「スマートフォンのSEO対策は必要なの？」というお問い合わせを良く頂きます。 このブログを読んで頂いている方の中にも、同じような疑問をお持ちの方がいるかもしれませんので、この機会にお答えしたいと思います。 スマートフォンのSEO対策は必要ない。 この質問に対してまず言っておかなければならないのは、「スマーフォンサイトのために特別SEO対策をする必要はない」ということ。 スマートフォン専用のクローラーは存在するものの、現在はスマートフォン独自の検索結果は存在していません。 パソコン用サイトでSEO対策を行っていれば、検索エンジンはそのパソコン用サイトの評価をスマホ用サイトに反映します。 ですからスマホからの検索結果はパソコンと同じですので、パソコン版でSEO対策を施すだけで良いということになります。 しかし、スマホのSEO対策は必要ないといっても、いくつか押さえておくべきポイントがあります。
今なら「PCサイト」より「スマホサイト」で集客せよ | 集客チャンネル
飲食業、整骨院、サロン、医院などの電話予約をコンバージョンとしている中小企業様、個人事業主様、また、士業やコンサルタントなど電話での問い合わせからの受注率が高い方は、限られた資源を使うのであれば、現在は、スマホサイト集客により力を入れましょう。 (尚、CVRとは、コンバージョンレートと言いまして、この記事では電話の問い合わせ率と考えてください。) なぜなら、スマホサイトからの問い合わせは、ほとんどの場合、フォームからではなく、電話をかけてくるからです。 以下に簡単な図を書かせて頂きます。 図のように、PCサイトのメインのコンバージョンはフォームを利用した資料請求や問い合わせとなりますが、スマホサイトのコンバージョンは圧倒的に電話からの問い合わせとなります。 前回の記事「【どうする？スマホサイト作成】8割近いユーザーが必要性を感じていない！？」でも図として表示させて頂きましたが、適切に運用出
びよ〜んと弾むのが気持ちいい！タブレット・スマフォで使いたいナビゲーション -Bounce Menu
タップすると、びよ〜んと弾んでナビゲーションが表示されるタブレット・スマフォ向けに実装してみたいナビゲーションを紹介します。 Bounce Menu 左下をタップで動作します。 実装はこんな感じです。 HTML <div class="device"> <div class="screen"> <div class="menu"> <ul> <li class="lock"><a href="">Lock</a></li> <li class="share"><a href="">Share</a></li> <li class="download"><a href="">Download</a></li> </ul> </div> <div class="toggle"> <div class="x"></div> <div class="y"></div> </div> <div cl
抑うつ状態やパニック障害、顔のたるみまで！スマホがもたらす恐ろしい症状とは・・・！ （宝島） - Yahoo!ニュース
抑うつ状態やパニック障害、顔のたるみまで！スマホがもたらす恐ろしい症状とは・・・！ 宝島 8月6日(火)14時48分配信 年々、利用者数が増加しているスマホとタブレット、もはや仕事には欠かすことができない パソコン。こうしたIT機器を駆使している人も少なくない。だが、これらはあなたが気づかない うちに、肩こりや腰痛はもちろん、最悪の場合、心までも蝕（むしば）んでいくのだ。 ■体に不調をもたらす『スマホ症候群』 ここ数年で爆発的に普及したスマホ。画面を見ながら歩く「歩きスマホ」で、駅のホームから 転落する事故も問題になっている。これはスマホの画面が従来の携帯電話よりも大きく、 情報量も膨大なため、画面を見ることだけに集中してしまうことがおもな原因だ。 それだけでない。スマホの画面に集中しすぎることで姿勢が悪くなり、体にさまざまな 不具合をもたらす。そう警鐘を鳴らすのが、KIZ
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
CSS で作る Tumblr モバイルアプリ風メニュー
1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から
タッチデバイスに対応したフリーのLightbox・スライドショーjQueryプラグイン
【Swipeshow】スワイプで操作できるjQu... / 【Liquid Slider】スマートフォンのタ... / 【Sly】スライドショーとしても使えるタッチ操作...他...全6件
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
htaccess/リダイレクト(スマホ,OS,ブラウザ)
ホームページへのアクセスには、アクセスしたパソコンのブラウザやOSの情報が含まれています。この情報をユーザーエージェント（User-Agent）と言います。 ユーザエージェントとは？ htaccessでユーザーエージェントの判定することで、特定のブラウザやOS、モバイル（スマートフォンや携帯電話、タブレットなど）からのみアクセスをリダイレクトすることができます。 ただし、ユーザーエージェントは偽装も可能なため必ず正しい情報とは限りません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タッチデバイスでCSSの:activeや:hoverを機能させる。 - Qiita
Engadget | Technology News & Reviews
［速報］Amazonクラウドが「AWS Device Farm」発表。モバイルの実機を大量に並べてテストを自動実行。AWS Summit 2015 New York
ウェブページやスマフォアプリの制作時に参考にしたいUIエレメントをコレクションしているサイトのまとめ
spyrestudios.com| 502: Bad gateway
