架空レストラン「Jelly」
webサイト

URL:http://jelly.maple-nk.com/index.html

製作期間:1ヶ月半(2023.11~2024.1)

使用ソフト:VScode/clip studio/illastrator

対応機種:スマホ/PC

ターゲット:20代後半~30代男女

担当:立案/デザイン/コーディング/公開


デザインについて

  1. シックで落ち着いた雰囲気を表現するため見出しはゴールド、背景はグレーにし、目立たせたいコンセプトのみゴールドの補色であるブルーに。配色ではなるべく使用する色を少なくすることを意識しました。
  2. 窮屈に感じさせないように余白を多く、シンプルなデザインに。
  3. メニューはページ上部に固定し、いつでも見たいページにジャンプできるよう設定
  4. 選択している箇所を分かりやすくするために、ヘッダーメニュー、メニュー画像、SNSアイコンはカーソルを合わせると色が変わるように設定。
    (アクセス情報の右部は、Googleマップが埋め込まれています)

web制作の学習を始めてから、初めて全て自分で作ったものになります。
adobeソフトも制作時はまだ未学習だったため、ロゴ・メニュー等のデザインはclipstudioで行いました。(デザイン修正の為、ドリンクメニューのみillustrator使用)
まだまだ改良の余地があるため、適宜修正を加えていく予定です。

ロゴデザイン

「Jelly」という文字をクラゲの足に見立て、クラゲの傘の部分が波にも見えるようなデザインにしました。
色は、お店の雰囲気にも合うようにモノクロにしました。

メニュー

こちらも余白を広く取りシンプルなデザインにしました。1ページ目をお店のおすすめメニューとし、三方裁ち落としを使用することでダイナミックに表現しつつ余白で落ち着きも取り入れました。2,3ページは余白を作るために料理の周りの背景は切り抜き、交互に配置することで動きをつけました。

メニューデザイン案