D0ce24bda17f39e1

RUCO

OVERVIEW

三重県四日市市の住宅街にひっそりと佇む、青い扉が目印の隠れ家カフェレストラン『RUCO』のWebサイト

YEAR 2022

01. 基本情報

制作日数:50日
担当範囲:すべて
使用ソフト・技術:
HTML / Sass /JavaScript / jQuery / PHP / Illustrator / Photoshop / XD / Animate / Visual Studio Code
URL:https://zumiino.org/ruco/

02. コンセプト

三重県四日市市の住宅街にひっそりと佇む、青い扉が目印の隠れ家カフェレストラン、RUCO様にご協力いただき、お店のWebサイトを制作させていただきました。

RUCOの穏やかで落ち着く雰囲気や、美味しい料理など、お店の魅力が見た方に伝わるようなWebサイトになるようにこだわりました。

03. 制作過程

03-1. ヒアリング

まず初めに、お店の方にヒアリングを行いました。
様々なヒアリングシートを参考にし、自作のヒアリングシートを作成しました。

●RUCOの雰囲気を感じとってほしい
●女性らしい柔らかいデザインに
●動きのあるWebサイトに

RUCO 様のご要望としては、Web サイトを見た方にお店の雰囲気を感じとってほしい、若い女性のお客様がターゲットなので、女性らしい柔らかなデザインにしてほしい、また、動きのある Web サイトが好みなので、動きがある Web サイトにしてほしいとのことでした。


03-2. 使用する色・フォントを決める

ヒアリングが終わり、ご要望を考慮しながらWebサイトに使用する色を決定しました。
お店の雰囲気を感じとっていただきやすくなるよう、実際に店内に使用されている色を使うことにしました。

扉のブルー、外壁のアイボリー、内壁のブルーグリーンから色をとり、5色に決定しました。

フォントは、上品で落ち着いた印象のヒラギノ明朝 ProNを使用しています。


03-3. イラスト作成

女性らしい雰囲気にする為に、線画を多く取り入れようと思い、自分でイラストを描いたり、写真をトレースしたりしました。

スパゲッティの写真のトレースは、一番骨が折れましたが、とても楽しかったです。

Webサイトに使用しなかったものも含めると、結構な数になりました。


03-4. デザイン作成

それから、XDでワイヤーフレームを作成しました。

● トップページ

・About(お店の紹介)
・Menu(メニューの説明、メニューページへのリンク)
・Instagram(お店のInstagramアカウント、#投稿)
・Shop info(お店の情報)

●メニューページ

・通常メニュー

・期間限定メニュー

・ドリンクメニュー

上記の構成で制作しました。


03-5. コーディング

デザインが完成したら、さっそくコーディングに取り掛かりました。

今回の作品は、要素の重なりが多く、position:absolute;を多く使用したので、要素の重なりの意識を身につける良い機会になりました。

理想のデザイン通りにコーディングすることに苦戦することも多かったですが、それも含め、制作していて楽しかったです。


04. 工夫した点

ファーストビューは、お店の特徴である青い扉の写真を使用しました。

メニューは、パソコンではグローバルメニュー、モバイルではハンバーガーメニューになるようにしました。


下にスクロールすると、このような画像があります。

住宅街にひっそりと佇むお店には、小窓はありますがレースのカーテンがかかっているので、中の様子がぱっと見ただけではわからないです。

入店してみないと中の様子がわからない、どんなお店なんだろう?といったわくわく感と、少しだけミステリアスな雰囲気を表現する為に、画像をずらして配置したり、一部分をモノクロにしました。


RUCOのランチは、メインとデザートとドリンクのセットメニューなので、その説明と、わかりやすいように画像も用意しました。

こちらの画像は、Adobe Animateで回転し続けるように作りました。


お店のアカウントの下には、#caferucoで投稿された写真をスライドショーで表示しています。

お店の投稿の方にも#caferucoを載せていただけないかお店の方にお願いをして、載せていただけることになりました。

お客様にも#caferucoでInstagramに写真を投稿してもらいやすくするために、ボタンも設置しました。


こちらはメニューページです。

カードのようなデザインにし、人気メニューやテイクアウト可能メニューには、リボンをつけて分かりやすいようにしました。


05. 完成作品

作品URL:https://zumiino.org/ruco/

06. まとめ

実際にあるお店の方にご協力いただき、一から Web サイトを制作するのは初めての試みで、とても良い経験をさせていただくことができました。

最後まで何度も悩み、こだわることが楽しく、さらに Web デザイナーとしてこれから活動していきたいという気持ちが強くなりました。

新しい技術やアプリケーションを使用したことで、以前よりもできることが増え、もっと様々な制作に挑戦したいという制作意欲が湧きました。

これからも、普段から様々なデザインに触れて、デザインの幅を広げ、新しい方法や技術を取り入れながら、知識を深めていきます。

WEBSITE