【本科説明会】2024年10月生受付中!願書提出締切 8月11日(日) 20:00 <オンライン説明会実施中>

デジタルハリウッドSTUDIO新潟 ブログ

【卒業制作紹介】Webデザイナー専攻の卒業制作をご紹介します!

2024-10-25

卒業制作紹介


こんにちは!

デジタルハリウッドSTUDIO新潟のスタッフです。


今回は「Webデザイナー専攻」で学んだ卒業生の卒業制作をご紹介します!!

「Webデザイナー専攻」はSTUDIO新潟でも一番多くの方が受講されているコースで、卒業制作では今まで学習したことの集大成として、「自分で一からWebサイトを制作」します。

卒業生さんの素敵なWebサイトをご紹介するので、是非ご覧ください。




シェアアトリエ又蔵ベース

● Webデザイナー専攻修了 Tさん

新潟市西区にある、シェアアトリエ又蔵ベースのサイト制作

文化洋食ino

● Webデザイナー専攻+WordPress講座修了 Sさん

新発田市にある洋食屋さん、文化洋食inoのサイト制作

卒業制作 株式会社フジサキ

● Webデザイナー 超実戦 就職・転職プラン修了 金子さん

三条市にある株式会社フジサキのサイト制作

卒業制作 アトリエママン

● Webデザイナー専攻修了 岡本さん

弥彦にあるアトリエママンのサイト制作

卒業制作 フォトスタジオウスタ

● Webデザイナー専攻グラフィック経験者プラン修了 石崎さん・渡邊さん

三条市にあるフォトスタジオウスタのリニューアルサイト制作

卒業制作 佐藤歯科医院

● Webデザイナー専攻修了 佐藤さん

燕市にある歯医者 佐藤歯科医院のサイト制作

シェアアトリエ又蔵ベース

又蔵ベースイメージ


(画像をクリックすると別ページに遷移します。)

作成したのは Webデザイナー専攻修了 Tさん


こちらは実際のクライアントさんのサイトとして制作された作品となります。

又蔵ベースは新潟市西区にあり、又蔵ベース内には文具店、学生が運営する駄菓子屋、シェアアトリエが併設している店舗です。

こちらのサイトを制作するにあたり、

・シェアアトリエが生まれた経緯や・実際の利用事例、又蔵ベースがやってきたことを知ってもらい魅力を伝える。

・「ここでなら自分のやってみたいことを形にできるかも」と誰かの「やってみたい」を応援、後押しすることを伝える。

この場所のユニークさを知ってもらうために、魅力を伝えるサイトを作成したいという思いで取り組まれました。



今回こちらのサイトは実際に運用するか未定とのことでしたが、完成したサイトをクライアントさんに見ていただいたところ「凄いね!」との声をいただけたとのことで、実際に運用してもらえることになりました!と嬉しい報告をいただきました!

こちらの報告を聞いた瞬間、私もとても嬉しく、公開されるのを楽しみにしていたので本当に良かったです!

卒業制作は、基本的には自分が作りたいものを制作できますが、受講生さんによってはご自分で直接クライアントさんに連絡を取り、実案件として制作される方もいらっしゃいます。

文化洋食ino

文化洋食inoイメージ


(画像をクリックすると別ページに遷移します。)

作成したのは … Webデザイナー専攻+WordPress講座修了 Sさん


こちらは実際のクライアントさんのサイトとして制作された作品となります。

文化洋食inoは新発田市にある洋食屋さん。

メニュー等を確認しようとネットで検索したところサイトが見つからなかったため、卒業制作でできたら…と考えていたとのこと。

こちらのサイトを制作するにあたり、

・お店に問い合わせをしなくても、Webサイトで正確な情報が得られるようにする。

・よく訪れる常連さんや新しく訪れるお客さんにも利用しやすく、分かりやすいものにする。

クライアントさんのご希望をしっかりとヒアリングし、日々熱心にWebサイト制作に取り組まれていました。



