ilove.catilove.cat＜アイラブドットキャット＞は、猫×クリエイターをテーマにしたウエブマガジンです。 ilove.cat is an online magazine for all cat lovers.
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
WebサイトをiPhoneに対応させる -レスポンシブ・ウェブデザイン- - EC studio デザインブログ
このところのスマートフォンの広がりにより、デザイン部でもWebサイトのスマートフォン対応の必要性をひしひしと感じています。 実際のスマートフォン対応の取り組みとしてはこれからなのですが、その時のために従来のサイトをスマートフォンに対応させる方法、特に今回は閲覧環境に応じてページレイアウトを柔軟に切り替える、レスポンシブ・デザイン レスポンシブ・ウェブデザイン（Responsive Web Design）（ご指摘ありがとうございます。）に関していまさらながら調べてみたので、大枠的なことをふわっとまとめておこうと思います。 レスポンシブ・ウェブデザインって まず「レスポンシブ・ウェブデザインとはなんぞや」と言うところですが、 Webサイトのページレイアウトを閲覧環境（パソコン、iPhone、Android など）に応じて動的に変更させる手法で去年あたりからよく耳にするようになりました。 ブラウ
レスポンシブWebデザイン対応のHTML5製ギャラリーサイト用WordPressテーマ・Shotoku(β版)を公開しました - かちびと.net
iPhoneやiPadにもレイアウトを調整する レスポンシブWebデザイン対応でHTML5製 のギャラリー用WordPressテーマを作成 しましたので無償公開します。と言っても 実は未完成なのでベータ版として。作り はシンプルなのでフレームワーク的に ご利用下さい。 まったり開発してたんですけど諸事情で時間が無くなりそうで、かなり遅れそうなのでベータ版としてひとまず公開することにしました。レスポンシブWebデザイン対応のギャラリー向けWordPressテーマです。 出来る限りミニマルなデザインを意識したつもりです。尚、ミニマルデザインに関してはこちらが参考になります。 jQuery MasonryとMedia Queriesを使ってレイアウトを調整します。練習用に作ってたんですが、途中から公開してみようという気になってさきほど一旦挫折しとこうと思って本日公開に至りました。 未完成といいま
レスポンシブウェブデザインについて | CSS Radar | For Frond End Developers
いまこの記事を読んでいるモニタのサイズは何インチだろうか？ iPhone、アンドロイドOS搭載スマートフォン、iPad、ネットブック、ノートPC、デスクトップPCと数年前なら思いもよらなかったモニタ/スクリーンサイズでユーザはウェブサイトを閲覧し始めている。 今後もさらに解像度が異なる環境が増えていくことは間違いない。 ではそのサイズのモニタごとに、スクリーンごとにデザインを作り、HTML/CSSを書き足していくのか？ その疑問への1つの回答がレスポンシブウェブデザイン(Responsive Web Design)。 多くの場合、CSS3で利用が可能になる予定のMedia Queriesを活用して、モニタ/スクリーンのサイズに合わせて最適なデザインを供給するデザイン/コーディング手法がレスポンシブウェブデザインと呼ばれている。 レスポンシブウェブデザインの例 Simon Colliso
Responsive Web Design を利用している企業サイトリスト
allWebクリエイター塾 ブログでは、Responsive Web Design（レスポンシブ・ウェブデザイン） をよく取り上げています。では、実際に一般のウェブサイトや個人以外のウェブサイトで Responsive Web Design を利用しているサイトはどのくらいあるでしょう？ということで探してみました。特に一般の企業を中心に集めてみましたので、レスポンシブ・ウェブデザインが一般企業でどこが利用しているのか興味がある方は、是非とも参考にしてみてください。 新聞編 About.comなんと、New York Time の一部である、「About.com」ですが、レスポンシブウェブデザインです。日本の各新聞にもそのビジネスモデルまで影響をあたえる「New York Times」までもが Responsive Web Design（レスポンシブ・ウェブデザイン）とは驚きですね。海外では
レスポンシブ Web デザインのテストツール「Responsive Design Testing」
レスポンシブWebデザイン の為のツール Responsive Web Design でウェブサイトを作製するときに、複数の画面サイズを一覧で確認できなくて困った事はありませんか？ そんな時に、「Resposive Design Testing」は最適なツールです。 このツールは、スクリーンキャプチャーのURLボックスに、確認したいファイルのパスを入力すれば、横幅240px、320px、480px、768px、1024px のそれぞれのデザインを確認することができます。 ウィンドウサイズを自分で変更する必要がないのは時間を短縮することができます。 また、この「Responsive Design Testing 」はダウンロードしてローカルで利用することもできます。 まとめ 「Responsive Design Testing」のようなツールが最近では、見られるようになりました。やはり、レス
モバイルファーストとWebサイトのコンテキスト | コラム | ミツエーリンクス
昨年末より、ワンセグやおサイフケータイを搭載する、日本市場に特化したAndroidスマートフォンが登場しています。日本では2015年にも携帯電話の販売台数、契約数ともに、スマートフォンが全体の半数を超える予測がされており、今後さらに広がることが確実視されています。 スマートフォンからのWebアクセスも、今より増加するでしょう。立ち上げる必要がないことやどこでも使えるという利便性から、PCよりも利用の幅は広がるのではないでしょうか（実際、今年中にスマートフォンがPCの売上を抜くという予測もあります）。 さて、昨年頃より「モバイルファースト」という考え方に注目が集まっています。PCではなくまずモバイルからデザインを考え始めるという考え方なのですが、「たとえモバイル展開を考えていなくてもモバイルから考えよう」という、少し変わった主張も含まれているのです。いったい、どういうことでしょうか。 制約を
「モバイルファースト」って何だ
2010年4月にバーミンガム（英）で開催された Dan Rubin氏のモバイルのワークショップへ参加した時に彼から、米国には「モバイル・サイコロジスト」（モバイル心理学者）がいると聞きました。またモバイル・サイコロジストが近い将来 モバイルのウェブサイトを設計してからデスクトップを設計することを主張していると聞かされました。これが、自分が初めて「モバイル・ファースト」に出会った瞬間です。 前置きが長くなりましたが 「モバイル・ファースト」というのは、 ウェブサイトの設計をするときにモバイル版のウェブサイトの設計から始めるという手法です。すこし噛み砕くと、デスクトップ版を作成し、その情報をそぎ落としてモバイル版を作成する「デスクトップファースト」ではなく、本当に必要な情報や機能を最初に決定してモバイル版を作成してから、デスクトップ版では他に必要だとおもわれる情報を慎重に付け加えていく手法です
マーケット・インサイト｜株式会社コプロシステム
「買いたくなる商品づくり」「買いたくなる仕組みづくり」をキーワードに、マーケティングやプロモーションに関する新しい手法や情報、商品や市場についてのコプロシステムの視点などをご紹介するブログです。
「モバイルファースト」という考え方についてまとめてみた
去年の終わり頃からアメリカで話題の「モバイルファースト」について、自分なりの考えをまとめてみた。 僕が考える「モバイルファースト」とは「サイト構築の起点をモバイル向けにする」という「レスポンシブ・ウェブ・デザイン（RWD）」を前提とした考え方で、そうすることで「自然とデスクトップ向けの制作にも良い効果が生まれる」ということ。それぞれの接続デバイスに最適化されたユーザ体験を提供する「レスポンシブ・ウェブ・デザイン」を採用した制作には、大きく分けると2つの進め方があります： デスクトップ向けの制作からはじめて、モバイル向けに最適化していく方法 モバイル向けの制作からはじめて、デスクトップ向けに最適化していく方法 この方法のうち、モバイル向けの制作からはじめることを「モバイルファースト」と言っているようです。最近RWDで実際に制作をしてみているのですが、「モバイルファースト」は理にかなっていると
”モバイルファースト”で起こること
「いまやトップレベルのプログラマはモバイルアプリから作る、最も優れたベンダーはモバイルサービスから提供していく」---。米グーグルのエリック・シュミット会長が米セールスフォース・ドットコムのマーク・ベニオフCEOと対談した際の発言である（関連記事）。 つまり“モバイルファースト”である。この言葉は当初、Webサイト作成に当たり、PCではなくスマートフォンなどモバイル機器での閲覧をまずはターゲットにすることを指す言葉だったようだが、この記事ではもう少し広く、アプリやサービスを含めてモバイルを第一に考えて開発し提供する、といった意味で使うことにする。 パソコン時代の終焉 さて、冒頭の発言には前段がある。「パソコンのプラットフォームは限界にきている」とシュミット氏は述べており、パソコンに代わってスマートフォンが情報機器、特に個人が持つデバイスの主役になりつつある状況を説明している。こうした見解自
デザイナーのためのSubversion/TortoiseSVN入門2 -Subversionでのフォルダーの命名・構成とTortoiseSVNの便利な使い方-
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに Yahoo!検索のデザイナー担当の竹内美帆です。前回の記事「もうファイル管理で困らない！ デザイナーのためのSubversion/TortoiseSVN入門」では、「Suvbersionの概要」と「TortoiseSVNのインストールから基本操作」を解説いたしました。今回はさらに一歩踏み込んで、Subversion初心者の多くが疑問を持つ「Subversionのフォルダーの命名と構成」と「TortoiseSVNの便利な使い方」をご紹介します。 目次 Subversionのフォルダーの命名と構成 基本的なフォルダーの命名と構成 柔軟な構成を考えてみる TortoiseSVNの便利な使い方 変更履歴を見る 前回のリビジョンと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mdlab.jp
レスポンシブ Web デザイン には欠かせない。スケッチテンプレート