WEB Design
Kumo Hotel WEBデザイン
WEBデザインサイト⇩
https://ad716-16.deau-ad.com/kumo2
■ターゲット
日常を離れてゆったりとした時間を過ごしたい方や、特別な旅行を楽しみたい方を想定しました。
■課題
架空企業「Kumo Group HOLDINGS」から、新設された「KumoHotel Luxury館」の魅力を伝えるWebサイト制作を依頼されたという設定で制作しました。
■目的
ホテルの魅力や施設情報を分かりやすく伝え、「泊まってみたい」と感じてもらうことを目的としました。
■デザイン
「雲の上で過ごす非日常体験」をコンセプトに制作しました。
空をイメージしたブルーからラベンダー、ピンクへと移り変わるグラデーションを取り入れ、やさしく幻想的な雰囲気を表現しています。
また、ガラスのような透明感のあるコンテナや、トップ画面にはふんわりと流れる雲のアニメーションを取り入れ、雲の上にいるような世界観づくりを意識しました。
■使用ソフト
・Photoshop
・Illustrator
・Visual Studio Code
・Figma
■使用技術
・HTML
・CSS
・JavaScript
・Swiper
■工夫した点
サイトを開いた瞬間からKumoHotelの世界観が伝わるよう、画像の選択や色使いやアニメーションにこだわりました。
また、デザイン性だけでなく情報の見やすさも意識し、幻想的な雰囲気と使いやすさの両立を目指しました。
■制作期間
４日間(デザイン１日、コーディング１日、ブラッシュアップとアップロード２日)
Training-4
WEBデザインサイト⇩
https://ad716-16.deau-ad.com/training-4
■ターゲット
子猫と触れ合うことで癒されたい方へ向けた子猫カフェ KONEKO 公式サイト
■課題・目的
トレーニングを目的として制作しました
■使用ソフト
・Photoshop
・Illustrator
・Visual Studio Code
・Figma
■使用技術
・HTML
・CSS
・JavaScript
■工夫した点
課題のデザインを再現するだけでなく、情報が見やすくなるよう画像サイズや余白の調整を意識しました。また、HTMLの構造を整理し、CSSの管理がしやすいようクラス設計にも配慮しました。
■制作期間
９０分
Training-3
WEBデザインサイト⇩
https://ad716-16.deau-ad.com/training-3
■ターゲット
東京の街を散策したい、観光客に向けたサイト。定番どころから下町まで載せているので、東京に住んでいる方も楽しめるサイトとなっています
■課題・目的
トレーニングを目的として制作しました
■使用ソフト
・Photoshop
・Illustrator
・Terapad
■使用技術
・HTML
・CSS
・JavaScript
・Swiper
■工夫した点
各カテゴリーの区分けの仕方にこだわりました。見出しの分かりやすさやロゴ、色変え等、細かいところに工夫を凝らして情報を整理し、見やすさを意識しました。HTMLの構造を整理し、CSSの管理がしやすいようクラス設計にも配慮しました。
■制作期間
９０分
Training-2
WEBデザインサイト⇩
https://ad716-16.deau-ad.com/training-2
■ターゲット
小さなお子様がいるご家庭から、デート目的の方々まで、動物が好きで癒されたい全ての方々へ。
■課題・目的
HTML・CSSの基礎を学ぶことを目的として、指定されたデザインカンプをもとにWebサイトを制作する課題
レイアウトの再現や画像配置、リンク設定などWebサイト制作の基本技術を習得することが目的です。
■使用ソフト
・Photoshop
・Illustrator
・Terapad
■使用技術
・HTML
・CSS
・JavaScript
・Swiper
■工夫した点
デザインの再現だけでなく、余白や文字サイズを調整し、情報が見やすくなるよう意識しました。HTMLの構造を整理し、CSSの管理がしやすいようクラス設計にも配慮しました。
地図の埋め込みやswiperも入ってきたので、とにかく確認しながら丁寧に作業するよう心掛けました。後のKumoHotel公式サイトのもとにさせていただいたサイトです。
■制作期間
９０分
Training-1
WEBデザインサイト⇩
https://ad716-16.deau-ad.com/training-1
■ターゲット
小さなお子様を持つ親世代から祖父母世代の方々。または贈り物として届けたい方
■課題・目的
木のぬくもりを感じるやさしいおもちゃ屋を広めるためのサイト。
トレーニングを目的として制作しました
■使用ソフト
・Photoshop
・Illustrator
・Terapad
■使用技術
・HTML
・CSS
■工夫した点
初めてのサイト制作だったので、まずHTMLの構造を整理し、理解するところからでした。
小さな間違いがあるだけで何も反映されないので、間違えがないかを見直すところからでした。
■制作期間
９０分