【実案件】LP制作・実装

＜ 制作概要 ＞
　制作時間　：240時間（要件定義1週、ワイヤーフレーム1週、デザインカンプ2週、コーディング2週、レスポンシブ対応1週、実装1週）
　制作範囲　：要件定義〜実装まで
　使用ソフト：Photoshop / Atom
　使用言語　：HTML / CSS / jQuery / JavaScript

＜ 目次 ＞
　1. 要件
　2. 制作物
　3. 工夫したこと
　4. 制作を通して学んだこと

1. 要件

■ 目的
　 ・商品の魅力を伝えて、お客さまのご来店を促す
　 ・イベント主催者から出店のお誘いをいただく
　 ・オンラインショップの利用者の増加

■ ターゲット
　 ・お子さんがいるお母さん世代
　▼ クライアント様と打ち合わせをし、ペルソナを独自に設定

■ 伝えたい印象
　 ・元気、やさしい、手づくり感、安心感

■ 配色
　 ・人のあたたかみを感じるようなやさしいカラー

■ キーワード
　 ・手づくり、人、素朴、あたたかみ

2. 制作物

 実装したサイトはこちら 

3. 工夫したこと

■ デザイン面

・おにぎりが商品なので和風を意識し、メインカラーとアクセントカラーには日本の伝統色を使い、背景には和紙の素材を使いました
・手づくりの温かみが感じられるよう、暖色系の配色や、ポラロイド写真がふわっと浮き出ることで表現しました
・メインビジュアル1〜3枚目と｢こだわり｣の写真は、魅力が伝わるよう撮影しました
・メインビジュアル2枚目の文字は、手書きで書くことで手づくり感を表現しました

■ 機能面
・リンクのホバーや上に戻るボタンで、ストレスなく直感的に操作できるようにしました
・メニューの商品がスライダーで流れていくことで、見ていても楽しいサイトにしました
・ツイッターのタイムラインを埋め込むことで、最新情報が伝わるようにしました

4. 制作を通して学んだこと

・クライアント様と打ち合わせをし、Webサイトをつくるしっかりとした「目的」を理解した上で進めることの重要性を学びました
・打ち合わせを元に、情報設計で各セクションの順序や伝えたい情報の優先順位をデザインに落とし込みました
・実装後、様々なOSやブラウザで確認することの重要性を学びました
・実装するにあたり、ファビコンやOGPの設定、SEO対策など、実際の運用を想定した取り組みと運用後の保守の大切さを学びました