HTML・CSSでつくるWebプログラミング
ITプログラミング学科では、「ノーコード」の次のステップとして、HTML・CSS等を用いたWebプログラミングに取り組んでいます。
当校には、Webデザインのコースはありません。
しかし、私たちが習得を目指す、「ソフトウェア開発」や「アプリ開発」では、見た目の使いやすさ（UIと言います）や 使ったときの快適さ（UXと言います）が、とても大事になります。
そのため、学習の初期段階で、Webプログラミングによるサイト制作を経験します。
7月18日、学生たちがチームに分かれ、HTML・CSS・JavaScript、生成AI等を活用し、チームごとにテーマを設定し、Webサイトを制作しました。その制作発表会でプレゼンしてもらった5つの作品をご紹介します👏
△▽△▼△▽△▼△▽△▼△▽△▼△▽△▼△▽△▼△▽△▼△▽△▼
グループ名：Café Aroma
「落ち着いたカフェ空間」の紹介をテーマに、色のトーンやフォント選び、余白の使い方など、統一感のあるデザインに気を付けました。
レイアウトにこだわり、閲覧者にとって見やすい構成を特に意識して仕上げました。
グループ名：ＪＨＲ（ジェイ エイチ アール）
グループの名前は、メンバーのイニシャルから取ったもの。
有名動画配信サービスを参考にしてサイト制作を行ないました。
作品一覧や画面のデザインなど、普段目にしているサービスらしさを再現するように努力しました。
生成AIにアイデアをもらいながら、視認性や操作性を工夫をしました。
グループ名：Ｙｕｕカフェ
留学生のみで構成されたチーム。
カフェのメニューの紹介、ネット注文もできるイメージでやわらかい雰囲気のサイトを制作しました。
写真とテキストのバランスを考えて配置し、見る人が理解しやすいよう構成を考えました。
グループ名：ＴＥＡＭ不健康
ゲーミングサイトを参考にしました。
黒を基調にスタイリッシュな雰囲気に制作。
背景やフレームのデザインなど、ゲームの世界観を作り上げることを意識しました。
配色やコントラストの使い方にも気を付け、視覚的に、見て飽きない作品にするよう心掛けました。
グループ名：東西南北
4人それぞれの出身地をテーマにした自己紹介ページ。
生成AIを用いて、アニメ風のイラストを作成したり、地域の写真を組み合わせるなど、表現の幅を広げるよう工夫しました。
ストーリー性を持たせた構成にし、順番に読み進めることで、メンバーの個性が伝わるよう気を付けました。
△▽△▼△▽△▼△▽△▼△▽△▼△▽△▼△▽△▼△▽△▼△▽△▼
Web制作を通して得られた学び
Web制作は、初心者にとって成果が目に見えやすい分野です。
また、UI／UXの考え方は、今後のアプリ開発やシステム設計に、直接関わる大事な要素です。
今回の制作発表会では、テーマ設定からデザイン、実装まで一連の流れをグループのメンバーで話し合いながら創り上げました。
単にコードを書く作業ではなく、「ユーザーにとっての価値を形にすること」ということを理解する良い機会となったのではないかと思います。
各チームが異なるアプローチで作品を制作しており、これからの学習がどのように発展するのか、非常に楽しみになる発表会でした！
▼【動画】ITプログラミング学科の特長を1分でさらっと解説！
▼学校の様子はこちらから
▼学校の様子はこちらから
🔽 ご予約はこちらから！
皆さんのご参加を心よりお待ちしております🌟
※個別相談・オンライン説明会について
日程がどうしても合わない方、
個別で色々とお聞きになりたい方、
保護者と一緒にお話を聞きたい方、
個別相談会を実施しています。
オンラインでも承っています。
📞お手軽に電話で申込み
0120-68-3125
✉メールで相談したい方
info@obm.ac.jp
＠LINEからお申し込み
※メール･LINEの本文にお名前･連絡先
を必ず書いてくださいね｡