【2016年】ディレクター必見！スマホ用グローバルナビゲーションのトレンド7選
近年、急速にスマートフォンの普及が進む中、PC版とは異なるUI・UXで、スマートフォン用に制作されたWebサイトが増えています。 これまでは「PC」が主体で制作されていたWebサイトですが、若い世代では"PCを所有していない人"も多く、スマートフォンだけで携帯電話とPC、双方を兼ねて使っているという人も少なくありません。 そのため、スマートフォンサイト（以下、スマホサイト）のUI・UXに関しても、より使いやすさというのが求められる時代になってきていて、必要とされるポイントとしては、画面が小さいため、視認性や可読性の高さ、タップのしやすさなどになります。 そこでユーザをストレスなく、目的とするページに遷移させるためにも重要となってくるのがグローバルナビゲーション（グローバルメニュー）の役割です。 今回は、実例をもとに、様々なスマホサイトのグローバルメニューをご紹介します。 各グローバルメニュ
スマートフォンサイト構築時に気をつけたいポイント集
作成：2015/10/5 更新：2017/04/16 Web制作 > 開発環境 スマートフォンサイト構築時のコーディングで気を付けたいポイントを次回コーディングの時のためにメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 全般 viewport デバイスを横向きにした時の処理一例です。 一般（ページ拡大表示）ピンチアウト/ピンチインOK。通常はこれを使うことが多い。 <meta name="viewport" content="width=device-width"> サイズを変更せず、ピンチアウト/ピンチインOK <meta name="viewport" content="width=device-width,initial-scale=1.0"> 2倍に拡大した状態でページ表示 <meta name="viewport" content="wi
【RWD ーレスポンシブー】右にできた謎の余白を消す方法 | バシャログ。
こんにちは。mackyです。 じめじーめな日々のせいなのでしょうか。6月がとても長く感じます。 今日は右にできた謎の余白を消す方法をまとめます。 そもそも余白って？ できあがったサイトをipadやiphoneで表示確認したとき、以下のような余白ができたことはないですか？ 先日、携わった某サイトはiphoneとipadで表示チェックを行ったのですがその際右のスクロールバーの横に白い余白ができてしまいました。ヘッダーも背景画像もそこで切れてしまいます。その時色々試してみて解決した方法をメモしておこうと思います。（サンプルコードは一部内容を変更しています。） サイトの大まかな構成としては、bodyにwidth:100%;。 内側（ipadおよびiphoneで見切れないで表示させたい幅）sectionに固定サイズの1024pxを指定しました。 ipadとiphoneでみてみたら… (※下の図はip
価格別 LTE対応SIMフリースマホまとめ――「ディスプレイ、本体サイズ、重さ」編
最安はfreetelの「priori2 LTE」（1万9224円）で、この中では唯一の1万円台だ。priori2は3G版が早くから販売されていたが、そのLTE版となる。ちなみにLTEには対応しないが、NTTレゾナントが「gooのスマホ」として販売するZTE製の「g01」はわずか1万800円。480×854ピクセルとディスプレイの解像度は低いが、5型でAndroid 5.0を搭載する。 全体を見ると中心価格帯は20機種中11機種が並ぶ2～3万円台。グローバルメーカーを中心に、モバイル好きならおなじみのブランド名が並んでいる。5万円以上になると、一般的にも知名度の高いスマートフォンがそろっており、8万円台にGoogleのNexus 6、9万円台にAppleのiPhone 6が登場。 最も高価な端末は10万円台のiPhone 6 Plusだ。これは16Gバイト版の最安の価格で、128Gバイト版の
スマホサイトのパーツをことごとく網羅！「スマートフォンサイトUI図鑑」は是非手元においておくべき一冊
スマートフォンサイトを構築してて「このパーツなんて言う名前なのかな」「どうやって作るのかな」と言う瞬間は結構あるものです。 そんな悩める子羊を救う良著がKADOKAWA/アスキー・メディアワークスさんより発売されました。その名もCSS3&jQueryで作る スマートフォンサイトUI図鑑。 ありがたくも一冊ご恵贈頂きましたので、レビューしてみたいと思います。 いや、マジこの本オススメ。こう言う本、ほんとに欲しかったんです。 書籍の内容 何度もコピペして使いたい定番43パーツを厳選。 スマホサイトのUIの名前と使い方、ソースコードをまとめました。 「コーチマークってどんなUI?」「タイムラインってどうやって作るの?」 本書は、スマートフォンサイトの制作で欠かせないUIパーツの「名前がわからない」「使い方がわからない」「作り方がわからない」を解決する本です。 定番の43パーツを体系化して収録。豊
ブログのためにスマートフォン・ファーストビューを20サイト調査（企業サイトの記事ページ編）
人は見た目が9割なんて本もありますが、スマートフォンはファーストビューが9割。人の脳はたった0.5秒で好きか嫌いかを判断します。 スマートフォン検索でたどり着いたあなたのサイトやブログ。記事を読んでくれるかどうかはファーストビューにかかっています。0.5秒で離脱する可能性のあるスマートフォン・ファーストビューを改善するため、20の企業サイトを比較調査しました。 ファーストビューを比較した20サイト 今回は企業が運営するサイトの中から、スマートフォン・ファーストビューにこだわっていそうなIT系ニュース・コラムサイトを10サイト、一般ニュースサイトを1サイト、スマートフォンが主戦場のアプリゲーム情報サイトを4サイト、経済情報サイトを2サイト、自動車ニュースサイトを2サイト、最近伸びている女性向けサイトを1サイトと、幅広いジャンルの計20サイトを調査しました。 TechCrunch（テッククラン
画像の「縦方向の最適化」って何!?たった数行でスマホビューを改善しよう！
webデザインの大きな問題の1つは、スマホビューにおける縦長画像。今回は「縦方向のレスポンシブ」を紹介します。思い付きで実装してみたのですが、驚くほどスマホビューが改善できたので、そのJavascriptのコードを紹介します。 デモを見る 1「縦方向のレスポンシブ」って何？縦長画像をスマホで見たサンプル今回の問題は、縦長画像のスマホビューです。iPhoneやAndroidの解説記事などでスクリーンショットを載せる場合、縦に長い画像を利用しますよね？するとスマホビューではサンプル図のように、画像が画面全体を占領してしまうことが少なくありません。 max-width:100%を設定することで「横方向」には最適化していても、「縦方向」には最適化できていない例です。画像はやっぱり文字と一緒に見たいですよね…。max-height:...%は「画面の高さ」ではなく「コンテンツの高さ」が基準になるので
モバイル（スマホ）用のURLが別に存在する場合にやるべき3つのSEO対策 | ナイルのマーケティング相談室
同一コンテンツでありながらPC用とモバイル（スマホ）用のURLが別になっている場合、コンテンツが重複していると判断されてしまい、SEO上不利に働く可能性があります。そのためにも、PC用とモバイル用のURLの関係性を正しく検索エンジンに伝える必要があります。ここでは、モバイル用URLがPC用途は別に存在する場合にやるべき3つの対策を解説します。 モバイルを取り巻くSEOは、当記事が最初に書かれた2014年頃に比べて大きく状況が変わっています。「モバイルSEOとは」「モバイルフレンドリーとは」「AMPとは」「MFI（モバイルファーストインデックス）とは」などの記事もぜひ合わせてご確認ください。 この記事のポイント PC用とモバイル用のURLが別々であると、重複コンテンツと判断されてSEO上不利になる alternateタグ、canonicalタグ、302リダイレクトで対策する 可能であればPC
グーグルが示すスマホサイト最適化のための25の原則 など10+4記事 | 海外&国内SEO情報ウォッチ
文書はPDF版（全42ページ）でダウンロードできる。英語が苦手な人や、読む時間をすぐにはとれない人は、グロースハックジャパンさんが要点を簡潔に日本語にまとめたページを参照するといいだろう。 モバイルサイトの重要性は増すばかりだ。モバイルサイト運営に役立つ貴重な資料として活用したい。 日本語で読めるSEO/SEM情報物語で学ぶ、SEOに成功する人・失敗する人 ★★★★☆ あなたはどちらのタイプ？ （SEO 検索エンジン最適化）SEOを施策する際の重要な考え方を、住太陽氏が“物語風”に解説した。 2つの物語を公開している。 クライアントを獲得するためにウェブサイトを利用することにした3人の弁護士の話ネットショップを開設した2つの木工所の話どちらの話にも、「成功する側」と「失敗する側」が登場する。何が成功をもたらしたのか、反対に何が失敗をもたらしたのかを考えてみてほしい。 Web担にもマンガや小
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
レスポンシブWebデザインで成功するUI／UXのポイント5つ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
レスポンシブWebデザインでサイト構築をする際に、今までのWeb構築で「当たり前」や「こうすべき」と思っていた感覚とは少し異なった設計でサイトを構築しなければなりません。 これまでのWebにおけるUI／UX これまで、PCのブラウザをメインにネットをする層が中心だった時代では、マウス操作が基本になっていました。 当たり前ですが画面上のマウスを操作して、クリックをしたり、ドラッグ・アンド・ドロップで対象を動かしたりする動作がメインになります。 UI／UXで言えば、ボタンをクリックするにしても、マウスでカーソルを移動させればボタンの色が変わったり、カーソルの矢印が人の指に変わったりするマウスオーバーアクションと言われるものです。 テキストリンクであれば、カーソルを対象に持って行くと、テキスト下線が消え、カラーが変わるなどの変化が当たり前になっていました。すべてはマウスでの移動させることが中心に
MdN Design｜総合情報サイト
スマートフォンサイト 6-07 表示サイズ調整の要となるViewportの設定 スマートフォンやタブレットでは、画面サイズも解像度も2倍以上の開きがあり、これまでのPCのノウハウをそのまま使うことができない。ここでは、表示サイズ調整の要になるdpiスケーリングとViewportについて見てみよう。 解説／馬場孝夫（ビヨンド・パースペクティブ・ソリューションズ株式会社） BROWSER iOS…5over Android…2.2over マルチデバイス対応に必須な画面サイズ調整 従来のPC 向けサイトでは、ディスプレイサイズや解像度に極端な差はなく、幅1024px・96dpiなど固定値をターゲットにして問題なかった。しかし、スマートフォンやタブレットが普及してきた現状では、固定値だけで対応はできなくなっている。その対応策として挙げられるのが、dpiスケーリングとViewportである。 dp
商用利用無料、今時のスマフォアプリ用のワイヤーフレーム素材 -App Wireframes Kit
スマフォアプリ用のさまざまなUIエレメントが用意されたベクターベースのワイヤーフレーム素材を紹介します。 App Wireframes Kit ダウンロードできる素材のフォーマットは、2種類。 .psd .ai どちらもベクターベースで作られているので、サイズ変更やカラー変更なども簡単にできます。 App Wireframes Kitには、スマフォアプリ用のさまざまなコンテンツが収められています。 素材の利用にあたってはロイヤリティフリーで、個人でも商用でも無料で利用できる、とのことです。詳しくはダウンロードファイルの「License.txt」をご覧ください。 ダウンロードはページの下の方からです。
スマホ向けサイトをMac/PCで表示する。すぐできるオススメの『ユーザーエージェント偽装』方法。 (フェンリル | デベロッパーズブログ)
こんばんは！開発の林です。 Bootstrap, from Twitter いいですよね！サクサク作れちゃうあたり今気に入っています。 本記事でもエントリー部分だけ Bootstrap にしてみました。 さて、話を戻します。 他所のスマートフォン向けサイトに PC からアクセスしたい、 ソースを見てみたい、解析やデバッグを行いたいことってありませんか？ 本日はスマートフォン向けサイトを PC からでも解析できるよう簡単に偽装する方法をご紹介します。 Mac / Windows 対応です。 スマートフォン向けサイトにアクセスするには はじめに、スマートフォン向けサイトにアクセスするにはいくつかの方法があります。 スマートフォン向けのアドレスにアクセスする ex. http://b.hatena.ne.jp/touch ユーザーエージェントを偽装してアクセスする Android SDK や i
必ず押さえておきたい！iPhone、Androidのフォーム標準UIまとめ | エフトラEFOブログ
スマートフォン端末の普及で、PCだけでなくスマートフォン向けにもフォームを最適化する必要性が高まっています。 そこで今回は、iPhoneとAndroidでフォームを表示した際の標準的なUIについてお話しします。 PCとの違いはもちろん、iPhoneとAndroidの間でもUIには差がありますので、 基本のフォームパーツごとにその特徴・違いを紹介していきます。 スマートフォン向けのEFOを考えるうえで大前提となるポイントですので、 この機会にしっかりとおさえておいてはいかがでしょうか。 ※検証について 今回検証に使用した端末は、iphone5、Sony Xperia GX（それぞれ標準ブラウザ）です。 それぞれ装飾をできるだけ施していない状態のUIを用意しました。厳密には使用ブラウザやデバイスのバージョン、メーカー等によりUIに変化が生じるとは思いますが、今回は割愛とします。 ▼そ
スマホのバッテリーを長持ちさせて電池寿命をのばす4つのコツ
By Takashi Hososhima スマートフォンのバッテリーは機種によって持続力が異なりますが、消費が激しいものでは1日も持たないものも少なくありません。そんなスマートフォンのバッテリーを長持ちさせて、バッテリー寿命も長くするための4つのコツがまとめられています。 4 Ways To Keep Your Smartphone's Battery Healthy, Happy And Juiced Up http://www.yahoo.com/tech/how-to-treat-your-smartphones-battery-right-71981818317.html ◆電池残量はほどほどがベター ほとんどのスマートフォンは、リチウムイオン電池を備えています。このバッテリーの寿命を長く保つには、50％程度を維持すると良いとされており、細かく言えば40％～80％がベストで、ゼロか
これがスマートフォン向けサイトを作るときの 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>に見えるのが隠し味になっていま
Ink - スマホ/タブレット対応のレスポンシブHTMLメールテンプレート MOONGIFT
これは使い勝手良さそうですよ！ ガラケーが主流だった日本においてはHTMLメールはあまり普及しませんでした（Outlook ExpressがよくHTMLメールでセキュリティインシデントを起こしていたのも大きいと思いますが）。しかし海外でのサービスではHTMLメールが当たり前ですし、より多くのコンバージョンを求めるならHTMLメールを使わない手はありません。 しかしHTMLメールというと通常のHTMLと異なる作法が必要で、作成においても若干のコツがいります。それがPCメーラー、Gmail、スマートフォンとそれぞれのデバイスで適切に見られるように考えるとなるとレスポンシブWebデザイン以上に大変なことです。 そこで紹介したいのがInkです。Zurb Foundation開発元が作成した新しいレスポンシブHTMLメールテンプレートです。 サンプルです。ヘッダー、見出し、リストなどで構成されていま
sichoru.net
sichoru.net このドメインを購入する。 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
デザイナー必見！アプリのUIを一覧で見られるギャラリー。
iOS7のフラットデザイン化でほとんどのアプリがデザインの路線を大幅に変更する事を余儀なくされました。これまでのお馴染みアプリもどんどんアップデートされ、フラットデザインへの対応がなされています。これからアプリを開発するにもフラットデザインのUIというのは非常に重要な要素になっています。 App Storeでデザインの参考になるアプリを一つ一つ見ても良いのですが、UIを一覧で表示してくれる非常に便利なサイトを見つけたのでご紹介。 アプリのUIを集めた「Pttrns」 こちらがトップ画面。アイコンではなくUIで並んでいるのでたくさんのデザインを素早く見る事ができます。新着順で並んでいるので、フラットデザインのものばかりが表示されています。見ているだけでも楽しいですね。 簡単に細部のチェックが可能 画像にカーソルを合わせると、ルーペで拡大してくれます。なので細部のデザインやフォント・ボタンを確
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
