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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

ピックアップ記事

  1. 混在コンテンツmixed contentsを改良する方法
    混在コンテンツとは、どういう意味ですか?混在コンテンツ(Mixed contents)とは、一つ…
  2. 目次 前準備のバックアップと注意点 英語の説明を翻訳してよく読み理解する ステップごと…
  3. 目次 Webデザイナーが初めて知る「MariaDB」という名前 MariaDBって何ですか…
  4. 目次 Web Design 3.0への流れ Web Design 2.0とWeb Desi…
  5. 目次 Macスリープ再起動エラーがおこった環境 スリープ再起動エラーメッセージの内容 …
PAGE TOP