このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 カフェサイトをデザインしていこう (01:04) 無料公開中- アウトライン
- ファイルの作成
-
#02 レイアウトガイドについて理解しよう (01:28) 無料公開中- レイアウトガイドの概要
- 今回の設定
-
#03 レイアウトガイドを設定してみよう (02:19) 無料公開中- フレームの設置
- レイアウトガイドの設定
-
#04 ヘッダーをデザインしてみよう (01:43) 無料公開中- フレームの設置
- 塗りの設定
- サイトタイトルの設置
- 書体の設定
-
#05 見出しや本文を配置していこう (02:57)- 見出しの設定
- 本文の設定
- 要素間の距離を調べる方法
-
#06 商品カードをデザインしよう (02:45)- 見出しの設定
- フレームと長方形の違い
- 商品カードの設置
-
#07 コンポーネントを活用していこう (02:27)- マスターコンポーネントの設定
- インスタンスの作成
- 「お食事」セクションの設置
-
#08 残りのコンテンツを配置していこう (02:58)- 「アクセス」セクションの設置
- フッターの設置
- 表示確認
-
#09 Unsplashのプラグインを使ってみよう (02:27)- プラグインの導入
- Unsplashプラグイン
- 画像の読み込み
-
#10 画像を扱ってみよう (01:39)- 画像サイズの変更
- 露出やコントラストの設定
- トリミング
-
#11 画像をヘッダーに設定してみよう (02:14)- 画像の取り込み
- プロパティのコピー
- プロパティの貼り付け
-
#12 商品画像を設定してみよう (01:40)- 長方形の選択
- 画像の読み込み
-
#13 地図をはめこんでみよう (02:00)- プラグインの実行
- 地図の組み込み
- プロパティのコピー、貼り付け
-
#14 書体のスタイルを使ってみよう (01:47)- 見出しの変更
- スタイルの設定
-
#15 スタイルを変更してみよう (01:50)- スタイルの適用
- スタイルの変更
- スタイルの解除
-
#16 色のスタイルを使ってみよう (02:09)- 色のスタイル
- スタイルの作成
- スタイルの適用
- スタイルの変更
-
#17 商品の詳細ページをデザインしよう (02:58)- プロトタイプの概要
- フレームの作成
- コンテンツの設置
-
#18 プロトタイプを使ってみよう (02:00)- プロトタイプ
- フローの開始点
- インタラクションの定義
-
#19 サイトの動きを確認してみよう (02:21)- インタラクションの定義
- 動作確認