制作してみてどんなだったか教えてください。

色んなものを取り入れられたらと思い、デザインもたくさんの参考サイトから取り入れたいものを、コーディングも動きのあるものを多く取り入れました。
コーディング作業は時間がかかったけれど、楽しく制作できました!

また、動画教材にあるカメラについての講義もこの卒業制作で役に立ちました。



お気に入りのポイントと苦労したところについて教えてください。



お気に入りはパララックスで葉っぱの素材に奥行きを出したところです。

あえて葉っぱもぼやっとさせて前にあるように表現し、奥行きを出しました。

お店に置いてある置物を使用して動きを付けたところです。

フクロウがかわいくてポイントです。

苦労したところは、PCからスマホ版での表示崩れの修正やコーディングで動きをつけるのが大変でした。

また、完成したあとにそれぞれのブラウザで表示崩れがないか確認するのですが、うまく表示されていないブラウザへのコード修正も大変でした。


完成したwebサイトを見た時、色んな動きがあって可愛く素敵なサイトだなと、実際にお店に行ってみたい気持ちになりますね!

卒業生さんも完成した時は嬉しかったし楽しかったと話され、日々熱心に制作されていたので完成したサイトを見て私もとても嬉しい気持ちになりました。

現在はWordPressでの制作に取り組まれています。


株式会社フジサキ

株式会社フジサクイメージ


(画像をクリックすると別ページに遷移します。)

作成したのは … Webデザイナー専攻 超実戦 就職・転職プラン修了 金子さん


こちらは実際のクライアントさんのサイトとして制作された作品となります。

株式会社フジサキは三条市にある企業で、オリジナル商品を企画し100円ショップに商品を卸販売している企業です。

卒業制作は自社サイトのリニューアルをしようと思っていたと話され、
・サイトに訪れた人がスムーズに問い合わせができるように。
・どんな商品を取り扱っているのか分かるように。
と、商品数もあるのでボリューム感のあるリニューアルサイト制作に取り組まれました。



制作してみてどんなだったか教えてください。

全部で7ページ作成しましたが、構想の段階は楽しくてワクワクがあったんですが進めていくうちに自分の作業ペースが遅いことにイラついてしまって…せっかく作るのであれば、ちゃんと満足のいくものが作りたいと思ったので。


制作されたサイトの反響はどんなでしたか?

前のサイトがアナログでリニューアルしたサイトは動いたりするので、凄いと言ってもらえ不安だったけど良かったです。



お気に入りポイント

お気に入りのポイントと苦労したところについて教えてください。

お気に入りは…トップページはこだわって作ったので、トップページですね。

苦労したところは…JavascriptとjQueryでの動きをつけるのが難しかったです。でも難しい分、できたときは嬉しかったです!
ちょっと時間を空けてからやってみるとできたりしたので、時間をあけてみるのも大事なんだなと思いました。


こだわって作ったと話されていたトップページを見た時に、『あ、この雰囲気かわいくて素敵!好き!他のページも気になる』となっちゃいました^^これからのご活躍も楽しみにしてます!



Atelier maman

Atelier mamanイメージ


(画像をクリックすると別ページに遷移します。)

作成したのは … Webデザイナー専攻修了 岡本さん


こちらは実際のクライアントさんのサイトとして制作された作品となります。

Atelier mamanは弥彦にあるレンタルスペースです。


こちらのサイトを制作するにあたり、

・何かを始めたい人の"はじめの一歩を後押しする場所"
"いくつになってもワクワク楽しめる"
"ホッとできる癒しの場所"であることを伝える。

・人と人がつながる場として、レッスンやワークショップ ・ハンドメイド品の販売を考えている方々に利用してもらえる場所であることを伝える。

Atelier mamanの優しさや暖かさも表現するデザイン、動きを考えて制作に取り組まれました。




制作してみてどんなだったか教えてください。

