試したいことの効果は予測できるが、、そのための時間でまずやってみたくなるのがヒトの性。

要件：デザイン～コーディングの練習にあたって、早く回す方法を考える。

「まったく作業がすすまない！」

　休職期間中、これまでコーディング中心であまり手を出していないサイトのデザインの方もやってみようと、よく行くお店のサイトのデザインに挑戦してみましたが、あまりにも手が進まない。
これは切り口と言うか、もっと別のやり方を考えた方がよさそうだと思って、以下のことを試してみました。

・一から作るのではなくてリニューアル
　架空のサイトを作るために準備することが結構多かったので、その辺をスパッと飛ばしてデザイン作業するために、既に存在しているサイトのリニューアルと言うカタチでデザインを行うことにします。

　様は「テイストは同じでいいので、内容を新しくしたい」という条件付き（色やフォントなど、結構固定される）の縛りプレイをすることで、ある程度手間を省いて作業に入ることができます。

　サイトの探し方ですが、地方の地元企業で検索すれば「結構古めの企業サイト」が出てくることがあるので、それらをターゲットにしてみます。今回のターゲットは同じ市内にあるカレーの美味しい古民家カフェです。

・素材はどうするか？
　素材に関しては、練習用なので元のサイトにあるものを利用したいところですが、著作権がありますからね…ここはフリー素材を見つけてくる練習と割り切りって別個探すこととします。もしくはダミー画像でお茶を濁します。

・どこまでやるか？
　今回はお試しと言う事でTOPページの構築（レスポンシブなし）とします。

・まず紙に書き出す。
　元サイトの項目を紙にガリガリ書き出していきます。順番やレイアウトは無視して項目のみです。書き出したら、内容が重複やTOPページになくてもよさそうな項目を横線で消して、別の紙に書き出します。今度は表示する順番だけ決め、項目ごとに大きめにスペースを取ります。この後項目毎の記入内容を書き込み、それが一通り終わったら画像や文章のレイアウトを決め、それが終わったら全体のバランスを見て…といった具合に、各項目の解像度を徐々に高めていきました。
並行して、各項目の見出しや、リンクボタン/リンクのhoverの際のアニメも落書きレベルから初めて、徐々に方向性や内容を固めていきました。

　紙の良いところは、鉛筆と消しゴム、あとは付箋程度しか使わないので、道具の操作で手間取ることがほぼ無い点です。
直接フォトショで作成を始めると、使い方がわからずに手が止まることがまだ多いので、清書するまでは鉛筆の方が性に合っている感じです。

　色についても、この時点であまり深く考える必要が無いです。何せ黒白とその濃淡しかありません。特に今回のやり方、色合いについては元のサイトと同じ感じにする縛りのおかげで、深く考えなくてもいいのが利点です。

・清書とコーディング
　フォトショで紙に書いた落書き状態のデザインを清書してコーディングします。デザイン～コーディングをする人間が同じだったり、清書したものを他者に見せるわけではないのでイロイロ端折りたくなります。しかしある程度きっちりしておかないと、コーディングの際にブレが酷くなるので、ここはあきらめて最後まで仕上げます。

・かかった時間
紙の上の作業：8時間
PC上で清書：8時間
コーディング：10時間
結構掛かっていますが、まずは最後まで終わったのでよしとします。

・所感
　この方法、デザインしていく上であらかじめ項目をいくつか制限してから作業をしていく為、その部分に関しては全く勉強になりません。またデザインをリニューアルする際、デザインの新しい/古いの基準が自分の中にあるので、その辺が適切にアップデートできていないと、手を入れたけどやはり古臭い…ということが起こってしまいます。

　なので、これは「ゼロから立ち上げる」のではなく、「作りの古いサイトに最近のデザインを突っ込んでみる」練習とか、「まず完成させる」為の練習という感じです。長い文章問題解くというより、計算ドリルでゴリゴリ問題を解いていく感じでしょうか？

　今の私の様に、手持無沙汰で何か作業をやりたい時や、ポートフォリオに載せる企画モノで「チャレンジリニューアル●連発！」みたいなのにはいいかもしれません。