usブログやSNSを通じて、Webに関する最新技術や情報を定期的に更新しています。facebookTwitterホームブログアーカイブレスポンシブの基本をおさらい:画像の見せ方とレイアウトのパターンを把握しようレスポンシブの基本をおさらい:画像の見せ方とレイアウトのパターンを把握しよう2016.01.14シナップの小茅です。今回はRWDならではのデザイン表現として「よく見かける画像の見せ方」と、簡単にレイアウトパターンについてまとめました。RWDではマルチデバイス対応を標準としており、ワンソース・マルチデバイスといった運用の効率化など良いメリットもある反面、複数デバイスを考えた設計や実装など、複雑な面も持ち合わせているため、制作前の綿密な計画は非常に重要です。それらを踏まえたまとめをご紹介します。見かける画像の見せ方:RWDならではのデザイン表現とは?最近は技術面においても開発が進み、RWDならではのデザイン表現が増えてきました。そこで画像の表示方法をどのように考えたら良いか、4点ほど例をあげてご紹介します。実装とすり合わせるポイントもまとめましたのでご参考ください。画像をそのまま縮小するよく見かける方法です。レスポンシブ画像ならではの注意点として、ウインドウサイズを狭くするにつれ、単純に画像縮小するだけだとウインドウサイズによっては小さすぎてメイン画像として成立しなかったり、逆に画像が大きすぎて一画面で見せたい他の要素が見えなくなったりと注意が必要です。そのため画像の比率をよく検討することが重要となります。決めておくとスムーズです。ウインドウサイズにあわせて画像の左右や上下を非表示にするこちらも(1)と同じくよく見かけます。実際は(1)の方法に加えて、ウインドウサイズ毎に画像の表示サイズを切り替えているものです。したことのように見えますが、ウインドウサイズ毎の調整を行うことで見栄えも含めてサイトの印象も格段にあがります。デザイン時に検証したものは、事前に実装者と擦り合わせをしておくとお互いの手戻りもなく効率的です。実装とすり合わせるポイントウインドウサイズに合わせて画像の表示エリアを指定するため、どのポイントで見ても不自然じゃないように画像の表示エリアの幅と高さを決める必要があります。PC、スマホ、タブレットなど閲覧する環境に合わせて実装者と細かく調整していく必要があります。ウインドウサイズ毎に画像を差し替える、見せ方を変える更新性の高いサイトでは、運用の手間や工数を考えると厳しい方法ですが、場合によっては非常に効果的な見せ方をすることができます。読ませたいキャッチコピーを含む画像があった場合、PC時には横書き、スマホでは縦書きに切り替えることで、各ウインドウサイズの特性を活かして表現することができます。注意点としては、実装方法によっては1つの画像につき2点を読み込むとページの表示に時間がかかりユーザにストレスを与えます。jsなどで各デバイスによって最適なサイズに変更、または読み込み画像は閲覧時のウインドウサイズにつき1点だけ読み込むようにするなど、いくつか軽減方法を検討すると良さそうです。実装とすり合わせるポイント特定の画像だけやるのかサイト全体でやるのか、またコンテンツの内容や運用方法によっても出し分けの実装方法が変わるので、はやい段階で実装者と相談するようにしましょう。RWDでの画像最適化対応法はこちらの記事でまとめていますので、よろしければご一読ください。どのウインドウサイズで閲覧しても見やすい画像比率を考える2〜4カラムで要素が横に並ぶとき、ウインドウサイズが縮まるにつれカラムが落ちていくパターンをよく見かけますが、(1)と同じく画像の比率をよく検討することが大事になります。画像が正方形だった場合。pc時には4カラムでページ全体の配置バランスが良くても、スマホでは単純に1カラムに縦積みしたものだと画面に対して画像が大きく表示されてしまい、見づらかったり長いスクロールが必要になったりと閲覧時のストレスにつながることもあります。要素の優先度や画面に対してどの程度の情報を見せたいかを検討し、スマホ時には2カラムで表示する、または1カラムで見せたいのであれば画像比率は重要になるので検証をしっかりすることが大事です。実装とすり合わせるポイント複数のカラムにする際は、pcとスマホだけでなくpc〜スマホの中間サイズの設計も考えておくと実装者がスムーズです。ブレイクポイントを大きめに設定した際(タブレットでスマホ用の表示にする場合など)は、スマホなど小さいサイズで画像サイズが最適化されない場合が多いので、より細かに確認するようにしましょう。囲みや線を使ったデザインが凝ったものの場合もウィンドウサイズを変えた時にどうするかまで考えるようにしましょう。】レイアウトパターンのおさらい:デザイン・実装するのは、どのパターン?画像と同じですがレイアウトパターンも、設計やデザインをする前に実装者と相談をしながら、およそのレイアウトパターンを決めておくとスムーズな進行に繋がります。patterns」を基本としておさらいをします。RWDで使用されるほとんどのレイアウトは5つのパターンのいずれかに分類することができます。)ウインドウサイズによって要素(グリッドや画像)が拡大縮小し、小画面では1カラムに縦積んでいくものです。特徴としては、要素が滑らかに可変するためレスポンシブ性は強めです。カラムが落ちるレイアウトデザイン)大画面ではマルチカラム、画面幅が狭くなるほどブレイクポイントによってカラムが落ちていきシングルカラムになるものです。場合によりますが、ブレイクポイントの指定数は比較的多めに必要です。)レイアウトパターンの中で一番レスポンシブ性が強いものです。ウインドウサイズによってカラムが落ちるだけでなく、ブレイクポイント毎に最適なレイアウトで要素を再配置していくものです。設計・実装ともに高度なスキルが必要です。)最もシンプルなワンカラムデザインで、モバイルファーストの考え方が色濃く出ています。1ページのサイト、テキストが多い記事など、単一列のレイアウトに適しています。)大画面ではすべての要素が表示されていますが、ブラウザサイズが小さくなるに連れナビゲーショなど一部の情報が隠れます。クリックやフリックなどユーザーアクションによって隠れた情報が再表示されます。Canvasさいごにレスポンシブデザインに入る前は、おおまかなレイアウトパターンや画像の見せ方、インタラクションは何が効果的か、まで一通りイメージしてから取り組むと良いですね。デザインを作成したら実装者にまるっとおまかせの流れではなく、デザイン前から運用の手間や実装負荷など逐一の相談も忘れないよう気をつけたいと思います。連続テレビ小説『あさが来た』主人公のモデルになった人物です)アーカイブ一覧へ戻るSINAPメンバーのロングバケーション!〜2016winter編〜私たちシナップは、クライアントのビジネスと顧客を深く理解し、インターネットとつながるユーザー接点すべてをデザインすることで、ビジネスの継続的な発展を作り出すことを得意としています。IOQ(アクセス)利用規約プライバシーポリシーこのサイトでは、利用状況の把握などのために、プライバシーポリシーに基づき、Cookieを使用してアクセスデータの取得・利用等を行います。同意するCookieを。