webデザイナー専攻卒業制作紹介｜STUDIO新潟｜デジタルハリウッドの専門スクール（学校）

卒業制作紹介

こんにちは！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新潟市にあるホワイトニング・エステサロンBe Lab.のサイト制作

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

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

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

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

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

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

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

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

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

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

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

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

文化洋食ino

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

株式会社フジサキ

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

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

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

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

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

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

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

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

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

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

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

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

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

Atelier maman

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

フォトスタジオウスタ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

佐藤歯科医院

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Be Lab.

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

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

Be Lab.は新潟市にあるホワイトニング・エステサロンです。

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

・外見だけでなく内面からもアプローチする完全予約制のプライベートサロンであることを伝える。

・ホワイトニングとエステサロンの両方を受けられること。お客様のニーズに合わせカスタマイズされた施術をしていることを伝える。

作成前の情報量が少なく難しかった中、試行錯誤されながら取り組まれました。

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

お店からの情報提供がないところからのスタートだったので、どこから手をつけたら良いのかなって…
お店のコンセプトもネットで参考になるものを探しながら制作し、お店の方へは参考サイトを事前に何個か送って選ばれたものが清潔感+シックな感じで…
お店のコンセプトは完全予約制のサロンさんというところをアピール、デザイン面ではシックと清潔感をアピールすることにしてそれを元に再度構成し直しましたが、自分で考えたイメージと実際の店舗の雰囲気に差異があったため、構成を考える前に実際の店舗に伺ってから構成を考えた方が良かったなと思いました。
実際の雰囲気から、シックな感じより親しみやすいデザインに変更しました。

あとは、載せる文章が決まっていないところは見せてもらったパンフレットから文章を考えていったり、他の美容系の参考サイトをたくさん見て作っていきました。お店に伺ってからの制作はトントンと進んで行きました。

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

お店の外観が緑だったので、それに合わせた背景の緑です。
あとはメインビジュアルです。どの画像をメインにするかが難しかったですが…