LP制作｜情報設計・デザインカンプ

｜制作概要｜

　制 作 期 間 ：約4週間（平日2時間、休日5時間の作業時間）

　　　　　　　１▷情報設計（2日）

　　　　　　　２▷ワイヤーフレーム（4日）

　　　　　　　３▷PCデザインカンプ制作（７日）

　　　　　　　　　SPデザインカンプ制作（5日）

　　　　　　　４▷ブラッシュアップ（２日）

　　　　　　　５▷コーディング（10日）

　制 作 範 囲 ：情報設計、ワイヤーフレームの制作、デザインカンプ、コーディング

　使用ソフト：Photoshop、Atom

｜目次｜

　1. 要件

　2. 制作物

　3. 工夫したところ

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

１.要件

■要件定義

クライアント事業内容：神奈川県茅ヶ崎市でマルシェを定期的に開催

　　　　　　　　　　　茅ヶ崎市の魅力を発信するために開催している

サイト制作の目的：マルシェへの集客アップ

　　　　　　　　　出店者数の募集

ターゲット：20代〜30代男女

　　　　　　自分の持ち物にこだわりを持ちたい人（購入者側）

　　　　　　自分の作ったものを販売したい人（出店者）

ペルソナ：

２.制作物

■ワイヤーフレーム

コンテンツ内容：

　メインビジュアル

　お知らせ

　コンセプト

　出店者情報

　参加者の声

　アクセス

■PCデザインカンプ

　デザインのイメージ：落ち着いた印象、静か、波が静かに音を立てているイメージ

　　　　　　　　　　　湘南の雰囲気が伝わるよう、写真を多めに使用

　　　　　　　　　　　落ち着いた印象を出すために淡色をメインに使用

■設定した配色

メインビジュアルの海の青を基調に落ち着く印象のある淡色を使用しました。

全体がまとまりつつ、おしゃれな雰囲気を出せるように繊維ボタンには淡い緑と黄土色を使用しました。

■設定したコンテンツの順

サイトを検索して訪れた顕在層に必要な情報をすぐに伝えられるようお知らせを上部に配置。

メインビジュアルを見て少しでも興味を持っていただいた方にどんなマルシェか知ってもらった上で、行ってみたいと思ってもらえるようにコンセプト→出店店舗の順にしました。

出店を検討されている方には、実際に過去出展した方のレビューがある方が信頼感を与えられると考え、サイト内に配置しました。

３.工夫したこと

▼情報設計（ペルソナにあったコンテンツ配置の整理）

・ペルソナに響きそうな配色、コンテンツの配置を意識しました。サイトを訪れる方が求めている情報をわかりやすく伝えつつ、より興味を持っていただけるような流れで制作しました。

▼色味の調整

・写真を多く使っているため、色味にばらつきが起こらないよう、写真の明るさや彩度を調整しました。

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

▼余白を取り入れることによる効果

・余白の取り方で、可読性だけでなくサイトの雰囲気も作り上げることができるということを学びました。（余白が多いことにより、スタイリッシュさや、シンプルさ、高級感を演出できる）

▼ワイヤーフレーム（情報設計）の必要性

・情報設計がしっかりしていると、サイト制作を進める上でもブレが生じにくく、制作に行き詰まった時にも目的に立ち返りやすいと思いました。

▼WEBデザインに取り組む基礎的な考え

・フォントサイズやコンテンツの幅、画面上での見え方などの基礎を学びました。実際にフォトショップ上で見る文字サイズと、WEBページとして見える文字サイズの違いも認識ができ、今後のWEB制作に必要な基盤となる学びでした。