見やすい画面作りの方法を大公開!〜VASILY DEVELOPERS BLOGが公開されました〜

こんにちは、広報の坂井です。

本日5月25日(木)、VASILY DEVELOPERS BLOGが公開されました!

今回のタイトルはHTML5における画像のレスポンシブ対応方法まとめ』、担当はフロントエンドエンジニアの権守(ごんのかみ)です!

tech.vasily.jp

f:id:vasilyjp:20170524161801j:plain

今回も非エンジニア向けに解説してもらいました!


 ー まず、今回の内容がどんなものか教えていただけますか?

VASILYでは、200以上のECサイトから商品画像を集めており、画像配信の最適化は非常に重要な課題の1つです。

今回は最適化の一環として、画像のレスポンシブ対応を導入しましたので、その際に調査した内容やハマったポイントなどを紹介しています。

 

ー 画像のレスポンシブ対応とは…?

スマートフォンやPC、タブレットなど様々な端末で見られる画面を、各画面のサイズに合わせて画像のサイズなどを調整することです。これにより、各端末に適した画像を表示でき、ユーザーの皆さまにとって使いやすいサービスにしています。

 

ー なるほど。画面の大きさに合った見やすいサイズで表示してもらえると、とても助かります!

その他に、各端末に適した画像の切り替えも可能です。例えば、画面の向きによって縦長あるいは横長の画像を表示するように設定することができたり、小さい画面では正方形に、大きな横長の画面では長方形のより大きな画像を設定できたりもします。

 

ー この機能は既にサービスに導入しているのでしょうか?

この技術は、近々リリース予定の新サービスに導入しています。現在開発を進めているので、皆さまに使っていただくのが楽しみです!


ありがとうございました!

VASILYでは現在、各職種でインターン・正社員を募集中です。ぜひ一度、オフィスに遊びに来てくださいね!ご応募お待ちしております!

www.wantedly.com

【お問い合わせ】
株式会社VASILY 広報担当
press@vasily.jp