yoppa.org


immediate bitwave

多摩美 - サウンド&ネット 2014年度

第3回: Web基礎3 – TumblrをCMSとして使用する、オンラインポートフォリオの設計

今日の内容

今回で、Web基礎のパートは最終回です(来週からは応用編に入ります)。今回はTumblrをより深く活用して、CMS(コンテンツ・マネジメント・システム)として使用する方法について考えていきます。

前半は、講義形式でTumblrのCMSとして使用するための機能、「静的ページ」と「タグ」について解説します。後半は、実習編として、実際に作業をしながらそれぞれのオンラインポートフォリオのページを作成していきます。

TumblrをCMSとして使用する

Tumblrは、テーマをそのまま使用する限りは、時系列に投稿が列挙されるBlog的な仕組みになっています。もちろん、このまま使用しても良いのですが、Tumblrをオンライン・ポートフォリオとして使用する場合、もう少し工夫が必要となってきます。

例えば、略歴やページの説明などといった内容は、投稿が増えても埋もれてしまわないように、常に固定で表示される仕組みが必要でしょう。また、今後自分自身の作品を載せていくにあたり、単純に時系列で並ぶだけでは雑然としたものになってしまいます。例えば、授業ごとに分類したり、作品の種類によって分類したりといったように、投稿をカテゴライズする必要があります。

まず始めに、こうした機能を実現するための「静的ページ」と「タグによる分類」について説明します。

スライド資料

実習

後半は実習とします。以下の内容の作業を各自行ってください。来週の授業で提出します。

1. 解析

  • デザインが優れていると思うオンラインポートフォリオ(アーティスト個人、デザイン企業、グループなど)のWebサイトをひとつ選択する
  • 選択したサイトの構造を、サイトマップを記述しながら解析する(手書き、アプリの使用などは自由)

2. 制作

  • ピックアップしたサイトを参考にしながら、自分のオンラインポートフォリオのワイヤーフレームを作成
  • 自分のオンラインポートフォリオのサイトマップを作成
  • 作成した設計に従って、Tumblrでベースとなる部分を作成する
    • テーマ
    • メニュー
    • 固定ページ
    • テスト投稿

次回の授業で以下のものを提出してもらいます!!

  • 参考にしたオンラインポートフォリオのURL
  • 解析したサイトマップ
  • 作成したTumblrの(自分の)オンラインポートフォリオのURL
  • 最終的に完成した際のサイトマップ