はじめてスマートフォンサイトを作る人へ。制作で気をつけたいポイント５つ ｜ Kana-Lier

2012/11/21 689 users スマートフォン 普及 普段私 担当者 ご依頼

スマートフォンの普及に伴い、スマートフォンサイト制作案件が増えてきている方も多いと思います。かくいう私もその一人です。 最近は一人でカバーしきれない程のご依頼をいただくようになり、新たに担当者を増やすことにもなりました。 普段私が気をつけている点、どういったことを考えてスマートフォンサイトを制作しているかを伝えることになったので、ついでに記事にしてしまいたいと思います。 私がスマートフォンサイトを... 続きを読む

ゼロからはじめるCSS3を勉強するために便利で参考になるCSS3ジェネレーターをまとめました | HTML5でサイトをつくろう

2012/08/08 442 users CSS3ジェネレーター CSS3 参考 HTML5 記述

スマートフォンサイトなど、最近はでデザイン要素に画像をあまり使わずにCSS3を使う場面が増えて来ています。 とくにボタンやボックス背景などはCSS3でつくれば要素に合わせて可変してくれるので、非常に便利ですし、HTML上のムダな記述も減らすことができ、きれいで理想的なソースになります。 また、iPhone4をはじめとするRetinaディスプレイの場合はデバイスフォントやCSS3でコーディングするこ... 続きを読む

スマートフォンサイトの表示確認に使いたい便利なツール×2 | 海外SEO情報ブログ

2012/08/02 225 users 海外SEO情報ブログ スマートフォンサイト 表示確認

[対象: 中級]今日は、スマートフォン向けのサイトを検証するときに便利なツールを2つ紹介します。レスポンシブ・ウェブデザインでの表示を簡単に確かめられるブックマークレットとスマホでのページ閲覧をシミュレーションするアプリケーションソフトです。1. レスポンシブ・ウェブデザイン ブックマークレット1つ目はレスポンシブ・ウェブデザインがどのように機能しているかをチェックするブックマークレットです。こち... 続きを読む

