デジタルハリウッドwebデザイナー専攻の制作課題でLPを制作しました。 URL https://nishiyamayuki.sakura.ne.jp/sugutabe/ ・ターゲットユーザー まだ成長期の子どもがいるママ。 働き盛りの夫にも、まだまだ元気でいてほしいと思っている妻。 そこそこ食にお金をかけられる（普通のスーパーの1.5~2倍程度）。 食にこだわる自分が好き。「ていねいな暮らし」が好き。 ・訴求したい事項 1. 無農薬・有機野菜・オーガニック野菜 2.　「身体にいいものを販売している（いいものを作っている農家をセレクトしている）」ブランディング 3. 産地直送（だから新鮮でおいしい） 4. 旬のものが味わえる ・ページイメージ（色・テイスト） ナチュラルで明るく、清潔感がある感じ。 LPなので、ある程度リッチなデザイン（ディティールに凝ったもの）にしたい。 でもギラギラした昔ながらのLPにはしてほしくない。 お試しセットのボタンが目立つようにしてほしい。ターゲットユーザーはスマホもよくみるので、スマホでも使いやすくしたい。 ①無農薬・有機野菜の通販サイトをリサーチ。 通販サイトだけでなく農場のwebサイト等も参考に「ナチュラルで明るく、清潔感がある感じ。 ある程度リッチなデザイン」を探しました。 イラストは多様せずに写真をメインとし、シンプルで余白のあるイメージで制作することになりました。 ②Figmaでワイヤーフレームとデザインカンプを作成。 「お試しセットのボタンが目立つようにしてほしい」とあったので、Photoshopで写真を加工し、野菜をあしらったボタンをデザイン。 「ご注文はこちら」とボタンクリック後にどんなページに遷移するのかをイメージできる事を意識しました。 ③HTML・CSSでコーディング。 シンプルなデザインにした事とフォントをNoto serif JPのみで構成した事で、デザインが単調にならないように意識。 ・文字のジャンプ率。 ・PCの「スグ食べが選ばれる3つの理由」では、3つの理由を交互に配置する。 ・農家さんや野菜の画像をただ並べるのではなく、スライダーで画像が流れる動きを追加。 ④SPの画面が縦に長くなりすぎないように、「食べてわかった、この違い」を横にスワイプできるように表示。 ・できたこと。 シンプルなデザインができたこと。 単調にならない工夫ができたこと。 ・反省点 シンプルゆえにクオリティを上げるのが難しく、Figmaでのデザインに時間がかかってしまった。 スライダーを完全に理解しておらず、最初はうまく動かすことができずに、実装に時間がかかってしまった 。 ・改善点。 デザインの引き出しを増やす。 シンプルなデザインからイラストを使った派手なデザインまで、いろいろなデザインに挑戦する。 javaScript、jQueryの理解を深める。