1｜小テスト

前回までの理解度の確認のため、小テストを行います。各自で資料等は見ずに5分程度、各自で取り組んでください。

出席は課題の提出をもって確認します。必ずやっておくようにしてください。

前回の確認

前回の演習では、Netlifyに仮のWebサイトを置いてもらいました。前回の課題では他の人から仮サイトが見られるかを確認してもらいました。登録の都合上課題の期限を延長していますので、改めて、自分のページがサーバにアップロードできたか、確認しておいてください。

2｜【課題出題】Webサイトの制作

今回の授業から冬休み、そして年明け次回の授業を通して、各自にWebサイトを作成してもらいます。

作成するWebサイトには、これまでこの授業で作成してきた各種の課題とともに、自由制作のコンテンツを掲載してもらいます。

掲載するコンテンツ

• 入り口となるページ
• 表紙や目次などを用意し、来訪者が他のコンテンツへ辿れるようにすること。
• index.htmlからクリックだけで辿れないコンテンツは掲載されているとみなされないので注意すること。何段階かリンクを辿るのは構わない。リンクが張られていなかったり、リンクが切れていたり、ファイルのアップロードミスなどがあったり、何らかの理由で見られないものは掲載されているとみなされない、という意味。
• これまでの授業の課題
• HTML完成版（第3回）
• HTML＋CSS完成版（第5回）
• 好きなもの紹介ページ完成版（第6回）
• 授業の課題の説明
• 3つの課題それぞれの簡単な説明と作成した際に工夫した点や感想を記述したページを作成し、そのページから成果物に飛べるようにすること。
• 説明のページは3つの課題を1ページにまとめても、3ページ個別に作ってもどちらでもよい。
• 自由制作のコンテンツ
• 上記の過去課題とは別に、内容自由で何らかのページを3ページ以上作成すること
• 記述内容は自由であるが、Web上の情報の安易なコピーではなく、自分なりに工夫して作成すること
• 3ページ（以上）の内容は、統一された内容の3項目でも、3つのバラバラな内容でも構わない
• 3ページ（以上）のページでは必ずHTMLとCSSを用いて記述を行い、またそのうちの1箇所以上で何らかの形でJavaScriptを用いること。JavaScriptによりユーザの操作に基づいて何らかの表示（内容でも見た目でもよい）の変化が起こるようにすること。
• 著作権や、肖像権等の権利を侵害しないように十分に留意すること
• 作成するWebサイトの全体（個別の過去制作課題は除く）は統一感のあるデザインを施すこと
• 画像素材は、フリー素材や利用方法が明記され許可されているものについては利用してよい。
• 素材を利用する場合には、利用した素材一覧のページを別途作成し、どの素材がどのサイト（サイト名、URL）から用いているのかを明記すること。配布元からリンクを貼るように言われていない素材でも、今回の課題ではすべて出典を記載すること。
• 上記の一覧に出典の記述されていないすべての画像は、自分が作成、または撮影した画像でなくてはならない。
• 今回はWebサイト自体の制作が課題であるため、CSS等のデザインテンプレートの利用は、フリーのものであっても認めない。
• ただしさまざまなサイトの情報を自ら調べ、参考にすることは構わない。調べた情報をまるごとコピペをするのではなく、参考にして、また理解して、自分なりに取り入れること。
• 調べて、実際に参考にした情報源があれば出典を明記すること。ChatGPTに聞いた場合も、何を聞いてどのように答えたか、それをどう使ったかを明記すること。画像と同様に参考ページの一覧を作成すること。（分量次第で画像の出典一覧と1つにまとめても構わない。）

作成期限

• Webサイトの全体の最終的な完成期日は最終授業の前日（1/18）までとする
• 1/19の授業では作成したサイトの相互評価を行うので、この時点で掲載されていないと大幅な減点となり、単位の取得が難しくなるので注意すること
• 年明けの授業（1/12）では制作作業の続きを行うが、この時点までに一度仮のWebサイトとして、過去課題だけでもすべて載せておけるとよい

3｜Webサイト制作にあたって

ワークフローの必要性

