スマホのデザインをPCにも転用したWebサイト事例集 - あなたのスイッチを押すブログ
最近のWebサイトには、PC版のレイアウトを作成せず、スマホの構成をそのままパソコンにも採用するケースが増えてきている。 個人的に、これは非常に理にかなっていると思う。その理由は以下のとおりだ。 サイトのアクセス解析の結果次第だが、多くのサイトではスマホユーザーが大多数を占めている。そのためスマホユーザーをメインに考慮したサイト設計はGoodといえる。 PCとSP、あるいはもうひとつぐらいブレイクポイントを増やせば、その数だけデザインとコーディングが必要になる。SP版のみで済むなら制作工数を抑えられる。 PCで閲覧しているユーザーに対しても、余白を有効に使うことが可能。 PC版のデザインを作らないからといって、パソコンユーザーを切り捨てることにはならない。ページの構成・情報設計の難易度は高いが、上手に設計できれば、パソコンユーザーにとってもストレスフリーなサイトができるだろう。 もしこのよ
Appleデバイスの歴代モデルすべてを比較できて便利！ iPhone, iPadなどの画面サイズや機能のまとめ
Webサイト制作者・スマホアプリ開発者向けに、iPhone, iPad, Apple WatchなどのAppleデバイスの画面サイズ、各サイズを採用しているモデル、ノッチのサイズ、解像度、PPI、表示タイプ、比率、セーフエリア、ウィジェットのサイズなど、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。 2023年の最新モデル、iPhone 15シリーズ、Apple Watch Series 9シリーズをはじめ、iPhone, iPad, Apple Watchの最新から初代までの情報が網羅されています。 Screen Sizes 以前紹介したときからAppleデバイスの最新モデルの追加をはじめ、サイト自体にも新機能が加わりました。 サイトを利用するのは簡単、登録など面倒なことは一切不要です。アクセスして、サイドバーから欲しい情報にアクセスするだけです。 まずはiPho
スマホ時代におけるフォームのデザイン・実装のテクニックが詳しく解説された良書 -フォーム制作実践ガイド
フォームのデザインや実装が苦手という人は少なくないと思います。スマホ時代における、ユーザーにとって利用しやすいフォーム実装のテクニックを機能・ビジュアルデザイン・実装コードごとに詳しく解説したフォーム制作実装ガイドを紹介します。 さまざまなプロジェクトで利用できるフォーム制作の知識をしっかりと身につけることができます。 本書はSmashing Magazineから2018年に発行された「Form Design Patterns」の翻訳版。洋書だと実例が英語のままで、日本語環境ではあまり参考にならないということがありますが、本書は可能な限り日本語環境に適するように翻訳されています。 本書は本日発売！ 書店で見かけたら、ぜひ手にとってみてください。300ページ超で、かなりのボリュームです。 Form Design Patterns シンプルでインクルーシブなフォーム制作実践ガイド ISBN 9
iPhone 12で、ビューポートのサイズの種類が増えすぎ！デバイスの複雑さがUIの設計にどのように影響するのか
iPhone 12シリーズが発表され、iPhone 12/12 Proの予約も始まりましたね。23日配送予定で予約できたので、私も楽しみです。ユーザーとしてはその新しいデザインや機能にワクワクしますが、デザイナー・デベロッパーとしては悩みのタネが増えるかもしれません。 ビューポートのサイズの種類が増え、多くの解像度、アスペクト比、断片化が進むデバイスの複雑さがUIの設計にどのように影響するのかを紹介します。 iPhone 12 vs Designers by Michal Malewicz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone 12のリリース だけど、このメタルとガラスの中には象がいる 2020年の現状 どのようにデザインすればよいか？ 重要な要素は折り目の上に 終わりに iPhone 12のリリース 1
iOSのSafariのWebインスペクタを使ってみる ｜ Tips Note by TAM
SafariのWebインスペクタ for MAC ウェブページの制作を行う際、iPhoneでどのように表示されるか・動作するかをチェックする際に便利な機能があるのをご存知でしょうか？ Safariには「Webインスペクタ」という開発者向けツールが標準で搭載されており、この「Webインスペクタ」で要素の検証や、デバックなどがPCから調査できる!という機能です。 ご利用の手順 まず、iPhone側の準備としては以下の通りになります。 ホーム画面から、「設定」→「Safari」を開きます。 画面一番下の「詳細」を開き、「Webインスペクタ」をONにします。 次に、PC側の設定。 MacからSafariを立ち上げます。 Safariのメニューから「環境設定」を開きます。 「詳細」タブから「メニューバーに"開発"メニューを表示」にチェックをいれます。 メニューバーに「開発」が追加されていることを確認
iPadにPC向けデザインを縮小表示するときにも！Viewport Extraで手軽に縮小表示 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 以前の記事で、iPhone SEなど幅320px表示端末での縮小表示に便利なViewport Extraを紹介しました。 Viewport Extra おかげさまで、CDNに対して1日約20,000回、公開以来約1,430,000回ものリクエストをいただいております！ たくさんのページでご利用いただいているようで嬉しいです。ありがとうございます！ (2021/2/19 3:00 追記) なんと、CDNへの総リクエスト数が 150,000,000回（1.5億回）を突破しました！ ありがとうございます！ このライブラリ、実はiPadなどタブレット端末での縮小表示にも使うことができます。 さっそくですが、実例とともに紹介していきましょう。 たとえばこんなとき レスポンシブデザイン タブレットでは、デスクトップ向けデザインを表示したい デスクト
レスポンシブ CSSメディアクエリ（@media）ブレイクポイントまとめ | モバイル・スマホ・HTML5のSEO塾.com
SEO塾ブログnewモバイルファースト / マテリアルデザイン / JSON-LD WebP/ 4K DPR3 レスポンシブイメージ gridレイアウト / flexboxコンテンツ / レガシーWeb終焉！ モダンWebの証明！ comからjpへ CSS メディアクエリ（@media）ブレイクポイント受難 レスポンシブWebデザイン崩壊！？あくまでも自社用として、必要なことだけのまとめ 検索しても、スバリの情報がなかなか見つからない。また、いろいろ惑わされて、現場が騒がしい 弊社も、ポリシーもなく場当たり的でいろいろなサイズの画像があり、うかつにもwidthを設定していたり、CSSもぐだぐだ パソコンにつないだフルHD（1920×1080）モニターで確認しながらWebページを作成しCSSを記述するので、モバイルファーストではなくPCファーストのメディアクエリとなっている なお、PCファー
iPhoneのネットが遅い？ だったら有線LANでつないじゃえばいいじゃない！
iPhoneのネットが遅い？ だったら有線LANでつないじゃえばいいじゃない！2019.04.14 09:0086,645 三浦一紀 やっぱり有線LAN最強！ iPhoneでストリーミング動画の再生をしたり、逆に動画配信を行ないたいとき、Wi-Fiでは不安定だなと感じることがあります。 そういうときは、有線LANのほうが安定していいのですが、そもそもiPhoneに有線LANの端子なんてないので、使えませんよね。 ああ、iPhoneで有線LANが使えたらなー。 そんな願いを叶えてくれるのが、サンコーレアモノショップの｢iPhone用lightning有線LAN充電アダプタ｣です。 iPhoneのLightning端子に接続すると、有線LAN、USB-A、Lightningケーブルが接続できます。Lightning端子は充電用なので、充電しながら有線LAN接続もできちゃいます。 Image:
ブラウザアプリ・Smooz（スムーズ）の使い方｜クイックアクセスなど設定も解説
Smooz（スムーズ）とは Smooz Smoozは、アスツール株式会社が開発・提供するウェブブラウザアプリです。2016年9月にサービスを開始し、App Store Best of 2016に選出されました。 Smooz（スムーズ）の特徴 スマホのブラウザアプリは、Safari・Google Chromeなどが人気ですが、Smoozにはそれらには無い便利な機能が多数搭載されています。 PCブラウザのようなタブ配置と、片手で行える簡単なタブ操作 ジェスチャー機能 AIによる検索ワードの提案 カメラから文字を読み取り直接検索 Twitterやはてなブックマークでのコメントを閲覧できる「スマートブックマーク」 AmazonやYouTube内で直接検索できる「スマートアクセス」 Smoozの便利な機能はこちらの動画でも確認することができます。 Smooz（スムーズ）の使い方 タブ 新しいタブで開
マウス・タッチ・ペンのタッチ操作イベント｜Web制作 W3G
UAが各イベントに対応しているかどうか var _ua = (function(){ return { Touch:typeof document.ontouchstart != "undefined", Pointer:window.navigator.pointerEnabled, MSPoniter:window.navigator.msPointerEnabled } })(); UAがタッチイベントをサポートしているかどうかはdocument.ontouchstartがundefinedを返さないことを条件にし、ポインタイベントをサポートしているかどうかは、navigator.pointerEnabled（windowオブジェクトは省略可）を用います。なおIE10は先攻実装のため、ベンダー識別子を用いる必要があります。 対応するイベント名を割り当てる 先の比較表に応じて、必要なイ
【RWD ーレスポンシブー】右にできた謎の余白を消す方法 | バシャログ。
こんにちは。mackyです。 じめじーめな日々のせいなのでしょうか。6月がとても長く感じます。 今日は右にできた謎の余白を消す方法をまとめます。 そもそも余白って？ できあがったサイトをipadやiphoneで表示確認したとき、以下のような余白ができたことはないですか？ 先日、携わった某サイトはiphoneとipadで表示チェックを行ったのですがその際右のスクロールバーの横に白い余白ができてしまいました。ヘッダーも背景画像もそこで切れてしまいます。その時色々試してみて解決した方法をメモしておこうと思います。（サンプルコードは一部内容を変更しています。） サイトの大まかな構成としては、bodyにwidth:100%;。 内側（ipadおよびiphoneで見切れないで表示させたい幅）sectionに固定サイズの1024pxを指定しました。 ipadとiphoneでみてみたら… (※下の図はip
[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法
こんにちは、霙(@xxmiz0rexx)です。 スマートフォンサイトを制作している時、たまーに困ることがあります。 それは、実機でしか再現しない表示崩れ。 Macでみた時は大丈夫だったのに、何故かiPhoneでは謎の余白が…なんてことが先日もありまして、 解決のためにSafariのWebインスペクタ機能を使ってみましたので使い方をメモしたいと思います。 Webインスペクタ機能とは iPhoneで見ているページのソースをMacで見ながらデバッグできる機能です。 使うには双方へのちょっとした設定と、お互いをケーブルで繋ぐことが条件。 みんなだいすきGoogle Chromeの開発者ツールと同じようなものですね。 必要なもの 1.Mac 2.iPhone 3.ケーブル 次の章で使い方を書いていきたいと思います。 Webインスペクタ機能を利用する手順 1：iPhoneとMacをケーブルで繋ぐ まず
![[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/40f32f22625c07917861df73b24c82b03b4b6348/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2Ff58a46be76400f23debbeacb9e1cc899.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
