読者です 読者をやめる 読者になる 読者になる

クライアントワーク(今週やったこと)

今日は今週やった作業のbofore_afterをを載せていこうと思います。
before
トップページ
f:id:paris1204:20160421092651p:plain
ケーキのページ
f:id:paris1204:20160421092509p:plain

after
トップページ
f:id:paris1204:20160421094728p:plain

ケーキのページ
f:id:paris1204:20160421094745p:plain
f:id:paris1204:20160421095820p:plain


作業内容
トップページ
・写真だけだったのを写真の前に枠になる画像をpositionで固定し、z-indexで一番上に配置しています。その後ろで写真がスライドするようになっています。

ケーキのページ
・丸い画像だけだと検索した時に違和感を覚えるという指摘を受け、画像は四角今まで周りに白いボーダーをつけて背景色とのコントラストができるように工夫してみました。あと、画像だけより商品情報を入れるところを作った方がそれぞれの製品が引き立つと思ったので画像の下に入力スペースを設けました。
ケーキを乗せているお皿の色の主張が強いため画像補正をかけてケーキの色を少し濃くしました。
クリスマス限定の商品にはクリスマスを連想できそうな画像をpositionで配置しました。
製品を種類ごとに分けるnavをイラストレーターで作りました。





今後すること
・すべてのページ
ページの上下左右にスペースがあるのでespデータで可愛いロゴを引用する。
footerにnavigationを追加する。
スマホ用のデザインも考える。
クライアントに途中経過を確認してもらい、早めに変更点を見極める。

・トップページ
まだスライダーの枠画像は確定ではないので、時間の許す限り色々な枠を作り、写真と枠の相性が一番いいものを作ろうと思います。
イートインスペースは相席ができないので、事前に予約をオススメするというクライアント側の要望を考慮してheaderの中に電話番号情報を載せようと思います。

・ケーキのページ
製品情報の文字色と使用するフォントを考える。
時期によっては掲載商品がないという旨とケーキの号サイズごとの大きさの表を載せる。
ケーキの情報で抜けているところがあるのでクライアントに確認する。

・shop
写真の加工をする。
どのような形式でのせるかはまだ検討中。
お店の特徴を説明する文章の入力する。

・chef
chefの情報がを時系列で短く入力する。

・contact
地図の作成(イラストレーターで)。
大山駅からの道順を写真で載せる。