第９回 ポートフォリオサイトの制作
Webデザイン基礎B/2020｜造形短期大学部｜2020.11.16｜遠隔
情報共有シート｜特設サイト
AGENDA
- 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
情報共有シート - 今回から、各自のポートフォリオサイトの制作に着手します。
- 開発中のものを相互確認できるよう GitHub に portfolio という名称のリポジトリを新規に用意して下さい。
以下、LIVE動画をご覧下さい。記事に沿って解説しています。
本日のメニュー
はじめに
今後の授業展開について
- 今回から各自のポートフォリオサイトの制作に着手していただきます。
HTML+CSSを直接記述する形で仕上げることが前提です。
- 次回11月30日は対面授業とし、各自の制作テーマについて発表していただきます。祝日を挟むのでこの間の２週間で、テーマを確定して下さい。
- ポートフォリオサイトは、今後も更新し続けることが前提なので、部分的に「準備中」のページがあっても構いません。枠組みができていればOKです。
- 成果は 特設サイトの個人ページからGitHubページへのリンクを張るかたちで公開して下さい。
https://JohnSmith.github.io/portfolio/
プロトタイプの段階から GitHubへのアップロードを行い、作業の区切りごとに、リポジトリを更新して下さい。
- 12月の遠隔授業期間は、Zoomによる個別質問対応を行います。
授業のページに当日のZoom会議室の接続情報を公開するとともに、授業時間内を随時受付状態にしますので、ご相談下さい。
尚、ご自身のPCにZoomクライアントをインストールする方法は以下に掲載しています。＞ Zoom
Web制作のワークフロー
以下、一般的な手順について概説します。
企画フェーズ
- ドメイン名とサーバーの確認
一般的な仕事では、クライアントがサーバーやドメイン名をすでに持っているかなど、「出口」の存在を確認します。
- サイト名の検討
HTML上で TITLEタグに記載する名称です。
インターネット上でユニーク（唯一）であることが必要です。
- 情報の洗い出し
どんな情報を掲載するのか、付箋紙等をつかって、掲載すべき情報をすべて洗い出します。
- 情報の整理
洗い出された情報を、グルーピングして、全体の情報構成を整理します。
- サイトマップ
情報の構成をサイトマップとして（一般にツリー状に）記載します。
- ワイヤーフレーム
ページのレイアウトをワイヤーフレームの形で記載します。- 少なくとも、モバイル用とPC用の２つが必要です。
- モバイル用とPC用をレスポンシブに切り替えることを前提に、ワイヤーフレームの構造には共通性を持たせることが必要です。
設計フェーズ
- ディレクトリ構成
index.html をツリーのトップに置いて、その他のファイルをどのように配置するかを検討します。テンプレートについては、以下の形を推奨します。
- index.html - css フォルダ -- style.css -- xxxx.css・・ 追加のCSS等 - js フォルダ -- xxxx.js・・・ JavaScript の利用は単位認定の範囲外（任意） - images フォルダ -- logo.png -- xxxx.jpg ：
- ファイル名の命名規則
将来的にページが増えることを前提に、サイトマップに従って各ページの html ファイルの命名規則を考えます。
- テンプレートのHTMLコーディング
- ワイヤーフレームにしたがって HTML の枠組みをコーディングします。
- ナビゲーションメニューは、テンプレートの段階で書き込んでおきます。
- コンテンツ部分には、ダミー画像やダミーテキスト等を入れて、全体のイメージが確認できるようにします。
- この時点で、HTMLの構造に破綻がないことを確認します。
- テンプレートのCSSコーディング
- ワイヤーフレームに照らして、CSSのコーディングを行います。
- CSSは、一般に構造がシンプルなモバイル用のコードを先に、その後にメディアクエリーを使って、タブレット用やPC用の変更点を記載します（モバイルファースト）
- テンプレートの表示確認
- 複数のデバイス、ブラウザで正常に表示されるか確認します。
- レスポンシブデザインブレイクポイントについても確認します。
制作フェーズ
- 事前準備
- 文章原稿の整理
- 画像データの整理・最適化
- 個別ページの編集
テンプレートを複製して、HTMLで個別ページの記事を記載します。
IDや CLASS の定義で CSSが適用される前提です。
- 個別ページの表示確認
複数のデバイス、ブラウザで正常に表示されることを確認します。
ポートフォリオサイトのページ構成
シングルページで構成する場合
一般にページを以下のセクションで区切って、縦一列でります。
- HOME（メインビジュアル）
- ABOUT（自己紹介）
- WORKS（作品）
- ILLUSTRATION
- PHOTOGRAPHY
- GRAPHIC DESIGN
- MOVIE
- WEB
- SKILS（使える技術、ソフトウエア、資格等）
- CONTACT（連絡先情報等）
マルチページで構成する場合
一般に以下のように複数の htmlファイルをつくります。
- HOME（メインビジュアル）＞ index.html
- ABOUT（自己紹介）＞ about.html
- WORKS（作品ジャンルメニュー）＞ works.html
- ILLUSTRATION（イラスト一覧）＞ works_illust.html
- PHOTOGRAPHY（写真一覧）＞ works_photo.html
- GRAPHIC DESIGN（グラフィック一覧）＞ works_graphic.html
- MOVIE（動画一覧）＞ works_movie.html
- WEB（Web一覧）＞ works_web.html
- SKILS（使える技術、ソフトウエア、資格等）＞ skils.html
- CONTACT（連絡先情報等）＞ contact.html
マルチページでWordPress風
トップページあるいは、ギャラリーページに作品の一覧サムネイルがあって、サムネイルのクリックで、個別作品のページにジャンプする・・というかたちでデザインしたい場合は、以下のように標準テンプレートと作品個別ページのテンプレートを別のものとして制作します。
- HOME ＞ index.html（標準テンプレート）
- ABOUT ＞ about.html（標準テンプレート）
- WORKS ＞ works.html（標準テンプレート）
- work01 ＞ work_01.html（作品テンプレート）
- work02 ＞ work_02.html（作品テンプレート）
： - workXX ＞ work_xx.html（作品テンプレート）
- SKILS ＞ skils.html（標準テンプレート）
- CONTACT ＞ contact.html（標準テンプレート）
シングルページ
シングルページで構成する前提の雛形です。
特設サイトにリポジトリを準備
- 完成したポートフォリオサイトは、以下の仕様で特設サイトから閲覧できるようにします。
- GitHub 上に新規のリポジトリ portfolio を作成して下さい。
- ダミーのHTMLファイルをアップして、GitHubPage として公開して下さい。
- 記載仕様
==GitHub Pages== * https : //JaneSmith.github.io/portfolio ← 一番目立つところに * https : //JaneSmith.github.io/SampleSite ← HTML+CSS の練習 * https : //JaneSmith.github.io/ResponsiveDesign ← レスポンシブ の練習 <br>
特設サイトにサイトタイトルとサイトマップを掲載
==PortfolioSite== ===サイトタイトル=== XXXX XXXXXX <br> ===サイトマップ=== * HOME（メインビジュアル） * ABOUT（自己紹介） * WORKS（作品） ** ILLUSTRATION ** PHOTOGRAPHY ** GRAPHIC DESIGN ** MOVIE ** WEB * SKILS（使える技術、ソフトウエア、資格等） * CONTACT（連絡先情報等）
第９回目は、以上をもって終了とします。お疲れ様でした。
第10回は、各自のオリジナルサイトのテーマ発表会を「対面」で行います。