レスポンシブデザイン デバイスを検知し、レイアウトを調整するレスポンシブデザインは、万能型の戦略である。デバイスのタイプに関わらず、URLは一つであり、レイアウトの調整は自動的に行われる。これは、スマートフォン、タブレット、ラップトップ、そして、巨大なモニターの全てに有効である。 クロールは効率よく行われ、ユーザーは、リダイレクトがもたらす遅れを経験することはない。そして、検索エンジンは、一つのページをインデックスして、ランク付けを行うことが出来る。 ユーザーにとっても、グーグルにとっても、実用的であり、誰もが得をする。 グーグルは、CSSやJavaScript等のリソースのクロールをブロックする手法を薦めていない。なぜなら、グーグルは、レスポンシブなページの要素を構築する必要があるためだ（このようなリソースをブロックしない方が良いとグーグルは薦めている）。 唯一問題視されるのは、ページの

こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます！！ そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu

今回は2013年3月に発表された「スマートフォンレポート vol.5」から、調査報告1「スマートフォン購入状況／ブラウジングに対する不満の変化について」の調査レポートをお届けする。 調査レポートを読む調査概要を確認するスマートフォンレポートについて世代別のスマホ購入状況ドコモ・ドットコムの定期調査から、2012年12月から2013年1月におけるスマートフォン端末の購入状況をみると、2012年10月において顕著に表れたiPhone 5人気がやや落ち着きを見せ、一方で2012年冬モデルの発売を背景としたドコモ端末の躍進が感じられる動きとなった。 10月、11月における調査では、2ヶ月連続でau、SoftBankに購入者数で及ばない結果を示したドコモだったが、12月購入者数においては全体の約45％を確保し、ほぼ全世代において最多シェアを記録している。2013年1月では他キャリアにやや詰められるも

スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ

優れたUXのスマフォ向けアプリ のスクショを紹介するデザイン ギャラリーサイト・UX Archive のご紹介。数はまだ多くは無い ですけど、スクショの数が多い ので参考になりそう。 UXが優れているスマフォアプリのスクショを紹介するギャラリーです。優れているかどうかは触って見ないと何とも言えませんけど、参考にはなるかなと。

レスポンシブ・ウェブデザインではなく振り分けを行うメリット 最近、RWD（レスポンシブ・ウェブデザイン）というテクニックが話題になってますね。 レスポンシブ・ウェブデザインとは、ザックリと説明するとブラウザの解像度などに応じてCSSのMedia Queryなどで適用させるCSSを変更してレイアウトやビューを変更する方法です。 逆にPC用とスマホ用のサイトを作成して、User-Agentなどで切り替える方法を振り分けというようです。 個人的にはどちらも一長一短なので、サイトの目的やターゲット、予算などに応じてチョイスすればよいと思ってます。どちらの手法のほうが優れているかっていうのは目的によって変わると思っているので、ここで宗教戦争をする気はありません。 さて、本題ですが「レスポンシブ・ウェブデザイン」 vs 「振り分け」の議論で「振り分け」のメリットして語られないことが多いことで、スマート

今更ですけどLungo.jsを少し触って 見ました。Lungo.jsはHTML5+CSS3の スマートフォン向けフレームワーク です。jQueryやmootoolsなどを必要 としない非依存型のライブラリです ので覚えておいて損は無いかも。 スマフォ向けフレームワークです。GPLv3ライセンスでOSSとして公開されています。 スマフォ向けのフレームワークは相当出回っていますので珍しくないかもですけど・・触った感じはなかなか使いやすそうでした。コアファイルは非圧縮で40kbほど。 以下、公式サイトのサンプルです。 Sample スターターキット的にも使えそうです。 ↑ 実機でのスクリーンショット この手のは沢山あるので好みで選べばいいですね。詳細は以下でどうぞ。 Lungo.js

どちらもスマートフォンの勢いを示す数字である。 Web制作の分野では「モバイルファースト」や「レスポンシブWebデザイン」といったキーワードが注目されるなど、Webサイトのスマホ対応が重要なトピックになっている。 しかし、スマホ対応といっても、「サイト側の対応」と「集客の対応」の両方が必要だということは、意外と見落とされがちだ。それぞれについてわかりやすく解説していこう。 スマホからの検索数は1年で3倍以上に増加、対応はもう待ったなし！スマホの急速な普及は、ここ数年のネット利用動向でも非常に大きな変化だ。実際、Webサイトへのアクセス状況などから、この変化を実感しているWeb担当者も多いのではないだろうか。「企業サイトのスマホ対応」をテーマにしたセミナーが盛んに開催され、CMS製品がスマホ対応を強化するなど、いまや「スマホ対応待ったなし」ともいえる状況だ。 MM総研が3月に発表した「スマー

先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ

『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day