ワインWEBサイトのランディングページ（LP）

制作時間　4日間　 使用ソフト　HTML+CSS

URL https://ss321635.stars.ne.jp/lp/

• ポイント
  デザインラフ（背景グレー）を忠実に再現しました。高級感を出すために余白を大きく取り、配色の明度を低めにそろえました。殺風景になりすぎたので、高級感を損ねないようにsectionのbackgroundの右上と左下にカッコ状の装飾を入れました。後、sectionの中心にもよく見なければ気が付かない程度のギリシャ数字を入れてあります。装飾はHTMLには影響ないようにCSSのbefore、afterを使って作成しています。デザインラフの段階ではコーディングできるか半信半疑でしたが、テスト的にコーディングしてみたところ、何とか思い通りに配置できることが分かったので、本番にも採用しました。
• 感想
  タグの名前やインラインブロック要素の使い方をよく理解していませんでしたが、トライ＆エラーとWEBサイトの検索で問題を解決でき完成させることができました。これで少しコーディングも自信が付きました。

レスポンシブWEBデザイン

制作時間：4時間　使用ソフト：HTML+CSS

• ポイント
  完成したPC版のLPに対し、スマートホン（650px以下）でも見やすいようにRWD対策を行いました。４列になっていたリストを２段にし、横並びになっていた画像とテキストを縦配置に変更しました。また、表示幅を変えるとファーストビューの画像とタイトルのバランスがおかしくなるので、いろいろ調整しました。
  自分のスマートホンのCSS表示幅が450px以下になっていたので、320pxまで対応できるように追加対策をかけました。
  追加で350px以下になると、ハンバーガーメニューが開くようにWEBツールを組み込みました。
• 感想
  RWD対応は複雑なのかと思っていましたが、プロパティーを1～2個書くだけでできてしまいました。むしろどう見せるかを考える方が難しと感じました。

WEBページのデザインラフ

作業時間：４日間　　　使用ソフト　XD

• ポイント
  最初に背景を暗いグレーにしたデザインを作成しました。制作当初は背景以外は明るい色で作成していましたが、いろいろな高級感のあるWEBサイトを観たところ、見た目で分かるような配色がほとんど使われていなかったので、これに習って明度を抑えて全体的な明るさが変わらないようにした。写真も同様に元画像を編集しなおして、背景と明るさを合わせるようにしています。また、写真やTEXTの間隔を広くとり、高級感が出るようにしました。
  しかし、クライアント様によっては明るいデザインが良いという場合も考えられるので、代案として配置や文言は同じでBackgroundを明るいグレーにしたデザインも制作しました。
• 感想
  どうすれば高級感を出すことができるかを調べていて気が付いたことは、メインの主張以外のデザイン要素を削り、余白を大きくとって、メインの主張を際立てるということのように感じました。自分の作品が高級に見えているかはわかりませんが、デザインの奥深さを感じることができました。

WEBサイトのLPのワイヤーフレーム

制作時間：３日間　　使用ソフト：Photoshop

• ポイント
  最高級ワインの在庫処分のため、普段は行わない限定的なキャンペーンをやることになったという想定です。クライアント様からは「キャンペーン＝安っぽい」にならないようにWEBサイトのページを工夫してほしいと要望されています。
  ワインの高級感は損ねることなく在庫を減らす方法として、新規会員登録者のみにキャンペーンを行うことを提案し、「特別な出会い」というキャッチフレーズをつけました。新規会員という以外にパートナーや恩師、お世話になった人への贈り物として高級ワインとは縁遠い方にもご利用いただくことをお勧めするようなキャンペーンにすることを狙っています。
• 感想
  ワイヤーフレーム段階で文章の文字の大きさやボリュームなどを検討しようとしましたが、実際に配置するとイメージが変わってくるということなので、今回はsectionのイメージだけを決めて次に進むことにしました。この段階ではデザインラフでどんなものになるか？コーディングができるのか？全く予想をつけることができず、不安を感じていました。

推しのkimono WEBサイトのランディングページ（LP）