概要

1年生の後期が始まり、Webデザインの授業で架空の和風カフェのサイトデザインをすることになり制作した作品です。どのようなコンテンツを入れるのかなどの指示があり、その中でデザインを完成させるという課題で、初めてFigmaで作った作品です。私が思う和風なデザインは、落ち着きがあって高級感がある、というデザインなので、しっかりと表現できるように余白や配置に気をつけました。

制作の流れ

デザイン

このデザインはFigmaの基本操作を学びながら制作しました。
和風なデザインを考えてデザインするという課題だったので、デザインに取り掛かる前に実際にある和風な雰囲気のサイトをたくさん調べました。その結果、縦書きで目立つような見出しが多いこと、余白がしっかりと取ってあること、高彩度の色はあまり多用されていないことがわかり、これらを意識してデザインを作っていきました。アクセントカラーには黄海松茶という伝統色を使用し、食材の画像が多いため青系などの寒色を使わないように意識しました。
デザインを調べる中で、レトロな雰囲気のデザインも何個かあったのですが、自分の思う和風とはずれてしまうため、なるべくレトロな感じは出さないように意識しました。
そして、途中成果発表というものが授業中にあり、その時に先生から、「デザインが固くて少し古い感じがする」と言われました。そのため、外観、内観の画像を崩して配置するといった修正をして、今のデザインに落ち着きました。そのアドバイスのおかげで、とてもいいデザインになったと思います。

全体図

苦労した部分

どのようにすれば和風の雰囲気が伝わるかという部分で悩むことが多かったです。しかし、デザインの方向性が決まったらスムーズにデザインの制作を進めることができました。背景などに使用している和風な柄はIllustratorで制作したのですが、この柄の制作も沢山デザインを調べながら作ったので大変でした。
そして、初めてFigmaを使っての制作で、基本操作やオートレイアウト機能など、覚えることが多く、そこも大変な部分でした。

制作を通して

ブログサイトは、デザインがかなり自由で自分のやりたいようにデザインすることができましたが、今回は架空とは言えコンテンツマップが用意されたり、和風というテーマが用意されていたりして、与えられた条件下でデザインを作るということを経験することができました。この経験があったから、後の進級制作作品にもつながっていると思います。