スマートフォンサイトとSEO Q&A (中〜上級編) (2012.07版）::SEM R (#SEMR)

2012/07/19 41 users TrackBack Takahiro Watanabe

スマートフォンサイトとSEO Q&A (中〜上級編) (2012.07版） スマートフォンとSEOについて、ちょっと複雑な質問とその回答。 2012年07月19日 15:48 | SEO（検索エンジン最適化）, モバイル検索 / 携帯検索 | TrackBack (0) | 執筆：Takahiro Watanabe+ 最近、スマートフォンサイト構築におけるSEO上の注意点について相談を受けたり、あ... 続きを読む

スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました | ウェビメモ

2012/07/17 159 users PageSlide Facebook Path ウェビメモ

こんにちは、霙（@xxmiz0rexx）です。 スマートフォンサイトでのメニューの表示方法をあれこれ考えた結果、素敵なjQueryプラグインに辿り着きましたのでご紹介したいと思います。 コンテンツ量が多くてもメニュー分のスペースを考えずに構成できるのでかなり気に入っています :) jQueryプラグイン『PageSlide』 FacebookやPathなどで使われているあのメニュー表示の動きをjQ... 続きを読む

簡単なサンプルで学ぶ！ゼロからはじめるレスポンシブWebサイト初級編 ～メディアクエリを使ってCSSを分岐させる～ | HTML5でサイトをつくろう

2012/05/16 613 users CSS メディアクエリ サンプル XHTML HTML5

スマートフォンサイトとPCサイトの振り分けを考える上で、ひとつの選択肢となる「レスポンシブWebデザイン」。 そこで今回はレスポンシブWebデザインを使用したサイトの制作や仕組みを理解しておくためにCSS3のメディアクエリを使用してレスポンシブWebデザインのデモソースとチュートリアルをつくりました。 今回はXHTMLでコーディングしたソースで、CSS3のメディアクエリを使って、PC、タブレット、... 続きを読む

スマートフォンサイトで好まれるユーザーインターフェイス【リサーチ】 （1/4）：MarkeZine（マーケジン）

2012/05/01 594 users IMJモバイル MarkeZine ユーザビリティ調査 進化

IMJモバイルは、「スマートフォンサイトの情報表示方法に関するユーザビリティ調査」を実施した。調査期間は2012年3月2日～3月3日、有効回答数は826名から得られました。 調査結果概要　スマートフォンの進化により、サイト内での様々なインタラクティブUIを用いた表現方法が見受けられるようになりました。そこで、今回は複数のインタラクティブUI実例を用いたユーザーの操作印象について調査を行いました。　... 続きを読む

PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」[to-R]

2012/04/19 450 users ライブラリ to-R Check Tweet URL PC用

PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 Check Tweet PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」を作成したので公開しておきます。 このライブラリを利用すると スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。 PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。 ス... 続きを読む

ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました | HTML5でサイトをつくろう

2012/04/18 1364 users レスポンシブWebサイト HTML5 マルチデバイス CSS

スマートフォンサイトとPCサイトの振り分けを考える上で、 ひとつの選択肢となる「レスポンシブWebデザイン」。 スマートフォンサイトの最適化とは違い、CSS3のメディアクエリ機能を使って、デバイスのサイズごとにCSSの読み込みを変更することによって、1ソースでマルチデバイスに対応したサイトを制作することができます。 しかし、その分ソースや読み込むCSSが多くなってしまったり、構成をしっかりと考えな... 続きを読む

PCサイトとスマートフォンサイトをどのように扱うか？国内のレスポンシブウェブサイトをまとめました | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2012/04/12 502 users Webデザインクリップ Web制作 SEO 共通 選択肢

海外の企業サイトではレスポンシブルウェブサイトもだんだんと浸透しております。 Responsive Web Design を利用している企業サイトリスト 毎日更新したり、記事コンテンツの多いサイトでは、全デバイスのソース管理や更新が1ソースでできるレスポンシブウェブサイトの導入は一つの選択肢として魅力的です。 また共通のURLを使用することでSEOに強い面もあります。 Webフォントを使用すれば、... 続きを読む

iPhoneサイト（スマートフォンサイト）制作時の画像の表示方法と使用方法についてまとめました | HTML5でサイトをつくろう

2012/03/15 257 users iPhoneサイト HTML5 iPhone 制作時 画像

PCサイトでの画像の表示方法は、スライスした画像をimgタグにサイズ指定をしたり、背景画像に繰り返しや位置の指定をして表示するのが一般的ですが、スマートフォンサイトではデザインやコンテンツの内容によって画像の表示方法を工夫する必要があります。 特にiPhoneのように横画面にすると可変して表示されるデバイスの場合は、画像も可変して見せたほうが効果的な場合もあります。 また、iPhone4、4Sや高... 続きを読む

iPhoneサイト(スマートフォンサイト)制作のためにCSS3でPhotoshopのレイヤースタイルを再現する方法 | HTML5でサイトをつくろう

2012/03/06 105 users たくさん 最低限 CSS3 最適化 容量

スマートフォンサイトを制作する上で便利なCSS3。 必要最低限まで画像の使用を減らし、スマートフォンサイトのデザインをスムーズにコーディングすることができます。 また、画像を使わずにCSS3を使ってスマートフォンサイトのデザインを実現すれば、読み込み時間や容量の軽いサイトを制作でき、サイトの最適化へつながります。 最近では海外の便利なジェネレーターサイトがたくさんあり、誰でも気軽にソースをつくるこ... 続きを読む

スマートフォンサイトのUIパターンやフレームワーク・ツールなどをまとめたサイト -Mobile Tuxedo | コリス

2012/02/21 410 users コリス Mobile Tuxedo UIパターン

Archive by month 2012年2月 (32) 2012年1月 (32) 2011年12月 (37) 2011年11月 (40) 2011年10月 (45) 2011年9月 (52) 2011年8月 (46) 2011年7月 (42) 2011年6月 (51) 2011年5月 (46) 2011年4月 (45) 2011年3月 (33) 2011年2月 (43) 2011年1月 (40... 続きを読む

PCサイトを簡単にスマホサイトに変換できる「shutto」 | papativa.jp

2012/02/21 15 users shutto papativa.jp インターフェイス コツ

手前味噌になるけど、ほんとにかなーり良いサービスなので紹介します。 うちの会社で作ってる「shutto」というサービスです。 shuttoは、PCのウェブサイトをスマートフォンサイトに変換できるサービスです。 「誰でも簡単にスマートフォン対応」ということを考えて、非常に直感的に操作できるインターフェイスを実現してます。使ってもらえればわかるけど、本当にかなり簡単です。でも、慣れてきてコツを掴むと、... 続きを読む

iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう

2012/02/16 430 users CSS reset.css 命令 記述 ソース

iPhoneサイト制作（スマートフォンサイト制作）をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。 スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減らして、読み込みのスピードを上げることができます。 今回はスマートフォンサイトを制作する上で、最低限必要となるreset.cssの記述につい... 続きを読む

画像を使わないでCSS3のグラデーションでスマートフォンサイトの背景パターンをつくろう | HTML5でサイトをつくろう

2012/02/13 322 users 容量 通信速度 外出先 グラデーション 機会

スマートフォンサイトを制作する上で重要となる「最適化」。 PCサイトとは違い、外出先や移動中などに見られる機会が多いスマートフォンサイトでは、できるだけ容量を抑えて通信速度を上げ、サクサクと閲覧できることがもとめられます。 スマートフォンサイト最適化のためには様々な方法がありますが、できるだけ使用する画像の容量を減らすこともその一つです。 今回は、スマートフォンサイト制作に便利な、CSS3のグラデ... 続きを読む

スマホ向けにユニークな広告枠を生成するシステム。島根ベンチャー開発 :ベンチャーニュース：Venture Now（ベンチャーナウ）

2012/02/09 14 users Venture Now ベンチャーニュース 広告枠 システム

ピーシーエッグは８日、スマートフォンの特性を活かしたユニークな広告枠を生成できるシステム「ファニーアド」を開発。ASPでの提供を開始した。 ファニーアドを導入すると、指で撫でたり、引っ張ったりすることで新たな広告が表示されて、キャンペーンサイトなどに誘導するといった枠が簡単に設置できる。 これまでのスマートフォンサイトの広告といえばシンプルなバナーが主流。「スマートフォンの楽しさを利用する広告はな... 続きを読む

スマホサイトの確認に便利！PC（safari）でできるスマートフォンサイトの検証方法のやり方 | HTML5でサイトをつくろう

2012/02/06 109 users Safari iPhone コーディング 機種 検証

スマートフォンサイトを制作する際に、iPhoneやAndroid両方の機種での検証や、もう発売されていないようなOSのバージョンの対応も必要になる機会があるかもしれません。 本来ならば一通りの機種を用意して実機で検証できる環境が必要ですが、個人での制作や、ちょっとしたサイトのスマートフォンサイトの対応の場合もう少し手軽な検証方法が必要になります。 また、PCでコーディングなどのサイト制作時のちょっ... 続きを読む

WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？ | Webクリエイターボックス

2011/12/20 459 users Media Queries WordPress リデザイン

以前「WebサイトをiPhoneで見やすくする5つの方法」という記事でWebサイトをスマートフォンに対応させる方法を紹介しました。当時はそこで紹介しているMobifyというサービスでスマートフォンに対応させていたのですが、JavaScriptが使えないので、リデザインを期に別の方法でスマートフォンに対応させる事にしました。タイトルにあるとおり、WordPressのテーマを変更する方法とCSS Me... 続きを読む

米Google、スマートフォンサイト専用のクローラを発表 ::SEM R

2011/12/15 48 users クローラ クローリング TrackBack 巡回 執筆

米Google、スマートフォンサイト専用のクローラを発表 グーグル、スマートフォンサイトのクローリングを目的とした新しいgooglebotクローラ発表。 2011年12月16日 00:39 | サーチニュース 2011 | TrackBack (0) | 執筆：Takahiro Watanabe+ 米Googleは2011年12月15日、スマートフォンサイトのコンテンツをクローリング（巡回）するこ... 続きを読む

スマートフォンサイトに適したユーザビリティとは？【リサーチ】 （1/5）：MarkeZine（マーケジン）

2011/11/15 825 users MarkeZine インタラクションデザイン マーケジン

IMJモバイルでは、「スマートフォンのインタラクションデザインに関するユーザビリティ調査」を実施した。調査期間は2011年9月14日～9月15日、有効回答数は412名となった。 調査結果概要　スマートフォンの普及に伴い、インタラクション性が高いサイトが求められています。スマートフォンサイトを構築する際の効果的な表現方法としてJavaScriptの活用がありますが、実際にJavaScriptを使った... 続きを読む

スマートフォンサイトのデザインで使うべきフォント｜最適化ノウハウコラム記事　～スマートフォン最適化・スマートフォン対応サイト制作はTOUCH&SLIDEへ～

2011/11/09 663 users iPhone フォント ガラケー デバイス Android

スマートフォンサイトのデザインで使うべきフォント スマートフォンはPCともガラケーとも違うデバイスです。デザインする時にも全く新しい分野という意識で取り組む必要がありますが、「デザインする時は何のフォントを使えばいいのだろう？」と思っている方も多いと思います。 iPhoneとAndroidでは搭載しているフォントが全く違うため、適当なフォントでデザインを作ってしまうと実機で見た時に表示崩れを起こし... 続きを読む

今日の重ね着をリリースしました - hitode909のダイアリー

2011/11/06 14 users ダイアリー hitode909 ウェブサービス GPS 重ね着

今日の重ね着というウェブサービスを作りました．GPSなどで場所を調べて，その場所の天気から，その日どういう服をどれくらい着ていいか教えてくれます． 今日の重ね着 スマートフォンサイトになっていて，ホーム画面に登録して使うと便利です．id:swimy1113さんと作りました． マッシュアップアワードに応募しました． 今日の重ね着 | Mashup Awards 7 (#MA7) 続きを読む

スマートフォンサイトやアプリをデザインをするときに気をつけようと思ったこと。｜VIVID COLORS DESIGN -ビビッドカラーズデザイン-

2011/10/20 71 users アプリ デザイン チカラ はなし スマートフォンサイト

VIVID COLORS DESIGN -ビビッドカラーズデザイン- まいにちたのしくものづくり。 このブログの読者 このブログの更新情報が届きます 読者数52人 [一覧を見る] にみやんブログ ( by nacchi30さん ) 榊月ミチルのブックカ… ( by as-karasunekoさん ) UGの日常「はなしか」 ( by pokedan-ugさん ) アラフォーのチカラ。 ( by 4... 続きを読む

スマートフォンサイトを作る時に便利なフリックが実装できるjQueryプラグイン7選｜WEB Drawer -WEB制作に関するメモサイト-

2011/10/11 435 users フリック WEB Drawer jQueryプラグイン 操作

スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。 Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。 flickGal 自分が一番つかってるのがこのflickGalです。よく使わせていただいております。 PC（IE以外）でも動作します。 flickGal・・... 続きを読む