レスポンシブでスマホ・タブレット対応のグラフィック

レスポンシブでスマホ・タブレット対応のグラフィック制作

レスポンシブ:つまりスマホ対応のウェブサイトですが、数年前まで

「既存サイトのレスポンシブ専用Webサイトを別途独立させたい」とか
「全体をレスポンシブとPC併用にリニューアルさせたい」とかの需要がありましたが、

最近はWebサイトがほとんど動的に移行したため、ビューポートやメディアクエリで調整するより、

コスト安の意味もあり、Bootstrapでの対応が多くなってきたように感じます。

Photoshopで統一サイズのグラフィックを作る。

カバーなどグラフィックの制作も、PC用、タブレット用、スマホ用などと、2種類や3種類サイズはもう止めて1種類サイズでの併用が主流です。

例えばこのカバーの場合、パララックス使用のオリジナルは1920pxのカバーですが、

(画像はぼかして掲載しています)

レスポンシブでスマホ・タブレット対応のグラフィック

スマホやタブレットでもこのwidth:1920pxの特大グラフィックをBootstrapがスマホサイズに

調整表示してくれるので「あの苦労は何だったのか!」といういい時代になったと思います。

これは自転車を販売しているコーポレートサイト用カバーなので、右手前に

実際に販売しているモデル型の自転車を配置するという演出をほどこし、地球環境に優しい

コープレートイメージを背景の緑色で表現しました。

これがPHOTOSHOPでの製作過程です。

レスポンシブでスマホ・タブレット対応のグラフィック

 

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

ピックアップ記事

  1. Web Design 3.0への流れ Web Design 2.0とWeb Design…
  2. Macスリープ再起動エラーがおこった環境 スリープ再起動エラーメッセージの内容 スリ…
  3. 2020年もすばらしい年になるはずでした。もう半年以上が過ぎました。2020年のお正月はいつも通り、…
  4. 決済文書に押印するために出社しなければならない国電子印鑑は、Photoshopでこんなに簡単に…
  5. 最終デットラインはあと数日今年2020年2月末までくらいです SSL対応していないと何が…
PAGE TOP