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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

ピックアップ記事

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