WebサイトのデザインカンプをPhotoshopで作っていると、いくらカンバスの横幅をスマホサイズに合わせたとて、やはり実機で見てみないと実際のサイズ感がよくわからないですよね。
しかもRetinaディスプレイのiMacでは、Photoshopの100%表示が効かず、200%表示に設定＝100%という面倒くさいシステムになっており、サイズの確認が非常にややこしい。
もちろん数字で合わせてはいますが、「実際のところ上手くいってるの？」というのはスマホで確認しておきたい。
ということで、実際に自分のスマホでサイトの見え方を確認するため、自分のサーバー内にテスト環境を作り、画像を貼り付けて最終チェックをします。
スクロールのリズムに合うようにページが運べるかどうか、違和感はないか、文字のサイズは見やすいかなど、「あたかもスマホで実際のページを見ているかのように」見て、細かいところを直していく作業です。
マルチウィンドウで他のLPサイトと比較することもできるので、自分が作ったデザインがどのような雰囲気を醸し出しているのかもチェックできます。
目次
サーバー内にテストディレクトリを作る
まず、ディレクトリって何？ってことなんですが、わかりやすく言うとフォルダです。
例えばこのブログは「officehojo」ディレクトリ（フォルダ）の中の「blog」ディレクトリにデータが詰まっています。図にするとこんな感じです。
URLはディレクトリ順に並ぶので、blogディレクトリの場合なら「http://officehojo.com/blog/」という感じになります。この一番最初にくるディレクトリ（図では「officehojo」）のことを「ルートディレクトリ」といいます（URLの一番最初にくるドメイン）。
つまりは、このルートディレクトリの中に「test」というディレクトリを作り、テスト環境専用の場所を作ろうという魂胆です。この「test」の中にデータを入れ、仮想のテストサイトを再現すればいいのです。
HTMLでサイトを作っているなら、そのままデータをまるっと放り込めばOKですが、私のようにデザインカンプ（画像）を確認する場合には、デザインカンプ画像（JPEG）と、それを表示させるためのHTMLフォーマットが必要です。
フォーマットは使い回し可能なので、画像さえ差し替えればどのデザインカンプでもテストサイトが実装できます。
画像を表示させるためのHTMLフォーマットを作る
まず、Web上にテストサイトを表示させるためのHTMLフォーマットを作ります。
BracketsやDreamWeaverなどのテキストエディタを使わなくても、例えばMacならテキストツールで作ればOK。テキストエディタを開き、下記のコードをコピペしてください。
<!doctype html>
<html rang="ja">
<meta charset="utf-8">
<meta name="robots" content="noindex">
<meta name="googlebot" content="noindex">
<title></title>
<head>
<style>
body{
text-align: center;
}
img{
width:100%;
}
</style>
</head>
<body>
<img src="ここに画像の名前を入れる">
</body>
</html>これはテストなので、中身はスッカスカです。これでいいんです。
ここで忘れてはいけない重要なコードは下の2つ。
- <meta name=”robots” content=”noindex”>
- <meta name=”googlebot” content=”noindex”>
これは、サーバーにアップしたサイトを他人に見せないようにするための記述です。ネット上には存在してるのですが、クローラーに知らせないようにしているので、検索に引っかかりません。直接URLを打ち込まないと見れないサイトにしています。（クローラーにindexするなという指示をしています）
一旦これで保存しますが、保存形式はhtml文書で保存する事をお忘れなく。名前はなんでもいいですが、ここではわかりやすいように「testsite.html」としておきます。
HTMLフォーマットに画像のパス（URL）を指定する
パスとはURLのようなものです。ファイルの場所を指定してあげます。フォーマットのコードの中に「<img src=”ここに画像の名前を入れる”>」という部分があったと思いますが、ここには表示させたい画像のファイル名（拡張子まで）をそのままコピペしてください。
例えば画像の名前が「testphoto.jpg」なら「<img src=”testphoto.jpg”>」のように。
これでフォーマットは完成です。早っ。
サーバー内のテストディレクトリにファイルを入れる
先ほどサーバー内に作った「test」ディレクトリに、htmlフォーマットと画像を一緒に入れます。（必ず一緒の場所（階層）に入れること！）
これでテストサイトはアップロードされました。早っ。さて、直接URLを入れてスマホで見てみましょう。
スマホでURLを指定し、サイトをチェックする
アップロードしたサイトを自分のスマホで見るために、まずはブラウザを立ち上げます（SafariでもChromeでもなんでも）。一番上のURLバーのところにtestsiteのURLを入れるのですが、URLはディレクトリ順に/（スラッシュ）で区切っていけば自ずと現れます。
URLというのは必ずディレクトリ順に並んでいますので、testsiteのURLは「ルートディレクトリ（ドメイン）/ディレクトリ/ファイル名（html）」になっているはずです。
つまり、今回アップロードした「test」の場合なら、「https://officehojo.com/test/testsite.html」となります。（※架空なので実際には何もありません）
これでスマホの画面にサイトが表示されていれば成功です！しょっちゅう使うならブックマークしておくと便利ですよ。
WordPressの場合なら、簡単インストールでサブディレクトリを設定し、そこで作っていけばOKです。あとはまるっと引っ越ししてしまえばいいですね。