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

更新 2021/06/24

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Webサイト作品集_齋藤天津子

Webサイト作品集_齋藤天津子 Webデザイナー

お問合せ_Atsuko Saitoh

お問い合わせフォーム_齋藤天津子 Webデザイナー

ピックアップ記事

  1. 上のアイキャッチ画像を見て下さい。スパイウエア「ペガサス」がスマホやPCに入ってしまったら、被害者は…
  2. 「あなたの名前"Copilot"さんって、何て読むんですか?」と本人に聞いてみたところ、Copi…
  3. Affinity Photoでも簡単に電子印鑑ができます!
    目次2023年10月インボイス制度導入前、Affinity Photoでの電子印鑑…
  4. ホームページの制作(Web制作)は、専門職がチームを組んで行います。見ず知らずの人たちが一緒に仕事を…
  5. (3)-3 GAFAMAからの脱出 2022年ブラウザはこれに決めました!おすすめ理由
    目次GAFAMAからの脱出する上で何はともあれブラウザの存在は大きいブラウザのセキュリティ度計…

Web制作の流れ

Web制作の流れ
もっとくわしい何を頼めるの?料金は?
PAGE TOP