【レスポンシブデザイン】を一括で確認できるツールとは？

みなさんこんにちは！おさかなです！

今回は「レスポンシブWebデザインチェックツール」について、書いていこうと思います！

それでは、レッツゴー！！！！！

「レスポンシブWebデザインチェックツール」って何？

「レスポンシブWebデザインチェックツール」とは、スマホ・タブレットなどで表示した場合の「見え方・デザイン」が一括チェックできるサイトのことです。URLを入力するだけで、誰でも簡単に確認できます！(いいね👍)

レスポンシブWebデザインチェックツール | LIQUID DESIGN

スマートフォン、タブレットなど様々な画面サイズのレスポンシブ表示確認が簡単にできるチェックツールです。拡大縮小や縦横回転も自由自在。

lqd.jp

【レスポンシブデザイン】のサンプルまとめ【Responsive Web Design JP】とは？

みなさんこんにちは！おさかなです！今回は「Responsive Web Design JP」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・レスポンシブデザインのサンプルを探している方・ス...

osakanav.com

2022.04.02

実際に使ってみよう！

レスポンシブ表示を確認しよう！

それでは早速サイトにアクセスしましょう！

「iPhone7」をはじめ、「iPad」「Macbook Air 11」など、実際の端末での表示がわかります！(ちなみにAndroidは無さそう…💦)

まずは、左上にある「ボックス」にURLを入れます。

あとは「RWO Check」を押すだけ！(えい！)

すると…？こんな感じで、入力したURLのサイトが表示されました！(おお！)

通常のサイト同様、きちんとリンクも機能しており、トップページ以外も確認できます。(ふむふむ…。)

ペルソナ作成ツール【Make My Persona】とは？

みなさんこんにちは！おさかなです！今回は「Make My Persona」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・運営サービスのターゲット層・ユーザー像を明確にしたい方・ブログの想...

osakanav.com

2022.08.15

(しっかり睡眠…💤)

オプション機能

ページ上部にある「スマホマーク」を押すと…？

こんな感じで、スマホ本体の枠組みを取り外せます。

デザイン自体を確認したいときには、良いですね♪(うんうん！)

ページ上部の「矢印マーク」を押すと…？

こんな感じで、「スマホを横にしたときの表示」もわかります。(助かる〜)

「横表示」は、意外と見落としがちなので、これは便利です！

ページ上部の「スクロールバー」を動かすと…？

こんな感じで、「拡大・縮小」が可能です。
機種別に比較したい場合などにご活用ください…！(お疲れ様です🍵)

Amazon.co.jp: これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 eBook : Capybara Design, 竹内 直人, 竹内 瑠美: Kindleストア

Amazon.co.jp: これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 eBook : Capybara Design, 竹内 直人, 竹内 瑠美: Kindleストア

amzn.to

これで全ての操作は完了です。(やった～！)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました！

【LPデザイン】まとめサイト【Web Design Clip】とは？

みなさんこんにちは！おさかなです！今回は「Web Design Clip」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・ランディングページを作成したい方・LPデザインの見本を探している方...

osakanav.com

2022.05.13