LogoMark.png

ソーシャルデザイン応用演習/2021/1005

第4回|ワイヤーフレーム

ソーシャルデザイン応用演習/2021 2021.10.05
学科サイト|受講生一覧

AGENDA


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



CONTENTS


はじめに

Googleサイトの確認




個別紹介記事のプロトタイピング

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

記事作成における5W2H

項目事例:絵画作品の紹介

Googleサイトにおけるレイアウトパターン

Layout.png


ワイヤーフレームを作成するツールについて

作成するツールは、Abobe Illustrator など使い慣れたもの、何でも構いません。最終的に画像として、学科サイトに掲載できればOKです。
Abobe Illustrator以外に、以下のようなツールもあります。


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

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

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

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



学科サイトの更新

学科サイト|受講生一覧

記事のタイプ別に作成したワイヤーフレームを画像を列挙するかたちで掲載して下さい。過去の先輩のものを参考にして下さい。

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

インライン配置

&image(sample.jpg,,20%); &image(sample.jpg,,20%); &image(sample.jpg,,20%);

sample.jpg sample.jpg sample.jpg

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

表組

|49|2|49|c ← 合計が 100(%)になるように
|#image(sample.jpg)| |#image(sample.jpg)|
sample.jpg
sample.jpg

付記)表の罫線を消したい場合は、ページの先頭に以下を記入して下さい。

#settableborder(none)






PAGES

GUIDE

TOOL

DATA

添付ファイル: fileLayout.png 15件 [詳細]
Last-modified: 2021-10-05 (火) 11:11:53