できた感想は、やりきった!
のちのちに改善点はでてくると思うけど、自分の生み出したものがネットに出るんだというワクワク感や、サイトを見て気に入ってくれる人がいたらいいなというところです。



お気に入りのポイントと苦労したところについて教えてください。


卒業制作紹介イメージ

お気に入りは…
TOPページの動画がお気に入りですね。

ぜひ、画像をクリックして見ていただければと思います!

苦労したところは…
デザインをゼロから生み出すのが難しく、参考になるところをたくさん見たけどまるまる真似するわけにはいかないからどういうバランスならいいのか?そこはトレーナーに聞きながら制作していきました。
Js、jQueryでの動きをつけるところが呪いの呪文のようで、しんどかったです。
ただ先生が横にいて「ここはこれについて書いている」と直に教えてもらえたときは分からなかったものが、「そういうことが書かれているのか!」と分かった時があって良かったです。



講評会の日は、当日スタジオに居合わせた受講生さんも一緒に発表を聞きましたが、実際にこんな風に卒業制作を作るんだなとイメージしやすいものとなり、急遽ご対応いただけて感謝です!^^
topの動画は優しい雰囲気が素敵で見入ってしまいますし、実際に行ってみたいな!と思わせる素敵な動画ですよね。


フォトスタジオウスタ

フォトスタジオウスタイメージ


(画像をクリックすると別ページに遷移します。)

作成したのは Webデザイナー専攻グラフィック経験者プラン修了 石崎さん・渡邊さん


こちらは実際のクライアントさんのサイトとして制作された作品となります。

フォトスタジオウスタは三条市にあるフォトスタジオです。

こちらのサイトを制作するにあたり、

・ウスタのブランドや写真の品質をホームページを通してわかりやすく伝え、集客に繋げる。

・明るいデザイン・清潔なデザイン・あたたかみのある手書きイラストを使用し、安心感と親しみやすさを感じれるものにする。

現在のサイトからより良いリニューアルサイトとなるよう、お二人で相談しながら1つのサイト制作に取り組まれました。



制作してみてどんなだったか教えてください。

石崎さん:どんどんコードを覚えていって、イメージした形にできていったのが楽しかったです。悩んだり大変だったところは、2人で一緒に作っていったのでイメージの共有が難しかったです。細かいところだと、フォントの大きさや太さなど…作っている人が違くても1つの同じサイトにすることが大変でした。


渡邊さん:HTMLまでは文章を打つなどCSSでの組み立てでうまく行かないところがでてきたり、レスポンシブでうまくいかなったのが大変だったけど、直していって形になったときが大変だったけど良かったところです。


二人で1つのサイトを作っていくところでイメージの共有など、渡邊さんはその辺どんな風にして取り組まれましたか?

デザイン作る前に、他の写真館のサイトだったり色んなサイトを見て、このサイトのここがいいよね、って掻い摘んで…フォントサイズとか幅とか色々なところを決めて取り組んだ感じです。



お気に入りのポイントと苦労したところについて教えてください。



七五三イラストイメージ

渡邉さん:撮影メニューの七五三のイラストと…

卒業制作イメージ

ページ内に入ってスクロールしていくと、男の子の七五三と女の子の七五三の写真をふわっと見せるところがデザインでも動きの面でもお気に入りなところです。

卒業制作イラストイメージ

石崎さん:タイトルの上にある学校のイラストやプロモーションイラスト、会社のイラストの部分がお気に入りです。

卒業制作イメージ

この、写真に文章枠を重ねているところもお気に入りのところです。
背景も真っ白だと無機質すぎるので、真っ白じゃないテクスチャーにして親しみやすさ、暖かさのイメージのあるものにしています。同じくイラストも親しみやすく、優しさのでる雰囲気にしています。

最近、会社の全体会議で制作されたサイトを見ていただいたとのことでしたが…会社の方の反応はいかがでしたか?

