第4回は、前回に続き『デザイン模写』を行います。ボックスや文字等に動きを付けるアニメーション設定もご紹介。より高度なカスタマイズに挑戦しましょう。
目次
デザイン模写を行う参考サイト
「お問い合わせはこちら」の部分を再現してみよう
まずは構成を確認しましょう。
［左側］イラスト
背景の上に突き抜けてレイアウトされています。
ヒント
マージンにマイナスの数値を設定すると…
イラスト素材サイト3選
商用利用も可能なフリーイラスト素材サイトは他にも！
ただし、必ず素材サイトの利用規約（ライセンス）を確認しましょう。
よくある主な禁止事項
- 著作権のある素材を自分の著作物と偽って使用
- 著作権者の許可を得ずに無断で素材を利用
- 素材の再配布、貸与、譲渡、転売
- インターネットやCD/DVDなどを介して素材を共有
- 再配布や譲渡に該当する場合がある
- 素材を商標登録や意匠登録すること
- 素材を使ってキャラクターを作成
- 飾りとして使用する場合はOKなどのパターンもあるかもしれないが、基本的には許可されていない
- 素材を使用して商品のコンテンツとして販売
- 飾りとして使用する場合はOKなどのパターンもあるかもしれないが、基本的には許可されていない
- 公序良俗に反する使い方
- 誹謗中傷目的やアダルト、ポルノ関連の内容が含まれるコンテンツなど
- 写真素材に写っている人物の名誉や人格を傷つける使い方
常識的な使い方を心掛けましょう。
［右側］見出し+本文
フォントと文字サイズを変更してみましょう。
見出しと本文との余白は、見出し側にマージンを付けて調整。
［右側］ボタン
ボックス内に、テキスト（左側）と矢印アイコン（右側）が配置されてます。
ヒント
方向と配置を変えると…
マウスカーソルが乗ると、ボタンの大きさが変わります。
ヒント1
スタイルバーで、特定の条件時にボックスのスタイルを変化させる設定項目を見つけよう
ヒント2
「条件付きスタイル」と「モーション（アニメーション）」を組み合わせると…
「ヘッダー」部分を再現してみよう
先ほどと同様、まずは構成を確認しましょう。
［左側］ロゴ
STUDIOで使用できる画像形式は以下の通り。
- png
- jpg
- svg
- gif
パスデータを用意できる場合は、SVG形式がオススメ。
「SVG」は、ウェブ上でも表示可能なベクターファイル形式。
画質を損なうことなく、大小さまざまな解像度に拡大が可能。
［右側］メニューボタン
白のボックスには、角丸+ドロップシャドウが付けられています。
マウスカーソルが乗ると、ボタンの背景色と文字色が変わります。
［右側］無料相談ボタン
マウスカーソルが乗ると、ボタンの大きさが変わります。
次回予告
次の授業もSTUDIOで様々なパーツ制作を行います。
次回をお楽しみに！
