作成: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
マージンを制するものがスマートフォンデザインを制す!〜iPhone6/6Plusの登場で、マージンがどう変化したのか〜 デザイナーの亀谷です。 突然ですが、スマートフォンのデザインで、大きく差が出るポイントはどこだと思いますか。 もちろん意見は様々あると思いますが、私が考える最も大きなポイントは「マージンの取り方」です。 そこで今回はその「マージン」をテーマに、iPhone5とiPhone6/6Plusのマージンの変化に関してお話したいと思います。 マージンを制するために重要なもの 美しいマージンの取り方には知識と経験が非常に重要です。 水野学氏の著書「センスは知識からはじまる」にもあるように、美しいマージンの取り方においても知識が非常に重要です。 私は、具体的には以下の3つの目線から日々インプットを行っています。 常日頃から可能な限り多くのサービスに触れることで、感覚を養う。 美しいと感
人は見た目が9割なんて本もありますが、スマートフォンはファーストビューが9割。人の脳はたった0.5秒で好きか嫌いかを判断します。 スマートフォン検索でたどり着いたあなたのサイトやブログ。記事を読んでくれるかどうかはファーストビューにかかっています。0.5秒で離脱する可能性のあるスマートフォン・ファーストビューを改善するため、20の企業サイトを比較調査しました。 ファーストビューを比較した20サイト 今回は企業が運営するサイトの中から、スマートフォン・ファーストビューにこだわっていそうなIT系ニュース・コラムサイトを10サイト、一般ニュースサイトを1サイト、スマートフォンが主戦場のアプリゲーム情報サイトを4サイト、経済情報サイトを2サイト、自動車ニュースサイトを2サイト、最近伸びている女性向けサイトを1サイトと、幅広いジャンルの計20サイトを調査しました。 TechCrunch(テッククラン
LPO研究所所長の鎌田です。 スマホサイトを用意するのがもはや当たり前になりつつある昨今ですが、スマートフォン対応を急ぐあまり、問合せフォームのユーザビリティがないがしろになってしまっているサイトをよく見かけます。 スマホユーザーの環境は、PCユーザーに比べてあらゆる点でシビアです。いい加減なスマホ対応をしただけでは、そうそうコンバージョンのアップにはつながりません。 下記の事例をご覧ください。 これは、あるブライダル系サービスのPC向け問合せフォームをスマホ最適化したところ、スマートフォンからのコンバージョン率が3倍以上になった事例です。このように、スマホユーザー向けに問合せフォームを最適化するだけでも、コンバージョン率はしっかり上がるのです。 今回は、弊社でスマホ向けフォーム最適化を行う際にいつも心がけている「5つの原則」について、具体例を交えてご紹介します。あなたのスマホ向けフォーム
「PCやサイトのスマホ版を作ったけど、思うように成果が上がらない・・・」「どうすれば成果の上がるスマートフォンサイトを作れるのだろうか・・・」とお悩みのweb担当者の皆様へ。 その答えは、「UI/UXの改善」にあります。 多くの企業がスマホサイトで成功していない原因としてありがちなのが「PCサイトを安易にスマホサイト風に変換しているだけ」というパターンです。 そのため、スマホとPCの違いを考慮して、スマートフォンでのユーザー行動を意識したUI/UXに改善するだけでも、CVRは簡単かつ速攻でアップするんです! そこで、今回はCVRを向上させるためのスマホサイトのUI/UXを改善するためのチェックポイントをご紹介いたします。ぜひ皆様のWebサイトの改善にお役立てください! サイトUIを改善するための分析手法を知りたい方は、こちらの資料を手元に置いてみてみてください。 ※本記事は2014年7月8
2013年4月5日〜7日まで米国Baltimoreで開催された、IA Summit 2013に参加してきました。Avi Itzkovitch氏による「Designing with Sensors: Creating Adaptive Experiences」から、センサーを搭載したデバイスを用いてパーソナライズされた情報を届ける「アダプティブデザイン」というコンセプトを紹介します。 2013年 05月 10日 レスポンシブからアダプティブへ – 必要な情報を、必要なときに、必要としている人へ Reiko Wakamoto 2013年4月5日〜7日まで米国Baltimoreで開催された、IA Summit 2013に参加してきました。Avi Itzkovitch氏による「Designing with Sensors: Creating Adaptive Experiences」から、センサ
構想雑文 WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。 ここ最近のサイトへのアクセスログを見ていると、スマートフォンからのアクセスが増加傾向にあるので、ウェブサイトつくるときもスマートフォンに考慮したサイトにせねば、とようやく思い始めています。 スマートフォン向けのレイアウトをつくるのは苦手だし、特に、レスポンシブウェブデザインのレイアウトって面倒としか思えないし、どうするかなぁ、と思うもすぐにCSS Frameworkを使えば解決するかなぁ、と思って調べてみました。 CSS Frameworkの数あり過ぎです。 昔は、グリッドレイアウトをきれいに作成するぐらいのものでしたが
縮小する Search & Find Google 以後の Web 利用は「Search & Find(検索して見つける)」が根底にありました。情報を見つけるために、キーワードを入力して検索したり、ディレクトリを掘り下げて目的の情報へたどり着くという行動です。 今や『当たり前』となった利用者行動ですが、Web の黎明期からそうだったわけではありません。90年代は、検索するといっても、欲しい情報が見つかる検索エンジンはなく、使わないほうが良いという考えもありました。そうしたなか、Google という優秀なアルゴリズムを実装した検索エンジンが登場したことで、広大な Web の中から情報を探し出すことが出来るようになりました。 このように技術が『当たり前』を作りだすことがあります。私たちの行動や思考は、技術に大きく左右されることがあるわけです。Google のような検索エンジンが登場したことで、
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く