最新版、レスポンシブ対応のレイアウト・グリッドデザイン徹底解説
レスポンシブ対応のグリッド設計、レイアウトのバリエーション、デスクトップやスマホやタブレットの最近の状況に合わせたデザイン方法を紹介します。 グリッドの基礎知識をはじめ、最近主流のレイアウト、デザイナーがワークフローでグリッドをどのように適用させるかなど詳しく解説されています。 Responsive Grid Design: Ultimate Guide by Nitish Khagwal はじめに グリッドとは レスポンシブ対応グリッドを使用してUIをデザインするには？ カラム構造 ブレークポイント グリッドの振る舞い ツールでレイアウトのグリッドを設定するには？ デスクトップでの表示 スマホでの表示 タブレットでの表示 レイアウトのバリエーション グリッド開発のハンドオフ 終わりに はじめに 私は、グリッドを使った作業が便利だと感じています。グリッドはさまざまなレイアウト間の一貫性を維
最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ
去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。
SINAP | レスポンシブの基本をおさらい：画像の見せ方とレイアウトのパターンを把握しよう
シナップの小茅です。今回はRWDならではのデザイン表現として「よく見かける画像の見せ方」と、簡単にレイアウトパターンについてまとめました。 RWDではマルチデバイス対応を標準としており、ワンソース・マルチデバイスといった運用の効率化など良いメリットもある反面、複数デバイスを考えた設計や実装など、複雑な面も持ち合わせているため、制作前の綿密な計画は非常に重要です。それらを踏まえたまとめをご紹介します。 【 1 】 よく見かける画像の見せ方「RWDならではのデザイン表現とは?」 【 2 】レイアウトパターンのおさらい「デザイン・実装するのは、どのパターン?」 【 1 】 よく見かける画像の見せ方：RWDならではのデザイン表現とは? 最近は技術面においても開発が進み、RWDならではのデザイン表現が増えてきました。 そこで画像の表示方法をどのように考えたら良いか、4点ほど例をあげてご紹介します。
「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点 - エンジニアtype
「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点 2013/05/31公開 《Fashionably Flexible ワークショップレポート》 2013年4月6日に、Web Directions East主催による、Andy Clarke氏のワークショップが東京ミッドタウンで開催された。その内容を、主催であり通訳をした菊池崇がレポートをする。 ■ Andy Clarkeって誰？ 世界的に著名であるものの、日本では一部のコアなWebデザイナーでないとその名を知らない人がいるので、まずはAndy Clarke氏について紹介したい。 Andy Clarke はイギリスのウェールズ地方在住のWebデザイナーである。1990年代後半より、Webサイトの制作をはじめ、そのデザインセンスとCSSの先進性を活かしたデザインの取り組みで注目を浴
レスポンシブデザインはモバイルファーストかPCファーストか | WEB屋もどき
最近、運用業務の中で、既存のPCページを流用してスマホページ化する案件がありまして。 レスポンシブデザインではないんですが、そのうちレスポンシブ対応という話が出てきそうな雰囲気があったので、個人的に勉強中。 色々と調べながら試しにコーディングしているのですが、その過程で気になったところをメモ。 Media Queries非対応のブラウザに対応する必要は？ Media Queries非対応ブラウザというとIE6～8がパッと浮かびます。IE6はPCサイトでもフォローしなくて良いんじゃないかと思ったりしますが、その辺りは置いておいて。個人的には、対応しなくて良いと思います。 これはレスポンシブデザインの考え方によるでしょう。私は、ワンソースでモバイル（スマホ）やタブレットの表示を最適化するためのデザインがレスポンシブデザインだと考えているので、わざわざJSでMedia Queries非対応ブラウ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
