LogoMark.png

ソーシャルデザイン応用演習/2021/1005 のバックアップソース(No.4)

#author("2021-10-05T11:11:53+09:00","default:inoue.ko","inoue.ko")
#settableborder(none)

*第4回|ワイヤーフレーム
[[ソーシャルデザイン応用演習/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(7hN7rtSp-l8)
https://youtu.be/7hN7rtSp-l8
//埋め込み無効状態です。授業開始直前にページをリロードして下さい。
~

-配信開始: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


~
~


**個別紹介記事のプロトタイピング
個別記事ページを構成する情報要素を洗い出して、記事のタイプ別にワイヤーフレームを作成して下さい。
~

***記事作成における5W2H
-What : これは何? 例)〇〇を加工する道具
-Why : なぜ? 例)△△の部分がとても使いやすいから・・
-When : いつ? 例)中学2年のころから愛用
-Where : どこで? 例)◯◯町の画材店◯◯堂で購入
-Who : 誰が? 例)メーカー(作者)は◯◯◯◯
-How : どのように? 例)Amazonで買えます
-How much : いくら? 例)実売価格 2,800円ぐらいです。
~

***項目事例:絵画作品の紹介
-作品画像1(全体)
-作品画像2(部分)
-作品タイトル
-作者名
-制作年代
-画材・支持体
-作品サイズ
-所蔵美術館名
~


***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図形描画 を選択

~

***本演習におけるワイヤーフレームの作成について

一般的には、何らかのツールでワイヤーフレームを作成し、その後、それにしたがって個別ページの作成・・という手順になりますが、今回は、Googleサイトの利用で簡単にページの作成ができるので、以下のような手順で作業していただいても構いません。

-1)Googleサイトで、個別記事(例えばお気に入りの文房具を紹介するページ)の雛形となるページを1つ作る
-2)そのページをプレビュー(ブラウザで表示)する
-3)ブラウザの画面を縮小(COMMAND + [-])してページ全体を表示して
-4)スクリーンショット(COMMAND + [SHIFT] + [4])をとる
-5)以上で得られた画像を「ワイヤーフレーム」つまりページの「雛形」として学科サイトに掲載する

とりあえず、十分に検討された雛形があれば、それを複製して、画像と文章を入れ替えるだけで、同類のページは簡単に増やすことができます。

実際のお仕事では、記事の種別にワイヤーフレームを作ることになりますが、演習の残りの期間を考えると、ワイヤーフレームのパターンは3種類程度で、これを複数のジャンルで使い回すということでもOKです。
~
~

**学科サイトの更新
__[[学科サイト|受講生一覧>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://design.kyusan-u.ac.jp/socialdesign/?%E7%89%B9%E8%A8%AD/%E6%83%85%E5%A0%B1%E7%A7%91%E5%AD%A6%E7%A0%94%E7%A9%B6%E7%A7%91%E5%85%AC%E5%BC%8F%E3%82%B5%E3%82%A4%E3%83%88%E9%96%8B%E7%99%BA]]
-[[プロジェクト|生命科学部 サイト構築>https://design.kyusan-u.ac.jp/socialdesign/?%E5%8F%A4%E8%B3%80%E6%A2%A8%E7%B4%97%E5%AD%90/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6II]]
~


学科サイト(PukiWiki)における画像の列挙方法は、以下を参考にして下さい。
~

***インライン配置
 &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%); 

画像をインライン要素(プラグイン記号 ''&'' )として表示することで、文字並びと同様に、羅列させて表示することができます。この場合、2番目のパラメータは空欄(カンマを連打 [ ,, ] )にして下さい。
~

***表組
 |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)
~

~



~
~