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

更新日 2021年1月30日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

ピックアップ記事

  1. GAFAMAからの脱出(1)その心模様
    ビッグテックともよばれているGAFAM(Google,Amazon,Facebook…
  2. 混在コンテンツmixed contentsを改良する方法
    混在コンテンツとは、どういう意味ですか?混在コンテンツ(Mixed contents)とは、一つ…
  3. 目次 前準備のバックアップと注意点 英語の説明を翻訳してよく読み理解する ステップごと…
  4. 目次 Webデザイナーが初めて知る「MariaDB」という名前 MariaDBって何ですか…
  5. 目次Web Design 3.0への流れWeb Design 2.0とWeb Design 3…
PAGE TOP