IT03-10 Webページのデザインとレイアウト

種類	素材	ダウンロード
目田育人		ダウンロード
ポスター		ダウンロード
ピクトグラム		ダウンロード
アニメーションGIF		ダウンロード
動画		ダウンロード

【ダウンロード手順】

①ダウンロードをクリックして画像や動画を表示します。
②画像の上で右クリックします。ポップアップメニューが表示されます。
③ポップアップメニューから《名前を付けて画像を保存》（もしくは《名前を付けて動画を保存》）を選択します。
④ダウンロードするファイル名を確認して、画像や動画を保存します。

※画像がダウンロードされるフォルダはパソコンの設定によって異なります。どのフォルダに保存したのかを忘れないようにしましょう。また、保存先をどこにしていいかわからない場合は「デスクトップ」に保存しましょう。

Canvaの起動

以下のリンクからCanvaを開いてください。

https://www.canva.com/

Webページの準備

以下の動画で操作方法を確認し、課題に解答しましょう。

課題1

①Canvaのホーム画面で「デザインを作成」ボタンから、「Webサイト」を作成しましょう。

②以下のテンプレートを選択しましょう。

ヒント：「自己紹介」で検索すると探しやすいです。

トップページの作成

課題2

変更前

変更後

①テキストの「藤田洋子」を削除し、自分の名前に変更しましょう。ニックネームでも構いません（また、完成例のように「目田育人」でも構いません）。

②フォントを「UDモトヤマルベリ」に変更しましょう。

③人物の写真を選択し、Deleteキーで削除しましょう。人物の写真があった位置に、「素材例」を参考に、画像を配置し、画像のサイズを調整しましょう。

素材例

・自分の写真（もしくはダウンロードしたファイル「meta.jpg」）をドラッグアンドドロップして配置
・自分のイメージに合う素材を検索して配置
・マジック生成で画像を生成して配置

④右上の画像(SNSのアイコン)を削除し、「変更後」の③を参考に、テキストボックスを追加して、以下の指示の通りに文字の追加・編集をしましょう。

	内容
追加する文字	スターAI・情報塾
フォントの種類	UDモトヤマルベリ
文字の大きさ	23
テキストの色	ブラック

⑤右側のテキストを、「変更後」の④を参考に、以下の指示の通りに変更しましょう。

変更前	変更後
自己紹介	自己紹介（変更なし）
発表作品	作品:ポスター
特集記事	作品:ピクトグラム
コラボ	作品:アニメーションGIF
ブログ	作品:動画
連絡先	（削除）

自己紹介ページの作成

課題3

2ページ目の完成例

①以下の画像を参考に、ページを複製しましょう。

②自分の名前（ニックネーム）のテキストを「自己紹介」に変更しましょう。

③「スターAI・情報塾」のテキストボックスを削除しましょう。

④「2ページ目の完成例」を参考に、画像とテキストの配置を変更しましょう。

⑤左側のテキストを、「2ページ目の完成例」を参考に、以下の指示の通りに変更しましょう。

変更前	変更後
自己紹介	氏名:目田育人
作品:ポスター	年齢:14歳
作品:ピクトグラム	趣味:ゲーム
作品:アニメーションGIF	特技:ラグビー
作品:動画	好きな食べ物:焼肉

作品紹介ページの作成

課題4

3ページ目の完成例

①「ページを追加」をクリックして、新しいページを作成しましょう。

②新しく作ったページの左上に、「3ページ目の完成例」を参考にテキストボックスを追加し、以下の指示通りに変更しましょう。

	内容
追加する文字	発表作品ポスター
フォントの種類	UDモトヤマルベリ
文字の大きさ	36
テキストの色	ブラック
テキストの配置	左揃え

③「ポスターを作ろう」のレッスンで作成したポスターの画像（もしくは、ダウンロードした「it03-04-c3-2.jpg」）を、３ページ目にドラッグドロップして、「3ページ目の完成例」を参考に、配置位置やサイズを調整しましょう。

4ページ目の完成例

5ページ目の完成例

6ページ目の完成例

④「ページを複製」を使用して、3ページ目を3つ複製しましょう。
合計6ページになります。

⑤４ページ目以降の左上のテキストボックスの「ポスター」の部分を、以下の通りに変更しましょう。
必要に応じて、テキストボックスのサイズも調整してください。

変更内容

・4ページ目：ピクトグラム
・5ページ目：アニメーションGIF
・6ページ目：動画

⑥4ページ目以降のポスターの画像を削除し、以下の作品をドラッグアンドドロップで配置して、位置やサイズを調整しましょう。

変更内容

・4ページ目：「ピクトグラム」のレッスンで作成したピクトグラムの画像（もしくは、ダウンロードした「it03-05-c1-3.jpg」）
・5ページ目：「動画の仕組み(アニメーションGIF)」のレッスンで作成したアニメーションGIF（もしくは、ダウンロードした「it03-07-a2-1.gif」）
・6ページ目：「動画を作ろう」のレッスンで作成した動画（もしくは、ダウンロードした「it03-08-m1.mp4」）

リンクの追加

以下の動画で操作方法を確認し、課題に解答しましょう。

課題5

①トップページ（1ページ目）の「スターAI・情報塾」に、以下のURLをリンクとして追加しましょう。

https://www.starjuku.com

②トップページ（1ページ目）右側の各テキストボックスすべて（「自己紹介」、「作品:ポスター」、「作品:ピクトグラム」、「作品:アニメーションGIF」、「作品:動画」）に、該当ページのページ内リンクを追加しましょう。

Webサイトの公開

まずは、以下の説明を確認しましょう。

ここでは、各手順を確認するだけとし、操作は課題６で行います。

手順1「Webサイトを公開」をクリックする

手順2「カスタムドメインを使用」をクリックする

「WebサイトURL」の欄にURLとなる文字列を表記し、「Webサイトを公開」をクリックすることで、すぐに公開はできますが、もう少し細かい設定も行なっていきましょう。

手順3「無料のドメイン」が選択されていることを確認し、「続行」をクリックする

最初から「無料のドメイン」が選択されていると思いますが、違うものが選択されている場合は、選択しなおしてください。

手順4サブドメインを入力して、「続行」をクリックする

この文字列を設定することで、公開するWebサイトのURLが決まります。

URLとは、Webサイトを識別する文字列です。

例えば、スターAI・情報塾のWebサイトのURLは以下のようになります。

誰かがすでに使用しているサブドメインと同じ名前を使用することはできません。その場合、以下のように表示されます。

使用できる文字は、半角のアルファベット小文字(a~z)、数字(0~9)、ハイフン(-)のみとなります。

アルファベット大文字や、ハイフン以外の記号を使用することはできません。

ドメインの設定は一度だけです。今後Webの公開を行うときも、今回設定したドメインを使用するため、この手順は省略されます。

参考

サブドメインとは、インターネット上のアドレスであるドメイン名の一部を指します。例えば、「star-ai-it-juku.my.canva.site」の「my.canva.site」がメインのドメインで、「star-ai-it-juku」部分がサブドメインになります。

サブドメインを使うと、大きなウェブサイトを小さく分けて整理しやすくすることができます。
例えば、ある学校のウェブサイトが「myschool.com」というメインのドメインを持っているとします。この学校がスポーツ情報を「sports.myschool.com」、図書館の情報を「library.myschool.com」というサブドメインで分けると、訪れる人が探しやすくなります。また、それぞれの部分を別々に管理できるので、便利です。