芸術情報演習デザイン(web) tumblrを使う 4 静的ページの作成、サイトの設計
TRANSCRIPT
芸術情報演習デザイン(Web) Tumblrを使う 4 静的ページの作成、サイトの設計
2012年7月4日 東京藝術大学 芸術情報センター(AMC) 担当：田所淳
最終課題について
最終課題について‣ 最終課題： ‣ オンラインポートフォリオを作る !
‣ 提出締切：2014年1月23日 (講義の最終日) !
‣ 自分自身の作品、経歴をアピールするWebサイトをTumblrを使用して作成してください
オンラインポートフォリオ‣ いろいろなオンラインポートフォリオのサイトを参考にする ‣ Behance Prosite http://prosite.com/ ‣ オンラインポートフォリオを作るサービス ‣ ここから、様々なポートフォリオにリンクしている
オンラインポートフォリオ‣ いろいろな作家、会社などのポートフォリオサイトをみる ‣ 自分の作品、作風にマッチしたデザインは? ‣ いろいろ探求してみる
オンラインポートフォリオ‣ オンラインポートフォリオに必要な情報は何か? ‣ 固定したページか、日々更新するものか? !
‣ 作品の写真、解説 ‣ CV (略歴) ‣ 近況、更新情報 ‣ blog ‣ ...etc.
静的ページの作成
静的ページの作成‣ Tumblrの基本は、ミニBlog投稿 + SNS !!!!!
‣ Text, Photo, Quote, Link, Chat, Audio, Video などを投稿
‣ 投稿した順番に、{block:Post} ... {/block:Post} 内に表示 ‣ ここまでは、先週やった部分
静的ページの作成‣ たとえば、こんな感じ
静的ページの作成‣ しかし、ポートフォリオのページに必要な機能は、個別の作品の紹介だけではない !
‣ 例えば… ‣ CV: 略歴 ‣ About: ページについての説明 ‣ ...etc.
静的ページの作成‣ こうした、固定で表示したいページ (= 静的ページ) はどのように作成したらよいのか
‣ Tumblrでは、こうした固定された静的なページの作成機能も用意されている
静的ページの作成‣ まずは先週の作成したテンプレートから出発 ‣ https://docs.google.com/open?id=0BzyVHU69QO3mUjNKU3A1bnJOMFU
静的ページの作成‣ 静的ページの作成メニューは、ページカスタマイズ画面に
静的ページの作成‣ 「+ページの追加」を選択するとページ作成画面が表示される
静的ページの作成‣ ページのレイアウトは選択可能 !
‣ Standard Layout (ページ準拠デザイン) ‣ 作成したテンプレートにあわせたデザイン !
‣ Custom Layout (カスタムデザイン) ‣ HTMLを記述して、完全にカスタムなデザインに !
‣ Redirect (リダイレクト) ‣ 外部サイトへのリンクを作成
静的ページの作成‣ まずは、Standard Layoutで作成してみる ‣ 例えば、下記のように情報を埋めていく
静的ページの作成‣ 作成が完了すると、Pages欄に新規にページが表示されている
静的ページの作成‣ これでページが表示されるはず? ‣ Previewを終了して実際のページを開いてみる ‣ ページへのリンクらしきものはどこにも無い、何故?
{block:HasPages} <ul> {block:Pages} <li><a href="{URL}">{Label}</a></li> {/block:Pages} </ul> {/block:HasPages}
静的ページの作成‣ 静的ページへのリンクを表示するには、テーマをカスタマイズする必要がある
‣ 下記のコードをテンプレートのHTMLの任意の場所に追加 ‣ 例えば、ページ冒頭の<h1>要素の下など
静的ページの作成‣ 見出しの下に、静的なページへのリンクが表示された！
静的ページの作成‣ さらにページを追加してみる ‣ 例えば「アクセスのページ」
静的ページの作成‣ 指定した場所に、リストとして作成したページがどんどん追加されていく
静的ページの作成‣ それぞれのページは、作成したデザインのテーマをそのまま引き継いでいるので、カスタマイズの必要は無し!
Webサイトの設計
Webサイトの設計‣ 徐々にTumblrで出来ることがわかってきたので、サイト全体の構想を考えてみる !
‣ 必要なものは2つ !
‣ サイトマップ ‣ ワイヤーフレーム
Webサイトの設計‣ サイトマップ ‣ blog機能、静的なページなど、機能を使いわけながらページの構造を記述していく
‣ 役割ごとに色わけ
トップ サムネイル一覧
作品画像 + 解説作品画像 + 解説作品画像 + 解説
about
cv
blog
Webサイトの設計‣ それぞれのページのレイアウトの枠組みを記述していく ‣ → ワイヤーフレーム ‣ サイトの設計図のようなもの
Webサイトの設計‣ 参考: I ♥ wireframes ‣ 様々なワイヤーフレームを集めたサイト ‣ http://wireframes.tumblr.com/ 実はこのサイトもTumblr製!!
Webサイトの設計‣ 実習： ‣ 残りの時間は、自身のサイトのサイトマップの設計とワイヤーフレームの製作
‣ 様々な作家、会社、グループなどのサイトを参考にしながら