• web制作

デザイナー必見!スマホサイトをデザインする時に捗る検証方法

熊谷
このエントリーをはてなブックマークに追加

どうも熊谷です [▓▓]=͟͟͞͞=͟͟͞͞ εː)

2014年が終わろうとしていますね、皆様はやり残したことは無いでしょうか?

さて今年のラストを飾る記事は、スマートフォンサイトをデザインするにあたって作成したデザインを実機で検証する際に良いサンプルソースを配布したいと思います!

※こちらのサンプルソースはレンタルサーバーや自分でローカルサーバーなど検証環境を持てる方を対象としています。
※かなり説明を省いているので、どうしても分からない場合にはこちらまでリプライかブログコメントください。

サンプルソースはこちら!(142kb)

おしながき

内容のファイルは以下となります。

使い方

至って簡単です!
ダウンロードしたファイルをサーバーにアップしてスマートフォンでアクセスするだけです。
PCからアクセス確認するとウィンドウサイズになってしまうので幅を狭めると良いでしょう。

カスタマイズ

配布した状態だと画像ファイルが「sample.png 」としているので、好きなファイル名・フォーマットにしたい場合には若干の修正が必要となります。

「index.html」をメモ帳などで開いて(ソースの15行目辺りの記述)

<img src="./sample.png" width="320”>

こちらの記述の「sample.png」を好きに変更して貰えればOKです。

まとめ

いろいろな検証環境などが確立されていますが、やっぱり実機で見て確認するのが一番!
自分はこちらの方法にてデザイン確認・提出することが多いです(๑´ㅂ`๑)
また、細かい修正が多い場合には「Yummy FTP Watcher」などファイルに変更があった場合に自動でファイルアップロードしてくれるFTPツールがあると更に便利になります!
※Yummy FTP Watcherは有料Mac専用アプリです。

現状、ピクセルパーフェクトでデザインする事に注力していないために、あえてiPhone6 plus用などの分岐はさせていませんが希望があれば機能追加することも可能です。

ということで、来年もツボをくすぐる記事を書いていければと思っています。
それではみなさま、良いお年を〜!(。´・∀・)ノ゙

rss登録
このエントリーをはてなブックマークに追加