LogoMark.png

情報デザイン演習IIIA/2021/1019 のバックアップの現在との差分(No.8)


#author("2021-10-21T19:50:31+09:00;2021-10-19T16:00:10+09:00","default:inoue.ko","inoue.ko")
#author("2021-10-23T15:35:11+09:00;2021-10-19T16:00:10+09:00","default:inoue.ko","inoue.ko")
#settableborder(none)

*第6回|パターンのデザイン
[[情報デザイン演習IIIA/2021]] 2021.10.19
[[学科サイト|受講生一覧>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]
~


***AGENDA
-以下名簿が表示されます。出欠確認をお願いします。
&fontawesome(far fa-hand-point-right); [[出欠確認・座席記録>https://docs.google.com/spreadsheets/d/1lqpK0yahLjyKiQ1j_nVmRSFUojMUstJB8Uln6PtZs_M/edit?usp=sharing]]
-講義はこのページの内容を解説するかたちで遠隔 LIVE 配信します。
-本日の内容に従って、学科サイトの個人ページに情報を記載して下さい。
&fontawesome(far fa-hand-point-right); [[受講生一覧>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]
~

#hr
'''''以下、LIVE動画をご覧下さい。記事に沿って解説します。'''''
'''''%%以下、LIVE動画をご覧下さい。記事に沿って解説します。%%'''''
記録動画の公開は10月22日(金)までとします。早めの確認をお願いします。
#hr
~

#youtube(7nh8YRng638)
https://youtu.be/7nh8YRng638
//#youtube(7nh8YRng638)
//https://youtu.be/7nh8YRng638
//埋め込み無効状態です。授業開始直前にページをリロードして下さい。
~
//~
//
//-配信開始:2021.10.19 13:40 -
//-動画は授業直前に有効になります(準備段階では黒い画面)。授業開始時にページを再読み込みしていただくと、視聴が有効になります。
//~

-配信開始:2021.10.19 13:40 -
-動画は授業直前に有効になります(準備段階では黒い画面)。授業開始時にページを再読み込みしていただくと、視聴が有効になります。
~


***CONTENTS
#contents2_1

~
~

**はじめに
***今後の進行計画
-%%第1回 09.15 ガイダンス|AnotherSky:「場所」の選定%%
-%%第2回 09.21 WordPressサイト開設|AnotherSky:ネタの洗い出し%%
-%%第3回 09.28 WordPress の基本操作|AnotherSky:サンプル記事の投稿%%
-%%第4回 10.05 WordPress の活用|AnotherSky:サイトマップ%%
-%%第5回 10.12 WordPress のカスタマイズ(スタイルシートの編集)%%
-''第6回 10.19'' パターンのデザイン|AnotherSky:ワイヤーフレーム
-第7回 10.26 中間報告(対面 / Zoom) > 記事の書き方等を確認
 :
 以後、各自のスケジュールに沿ってサイト制作を行っていただきます。
 :
-第14回 12.21 成果報告(プレゼンテーション)
~

***次回、10月26日の中間報告について
-現在進行中の自身のWebサイトについて、中間報告をお願いします。
--サイト名、サブタイトル
--ページの構成(サイトマップを提示して)
--記事のタイプ別ワイヤーフレーム(ページのレイアウトと掲載内容)

-以下、今週の出席確認シートに、次週の参加形態の希望(実習室対面参加 or Zoomで遠隔参加)を記入しておいて下さい。教室には、座席数の50%まで入ることができます。回答の記載がない場合は、人数調整の観点からこちらで決めさせていただきます。
&fontawesome(far fa-hand-point-right); [[出欠確認・座席記録>https://docs.google.com/spreadsheets/d/1lqpK0yahLjyKiQ1j_nVmRSFUojMUstJB8Uln6PtZs_M/edit?usp=sharing]]
~

***付記:ダッシュボードにログインするには・・・
X-Freeの管理画面に入る必要はありません。以下のとおり、自分のWebサイトにアクセスできれば、そこからログインできます。

-自分のWordPressサイトを開く
-アドレスの末尾に /wp-admin をつけてアクセス
 http://(WordPressサイトのURL)/wp-admin
>ログイン画面が表示されます。
-ログイン後のダッシュボードのアドレスは以下
 http://(WordPressサイトのURL)/wp-admin
~
~

**「投稿」と「固定ページ」(フローとストック)
「地域を紹介するサイト」では、観光スポット、グルメスポット、祭り、特産品、出身有名人・・といった個別投稿に適した情報と、地域の基本情報(面積・人口など)、交通アクセス、街歩きマップ、年間行事一覧など、固定ページに適した情報があります。まずは、その分類から考えましょう。

 情報をフローとストックに分ける・・という発想が必要です。
~

***投稿(Post|Flow)
メニュー上では「カテゴリーメニュー」として自動回収
-お知らせ、募集告知、近況報告など、短期間で価値がなくなる情報
-建物紹介、商品紹介、書籍紹介、人物紹介など、百科事典的な情報
-地域を紹介するサイトでは、観光スポット、グルメスポット、特産品、出身有名人などがそれに該当します。
-追加や削除が頻繁に生じるので、記事は「自動回収」で一覧できる方が便利
~

***固定ページ(Page|Stock)
メニュー上では「固定ページ」として常設表示
-マニュアル、参考資料、文書フォームなど、常に閲覧される情報
-地域を紹介するサイトでは、街の基本情報(面積・人口など)、交通アクセス、街歩きマップ、年間行事一覧などがそれに該当します。
-追加や削除というより「内容の修正」が主になります。
~

''付記''
旅行会社のサイトや、市町村のサイトで、どのように情報が整理されているか、先行事例を十分に調査することが必須の前提です。

参考:[[InformationDesign]]|情報の管理
~
~

**投稿記事のパターンデザイン
投稿記事を構成する情報要素を洗い出して、記事のタイプ別(例えば、名所紹介、特産物紹介などごと)にワイヤーフレームを作成しましょう。
~

***記事の構成
投稿記事がどのようなタイプのものであるかによって、理想的なページレイアウトは異なるものです。''投稿は、一般に以下のような要素を含みます''

-投稿タイトル(形式の統一が必要です)
-アイキャッチ(メインビジュアル)
-5W2H(記事によって必要な項目は異なります)
--What : これは何?
--When : いつ? 
--Where : どこで?
--Who : 誰が?
--Why : なぜ?
--How : どのように? 
--How much : いくら?
-記事本文
-詳細説明画像とキャプション

-事例:[[投稿プロトタイプ>https://jssd5th.wordpress.com/2020/10/28/%e6%8a%95%e7%a8%bf%e3%83%97%e3%83%ad%e3%83%88%e3%82%bf%e3%82%a4%e3%83%97/]]
~

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

***ワイヤーフレームを作成するツールについて
作成するツールは、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図形描画 を選択

~
~


**本日の演習
***記事ページの構成を検討
例えば、名所紹介記事、人物紹介記事、特産品紹介記事など、それぞれのプロトタイプを作成して、「名所紹介記事プロトタイプ」等の名称で投稿し、それぞれのプロトタイプが閲覧・共有できるようにしてください。
~

***ワイヤーフレームの作成
記事のタイプ別にページのレイアウトを検討して、ワイヤーフレームを図として作成してください。

~
~


**学科サイトの更新

***概要>ワイヤーフレーム部分
-投稿記事のタイプ別にワイヤーフレームを画像として掲載してください。
~

***プロジェクト管理部分
-スケジュールを再確認し、変更点があれば修正・更新して下さい。
-ToDo の部分には、今後やるべきことをメモして下さい(随時更新)。
~

***進捗記録の部分
以下の形式を参考に、本日の作業報告を記載して下さい。
 **2020.10.12
 ***記事タイプ別投稿プロトタイプ
 -[[名所紹介記事のプロトタイプ>https://・・・・・]]
 -[[人物紹介記事のプロトタイプ>https://・・・・・]]
 ~
 
 ***WordPress|技術メモ
 (本日の演習で学んだ WordPress の基本操作についてメモを残しましょう)
 ~
~
~

**参考:学科サイトにおける画像の列挙方法
ワイヤーフレーム画像を列挙する場合、以下を参考にして下さい。
~

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

~