【ExciteCode】第4課題：日本酒販売店のコーポレートサイト（トップページ）

デザインカンプはこちら

※デザインカンプは複製したものをお使いください。複製方法は下記で解説しております。

▼デザインカンプのURLはこちら
https://www.figma.com/file/F55tf1QhsYwKK5xvBMi35G/%E6%97%A5%E6%9C%AC%E9%85%92%E8%B2%A9%E5%A3%B2%E5%BA%97%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%9D%E3%83%AC%E3%83%BC%E3%83%88%E3%82%B5%E3%82%A4%E3%83%88%EF%BC%88%E3%83%88%E3%83%83%E3%83%97%E3%83%9A%E3%83%BC%E3%82%B8%EF%BC%89?type=design&node-id=0%3A1&mode=design&t=o780B2PqJzxjpRyw-1

【Figmaのデザインデータの複製の方法】

1. デスクトップアプリをこちらからダウンロード
2. Figmaの新規アカウントの登録
3. 「デザインカンプのURLはこちらから」のリンクを開く
4. デスクトップアプリからデザインが開かれる
5. 画面上部から開くことができるメニューから複製（下記画像参照）

ファビコンとOGP画像のダウンロードはこちらから

▼ファビコン・OGP画像はこちらからダウンロードできます

事前準備（OGPの設定、Webフォントの読み込み、変数の定義）を行う

・タイトル：ExciteCode | 深みのある風味と透明感のある味わいの日本酒をお届けします
・ディスクリプション：ExciteCodeは、最高品質の日本酒を一貫して製造しています。厳選された米と清らかな水を使用し、伝統的な酒造りの技術で深みのある風味と透明感のある味わいを実現しています。日本酒の美を心を込めてお届けします。
・仮URL：http://hogehoge.com/
・OGP画像（仮URL）：http://hogehoge.com/images/ogp-img.jpg
・サイト名：ExciteCode
・Googleフォント：https://fonts.google.com/

ファーストビューを制作する

サイドバーを制作する

前編

後編

お知らせのセクションを制作する

定番セットのセクションを制作する

おすすめのセクションを制作する

フッターを制作する

画像を圧縮する

サイトが完成したらimagesフォルダ内の画像を圧縮しましょう。

いろいろな画像圧縮サービスがありますが、僕が使用しているものは以下のものになります。

画像圧縮サービス：https://tinypng.com/