タグ: レスポンシブウェブの付いた投稿

レスポンシブWebデザインを採用した4つの理由

2012/05/11 @12:05 | レスポンシブWebデザイン

先日、「レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと」という投稿をした際に、その内容に関するTwitterでのやり取りの中で@shokutoさんから以下のコメントをいただきました:

たしかに、「なぜレスポンシブWebデザインを採用したのか」は、すごく重要な部分ですよね。
ということで、以下にまとめてみました。前回の投稿と同様に、これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 続きを読む

レスポンシブWebデザインが必要な理由を分かりやすく伝える画像3つ

2012/05/07 @8:49 | レスポンシブWebデザイン

なぜ、レスポンシブWebデザインのような手法で、これからはウェブサイトを作っていく必要があるのか?それを手っ取り早く説明するのに使えそうな3つのイメージのセットをご紹介。「百聞は一見にしかず」ではないですが、言葉だけで説明するよりイメージがあったほうが、伝わりやすい場合もあります。

これからの「ウェブ」は、未知の端末や未知の方法でアクセスされるようになる。それなのに、いままでのやり方で、いままでの「固定」された「ウェブ」制作をしていて良いのか?手法は必ずしもレスポンシブWebデザインである必要はないと思います。しかし、Frost氏が言うように「未来に優しい(Future-friendly)」ウェブサイトを作り始めることが、ユーザにとって一番の利益になる。そして、ユーザの利益は直接サイトオーナーの利益にもつながる。

テーブルレイアウトがCSSになり、ウェブ標準が広まり、そして、こんどはレスポンシブWebデザインのような「One Web」が議論される時代が来ています。「ウェブ」に変化が訪れる、すごく面白い時期だなぁと思う今日この頃です。 続きを読む

Jacob Nielsen氏の「別モバイル・サイトか、フル・サイトか」の問題点を紐解いてみる

2012/05/03 @10:40 | レスポンシブWebデザイン

先日、ユーザビリティ・エキスパートのJacob Nielsen氏が彼のウェブサイト「Alertbox」に掲載した「Mobile Site vs. Full Site (別モバイル・サイトか、フル・サイトか)」(4月10日付け)という記事を発端に、「モバイル・サイト」のユーザビリティや実装手法について、ウェブ制作者やデザイナーの間で議論が繰り広げられているようです。大変興味深い内容だったので、自分なりの考察をまとめてみました。

元記事の内容

まずは「モバイル・サイト」と「フル・サイト」の定義の確認から。

  • ここで彼が使う「モバイル・サイト」とは、デスクトップ向けとは別のモバイルに最適化された別モバイル・サイトのこと。
  • 「フル・サイト」とはデスクトップ向けのフル機能、フル・コンテンツを備えたサイトのことを指します。

続きを読む

レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと

2012/05/01 @10:09 | レスポンシブWebデザイン

昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン(RWD)で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 続きを読む

CSSをYUI Compressorで圧縮したらMedia Queriesが動かなくなった

2011/10/17 @8:35 | レスポンシブWebデザイン


By geirarne (CC BY-NC-SA 2.0)

YUI Compressorを使ってCSS3 Media Qureriesの入ったCSSを圧縮したらうまく動かなくなった。なにかと思って調べてみたら、どうやらYUI Compressor 2.4.2の問題らしいです。最新版を使えば問題なさそうですが、まだ古いバージョンを使っている方はお気をつけください。 続きを読む

iPhoneを縦から横にしたときにフォントサイズが大きくなってしまう件

2011/08/24 @10:29 | レスポンシブWebデザイン

最近iPhoneでモバイル対応のサイトを作っていて気づいたんですが、iPhoneを縦(Portrait)から横(Landscape)表示に変更した際、フォントサイズが大きくなってしまうんですね。。。

「これは困った」と、思って調べてみたら、簡単な解決策がありました。

iPhoneの横表示の時のみに指定されるように、Media Queriesを使って以下のように記述すれば良いはずです。

@media screen and (min-width: 360px) {
  * { -webkit-text-size-adjust: none; }
}

参考

Preserve HTML font-size when iPhone orientation changes from portrait to landscape – Stack Overflow

画面サイズによって読み込むイメージを切り替えてくれる「Responsive Images」

2011/07/29 @12:10 | レスポンシブWebデザイン

レスポンシブ・デザインでサイト制作をする際に困るのが画像のサイズ。今とりかかっているサイトでも、対応策に悩んでいるところです。

  • PC画面向けの大きなイメージはモバイルには大き過ぎる。
  • 逆に、モバイル画面向けの小さな画像はPC向けには小さすぎる。

そんな問題を解決してくるのがFilament Groupという制作会社が使った「Responsive Images」という、JavaScriptとApacheの.htaccessを使った仕組です。まだ実験的なものでプロダクションレベルのものではないかも知れませんが、Githubでソースが提供されているので、ここから改善したものをフォークするのもありですね。 続きを読む

 1 2 次へ