【ExciteCode】第3課題：マッサージサロン紹介サイト

デザインカンプはこちら

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

▼デザインカンプのURLはこちら
https://www.figma.com/file/2oe84X96ElUuwsVx8atSBP/%E3%83%9E%E3%83%83%E3%82%B5%E3%83%BC%E3%82%B8%E3%82%B5%E3%83%AD%E3%83%B3%E7%B4%B9%E4%BB%8B%E3%82%B5%E3%82%A4%E3%83%88?type=design&node-id=0%3A1&mode=design&t=YJKnAUAViMtaSZws-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/

ヘッダーを制作する

Serviceセクションを制作する（前編）

Serviceセクションを制作する（後編）

Voiceセクションを制作する

フッターを制作する

画像を圧縮する

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

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

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