まだ作れていないページもあるので、完成したらホームページに使いたいと話しています。
以前のウスタのトップページはハンバーガーメニューが動いてるだけでしたが、フェードインで出てきたときは驚かれたり、トップページの画像がゆっくりとスライドで切り替わるのも反響いただけました。




卒業制作の講評会を行い、まだ作成できていないページもこれからとなりますが、ここまで制作されて達成感など気持ち的にはどんなですか?

石崎さん:半年前はホームページ1つ作れるなんてと不安もあったけど、形になったので成長したな、学びが身に付いたなと思います。


渡邊さん:6ヶ月間でやれることができたのは達成感がありますが、他のできていないページも作成して全部できたら達成感が凄いんだろうなと。追々、最後まで作れたらなと思っています。


佐藤歯科医院

佐藤歯科医院イメージ


(画像をクリックすると別ページに遷移します。)

作成したのは Webデザイナー専攻修了 佐藤さん


佐藤歯科医院は燕市分水にある歯科医院です。

こちらのサイトを制作するにあたり、

・「佐藤歯科医院とはこんな歯医者」を紹介する。

・安心して通える「歯のかかりつけ医」として、寄り添いを大切にすることを伝える。

情報量も多いなか、きれいにまとまり感のあるサイトを制作されました。



制作してみてどんなだったか教えてください。

最初は自分でちゃんとしたホームページを作れるのか疑心暗鬼で。
全然まだまだ作れるほどのスキルがついているのかなと不安だったけど、段階があるのでそれに沿ってワイヤーフレームを作ったあたりからどんな風にできていくのか先が見えてきました。デザインのところでどういうデザインにするかを悩んでいろんなサイトを見たら、見るほどに分からなくなったのですが…笑
良いところをつまみながらデザインは考えていき、デザインも「これだ!」となっていくとどんどん楽しく作れました。全体を通して、コーディングよりもデザインの方が大変でした。

あとの山場は動きをつけるJavascriptの部分が難しかったです。最後のブラウザチェックでも、端末によっては動いたりして修正が大変でした。
家だと他のことを始めたりしちゃいますが、スタジオだと誘惑もないので学習が捗りました。


お気に入りのポイントと苦労したところについて教えてください。



お気に入りポイントイメージ

当院の特長のデザインです。
写真も見せたかったので文章を上にするか、写真を暗くして見せるか色々と試行錯誤してこれがしっくりときて、デザインでの好きなところです。

イラストアニメーションgif

イラストのアニメーションが文字を邪魔しないようにさりげなくふわふわしているところもです。

メインビジュアルイメージ

トップページのメインビジュアルです。
真ん中に目が行くようにメニュー箇所の色のバランスや、上から見た歯と分かるようにバランスを見て歯のイラストを配置したところです。

佐藤歯科ハンバーガーgif

気になるところは、スマホの時のハンバーガーメニューの3本線が動くのですが見づらくなってしまったのが少し悩ましいところです。ハンバーガーメニューはヘッダーに入れた方が分かりやすかったかも?と。



制作したサイトを誰かに見てもらいましたか?

家族に見てもらい「今はこういう感じでできるんだね」と「きれいだね」と言ってもらえた他に、写真の選択はこういうのが良いんじゃない?とアドバイスもあり直せるところは直したりしました。



みなさん、ご卒業おめでとうございます!

またスタジオの方にもふらっと顔を見せに来ていただけたら嬉しいです☺︎


今後も卒業制作を紹介させてもらいますので、お楽しみに。

こちらのWebデザイナー専攻に興味のある方!気になる方は!
スクール説明会も行っておりますのでお気軽にお申し込みくださいね。




\それぞれの目的に合うコースをご紹介/

STUDIO新潟 開講講座一覧

STUDIO新潟開講講座一覧


「スタジオ新潟はどんな人が通っているの?」

皆さんの気になる“ギモン”を徹底調査!

バナー


皆さまからのよくあるご質問

Q&A

その他のSTUDIO新潟のブログ

BLOGS