デジタルハリウッドSTUDIOつくば ブログ

【卒業制作紹介】 Webデザイナー専攻 Part2

2022-03-25

卒業制作とは

みなさんこんにちは!デジハリつくば運営の武田です。

卒業制作は実際に「Webサイトを最初から自分で制作する」デジハリのWebデザイナー専攻最後のカリキュラムです。

題材は基本的に自分で決めるのでどんなWebサイトを作ってもOK。

今回はPart2として最近卒業した6名の受講生と卒業制作を紹介しているので、受講すればこういうサイトが作れるというのが分かります。


前回の卒業制作紹介はこちら

【Webデザイナー専攻 卒業制作紹介 Part1】

No.1 thrift(花屋)

名前:榎本 明穂さん


年齢:20代


入学前の職業:保険代理・営業


製作期間:2ヶ月半

制作のポイント

手書きの文字、猫のイラストを自分で描いた。

TOPページのキャッチコピーと文章。

パララックスを使って見ていて飽きない工夫をした。


苦労したところ

お花屋さんの既存のWebサイトが少ないことに加え、今回のお店は実店舗を持たずオーダー制作がメインという特殊な事業形態だったので、どんなお店でどんなサービスがあるのか、分かりやすく伝えるためのサイトマップづくり(コンテンツのまとめかた)

Instagramを主体として活動しているお店のため、写真素材はたくさんあるが正方形だったので、サイトでの使い方が難しかった。


URL

https://thriftflowers.jp/

No.2 マルサン商店(ボードゲームカフェ&バー)

名前:河原 洸さん


年齢:20代


入学前の職業:携帯ショップスタッフ


製作期間:3ヶ月

制作のポイント

メニューがトランプのカードの裏面になっていて、ホバーすると裏返りどんなメニューが見れるようになっている。

あえて見せないでおくという便利とは反対の事をした。


苦労したところ

メニューの部分と想像した動きに近づける作業。


URL

http://marusansyouten.sakura.ne.jp/boardgame/

No.3 77 COFFEE(カフェ)

名前:曽根 奈津実さん


年齢:20代


入学前の職業:花屋・物流倉庫


製作期間:2ヶ月

制作のポイント

架空のサイトでもフリー素材をなるべく使わずに自分で写真を撮影。

動画にも挑戦し、Adobe PremiereProを使いコーヒーの淹れ方を制作。

どのページからでもオンラインショップに飛べるようにした。


苦労したところ

デザインにこだわってしまったところのレスポンシブ対応が上手くいかない箇所があった。

一眼レフで写真を撮るのが大変で、何度も撮り直しをして思った以上に時間を使った。

コーディングの途中でデザインを変更したことにより予定よりも時間がかかった。


URL

http://chill-chill-coffee.com/

No.4 BORDER RECRUTING SITE(テレマーケティング・コンサルティング会社)

名前:朏 直輝さん


年齢:30代


入学前の職業:ブランド品鑑定士・広告代理店営業


製作期間:3ヶ月

制作のポイント

ファーストビューに動画を付けた。

Webサイトを通して活力が感じられ楽しく勢いのあるコーポレートサイトが作れた。

会社の思いや良さを活かせた。


苦労したところ

デザインがなかなか決まらず、時間が過ぎていった。

JavaScriptを使って動きのある仕組みを作るのが難しかった。

頂いた素材を上手く加工して活かすのに苦労した。


URL

https://www.borderltd.jp/

No.5 BAGUIO CITY(フィリピン バギオ市)

名前:アバロス ミゲルさん


年齢:20代


入学前の職業:大学生


製作期間:3週間

制作のポイント

jQueryを導入した。

写真のレイアウトをタイル型にした。


苦労したところ

写真などの素材不足。

CSSが上手く反映されなかった。

アルバイトとの両立。


URL

Comming Soon...

No.6 MC-ENGLISH(英語スクール)

名前:小松 真理子さん


年齢:50代


入学前の職業:英語・英会話講師


製作期間:3ヶ月弱

制作のポイント

アピールポイントを明確に。

情報の適切な順序。

知りたい情報へのジャンプ。

見やすさ読みやすさ。

好きな色を使うが出過ぎた濃さには注意。


苦労したところ

CSSの理解に時間がかかった。

欲しいレイアウトに仕上げる難しさがあった。

思い通りのレイアウトが作れたのに、なぜか違和感のある場合があったが理由が分からない。

色の濃さ、フォントサイズ、ボーダーの太さを変えて試して落ち着くところを探した。


URL

https://mc-english.com/work/


気になった方は下記の【ご予約はこちら】ボタンから予約お願いします。


その他のSTUDIOつくばのブログ

BLOGS