一人で趣味で作っているWebサイトであれば自己流でも問題がないが、人に頼まれたものになると制作のワークフローを意識することが必要です。 制作を数名で分担する場合や、また作った後の運営・更新を他人がおこなう場合など、通常は、Webサイトには複数名が関わるものです。作業上、きちんと受け渡しするためにルールを作る習慣を付けなければ、あとで誰かが必ず混乱します。ワークフローとは作業の流れのことで、大きく分けて「企画」→「設計」→「制作」→「運用」の4つのフェーズがあります。

• 企画｜クライアント（依頼主）の要望を聞き、どのようなサイトで、どのような内容を載せるかを決定する段階
• 設計｜企画で決められた内容に応じて、具体的な制作方法や関わるスタッフを決め、機能の定義などを行う段階
• 制作｜設計で決められたルールを元に、デザイン、画像制作、プログラミング、コーディング、動作確認などの実制作を行う段階
• 運用｜サイトのOPEN後に、新鮮な情報を保てるように、コンテンツの更新や修正などの継続的な作業の段階

今回のサイト制作は技術習得が主目的であり、自分がクライアントなのでワークフローは重要ではありませんが、この演習で習得したことは、この流れの中のどの部分のスキルに位置づけられるかは理解しておきましょう。

サイトの構造の基本

Webサイトはページの集まりであり、ユーザは、ハイパーリンクをクリックしながらつぎつぎに画面を「遷移」していきます。この画面の遷移をユーザにスムーズに行わせることが、Webデザインにおいて最も重要なことです。具体的に言えば、今自分がそのサイトのどのへんにいるのか、どこになにがあるのか、次にはどうすればよいのか、入り口や出口はどこなのか、をきちんと「はじめてきた人にもにわかるように」表記しておく必要があります。そのためには、情報を体系化し、特定のルールに沿って整理しなければなりません。この体系化のためのルールの骨組みが「構造」です。Webデザインとは、画面の飾りつけではないことに注意しましょう。

サイトマップとメニュー

Webサイトの全体を把握するために、設計段階においては、必ず全ページのタイトルとその階層構造を表したサイトマップを作ります。建築における図面のように重要なものと考えればよいでしょう。

サイトマップ作りは、まず情報をあつめ、整理分類（グルーピング）することから始めます。まとまりができたら、それが大見出しになり、大見出しが集まればページになり、ページが集まればひとつのカテゴリになります。逆に大見出しを分割していくことで小見出しができ、小見出しからパラグラフやリストができます。適切に設計された情報は、このように折りたためる構造を持っています。ユーザーがクリックする「メニュー」はサイトの構造と対応するものです。

今回、課題で制作するサイトは小規模サイトなので、なるべく入り口から2階層以内で済ませるとよいでしょう。

以下、いくつかの基本的な留意点を記します。

• 「ここは何のサイトなのか」を、トップページに簡潔に書く（→タグライン）。
• 背景や幅、メニュー位置などは一貫性を持たせ、なるべく統一する。
• 検索や他サイトからの直リンク等、ユーザーが入り口以外のところから入った場合でも上の階層に移動できるようにする。
• 「戻る」ボタンは使わず、一回のクリックでカテゴリを移動できるようにする。

※今回の制作で過去の課題をアップロードする部分に関しては、デザインやナビゲーションの統一が保てない場合があり得ますが、ここに関しては気にしなくてもよいです。

4｜ペーパープロトタイプ

ペーパープロトタイプとは

以下は参考。いきなりウェブサイトを作り始める前に、設計の段階を検討するために有益な方法を紹介します。「ペーパープロトタイピング」と呼ばれるもので、文字通り「紙」でラフスケッチを作るものです。これによって、何ページのHTML文書が必要なのか、画面の要素としてどのようなパーツやナビゲーションが必要なのか、クリックした先はどの画面に行くのか（ページの遷移）などなどが手元に見えるようになります。そして、どのようなサイトの構造をつくるかを手軽に検討できるようになります。

• 黒須教授のUser Engineering Lecture:ペーパープロトタイピング

参考例：学生が制作したプロトタイプ（過去の演習より）

プロトタイプ提供：中村さん（NE18）
写真のように、各ページのナビゲーションやサイトマップを一覧することで、何ページつくればいいのか、合計でどのくらいの分量のウェブサイトなのかが一目瞭然になります。

5｜Netlifyでのサイトの更新

