スタジオ佐賀と一緒にWebデザイナーを目指しませんか?

佐賀のWebデザインスクール

デジタルハリウッドSTUDIO佐賀

2025年04月03日

【学習の集大成】卒業制作の作りかた


卒業制作(オリジナルウェブサイト制作)とは


 


こんにちは!デジタルハリウッドSTUDIO佐賀 スタッフです。


デジタルハリウッドのコースWebデザイナー専攻では、最終課題として「卒業制作(オリジナルウェブサイト)」を制作します。


この卒業制作は入校から4ヶ月間で基礎+αの学習を行った後、残りの2ヶ月間でオリジナルサイトを制作します。ウェブサイトの「企画」「デザイン」「コーディング」すべてを、受講生さん自身で一から取り組み、実戦さながらの制作を行います。


制作を進める中で、自分の強み、弱みを把握でき、スキルもぐんと上がります。6ヶ月の学習の集大成です。また制作した卒業制作作品は、就転職活動に必要なポートフォリオにも掲載可能です。


今回は、卒業制作を制作する流れについてご紹介!




1.卒業制作オリエンテーション


まずはオリエンテーションを行います。卒業制作の概要、ルール、制作するテーマの確認、スケジュール作成などをご説明。卒業制作の制作期間は2ヶ月間です。卒業制作スタート!




2.企画書作成


卒業制作は実戦さながらの作業を行います。いきなり作品制作に入るのではなく、まずは「企画書」を作って、コンセプトをまとめていきます。


この過程はとても大事なのでじっくりと時間をかけます。制作方針が不明確な状態で制作を始めると、行き詰まったり、迷ったり…して作業が行き詰まりやすくなります。これは実務でも同じです。


企画書にはサイトテーマ、デザインコンセプト、ターゲット層(ペルソナ)、サイト構成図、参考にするサイト等を記載していきます。実際にクライアントがいたら、ヒアリングしながら作っていきます。この段階でも、トレーナーにアドバイスを受けたり、チェックしてもらうこともできますよ。


 


企画書を作る前に「コンセプトシート」に考えをまとめます。

じっくりと時間をかけて。とにかく世の中のたくさんのサイトを見て研究するのが大事!

トレーナーのチェックを受けて企画書が完成!


実際の企画書はこちら >>




3.ラフ・ワイヤーフレーム制作


企画書が完成したら次はワイヤーフレームを作っていきます。ワイヤーフレームはサイトデザインの設計図みたいなものです。


いきなりデザインを作ってしまうと、迷ったり行き詰ったりして逆に制作に時間がかかったりしてしまいます。


またワイヤーフレーム段階でクライアントに見てもらい、要望やリクエストがあればそこで修正も可能です。


ワイヤーフレームを作る前の段階で、手書きでラフを作るものいいかもしれません。実務ではクライアントとラフ段階で共有し、認識を合わせることもあります。


 


 

ラフ

ワイヤーフレーム

主な使用ソフト




4.デザイン制作



ワイヤーフレームが完成したらデザイン制作です。

ワイヤーフレームの上に写真や色をつけていきます。企画段階で考えていたデザインコンセプト通りに進めていきますが、制作途中で修正があっても構いません。実務でも制作→修正→制作→修正…の繰り返しです。

 

まずはトップページを作りこんでいきます!トレーナーやクライアントからチェックをしてもらい、徐々に徐々にデザインが完成していきます。

デザイン

主な使用ソフト



5.コーディング


デザインが完成したらいよいよ最終工程のコーディングです。

うまくいくか不安…な方もたくさんいらっしゃいますが大丈夫。今まで学習したことと、これから実践していく中でぐーんとコーディングスキルは上がってきます!

トップページ、下層ページをコーディングする毎に作業スピードもアップ。トレーナーのサポートもありますので、ご安心ください。

主な使用ソフト




6.完成!そして卒業制作講評会




 


約2ヶ月間で制作した作品の講評会です。受講生、卒業生、トレーナーの前で作品を発表します。


受講、そして卒業制作お疲れ様でした!


 


卒業制作作品一覧はこちら >>


 


 


 


…で終わりではなく、今後はポートフォリオ制作が待っています!ポートフォリオには卒業制作はもちろん、各種課題で作ったオリジナル作品、中間課題も掲載可能!


Webデザイナー専攻は、受講、卒業制作を進めながら、同時に就転職活動の準備もできます。詳しくは無料説明会へお越しください!


  


Posted by デジタルハリウッドSTUDIO佐賀  at 10:13スタッフブログ

2025年03月28日

あなたの思いをWebデザインで形に。オリジナルデザインサイト課題でスキルアップ!


あなたの思いを形に


こんにちは!デジタルハリウッドSTUDIO佐賀 スタッフです。

写真のお二人は現在Webデザイナー専攻の「中間課題」「卒業制作」に取組まれています。

中間課題は「野菜セットの通販サイト」をテーマに、卒業制作は自由なテーマで制作します。

