ワイヤーフレームからデザインをつくってみたPart1.-表現の方向性を決めよう編-
こんばんは！🍋
今回は、『既にあるワイヤーフレームを元に、WEBサイトのTOPページをデザインしてみよう！』という会社からの課題にチャレンジしました！
いざ自分でデザインするとなると、どういったプロセスを踏むべきか分からず途方に暮れていましたが…
BONOというデザインコミュニティにて、この課題を解決してくれるような学習コンテンツがあり、それに沿って完成形に至るまでのプロセスを記事にしたいと思います。（✏️下記参照）
自分の備忘録のためにも、下記の通り大きく3つのパートに分けて記事を書いていきます。
ーーーーーーーーー
①表現の方向性を決める
②具体的なアイデアを発散する
③デザインの詳細を詰める
ーーーーーーーーー
本記事は、【①デザインの表現の方向性を決める】について、BONOのコンテンツで学んだことと、自分が作るWEBサイトに置き換えてどう考えたかをまとめております。
概要（ワイヤーフレームの情報）
-焼肉屋さん みやび
-六本木にお店を構え、コンセプトは【港区の隠れ家】
-お店の特徴
・新潟県雪室 熟成焼肉を使用
・遠赤外線で焼く無煙ロースターを使用
別途素材はいただいていますが、WEBサイトをつくる経緯やターゲット情報などは特にないので、そのあたりも自分で想像しながら作成していく流れとなっております。
では早速、進めてまいります！
-表現の方向性を決めよう編-
1. 目的を定義する
表現の方向性を決めるためには、大きく3つのステップがあります。
まず初めに、『目的を定義する』ことからスタートします。
●ユーザー視点：誰に作るのか？
誰がどういう気持ちで見るか、情報を伝えた後にどういう気持ちになってほしいかを想像した状態で作る
→何も考えずに作ると、見た目が優先されたり、あちこち彷徨うことになるため、ここでしっかり定義する必要があります。
●運営視点：作る目的
サイトを訪れた人に何をしてほしいのか
→例えば、知ってほしいと買ってほしいという目的は全然違います。作る目的を決めることで、表現の優先度が決まってくるため、デザインを作る上での取捨選択が容易になります。
ということで私も上記を参考に、ユーザー視点と運営視点の2つに分けて、
焼肉屋のWebサイトの目的を定義しました。↓
2. 参考を集めてイメージをつかむ
次のステップは、『参考になりそうなサイトを調べて集め、自分の作りたいデザインのイメージを掴んでいく』ことです。
なぜこのステップが必要かというと、下記の理由が挙げられます。
・ビジュアルのアイデアを出すことで、イメージが出しやすくなるため
・見た目の方向性を想像することでどんなデザインかを定義しやすくするため（"かわいい"と一言で言っても様々なデザインがあるので、実際のイメージがあるとやりやすくなる）
・制作するブレをなくす
ということで、下記の流れで参考を集めてみました！
①Pinterestやギャラリーサイトで以下を検索
・同じ機能を提供している媒体（今回でいうと、焼き肉屋さん）
・カテゴリーが同じもの（今回でいうと、飲食 / 居酒屋etc.）
・似た結果や感情を生み出そうとしているもの
②集めてから分類分け
・カテゴリごとに分類する
・どういうふうにレイアウトしているか、どんなふうに訴求しているか、ビジュアル目線なのか、どの箇所にボタンを置くなど、その業界の王道のデザインを分析する
・デザインの雰囲気はどっちのほうが今回作るのに当てはまるかを想像する（クールなほう？カジュアル系のほうが近いのか？）
・調べながら、どの方向性が良さそうかをメモしていく
以下集めたものがこちらです。
参考サイトを集めてみて気付いたことはこんな感じです。
・焼肉屋さんは、黒背景にすることでお肉を引き立たせるデザインが多いが
一方でクリーム色背景を使うサイトもいくつかあり、こちらも料理と相性が良さそう
・高級料理屋のほとんどは、フォントは明朝体にしている
・グローバルナビを縦書きにすることでお品書きのようなイメージを出している
・TOPに料理を持ってくるか、人なのか、店内なのかでだいぶ印象が違う
（料理＝味の美味しさを伝えたい / 人=職人がつくる=安心感? / 店内＝お店の雰囲気）
3.グラフィック方針を言葉にする
表現の方向性を決めるための最後のステップは、『グラフィック方針を言葉にする』ことです。
ユーザーさんがWebサイトを見た後に、どういう状態に変わるといいのか？見た人に与えたい印象を考えていきます。見る前の感情と、見た後の感情、気持ちを整理することで、今後のデザインのテイストや配色など決める際の指針になっていくためです。
以下に、焼肉屋のWebサイトのグラフィック方針を言葉にしました。
以上、3つのステップで表現の方向性を決めていきました！
終えてみた感想は、この手順が、自分の中のデザインイメージやアイデアを発散していくためにも、クライアントとの方向性をすり合わせていくためにもすごく重要なパートであることを認識しました。
次は、【②具体的なアイデアを発散する編】を進めてまいります。
ではでは最後まで読んでいただきありがとうございました！🌈
この記事が気に入ったらサポートをしてみませんか？