#author("2021-09-28T18:28:31+09:00","default:inoue.ko","inoue.ko")
*第４回｜ワイヤーフレーム
[[ソーシャルデザイン応用演習/2021]] 2021.10.05
[[学科サイト｜受講生一覧>https://design.kyusan-u.ac.jp/socialdesign/?%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%BF%9C%E7%94%A8%E6%BC%94%E7%BF%92]]
~
***AGENDA
-以下名簿が表示されます。出欠確認をお願いします。
&fontawesome(far fa-hand-point-right); [[出欠確認・座席記録>https://docs.google.com/spreadsheets/d/1aTL4FaC3JOtsePZWKc8OWo3Wj1vtcwIy6suJWKSUcr0/edit?usp=sharing]]
-講義はこのページの内容を解説するかたちで遠隔 LIVE 配信します。
-本日の内容に従って、学科サイトの個人ページに情報を記載して下さい。
&fontawesome(far fa-hand-point-right); [[受講生一覧>https://design.kyusan-u.ac.jp/socialdesign/?%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%BF%9C%E7%94%A8%E6%BC%94%E7%BF%92]]
~
#hr
'''''以下、LIVE動画をご覧下さい。記事に沿って解説します。'''''
記録動画の公開は10月8日（金）までとします。早めの確認をお願いします。
#hr
~
#youtube(ABC)
埋め込み無効状態です。授業開始直前にページをリロードして下さい。
~
-配信開始：2021.10.05 09:30 -
-動画は授業直前に有効になります（準備段階では黒い画面）。授業開始時にページを再読み込みしていただくと、視聴が有効になります。
~
***CONTENTS
#contents2_1
~
**はじめに
***Googleサイトの確認
-受講生の方のGoogleサイトの開設状況を確認します。
[[学科サイト｜受講生一覧>https://design.kyusan-u.ac.jp/socialdesign/?%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%BF%9C%E7%94%A8%E6%BC%94%E7%BF%92]]
-授業で説明するサンプルサイトは以下です。
https://sites.google.com/view/opensquarejp-sample2021
~
~
**個別紹介記事のプロトタイピング
個別記事ページを構成する情報要素を洗い出して、記事のタイプ別にワイヤーフレームを作成して下さい。
~
***情報要素
例：絵画作品
-作品画像１（全体）
-作品画像２（部分）
-作品タイトル
-作者名
-制作年代
-画材・支持体
-作品サイズ
-所蔵美術館名
~
***Googleサイトにおけるレイアウトパターン
#image(Layout.png,,50%)
~
***ワイヤーフレームを作成するツールについて
作成するツールは、Abobe Illustrator など使い慣れたもの、何でも構いません。最終的に画像として、学科サイトに掲載できればOKです。
Abobe Illustrator以外に、以下のようなツールもあります。
-Figma：https://www.figma.com/
--Webのモックアップ作成に便利
--参考記事：https://ferret-plus.com/13195
-draw io：https://www.draw.io/
--GoogleDrive 上で右クリック ＞ アプリを追加
＞ draw.io で検索 ＞ インストール
--概説サイト：https://about.draw.io/
-Google図形描画
--GoogleDrive 上で右クリック ＞ Google図形描画 を選択
~
~
**学科サイトの更新
__[[学科サイト｜受講生一覧>https://design.kyusan-u.ac.jp/socialdesign/?%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%BF%9C%E7%94%A8%E6%BC%94%E7%BF%92]]__
~
記事のタイプ別に作成したワイヤーフレームを画像を列挙するかたちで掲載して下さい。複数の画像を並べる方法は、以下を参考にして下さい。
~
***インライン配置
&image(sample.jpg,,20%); &image(sample.jpg,,20%); &image(sample.jpg,,20%);
&image(images/sample.jpg,,20%); &image(images/sample.jpg,,20%); &image(images/sample.jpg,,20%);
画像をインライン要素（プラグイン記号 ''&'' ）として表示することで、文字並びと同様に、羅列させて表示することができます。この場合、２番目のパラメータは空欄（カンマを連打 [ ,, ] ）にして下さい。
~
***表組
|49|2|49|c ← 合計が 100(%)になるように
|#image(sample.jpg)| |#image(sample.jpg)|
|49|2|49|c
|#image(images/sample.jpg)| |#image(images/sample.jpg)|
付記）表の罫線を消したい場合は、ページの先頭に以下を記入して下さい。
#settableborder(none)
~
~
~
~
