講座「Webクリエイター科/中丹」
・期間：2023年10月2日〜12月27日
・場所：京都府立中丹勤労者福祉会館
・受講者数：8名
・学科/実技
・Webに関する基本的な知識を学ぶ
・html/cssの基本的な知識を学ぶ
・Webクリエイター能力認定試験エキスパートの資格取得を目指す
・Web制作の基本的な知識と制作演習を行う
受講して身に付いたこと
以下、講座の演習による成果を示します。
1.Weddingサイト（サーティファイWebクリエイター能力認定試験エキスパート教材の内容）
https://3ridge.net/lesson/04/portfolio_ueda/20231010_wedding/
工夫した点
・初めてhtml、cssを使用してHPを制作しました。
教材の内容をそのまま写しながら、何を書き込めばどういった表示がされるのかをブラウザで確認しながら作業していました。確認しながら作業することで、自分が一からHPを制作する際に何をどうすれば表現出来るかを学ぶことが出来ました。
反省点
・初めてのHP製作ということもあり、教材を丸写しする作業になっていました。しかしながら前述の通り、確認しながら作業することでHP製作に必要な知識を学ぶことが出来ました。
2.Weekenders Cafe
https://3ridge.net/lesson/04/portfolio_ueda/cafe_ueda/
工夫した点
・WeddingサイトでHP製作の基礎的な部分を学んだ上で、画像データを講師の先生に提供してもらい、初めて自力でhtml、cssを組みました。
・Weddingサイトで学んだ知識を活かして「TOP」「CONSEPT」「MENU」「CONTACT」の4ページを制作し、メニュー表やお問い合わせページを見易く表現しました。
反省点
・まだまだcssでどう指示すれば、どういった表示になるか理解が追いついていない点もあり、講義の中で勉強しながらの制作となりました。
3.舞鶴ロケッツ（舞鶴ミニバスケットボールクラブ）第1弾
https://3ridge.net/lesson/04/portfolio_ueda/rockets_Ver2/
工夫した点
・初めてテーマ決めから素材集め等自力で制作したページになります。
・ペルソナを10歳の小学4年生女子と設定し、入団したいと思わせることを目的に制作しました。スライダーやパララックスを用いて写真を多く見せることで和気あいあいとした雰囲気を出すことを狙いました。
・パララックスにて影絵の写真から全員でジャンプする写真に移る流れを作ることで一体感を表現しました。
反省点
・PhotoshopやIllustratorを少し学んだだけの状態で制作した為、画像サイズや画質が統一できていませんでした。現在ではサイズや画質を統一して制作することが出来るようになりました。
・チームカラーであるピンクと紺色を使用したですが、メニューボタンの背景にビビットなピンクを使い、文字に紺色を使ったことで、文字が視認し辛くなってしまいました。その点は、どちらかの色を白にすることで改善可能と分かりました。
4.百姓家 古倉
https://3ridge.net/lesson/04/portfolio_ueda/kokura_20231114/index%202.html
工夫した点
・
反省点
・
5.舞鶴ロケッツ（舞鶴ミニバスケットボールクラブ）第2弾
https://3ridge.net/lesson/04/portfolio_ueda/maizuru_rockets/
工夫した点
・ペルソナを「10歳の小学4年生の活発な女子」で、「ヤンチャな弟がいる4人家族」で「何か運動をしたいと考えている」と設定し、「カッコ可愛い」をテーマにすることで第1弾より明確なペルソナとテーマ決めを行った上で制作に取り掛かりました。
・背景色に落ち着いた色を使用することでカッコ良さを、キャラクターとロゴで明るさと可愛いらしさを表現しました。
・ハンバーガーメニューを実装することでスマホ版でもメニューが分かり易く表示することが出来ました。
反省点
・スマホ版にすると、文字とキャラクターの位置関係や文字とのサイズ比率が変わってしまい、それを補う為に「width」や「padding」を多用するcssコードになってしまいました。画像はデザイン時のIllustratorから書き出しており、その点は問題なかったのですが、htmlとcssの組み方が煩雑なものになってしまったのが原因と思われます。今後はデザインの時点でどういったコーディングをするかを決めた上で進めることで改善出来ると考えています。
6.Ayabe.I.E.A（綾部国際交流協会）
https://3ridge.net/lesson/04/portfolio_ueda/Ayabe.IEA_fin/
工夫した点
・ペルソナは、「綾部市在住」「27歳女性」「会社員」「実家暮らし独身」「国際交流に興味がある」と設定し、国際交流に興味を持っている人に運営も含めたボランティアとして活動に参加してもらえるようなサイトを一週間の期限で制作を開始しました。
・自治体が制作するような堅いイメージのページではなく、明るくシンプルに、且つ活動内容がよく分かるように写真を多用することにしました。
・日本語交流と多文化交流の2つの会がある為、ページを分けて各々の行事が分かる写真を使用しました。
・ボランティア募集欄のみ背景色を設定することで、協力してくれる方を強く募集していることを表現しました。
・文字と写真の配置をZ型にすることで、文字にも写真にも目を惹きやすくしました。
反省点
・シンプルなページに見えるのですが、Z型で文字と写真が交互に変わる為、配置を制御するのに苦労しました。
・ページ数を4ページと多くしたことで、チーム内で分業で作業することが出来ましたが、1週間で制作するにはボリュームが大きくなってしまい、PC版に時間が掛かってしまい、スマホ版対応の時間が少なくなってしまいました。
7.「崇廣館を再建する会」
https://3ridge.net/lesson/04/portfolio_ueda/teamW_1212/
工夫した点
・ペルソナが決まっている状態でのHP制作です。ペルソナは「44歳男性」「丹波市出身の都内大手金融会社勤務」「中学2年生娘と高校3年生息子の父親」「よく読む雑誌はGOETHEかBRUTUS」「崇廣館再建のクラウドファンディングに参加してもらえるHP作り」という設定でした。よく読む雑誌がGOETHEかBRUTUSという点にフォーカスしてデザイン構成を考えました。
・GOETHEかBRUTUSも活字が多く、且つ写真も多用されていることから、活字と写真を多用したページにしました。
・ハンバーガーメニューは敢えて使わず、スマホ版ではメニューをバナー表示することでスッキリとしたデザインにしました。
・当時の写真がネット上にもほぼ残っていない状態でしたが、現在の関連する写真や明治時代以降の崇廣館の歴史を載せることでカバーしました。
・地元の方の声や出身者の声などを記載し、再建を熱望していることをアピールすることでクラウドファンディングページを見ていただけるよう工夫しました。
反省点
・崇廣館についての知見が一切なく、崇廣館の歴史を知るところに時間が掛かりました。