SAYAKA

DESCRIPTION概要

実務未経験の時に作成した架空カフェサイト（デザイン・コーディング）をVue.jsで作り直してみました。
GitHubにてコードを公開していますので、ぜひご覧ください。

URL: https://github.com/Sayaka-Kuwata/livre-cafe

⚪︎コンセプト

• ・「本が読めるカフェ」という設定なので、若い人だけでなく昔から本に馴染みのある方まで幅広い層が目にしても違和感のないwebサイトを意識
• ・スタイリッシュかつ複雑な構成にならないよう、あえてシングルページにしました。

⚪︎デザイン

• ・書店であることをアピールするために、メインビジュアルの両サイドに縦並びの文字を入れました。
• ・お店のメインカラー（#2e8b57）を決めてお店自体とwebサイトに印象付けをしました。

⚪︎実装

• ・Vue.jsとNuxt.jsを使用して「ヘッダー」「フッター」「見出し」「カード」等、再利用化できるものは部品化し、コンポーネント化
• ・DOM構成を整理して無駄なSassの記述がないよう実装
• ・どのデバイスで閲覧してもレイアウトの崩れがないよう実装
• ・ユーザーが混乱することのない程度のアニメーションを実装