![見出し画像](https://assets.st-note.com/production/uploads/images/76709124/rectangle_large_type_2_6de303e1d7470e7d3d6c3d8013c8f275.png?width=1200)
Webデザイン・マーケティング課 授業24日目
1-3時間目
プロトタイプwebデザイン
使用テキスト
P121〜P146まで
■製品一覧ページ
一度ワイヤーフレームで作ってあったリピートグリッドを削除して、一個分を作って、再度リピートグリッドにして3つ分に増やす。
リピートグリッドの中を編集する時に、手順が多かったり内容が複雑だった場合は、こんな感じで一度リピートグリッドを削除して、最初からやり直した方が早い。
![](https://assets.st-note.com/img/1650279138937-96yxsXTzk3.jpg)
■敏感肌用化粧品ページ
そろそろ、どのセクションでも目新しいことは何も出てこなくなってきた。。
画像を差し替えて、文言の大きさや色を調整。
ボタンの色を変更して、見出しを調整する。
下部の製品一覧の箇所は、すでにトップページで作ってあるので、その分を持ってくる。
■よくあるご質問ページの作成
アコーディオンで開閉するUIを作る。
まずは、以下の様なのを作る。
作り方は、普通に四角形を組み合わせているだけ。
![](https://assets.st-note.com/img/1650279925828-p3rfjyUs0D.jpg?width=1200)
これにテキストを合わせたり、マイナスマークをプラスにするなどして、以下の様に作っていく。
![](https://assets.st-note.com/img/1650279984127-2hSdvCfcwu.jpg)
■店舗情報ページの作成
今までは、線を描く時に高さが1の長方形を使って線を表現していたが、今回は線ツールを使っている。
そうすることで、破線を表現できる。
![](https://assets.st-note.com/img/1650280288880-rRQaY0B9ME.jpg)
![](https://assets.st-note.com/img/1650280357683-QfbCJzGgIH.jpg)
イラストレータから地図を読み込む際に、CCを使った方法が紹介されるが、学校の環境だと難しいので、ビットマップを使った方法で代用する。
![](https://assets.st-note.com/img/1650280479536-bdzjQmoHK4.jpg)
■オンラインショップセクションの作成
画像を配置し、その上から同じ大きさの四角形を重ねて、ぼかしを使っている。
![](https://assets.st-note.com/img/1650280692274-n9ySmu4aCa.jpg)
![](https://assets.st-note.com/img/1650280699044-29Ug8HvXqS.jpg)
不透明度を上げることで、ぼかしに使った四角形の塗りの色も少し反映される。
■メニューページの作成
アートボードの背景の色をmain-colorに変えている。
![](https://assets.st-note.com/img/1650280839662-XGdaMtwtdN.jpg?width=1200)
後はロゴ画像を配置したり、テキストを調整したり、ボタンを配置して完了。
■まとめ
1日の授業を通して、ほとんど新しいことをお伝えすることが無くなってきた。
次回からはプロトタイプの作成になるので、多少目新しいことも増えてきそう。
この記事が気に入ったらサポートをしてみませんか?