架空サイト_整骨院

整骨院の架空サイトを作成しています。

今はtopページのコーディングまで出来ました。
最終的にはレスポンシブまでしたいです。
時間があれば下層ページも作成したいのですが^^;

◆デザインカンプ

デザインカンプの初稿はスクールの講師の方に添削していただきました。
↓初稿

トップページ_初稿

①ファーストビューがリラクゼーションマッサージっぽい。整骨院ではない。
②フォントを使用しすぎ、webフォントではないものがある
③ボタンの茶色部分にこの水彩感をだしてみては?
④診療内容の部分はカテゴリーでそのページに飛べた方がいい

とのことでした。
フォントは知識がほんとなかったと...反省。適当にやりすぎ!

↓再校

トップページ

①ファーストビューは整骨院の室内の写真をバックに入れて院内の雰囲気がわかるようにしました。
②フォントは全て「源ノ角ゴシック JP」に変えました。
③ボタン部分を水彩っぽくしました。
④診療内容はカテゴリーでボタンを作成して飛べるようにしました。

あとバックの色がキツかったので透明度を落としました。
そして全体的に色味が和っぽかったので少し明るくしました。

◆コーディング

ほんと初めてのコーディング色々発見がありました。
忘れないようにメモします!
・画像の名前をキッチリつけること
 →画像を入れるときに探せない
・class名わかりやすく
 →あとで微調節するときにめちゃくちゃ大変でした
・余白にルールを決めるとこ
  →見た目だけでこんなもんかな?とかで余白をつけるとあとでガタガタに
・真ん中に寄せるのに苦労しました。。。
 →ここに text-align: center;かけてもならないとかすごくありました。
・カンプ通りにしたいのにcssで上手くいかなくて断念した部分あります...
 →仕事になると許されないだろうと思いながら...心が折れたのでそのままです..だめですね...

初めてのコーディングは、分かるところからドンドンコーディングしていく方が良いと聞いたのでわからないところは抜かしてわかるところから、ガンガン作っていきました^^;そしたら自分の知識のなさ、デザインカンプの段階でコーディングまで見据えれてない!など色々気付けました。

スクールの講師の方がガシガシ手を動かすこと!
と教えてもらったことを思い出しました。
これからも手を動かすことを意識して頑張りたいです!

とりあえず途中経過を忘れないうちに残しました。

◆今後すること

整骨院サイトのレスポンシブ
ポートフォリオ


この記事が気に入ったらサポートをしてみませんか?