LogoMark.png

Webデザイン実習/2020/0714-0721

第12 - 13回 ポートフォリオサイトの制作

Webデザイン実習/20202020.07.14 - 21


単位認定について

2020年度前期の授業アンケートについて

第12-13回目の展開と要件


第12-13回の完成イメージ

以下、JohnSmith さん(架空の受講生)の13回目の授業終了イメージです。ダミーデータのため、リンクは無効になっていますが、みなさんの完成ページでは、それぞれのリンク先で、HTMLのサンプルが確認できるようになっている必要があります。



以下、目次を見て演習の全体像を把握してから、順に説明を読み進めて下さい。



第12-13回 目次




はじめに

成績評価について

初回の事前連絡でお知らせしたとおり、各授業回ごとにアップされた Webサンプルの充実度と、最終的に完成した各自の ポートフォリオサイトの公開をもって単位を認定します。

この2週間の授業展開について

Web制作のワークフロー

以下、一般的な手順です(一般論の説明なので、読むだけでOKです)。

現状分析 > アイデア > ||: プロトタイピング > テスト :|| > 実装

要するに「デザイン思考」のプロセスそのものです。

企画フェーズ

設計フェーズ


制作フェーズ




留意すべきこと|静的サイトと動的サイト

今回制作するのは、HTML+CSS+JavaScript によるWebサイトで、これは、クライアントサイドのみで完結する「静的サイト」です。一方、動的サイトというのは、WordPress に代表されるCMSのように、サーバーサイドでデータベースと連動して、記事情報を自動回収して表示できるようなものです。

みなさんがWeb上で見ているサイトの大半はCMS(動的サイト)なので、CMS風のサイトデザインを考えてしまいがちですが、残念ながら、それと同様の動きをするデザインを静的サイトで実現するのは非常に面倒なことですし、そうした取り組みは無駄な作業時間を消費するだけなので、おすすめできません。

静的サイトに適したもの

動的サイトに適したもの

ポートフォリオサイトのページ構成

シングルページで構成する場合

一般にページを以下のセクションで区切って、縦一列でります。

マルチページで構成する場合

一般に以下のように複数の htmlファイルをつくります。

付記

記事の分類方法.png

授業課題、プロジェクト、公募、自主制作・・様々ある作品を掲載する際、例えばイラスト / グラフィック / CG などのページ区分を考えてはみるものの、そもそも境界がはっきりしない・・。また、アナログとデジタルという分け方もあるし、制作年ごとに整理するという方法もある。・・と、カテゴリー分けについて悩むことが多いと思います。そんなときは、「分類しない」つまり「1作品1ページ」で作ってしまう・・というWordPress的な方法も検討する価値があると思います。

マルチページでWordPress風

トップページあるいは、ギャラリーページに作品の一覧サムネイルがあって、サムネイルのクリックで、個別作品のページにジャンプする・・というかたちでデザインしたい場合は、以下のように標準テンプレートと作品個別ページのテンプレートを別のものとして制作します。

portfolio_multi.png




サンプル

シングルページ・レスポンシブ

シングルページで構成する前提の雛形です。

マルチページ・レスポンシブ

複数のページで構成する前提の雛形です。


メニュー部分のサンプル

成果の確認

学科サイトの氏名/WebSample のページに以下のようにリンクを作成して下さい。

ソーシャルデザイン学科の方は、個人のサブメニューに Portfolioサイトへのリンクを作成してください。

以上で、Webデザイン実習は終了です。前期の授業お疲れさまでした。



PAGES

GUIDE

DATA

Last-modified: 2020-07-21 (火) 10:18:29