【2018年4月版】もう迷わない！Webサイト横幅サイズの大正解 | FASTCODING BLOG
2021年、最新のWebデザインの横幅サイズはこちらの記事をご覧下さい。どうも、FASTCODINGディレクターのせりなです。Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？パソコンは何pxで作るの？スマートフォンは何pxがいいの？って聞かれることが多いので、デザインの横幅でもう迷わないための考え方をまとめてみました。基本的な考え方さえ抑えておけば、これから先いろいろな情報が出てきてもばっちりです！ もくじ 1. 「Webサイトデザインの横幅サイズ」の結論！！ 2. まず、... 人気なのはとても嬉しいことなのですが、WEBを閲覧するデバイスの進化は日進月歩。 去年の常識が今年の常識であるとは限りません！ ということで2018年4月現在、パソコン用のWEBサイトは何pxで作るの？スマートフォン用は何pxがいいの？ 最新のウェブデザイン
課金 UI まとめてみた｜あき - 良いもの作って正しく届ける
売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限
スマホでソフトウェアキーボードを表示させない。 - Qiita
jqueryのdatepickerをスマフォで使っていてキーボードが邪魔だから非表示にしたい！ってことで inputタグに対してreadonlyをつかって読み込み専用のボックスにしてやることで対応。 これによって値が送れるかつ、スマフォのソフトウェアキーボードを出さないということが可能です。 ただし、入力はjsからしかできなくなります。 参考タグ <input type="text" name="date" value="0000-00-00" readonly="readonly" /> Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use
スマホサイトのナビメニューを見直そう！基本3パターンの長所と短所、改善ポイント
ウェブやモバイルアプリのナビゲーションは、直感的で予測できるべきです。新しいユーザーとリピーターの両方が、どのようにアプリが操作するのか理解できるべきなのです。 しかしモバイルの小さな画面上では、分かりやすくアクセスしやすいナビゲーションメニューを作成するのは大変な作業で、コンテンツの優先順位に応じてUI要素が必要になります。異なるナビゲーションメニュー・パターンを利用し、他の解決方法を試みても、他のさまざまなユーザビリティーの問題点が出てきてしまいます。 この記事では、ハンバーガーメニューとタブメニュー、ジェスチャー型ナビゲーションといった、モバイルアプリの基本的な3つのナビゲーションパターンのメリットやデメリット、デザインの解決方法について詳しく見ていきましょう。 コンテンツ目次 1. ハンバーガーメニュー 概要 メリット デメリット デザインの解決方法 2. タブメニュー 概要 メリ
激ヤバスマホ広告、はじめました。 | ウェブ電通報
スマホの広告って「どうせ下の方に小さく出てきてピコピコやってるだけっしょ」くらいに思ってるみなさん、こんにちは。電通CDCで、クリエーティブ・テクノロジストをやっている宮地成太郎と申します。 スマホの広告で「下の方に小さく出てきてピコピコやる」以外にできることは無いのか…そんな悔しい思いを抱いたことがある方も多いはず。 しかし！！ 本日2015年10月23日から、そんなスマホ広告を取り巻く環境は激変することになるでしょう！ なぜなら今日、電通とアクセルマークの2社が、既存のスマホ広告の概念をぶっ壊す激ヤバなプロダクト「BRAND SCREEN」を開発してしまったからです。 BRAND SCREENとは、有名ウェブメディア40社以上から「記事ページと融合させた広告コンテンツを載せていいよ」という許可をいただき、ウェブメディアが運営する記事ページの上にインタラクティブな広告コンテンツを配信する
スマートフォンサイト構築時に気をつけたいポイント集
作成：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
ファーストビュー神話崩壊か 女性向けアパレル「fifth」スマホECの斬新すぎる設計に注目
ECzine Day（イーシージン・デイ）とは、ECzineが主催するカンファレンス型のイベントです。変化の激しいEC業界、この日にリアルな場にお越しいただくことで、トレンドやトピックスを効率的に短時間で網羅する機会としていただければ幸いです。
【必読】あなたのサイトはどれくらい嫌われてる？スマホユーザーが嫌う10のこと
＜質問＞ スマホで当社サイトを閲覧する人が増えたので、スマホ対応にしました。 ユーザーの利便性向上を狙ったのですが、スマホ対応後も、社内の人からなんとなく使いづらいと言われてしまいました。 文字が大きくなり文章も読みやすくなったのに、何が使いづらいのかイマイチ要領を得ません。どこを変えればいいですか？ ＜回答＞ 文字が読みやすいというのは、利便性の一つに過ぎません。またスマホはＷＥＢを閲覧する以外にも、電話をかける・地図アプリを使う等、様々な機能を備えた端末です。 スマホの利用シーンを具体的に思い浮かべると、注意すべきポイントが多くあります。今日はスマホユーザーが嫌う１０個のことを紹介します。 ① リンク箇所が一目で判らないと嫌われる スマホでは、リンク箇所が一目で判らないと、ユーザーは迷ってしまいます。ダイレクトに言葉で表現したり、判り易い色のボタンやバナーを用意したりするなどの配慮が大
スマホ対応していないサイトは4/21からグーグルで順位が下がります（公式発表） など10+4記事 | 海外&国内SEO情報ウォッチ
グーグルは、ウェブサイトがスマートフォン向けに最適化されているかどうかをランキング要素として使用することを発表した。2015年4月21日からの実施予定だ。 スマホ対応していないサイト、言い換えれば、モバイルフレンドリーではなく、モバイルユーザーが使いにくいサイトは、スマートフォン検索において順位が下がる可能性がある（PCからの検索には影響はない）。 大きなニュースになっているのでもうご存知かもしれない。一見するとショッキングな発表だが、筆者も含めてこのコーナーの読者なら予想できたことだ。 モバイル対応が不完全なサイトに対してグーグルが昨年から送り始めた警告が今年に入って急増した。モバイル対応できているかどうかがランキング要因になる前触れではないかと疑ったが、グーグルのイリーズ氏は否定していた。しかし筆者たちが推測したように、やはり「少なくとも今のところは」ということが明らかになった。 どの
PC/スマートフォンで背景画像を固定する - Cube Lilac
Web ページで背景画像を固定する場合、オーソドックスな方法は background-attachment プロパティを fixed に指定する事らしいのですが、この方法だと（PC で閲覧する分には問題ないのですが）手元の iPhone (iOS 5.1.1) では固定されませんでした。 /* この方法だと、iPhone（スマートフォン）で閲覧した時に背景画像が固定されない */ body { background-color : #cccccc; background-image : url('images/background.jpg'); background-repeat : no-repeat; background-attachment : fixed; background-size : 100% auto; /* 画面の幅に合わせて拡大・縮小 */ } そこで少しググってみ
株式会社Go-Next | お客様にビジネスの成長と革新を
今日も生まれる感動と笑顔 お客様の事業、戦略、Webサイトの現状などを把握し、最適な施策を立案・実行します。 more info Top Message インターネットテクノロジーの需要が高まり、その必要性と可能性を感じ2005年に創業して以来、現在に至るまでステークホルダーの皆さまに支えていただきながら成長を続けてまいりました。「ITとクリエイティブのチカラで、心沸き起こるプロダクトを生み出す」ことをミッションに掲げ、さらなる充実したチカラ溢れる未来の実現を目指します。私たちの強みは、企画戦略からシステム開発、Webアプリケーション開発、クリエイティブ、コンサルティングに渡るワンストップソリューション提供とオーナーシップマインドを両立することにより、より精度の高い、顧客満足度の高いアウトプットと課題解決を達成します。また、創造性の向上、生産性の向上、コストの削減といった意識、文化を育むた
いまさら聞けないRetina対応のための「ピクセル」の話
ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Engadget | Technology News & Reviews
2016年最新版 iPhone・Androidスマホ 機種別画面サイズ、解像度、縦横比のまとめ | sounansa.net
スマートフォンブラウザ不具合特集