RUCO

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 デザイナーとしてこれから活動していきたいという気持ちが強くなりました。

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

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