作成したWebサイトは、前回仮置きしたNetlify上のサイトに上書きして更新していきます。

Mac上で、サイトに使用するすべてのファイルを同じフォルダにまとめておき、このフォルダを丸ごと以下の手順でアップロードしなおせばよい。

まずNetlifyで「Sites」から仮置きしているWebサイトを選択します。

当該サイトを選択した状態で上のメニューから「Deploys」タブに進みます。

開かれたページの中ほどに「Deploys」欄があり、ここの指定エリアにフォルダをドラッグ&ドロップすると更新できます。

6｜Webサイトを構成するファイルの位置関係

Webサイトを構成するファイルはひとつのフォルダにすべて置くように指示しました。このことと、ファイル間でのハイパーリンクについて、補足をします。

フォルダに必要なファイルをまとめる

自分のMac上で作成したWeb文書は、そのままでは自分のMacでしか見ることができません。他の人に見てもらうためには、これをWebサーバにアップロード（転送）し、他の人がインターネット越しにアクセスできるようにする必要があります。

他の人から見られるようにするファイルは、テキストが記述されているHTMLファイルだけでなく、そのHTMLファイルから参照されるCSSファイルやJSファイル、画像ファイルなど、自分がMac上に用意し利用したすべてのファイルを見られるようにしなければなりません。

従って、Netlifyにアップロードするファイルは、Webサイトに利用しているすべてのファイルということになります。

どのファイルを用いているのかが自分自身でわかりやすいように、利用しているファイルをひとつのフォルダにまとめておくことが大切です。

よく、デスクトップにコピーしたHTML文書を編集して、ブラウザでは別のフォルダの中のファイルを表示して、変更が反映されない、などと訴えるトラブルがありますが、編集しているファイルと見ているファイルが違っています。こうならないためにも、ちゃんとファイルを整理しましょう。

公開フォルダとURL

作成したWeb文書は、フォルダごと転送することで、すべて外部に公開されます。

アップロードしたフォルダの中身が、そのまま https://ne231xxx.netlify.app/ として公開されます。 Webサイトフォルダに置いたhoge.htmlというファイルは、https://ne231xxx.netlify.app/hoge.htmlというURLでアクセスでき、またもしサブフォルダを作ってwebsite/foo/の中にbar.jpgを置けばhttps://ne231xxx.netlify.app/foo/bar.jpgでアクセスできます。

この関係をよく理解してひとつのフォルダの中にWeb公開するファイルをまとめるということが大切です。 逆に、Webに載せる必要のないファイル（作業中のファイルやバックアップファイルなど）を同じフォルダに置いて一緒に転送してしまうと、そのまま公開されてしまいます。必要のないファイルを誤って公開しないよう、Webサイトを作っているフォルダには関係のないファイルを置かないように心がけましょう。

URLでフォルダ名までを指定した際には、そのフォルダの中にあるindex.htmlが表示されます。

作成するWebサイトの入り口はWebサイトフォルダに置くindex.htmlとしてください。こうしておけばhttps://ne231xxx.netlify.app/にアクセスした際にhttps://ne231xxx.netlify.app/index.htmlが自動的に表示されます。

index.htmlを置いていないと、URLをフォルダ名で切った際に表示できるページがないため、Forbiddenなどとエラーが表示されます。どのようなファイル名で作ったかは作った本人にしかわからないので、index.htmlがちゃんと作られ、かつそこからリンクなどで接続されていないと、他のファイルを見ること（見つけること）ができません。 作成するWebサイトの入り口は必ずindex.htmlとし、他のページもそこからリンクで辿れるようにしておいてください。

またこのようにURLはファイル名に基づき生成されますので、公開するファイルやフォルダの名前に日本語のファイル名を使わないようにしましょう。

おさらい：相対パスと絶対パス

ファイル間のリンクに関しては、第6回で扱った相対パスと絶対パスの話を再確認しておいてください。

7｜今回の課題

課題の作成スケジュールを立て、自分なりに作業を進めてください。

繰り返しとなりますが最終回（1/19）の授業では作成したWebサイトの相互評価を行います。必ず最終授業の前日（1/18）までに完成したWebサイトを公開しておいてください。この際、可能であれば改めて他の人に自分のサイトが見えているかを確認してもらっておくとよいでしょう。