Developing Designer's Diary

未経験からUI/UXデザイナーを目指して勉強中です。

Webグラフィック制作物②サラダ専門店のWebサイト(課題)

引き続き、学校の課題として取り組んだWebグラフィックの制作物についてまとめていきます。

 

××専門店のWebサイト(複数ページ)

お題

前回の音楽配信サービスのLPはファーストビューのみ・写真使用禁止でしたが

今回は複数ページのWebサイト、写真使用OKでした。

 

具体的な各ページの構成は以下のように指定がありました。

 

  • ページ1
    • ヘッダー
      • SNSアイコン
    • メインビジュアル
    • ロゴ
    • こだわり
      • こだわりの3つのポイント
  • ページ2
    • 商品紹介
  • ページ3
    • 食べ方(アレンジ可)
      • 3ステップに分ける
        1.〜〜〜
        2.〜〜〜
        3.〜〜〜
  • ページ4
    • 地図と店舗情報

 

制作物

 

私は、「ファッション感度の高い若年層に向けたサラダ専門店」という設定でサイトをデザインしました。

 

トップページ

メニューページ

注文方法の説明ページ

アクセス・店舗紹介ページ

ちょっとサイズが大きくて、見づらくて申し訳ないんですが。

 

若い人向け、中でもファッション感度の高い人向けということで

オシャレ系のブランドのグラフィックで最近よく使われているイメージのある、「New York」という書体をロゴに選びました。

この書体を使ってデザインするのが念願だったので、遂に叶ってよかったです…!

 

ロゴに引っ張られた感もあるんですが、ちょっとアンニュイな雰囲気があるとより今っぽいのかなと思い、全体的に静かで落ち着いたトーンにしています。

(前回の音楽配信サービスの課題で痛感しましたが、にぎやかなトーンのデザインが不得手という自覚もあり、得意分野に逃げてしまった節もあります。。)

 

飲食店のWebサイトで参考にしたのは、

おしゃれサラダ界のトップティア、CLISP SALAD WORKSさんはもちろん

こちらのフレンチレストランも、繊細だけど信頼感のある感じが素敵だと思い、見させていただきました。

 

あと、Webデザインとしては今回参考にしていませんが、アンニュイ感のイメージとしてもともと私の念頭にあったのは

若年層向けの低アルコールカクテルのブランド、koyoiさんです。

koyoiのブランドビジュアル。エモい!!

 

こういう、いまどきっぽいエモいニュアンスを出したいと思っていたのですが

サラダという商材が持つヘルシーさを損なうのもどうなんだろう?と迷い

けっきょくあまりエモいニュアンスは出しきれませんでした。

強いてあげるなら、エモさ要素といえるのは背景のグラデーション…ぐらいですかね…。

 

全体的に少し寂しい感じがするので、もう少しあしらいなどのうまい使い方を覚えたいなぁとあらためて再認識しました。

 

先生からのFB

先生と私のデザインの趣味が合うだけかもしれませんが、こちらもかなり褒めていただきました。

 

「全体的に寂しい感じがする」とプレゼン時に話したところ、「写真の色味が派手なので、装飾はシンプルなほうがバランスが取れているのでは」とおっしゃっていただきました。

アドバイスとしては、「ファーストビューの写真がすべて真俯瞰なので、斜俯瞰(あおりのことですよね)なども入れると少し動きが出て、メリハリがつくかも」と教えていただきました。

 

あと、前回の課題に引き続き、文字組み(文字サイズや余白の使い方)をとても褒めていただきました。

 

「文字だけできれいに見えるデザインができたらデザイナーとして一人前。それができている」と言っていただきました。

「文字組みがきれいだと、何もない余白が光り輝いて見える。特に今回のサイトだと、ファーストビューのこのあたりは光り輝いている」

とのことでした。

このあたりが光り輝いて見えるらしい

すごく嬉しかったです。たくさん褒めてもらえて自信になりました!

 

文字組みなどデザインの基礎はある程度できていると思っちゃっていいのかな?と思いました。

そのうえで、抜け感やこなれ感を出すためのあしらいなどの使い方をもっと勉強していきます。

 

少し短いですが、今日は以上にします!

また課題が出ているので、完成したらまとめます。