【ExciteCode】第2課題：キャンプ用品レンタルサービス紹介サイト

デザインカンプはこちら

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

▼デザインカンプのURLはこちら
https://www.figma.com/file/z0Jn28XWJ0y8uHAWEEBZdS/%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%97%E7%94%A8%E5%93%81%E3%83%AC%E3%83%B3%E3%82%BF%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E7%B4%B9%E4%BB%8B%E3%82%B5%E3%82%A4%E3%83%88?type=design&node-id=0%3A1&mode=design&t=0shH0K7Z5wYRqd6i-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/

ヘッダーを制作する

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

Storyセクションを制作する

Experienceセクション（PC）を制作する

Experienceセクション（SP）を制作する

フッターを制作する

画像を圧縮する

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

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

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