プログラミング

【WEBデザイン 便利アプリ】レスポンシブ対応の確認が効率的に!「Responsively App」

 

こんにちは、イケゾーです。

いやーまいったね。
ググってみると、世の中には便利なものがあって、作業効率が爆上がり。これ↓

 

この記事はこんな人におすすめ!

  • WEBデザイン初心者
  • これから模写をやっていくよ
  • WEBデザインの便利なアプリを知りたい
  • 複数画面のレスポンシブ対応の確認を、同時に見たい

 

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

【WEBデザイン 便利アプリ】レスポンシブ対応の確認が効率的に!「Responsively App」

レスポンシブ対応とは

イケゾー
今回は、レスポンシブデザインの検証に便利なアプリを紹介するよ

WEBデザインにおいて、レスポンシブ対応が当たり前に要求されるようになりました。レスポンシブ対応とは、画面サイズが異なる機器で表示しても、デザインが崩れない構成をすることです。画面の小さなスマホから、大画面のPCまで全ての機器での表示崩れがあってはなりません。

そのためには、スマホ/タブレット/PCと複数のデバイスでの表示確認をする必要がありますよね。みなさん、ブラウザの大きさを実際にドラッグして確認しているかと思います。スマホサイズに可変して確認、次にタブレットサイズにして確認、最後にPCサイズにして確認とやっていませんか?時間がかかり手間なモノですね。

 

その作業を効率化するアプリ、「Responsively App」をご紹介します。

 

「Responsively App」の使い方

「Responsively App」の特徴は、複数の画面サイズでの表示を同時に確認し出来る事、しかも無料です。
>>ダウンロードはこちら

 

便利ポイント

  • 複数サイズの確認を一度に出来る
  • 代表的なデバイス(iPhone,iPad,Mac,Galaxy,Nexus等)は、初めから設定されているので、クリックして選択するだけ
  • 動き(クリックやホバー)の表示確認も同時に出来る

 

僕は、スマホ、タブレット、PCの3つを設定して確認しながら作業をしています。
「もっと早く知りたかった」と本気で思ったので、皆さんもぜひ!!

 

ただ、サービス自体が試行運用中なので、少し動作が不安定な時もありますが、無料なので使わない選択肢はありませんね。

 

まとめ

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう
  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-プログラミング
-, , ,