» ブログ・webサイト・ランディングページにイラストを活用してみませんか?

Preprosのスマホサイト実機プレビューがおすすめ!な件

投稿日時2019年5月6日 タグ

カテゴリ Webデザイン・コーディング

Preprosのスマホサイト実機プレビューがおすすめ!な件

最近はモバイルファーストな時代になったせいかクライアント企業からはPCサイトよりもスマホサイトの見え方について表示崩れの指摘されることが多い気がしました。

これってコーディングしたサイトをFTPサーバーにアップしてからクライアントに確認してもらうというスタンスを踏むから、制作者側の表示確認が後手後手に回るんですよね。

(1)コーディングの時点でリアルタイムにスマホ表示確認できない
(2)後からスマホサイトの崩れの修正作業が発生する
(3)WordPressのサーバーにアップした後でスマホの実機で確認してCSS修正して再びサーバーへアップする

以前からこのコーディング修正関連作業が無駄だと思ってGUIコンパイラー的なものを探していました。

かつてはBracketsにedge-inspect-extensionという起動するだけでスマホ実機チェックができる画期的なエクステンションがあったのですがAdobeが急に開発終了したせいで使えなくなりました。
せっかく非エンジニアのデザイナーがスマホ実機チェックするのに便利だったのに。

Adobe Inspectの代替えとしてPreprosを使う

サーバーにもHTMLファイルをアップロードせずにコーディングしながらスマホ実機で確認したい!という時はPreprosというアプリを使うと便利です。

スマホサイトをネットワークプレビューできるQRコードを作成してくれます。
このQRコードをスマホで読み取ってアクセスするだけで自分のスマホでサイト表示確認ができます。

QRコードでスマホネットワークプレビュー

下記サイトがPreprosの使い方について詳しく書かれています。

数年前にSassコンパイルを自動でしてくれるアプリとして使ってはいたPreprosですがスマホ実機チェックのために再び使う事になりました。
前と違ってダークとホワイトでUI画面選べるようになってオシャレになっていました。
無料で使えるのに高性能なGUIコンパイラーだと思います。

私はPreprosはスマホプレビュー用に使います。
SassコンパイルはBracketsのエクステンションからコンパイルする方が楽だと思いますから。

非エンジニアでもSassコーディングできるツールは世の中に出揃ってますから
デザイナーもSass覚えた方が便利じゃないかなと思います。

私はSassは簡単なネストや変数程度しか使えませんけど、普通のCSSでコーディングするよりは書くコードがコンパクトにはなりました。

それでは皆さま良きコーディングライフを!