【自主制作】社交ダンスドレス制作アトリエ　オーダーwebサイ制作（デザインカンプ）

■使用ツール：Photoshop・Illustrator

■制作時間：約60時間

■制作範囲：　企画｜ 情報設計｜ペルソナ深堀り｜画像選定｜コピーライティング｜

　　　　　　ロゴ制作｜ワイヤーフレーム｜PC・スマホ版デザインカンプの作成

｜目次｜

1. 制作物（PC・スマホ版デザインカンプ）

2. 制作概要

　①要件定義

　②ペルソナ

　③トンマナ

3.工夫したこと

　①メインビジュアル

　②ABOUT

　③COLLECTION

　④CTA

　⑤ナビゲーション

　⑥フォント

　⑦レスポンシブデザイン

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

1. 制作物（PC・スマホ版デザインカンプ）

2.制作概要

　①｜要件定義

　②｜ペルソナ

　③｜トンマナ

　　洗練されたNY/ブルックリンスタイルのアトリエ工場をイメージした雰囲気。

　　ドレス写真が華やかなので、全体的にモノトーンな印象に温かみを加えたイメージ。

　　上品さはあるが、そこまで気取らない。（高級感を出しすぎない）

３．工夫したこと

①メインビジュアル　メインビジュアルでは、ドレス・ダンスのイメージだけではなく、作る側であるアトリエのイメージも持ってもらいたいと思い、画像イメージを３パターン用意しました。「手作り=オーダーメイド」の特別感が出るような写真を選びました。

動きは、3パターンの画像が、ふわんと遷移するようにデザインしました。

また、サブタイトルである「Order Made Dress」の文字をぐるくると回るようなデザインにしました。こちらはダンスのターンをイメージしています。

②ABOUT

本サイトのコンセプトと並び、作り手側の紹介を載せることで、この人に作ってもらいたいと思ってもらえるようにしたいと考えました。

③COLLECTION

ドレスのサイトですが、社交ダンスドレスであるため、ダンスの躍動感がでるような写真を中心に選びました。

また使用素材のメモ書きの装飾を入れることで、ドレスに注目ができる作りにしています。

④CTA

目的がオーダー受注なので、メインビジュアルから「ORDERFROW」までの流れをできるだけ切らずに「ORDER」ボタンまで到達するようなデザインを心がけました。

⑤ナビゲーション

常に追尾してきても、どの画面デザインにも邪魔にならないシンプルなナビゲーションデザインにしました。

⑥フォント

洗練されたイメージにするため、明朝体とセリフ体を選びました。

⑦レスポンシブデザイン

スマホでは、ハンバーガーメニューを実装しました。

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

・カラー、フォントの統一感をだすことで、伝えたいイメージをより強く表現できると学びました。

・当初デザインカンプを横幅1366pxで作成してしまい、完成したあとで現在の横幅がもっと広いPC画面が主流だということを知りました。

横幅を1920pxで考えた際、はじめに作成していたメインビジュアルのデザインでは物足りないものになってしまったため、メインビジュアルをイチから作り直すことにしました。

キャンパスの大きさによってもデザイン性を変える必要があることを学び、また主流のサイズなどニーズに対して常にアンテナを張っておく必要があることを学びました。

・レスポンシブデザインは、スマホ版では全体サイズが小さくなるため、できるだけPCデザインの雰囲気を変えずに、どのポイントをより強調させるかや、シンプル化するかをよく学びました。

今回はじめてwebサイト作成を、企画から考え形作っていくなかで、学ぶことがたくさんありました。

要件定義で指針を立てて、目的にそったワイヤーフレームを作成することの重要性を知りました。そこが具体的に固まって居なかったり、方向性がぶれてしまうと、デザインカンプでのデザインの完成形がなかなか見えず、納得のいかないものになってしまうということがわかりました。

できるだけすべての要件を具体化して言語化ができるようにデザインしていくことが重要だと学びました。

これからコーディングに入り、実装を目指す予定です。

コーディング完成後は、またこのポートフォリオを更新したいと考えております。

最後まで読んでいただきありがとうございました。