ブログのデザインを変更したのでその製作工程をメモしておく。

5日間ほどかけて、ゼロからブログのデザインをリニューアルしました。今回いい感じのデザインの製作工程が踏めたので今後のためにメモしておきます。

1日目: サイトのイメージを決める

一日目では色々なブログを参考にしながらどんなデザインにするかを妄想していました。この時に自分は今回のfurodriveの名前から風呂っぽい、ゆらぎのある雰囲気を出して没入感の高いデザインにすることが決まりました。

2日目: 紙の上でイメージ図を出す

いきなりデザインソフトを使うのではなく、 紙の上でいくつかラフ案を出して試行錯誤を重ねました。

3日目: サイトのモックをSketchで作る

sketch

SketchというAdobeのIllustratorの代替になりうるアプリがあるのですが、今回これを使用しました。このアプリを使うと、アートボードがあるし、パスも書けるし、簡単に画像のスライスも出来ます。海外だと結構このソフトを使って脱Adobeをする人がいるらしいです。まだ使い出して一週間も経ってないのですが、非常に直感的に作業ができるので気に入ってます。

またモックの段階では作りこむのではなく、ざっくりと作ることで遊びをもたせて細かいところはHTML,CSSで実装しながら考えると、という方法を取ったのですがうまくいきました。

4,5日目: HTML,CSSで表現する

モックをベースにHTML,CSSに流し込む作業をしました。しっかりと前準備ができていたので特に難しいこともなく2日で終わりました。

感想

自分としてはそれなりに満足の行くものが出来た。前段階でしっかりと準備したおかげで、コードを書く段階では試行錯誤が格段に少なくなり素早くコーディングができた。

これから自分がアプリやウェブサービスを作るときもこのような製作工程をきちんと行っていきたい。

Related Contents

    Page Not Found.

Pickup Contents