アイディア編
目標#
作りたいウェブサイトを考えてデザインする
ウェブサイトの目的を考えよう#
まずは、どのようなウェブサイトにするか考えましょう。 ※ただし、「ブログ」は作成できませんのでご注意ください。
（例）
- 自分の好きなもの・ことを紹介するウェブサイト
- ペット・植物・楽器・本・国
- アイドル・歌手・芸能人
- などなど…
- 自分の紹介ウェブサイト
- おすすめの◯◯
- 自分の作品（絵や写真やYouTube）
- などなど…
- 実用的なウェブサイト
- 文化祭、コンサート、アロマ体験などのイベント告知
- 生徒会、部活の紹介
ここでは例として、「文化祭のウェブサイト」を作ります。
ウェブサイトの内容を考えよう#
ウェブサイトの目的が決まったら、次は内容を考えていきましょう。
Step1: 目次を作る#
ウェブサイトにはどのような情報が必要でしょうか？Step1では、ウェブサイトの大まかな目次を作りましょう。
（例）文化祭のウェブサイトの目次
- 開催日時・場所
- 学生の参加方法
- 学外の人の参加方法
- 出店一覧
Step2: 項目ごとの情報を考える#
目次が決まったら、それぞれの項目に載せる情報を考えていきましょう。Waffle Camp当日に、ここで書いた内容をウェブサイトに載せるので、しっかりと準備しておきましょう！
（例）文化祭のウェブサイトの中身
- 開催概要
- 日付
- 2020年11月3日（祝）
- 時間
- 午前10時開場、午後5時閉場
- 場所
- ◯◯中学校
- 住所
- 東京都千代田区千代田1-1
- 日付
- 学生の参加方法
- チケットについて
- チケットは開催２週間前に先生から一人５枚ずつ配られます。
- 出店について
- 出店申込
- 出店希望の団体は、以下の基準を満たした上で9月31日までに◯◯先生に連絡してください。
- 出店基準
- 顧問の先生がいること
- 5人以上の団体であること
- 予算が100万円以内であること
- 出店申込
- チケットについて
- 学外のみなさまへ -（省略）
- 出店一覧 -（省略）
ウェブサイトのデザインを作ろう#
載せる情報が決まったら、デザインを考えましょう！ここでは、Googleスライドを使ってデザインを考える方法をお伝えします。
Step1: Googleスライドを開く#
ここでは、Googleスライドを使います。（自分のパソコンでプレゼンテーションを作る方が慣れている人はそれでも構いません。）
すると、「ウェブサイトのアイディア」というフォルダが開くと思います。 そしたら、左上の「＋新規」というボタンをクリックします。
続いて、「Googleスライド」を選択します。
「共有フォルダ内に作成しますか？」は「作成して共有」を選択してください。
ファイル名は自分の名前にしておいてください。
Step2: スライドに内容をコピーしていく#
スライドを開いたら、１つの目次につき１ページずつコピー＆ペーストしていきましょう。
Step3: デザインを加える#
各ページに内容をペーストし終えたら、デザインを加えていきましょう！ フォントを変える、色を変える、画像を挿入する、など色々と編集することができます。Step2と載っている情報は変わりませんが、デザインを加えるとより伝わりやすくなりますね。
ウェブサイトに使用したい画像は、ぜひ自分のパソコンに保存して、残しておいてください！！ (Googleスライドに画像をコピーして貼っても、PCにダウンロードすることができません。)
Step2にデザインを加えるとこのようになります。
Step4: トップビューをデザインする#
トップビューとは、ウェブサイトの１番上の部分で、ウェブサイトの顔になる部分です。トップビューのデザインでは、メニューをつけたり、タイトルを大きく載せたり、大きな画像を載せたり、色々な方法があります。自分の好きなウェブサイトを参考にするのもいいかもしれません♪
ここでは左上にメニューを加え、画面いっぱいに明るいイメージの画像を挿入しました。
ここまで考えたらデザイン作成は完了です！
ちなみにこの事前学習で例として作った「XX高校第23回文化祭」のデザインの例はこちら XX高校第23回文化祭デザインスライド
そして、ウェブサイトにしたものがこちらです。 XX高校第23回文化祭
Step5: Webサイトのテキストをまとめたスライドを作る#
当日はスライドを元にウェブサイトを作ります。
効率的にWebサイトを作るためにテキストをまとめた以下のようなスライドに作りましょう。
文章が多い場合はスライドは2枚以上になっても大丈夫です。
Waffle Campの当日は、みなさんが作ったデザインをもとにウェブサイトを作るので楽しみにしていてくださいね！
（参考）デザインを考えるときに使えるリンク#
画像#
自分の写真がない場合は、以下のウェブサイトで写真やイラストを無料でダウンロードすることができます。 イラスト：Loose Drawing 写真：O-DAN (オーダン）- 無料写真素材・フリーフォト検索
色#
背景の色や文字の色はウェブサイトのデザインを左右するとても大事な要素です。以下のウェブサイトを参考にして、ベストな色の組み合わせを探してみましょう。
Happy Hues - Curated colors in context. デザインをセンスアップする“いけてる配色パターン”100選！
色を指定するときは、#から始まる6ケタのカラーコード を使うのが便利です。カラーコード を使うと、微妙な色の違いも表現できます。
例えばこのような似た色も、カラーコードがあると区別することができます。右から、DAB2A1、E0C0B3、E5CDC2、EDD9CD、CFA996というコードを持つ色です。
文字のフォント#
文字のフォントもウェブサイトの雰囲気を決める要素のひとつです。
色々なフォントの例がこちらのウェブサイトに載っているので、参考にしてみてください。
Part1は以上で終わりです！