ASCII.jp：絶対見ておきたい有名企業のスマホサイトまとめ

2011/02/21 2152 users ASCII.jp 有名企業 iPhone iOS レイアウト

iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実... 続きを読む

スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | デザイナーブログ | 株式会社LIG

2012/09/21 1065 users 株式会社LIG デザイナーブログ

どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML </p> <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="o... 続きを読む

スマホサイト、20代女性から好まれる商品画像の表示方法は？ :ベンチャーニュース：Venture Now（ベンチャーナウ）

2012/03/31 1034 users Venture Now ベンチャーニュース 商品画像

スマートフォン向けサイトにおけるインタラクティブ UI の受容性や好まれる表現は年代、性別によっても異なってくるようだ。 IMJモバイルが30日に発表した「スマートフォンサイトの情報表示方法に関するユーザビリティ調査」によると、サイト内に複数のバナーを表示する場合、フリック＋自動送りでバナーを切り替える「サイト A」、フリック操作のみでバナーを切り替える「サイト B」、自動送りのみでバナーを切り替... 続きを読む

pxt | 考察：Appleはスマホサイトを作らない。

2010/11/24 1013 users ウェブデザイン 本質 主張 mobile Safari 自社

今まで気づかずにいたが、Appleはスマホサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(こ... 続きを読む

ソースコピーですぐ使えてスマホ専用サイト作成に便利！PC・スマートフォンサイトの振り分けJavaScript作りました。 | HTML5でサイトをつくろう

2012/05/28 930 users JavaScript HTML5 ユーザーエージェント 内容

PCとスマートフォンで違うページを閲覧させたい場合は、ユーザーエージェントを判別して切り替えることができます。 メディアクエリなどを使用したレスポンシブWEBサイトの場合は1ソースでそれぞれのデバイスに振り分けますが、PCサイトとスマホサイトで内容なども変更させる場合は、それぞれサイトを作って振り分ける必要があります。 ユーザーエージェントを判別するには、PHPやJavaScriptや.htacc... 続きを読む

ぜんぶ無料！スマホサイトを素人でも制作会社に頼らず作成できるツール6個

2013/06/06 770 users 素人 制作会社 無料 好例 見栄え

無料で使えて、誰でも簡単にPCのブラウザから見栄えのいいスマホサイトを作れるツールを6個厳選しました。好例の「Webサイトを自分で作ってみようシリーズ」第三弾！ 今回は、スマホサイトを素人さんでも簡単に制作できる「スマホサイトビルダー」を紹介します。「ちょっ、こりゃ便利すぎる」と、思わず唸ってしまうものだけを6つ厳選しました。 ぜんぶ無料で使えて、PCさえあれば、ブラウザから見栄えのいいスマホサイ... 続きを読む

スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】 | HTML5でサイトをつくろう

2011/12/07 676 users jQuery Mobile jQuery HTML5 基本編

jQuery Mobileってなに？ jQuery Mobileは、javascriptのフレームワークです。スマートフォン向けの直観的で使いやすいUIを瞬時に作成できます。 JavaScriptをWebデザイナーでも扱える身近な存在に変えた「jQuery」。そのjQueryと同じ開発元からリリースされていることもあって、スマートフォン向けフレームワークとして注目のjQuery Mobile、文法... 続きを読む

たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） | Design Color

2014/06/09 664 users Design Color コーディング時 サンプル 小技 1行

もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わ... 続きを読む

ASCII.jp：日本のスマホサイトは2年間でこんなに変わった (1/4)

2013/03/27 660 users ASCII.jp ２年間 日本

スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業の... 続きを読む

スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope

2011/01/26 619 users iPhone Kaleidoscope 縦スクロール 内側

スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。それは、とにかく内側のHTML要素をハミ出さないように作るどうしてか？ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。例えば、iPhoneで言うPortrait（縦）表... 続きを読む

よこ並びのCSS。

2017/02/15 569 users CSS レスポ タブ ナビゲーション 昨今

ナビゲーションやタブやアイテムリストなど、「よこ並び」にレイアウトするためのCSSについて、お馴染みの方法から最近の方法まで、順番に見ていきます。スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかな。とも思いますけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、アイテムリストなど、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。もちろん画面幅にはレスポ... 続きを読む

スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope

2011/02/18 542 users iPhone Kaleidoscope metaタグ 注意点

ちょっと今回はまめ知識的な内容です。最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。（jQuery Mobileなどを利用した開発方法は置いといて）HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします... 続きを読む

スマホのメニューデザインに悩んだらこれを見る　徹底収集36選！

2014/10/09 511 users スマホ メニューデザイン メニューアイコン ユーザ タップ

スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイト... 続きを読む

jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】 | HTML5でサイトをつくろう

2012/01/05 508 users jQuery Mobile www.html5-memo

HTML5＋CC3 を勉強しながら調べたサイト情報やサンプルの作成。そのほかweb 制作に役立つ情報をまとめました。 http://www.html5-memo.com/ デザイン作成のヒントになるサイトや制作に便利な無料素材、かっこいい映像やアプリなどをまとめました。 http://webdesignmatome.com/ 都内の小さなWEB制作会社にてWEBサイト制作全般、WEBスクールやセミ... 続きを読む

はじめてのスマートフォンサイト制作「基礎知識や開発環境の準備編」 | ウェブル

2012/05/07 478 users ウェブル 用語 用語整理 基礎知識 アニメマップ

テレビの前でアニメ番組表見ながら録画したい人は必ずいると思いますので、アニメマップをスマホ対応していきます。ただ、今までスマホサイトを制作したことが無いので、サイト設計から基礎知識、デザインの知識など一から全て勉強していきますので、その点についてまとめて行きます。 用語整理 まず初めてに新しい用語などについて整理していきます。用語については自信ある方はこの項目は飛ばして下さい。 「スマホ」と「スマ... 続きを読む

iOS - ただのWebエンジニアがスマホサイトを開発するにあたって知っておきたいこと - Qiita

2014/06/11 437 users iOS Qiita juggly.cn 各国 Apple

今更だけど、スマホサイト開発未経験のエンジニアが、スマホサイトを開発して気づいたことやハマったことなどの雑多なまとめです。 対象はiOS, Androidです。 シェア率(日本) 最近の動向など 2014年4月のスマートフォン販売シェア、日本ではiOSがトップ、欧州ではWindows Phoneのシェアが各国で増加（Kantar調査） | juggly.cn Apple、2014年第1四半期におい... 続きを読む

WEBディレクター必見。ストレスのないスマホサイトを作る８つのポイント！ | 株式会社LIG

2013/09/18 369 users 株式会社LIG WEBディレクター必見 ストレス ポイント

お久しぶりです。マラガの海の贈り物ディレクターのSEKOです。 みなさんは普段スマホで「いつ」「どこで」調べ物をしますか？ 私は会社の行き帰りの電車の中で調べ物をしている事が多いですが、「限られた時間の中で知りたい情報をすぐに見つけたい」なのにサイトが重かったり、知りたい情報が見つけにくい、操作がしにくい。そんな経験はないでしょうか？ 本日はストレスのないスマホサイトを作るにあたりUIをどのように... 続きを読む

スマホサイト構築に！ドロワーメニュー、スワイプのプラグインまとめ | 株式会社LIG

2013/10/15 366 users ドロワーメニュー スワイプ 株式会社LIG LIG 案件

こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます！！ そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 ... 続きを読む

コレを抑えておけばOK！スマホサイト制作に役立つ記事・サイトまとめ！ | PLUS

2013/01/28 361 users クライアント ギャラリー 立場 plus 導入

一般企業サイトでもスマートフォンに対応するサイトが増えてきました。ちょっと前までは提案しても、もうちょっと先でいいよという話に落ち着いていたんですが、ようやく身近なクライアントも導入をはじめています。そこで今回は実際にスマホサイトを作る立場から、役に立ちそうな記事やサイトをまとめてみました。 スマホサイトのギャラリー 絶対見ておきたい有名企業のスマホサイトまとめ 優れたiPhoneサイトデザイン集... 続きを読む

ASCII.jp：遅すぎる日本のスマホサイトの原因を探る｜本気で取り組むスマホサイト高速化

2013/01/08 315 users ASCII.jp 原因 日本 アーリーアダプター イノベーター

デジタル機器の利用動向で知られるコムスコアの調査によると、2011年12月時点の日本における携帯電話に占めるスマートフォンの割合は16.6%でしたが、2012年6月には23.5%になり、半年で約7ポイントも増加しました。「まだ4人に1人の割合じゃないか」と思う方もおられるでしょう。 しかし、有名な「キャズム理論」によれば、普及率がイノベーターとアーリーアダプターを合わせて16%を超えると、一般大衆... 続きを読む

スマホサイト案件の見積もりについて[to-R]

2012/02/09 246 users 単価 to-R Check Tweet 見積り 見積もり

スマホサイト案件の見積もりについて Check Tweet 「Android案件の見積り」や「スマホ案件の見積もりについて」を受けて、アプリではなくHTML+CSSでつくるスマホサイト制作の見積もりではまりやすいポイントをまとめています。 HTML+CSS構築ではPCの0.７倍くらいの単価 スマホサイトはPCより小さいのでHTML+CSSの構築コストも安くみます。ただ、CSS3で作ったほうが良いと... 続きを読む

Webディレクター必見！Google Analyticsを使ってスマホサイトの課題を発見する５ステップ【小川 卓】 | Find Job ! Startup

2013/11/04 226 users アナリティクス Startup レポート アクセス解析ツール

Webディレクター必見！Google Analyticsを使ってスマホサイトの課題を発見する５ステップ【小川 卓】 アクセス解析ツールといえばGoogle アナリティクス！という方は多いでしょうが、スマホサイトに最適化された設定を行っていなかったり、そもそもレポートを見ていなかったりというケースもちらほら。 今回はそんなものすごくもったいない事をしてしまっている方々のための「Google アナリテ... 続きを読む

スマホサイトのデザイン時に参考になるWebサイトのギャラリーまとめ | 株式会社LIG

2015/02/09 225 users 株式会社LIG 参考 Webサイト デザイン時 キーワ

こんにちは、デザイナーのモモコです。 今回はスマートフォンサイトをデザインする際に参考になる、UIやトレンドのリンク集、ギャラリーサイトをまとめてご紹介します。 デザインやUIの参考に！スマートフォンサイトのギャラリーまとめ sps collection http://spscollection.com/ シンプルな構成のスマートフォンサイトのデザインリンク集。 最大100件ずつ表示ができ、キーワ... 続きを読む

スマホサイトのUIでよく使うメニューのリスト表示まとめ３３サイト ｜ iPhoneデザインボックス

2013/04/16 215 users iPhoneデザインボックス メニューアイコン メニュー

iPhoneデザインボックス » スマホサイトのUIでよく使うメニューのリスト表示まとめ３３サイトスマートフォンサイトを作るときにヘッダーにメニューアイコンを設置してクリックするとメニューリストがでるようにすることがあります。表示の仕方やアニメーションは色々あるのでまとめました。最近は、流行り？なのかFacebookのアプリように横から出てくるメニューが多いです。 続きを読む

ヌルヌルの秘訣はCSS！Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』｜ウェビメモ

2013/08/27 194 users キータ ウェビメモ Qiita PageSlide 秘訣

以前『スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました 』という記事を書きましたが、今回は『Qiita [キータ] – プログラマの技術情報共有サービス 』にてGoogleでも採用されているCSS3のアニメーションを使ったスライドメニューというものを発見したのでご紹介します。 jQueryプラグイン『jSlideMenu』 な... 続きを読む