Webデザインの提出にかかる手間を少なくする方法

      2016/06/30

Webデザインの提出にかかる手間を少なくする方法

ゴールデンウィーク真っ只中ですが、いかがお過ごしでしょうか。
僕は仕事と、子供たちの世話や遊び相手に追われる日々です…。

Webデザイン・デザインカンプの提出をほんの少し楽にする方法
https://gingdesign.com/webdesign/webdesign_submit.php

さて、以前に上記のような記事を書きました。
こちらの提出プログラムの最新版を作成しましたので、ご紹介したいと思います。

前回は、画像のファイル名とHTMLのファイル名一致させることで、HTML内を触らず表示を可能としていましたが、それすらも面倒だということで、
単一のHTMLでURLのパラメータを変更するのみで画像を表示させる方法を考えました。

実際使ってもらえるとわかりやすいかなと思います。

サンプルURLはこちら

PCデザイン:https://gingdesign.com/sample/webdesign-less-labor/?p=pc
SPデザイン:https://gingdesign.com/sample/webdesign-less-labor/?p=sp

ダウンロードはこちら

特徴をご紹介

・単一のHTMLで済むので、準備するのはデザインした画像のみで、HTMLをいちいち増やしたり修正する必要が無い
・パラメータの先頭2文字を「sp」とすることで、viewportをスマホ用に自動的に切り替えることができる。また、画像を100%表示にできる
・指定した画像がみつからない場合は「デザインが見つかりません」と表示します
・もしJavascriptが使えない環境の場合、「Javascriptを有効にしてください」のメッセージを表示します

また、検索エンジンにインデックスされることがないよう、NOINDEX・NOFOLLOWの設定や、ブラウザのキャッシュが残らないような設定をMETA内に記述してます。

デザインを修正して提出したのに、クライアントの「以前と変わってません」が防げるというわけです。完璧ではないかもしれませんが。。

使い方は簡単です

1.画像を用意してjpgで保存します。
ファイル名はなんでも構いません。
「sp.jpg」など「sp」とつけることでスマホ用の画像と認識します。
「images」内に格納します。

2.ファイルをサーバーにアップします。
index.htmlと画像をサーバーにアップします。
例:http://hogehoge.com/design/ ←ここにアップ

3.HTMLにアクセスします。

画像名が「pc.jpg」の場合
例:http://hogehoge.com/design/index.html?p=pc

画像名が「sp.jpg」の場合
例:http://hogehoge.com/design/index.html?p=sp

※インデックスは省いてもOKです。(例:/?p=pc )
※画像名が「pc01.jpg」なら「?p=pc01」で表示されます。

以上です。

作成するページ数が多いと、提出時の手間や管理も大変かと思います。
この方法なら、画像の作成に集中できて、URLはパラメーターを変更するだけなので管理もしやすいと思います。

時間の短縮など、お役にたてば幸いです。
自分の使いやすいように改造してくださっても結構です。

終わり