どちらも自分で考えてデザインして、コーディングまで行います。なので、答えはありません。特にデザインは人それぞれ。




色々なサイトデザインを見て、参考にして、自分なりのデザインを完成させます。そしてそれをコーディング。

答えが無い分、調べて研究して考えて・・・を繰り返すので、この2つの課題でぐんっとスキルが上がります!

お二人はすでにデザインが完成し、現在コーディング中!もう少しで完成です。
最後まで頑張ってくださいね!

  


Posted by デジタルハリウッドSTUDIO佐賀  at 12:53スタジオの日常

2025年03月27日

法人様向けサービスを承っております。




デジタルハリウッドSTUDIO佐賀では法人様向けサービスを承っております。

・ホームページ制作

・業務委託(サイト更新/SNS運用等)

・社員研修

・人材募集、等



お気軽にご依頼・お問い合わせください。

ご依頼・お問合せ >
  


Posted by デジタルハリウッドSTUDIO佐賀  at 12:32法人様向けサービス

2025年03月26日

Webの未来をあなた自身でデザイン。5月スタート生募集中です!


新しいことを始めるきっかけに


こんにちは!デジタルハリウッドSTUDIO佐賀 スタッフです。

日中は随分と暖かくなり、暖かいというか暑いくらいになりましたね。寒暖差が激しい時期なので、体調には気をつけなければなりません。

もうそろそろ4月になろうとしています。春!季節の変わり目、新しい季節、新年度、新生活、新しいことばかりです。新しいことだらけのこの春、新しいことを始めるきっかけに!





5月スタート生募集中です




スタジオでは5月スタート生を募集しております。お申込締切は【4月25日】までです。
4月中に受講スタートができる【早期お申込特典】もありますよ!

また5月スタート生の就転職活動までのスケジュールは以下の通り。




今年中の就転職、そしてWebデザイナーとしてのデビューも夢ではありません。
まずは無料説明会へお越しください!ご来校お待ちしております。  


Posted by デジタルハリウッドSTUDIO佐賀  at 08:00スタッフブログ

2025年03月18日

私たちも普段何気なく使ってる!サイトを使いやすく魅力的に「JavaScript」


JavaScript(ジャバスクリプト)とは??



こんにちは!デジタルハリウッドSTUDIO佐賀 スタッフです。

ところで皆さん「JavaScript(ジャバスクリプト)」という言葉、聞いたことありますか?Webデザイナーに興味がある方は、色々と調べていく中で出てきた・見たことのある単語かもしれません。


このJavaScriptとは、主にWebサイトに「動きをつける」ためのプログラミング言語です。動きをつけることで、そのサイトがより魅力的になりますよね!ただページが表示されているだけよりも、スマホの画面をスクロールしたら何かが表示されたり、ちょっとしたアクションがあると、見ていて楽しいサイトになります。


そして何といっても、サイト制作側も色々な表現ができるようになってくると、制作モチベーションアップにもつながります!





何気なく使ってた!Javascriptが使われた機能




Webサイトを閲覧している中で、私たちも何気なくこのJavaScriptで作られた機能を見たり使ったりしています。
画像が横・縦からすーっと流れてきたり、スマホのハンバーガーメニューだったり、画像を押したら拡大してくれたり…などなど。


今回はその一例として、画像を押したら拡大してくれる機能(モーダルウィンドウ)について、実際に見ていきたいと思います!サンプルサイトもご用意しました!





モーダルウィンドウ


先ほども簡単に説明させていただきましたが、画像を押すと拡大した画像が出てきてくれる機能です。通販サイトなどでよく見かけます。


例えば架空の「パン屋さん」のサイトで、パンのラインナップの紹介ページがあったとします。
「パンの写真が紹介されているけど、もっと大きな画像で細かく見てみたいな…」という時に、出番がくるのがJavaScriptを使った「モーダルウィンドウ」です。


▼こんな感じ






パンの画像が大きく表示されて、より細かにパンを見ることができます!通販サイトなどでも、商品を大きく見れるようにこの機能が使われています。普段よく見かけたり使ったりしていますよね。


画像だけではよく伝わらないので、実際にモーダルウィンドウを使ったパン屋さんのサイトをご用意しました。サイトを訪問していただき、パンのイラストをクリック・タップしてみて、モーダルウィンドウをぜひ実感してみてください!








Webデザイナー専攻でJavaScript学習!


今回ご紹介したJavaScriptは「Webデザイナー専攻」のカリキュラム内で学習できます。JavaScriptはもちろんjQuery(JavaScriptで書くと時間がかかる作業を簡単にできるもの)も学習できます。




JavaScriptを使って、卒業制作作品やその後の実務で制作するサイトをより魅力的なものに。
もっと詳しく聞きたい方は無料説明会へお越しください!  


Posted by デジタルハリウッドSTUDIO佐賀  at 08:38スタッフブログ