WEBデザインの独学はSNSの発達や、良質な本がたくさんあって誰にでも身近になりましたよね。テレワークも普及し働き方も柔軟になってきて、転職や副業を考えて興味を持った方も多いはず。実際に未経験からの学習の方法と流れを記録し、同じような方の参考になればと思います。
Contents
架空のテーマ設定でオリジナルデザイン
架空のクライアントを具体的に想定し、デザインしていきます。今回のお題は”隠れ家カフェの認知向上”で作成しました。
商品・サービスの具体的なユーザー像を考える
曖昧な想定だと、構成もデザインもいまいちピンとこないもの。まずは、具体的なクライアント＆ターゲット（いわゆるペルソナ）を考えました。
今回のクライアントは、「近所の人に親しまれる昔ながらのクラシックなカフェ」のオーナー。レトロな雰囲気の店内は、来た人誰もが落ち着ける空間を演出している。
これからは近所の人以外でも気軽に来てもらえるよう、お店の認知向上のためサイトを作成したい、というご依頼で進めていきます。
顧客ターゲットの具体的な設定を考える
昔ながらの落ち着いた雰囲気でくつろげるカフェは、顧客の年齢層は30代〜70代まで幅広い世代に愛されているお店。
オーナーも新規顧客も賑やかなお店ではなく、コーヒーを飲みながらくつろげる空間を求めている、と想定しました。
【ターゲット】
20代後半〜30代の女性
【ペルソナ】
- 女性
- 30歳
- 一人暮らし
- 都心部で事務の仕事をしている
- 仕事終わりにゆっくり読書をする時間が好き
- 英会話の勉強も始めた
- 趣味：海外旅行、カメラ、カフェ巡り
- 仕事も趣味も全力で楽しんでいる
以上が今回のペルソナです。架空でも、かなり具体的に設定することでだんだんとイメージを膨らませていきます。
ペルソナをもとにワイヤーフレーム作成
上記の情報でサイト設計をし、ワイヤーフレームを作成しました。
サイトの目的はカフェの認知向上ですが、カフェでは自家製スイーツなどもありオンラインストアも展開し、
サイト作成を活用してオンラインストアの展開もご提案します。
”シンプルな構成”で幅広い世代の人がみやすいように
ペルソナに基づく設計ではあるものの、幅広い世代にわかりやすいようシンプルな導線を意識しています。
ワイヤーフレームからデザインする
ワイヤーフレームが出来上がり、使用素材を配置していきます。（今回はフリー素材を使用）
カフェの雰囲気が伝わりやすいよう、画像の使用率を高めています。
デザインポイントは”お店の雰囲気が伝わるように”
お店の雰囲気を印象付けられるよう、とあるカフェを参考に「カフェの外観」をイメージした配色にしました。
昔ながらのカフェなどは、ホームページがない場合も多いと思います。グルメサイト・口コミサイトなどでは情報が足りない部分を補う役割を果たせるような設計を心がけました。
今回のデザインの振り返り
初めてイチからサイト設計・デザインしましたが、シンプルな物でもレイアウトは難しい。
完成したのをみても、コンテンツ間の余白やスペース・伝えたいコンテンツとデザィンのバランスがイマイチかな〜と思います。
次回は余白、コンテンツのレイアウトをさらに意識して作成します。
とにかく多くのデザイン・Webデザインに触れ、良いデザインになるように取り組みます。