Webデザインコース卒業制作発表会

2023年12月12日 16:15

2023年12月2日（土）SUNABACO Webデザインコースの卒業制作発表会が開催されました。
北海道から沖縄、そしてロシアからも受講者がいらっしゃり、各々が作成したポートフォリオサイトを発表しあいました。その様子をお届けします。

YouTube動画はこちら！

沖縄をテーマにした架空のホテルサイト

カトウさん：
サイトを作るにあたってまずはFigmaで色とフォントの選定をし、モックアップを作りました。
PC版サイトとスマホ版サイトの制作をいたしました。色についてはベースカラーメインカラーアクセントカラーというものを3色設定しました。テキストカラーも3色です。黒と温かみのある白色とグレーを設定しました。

PC版とスマホ版のデザインが完成した後は、実際にコーディングに取り組みました。加藤さんはGSAPでアニメーションを活用し、サイトに動きをプラス。特にスクロールアニメーションには、ChatGPTを使用して作業時間を短縮しました。レスポンシブデザインにも対応し、画面サイズに応じて適切に表示されるよう工夫されました。その際、CSSのセレクターの活用や、クラスの効果的な使用が、作業をスムーズに進める秘訣となりました。

2ヶ月のコース受講を通じて、SUNABACOの講座が無駄がなく、講師の質が高いことを強調しました。他のスクールと比べても、SUNABACOの特長が際立っており、実践的なスキルを効果的に学ぶことができたと感じました。
特にポートフォリオ作成では、写真の色合わせが予想以上に難しい課題でしたが、講座で得た知識が役立ち、高品質な制作物を完成させることができました。

モヤモヤして困ってる若手社員に寄り添うサイト

ツチタニさん：
私のサイト制作の背景には、顧客の問題解決という強い意図があります。ターゲットとして選んだのは、モヤモヤしている会社員や声を上げられない若手社員など、共感できる存在として、彼らに寄り添いたいという思いからです。短い期間での卒業制作発表に向け、自身の実力と経験を最大限に生かし、制作に取り組みました。

制作したサイトでは、白をベースにアクセントカラーとして赤を使用し、シングルレイアウトと固定ヘッダーを取り入れました。サイト名は私の名前をローマ字にし、赤で強調することで個性を出しています。メッセージは千葉の写真を背景に、暗い道を歩む会社員に光を当てるイメージで構築しました。

前回のプログラミングスクールではChatGPTに頼ってコードを書いても、実際にはコードを修正できなかった経験がありました。しかし、今回のWebデザインコースでは検証ツールを積極的に活用し、問題を特定して修正する方法を学びました。卒業制作を通じて、これまでの経験を踏まえてWebデザインのスキルが向上し、特に配色の重要性に気づくことができました。Webデザインが自分の実力向上に繋がったことを実感し、今後のスキル向上に期待を寄せています。

みんなが幸せになれるポートフォリオサイト

ハマチさん：
友人や身近な個人の飲食店経営者をサポートしたいという願いから、直接営業できるようなポートフォリオを作成しました。転職やクラウドワークスのようなオンラインの仕事ではなく、顔の見える友人や近隣の喫茶店などに訪れ、名刺やポートフォリオを通じて、1度顔を合わせた人にアプローチし、協力を得ることを想定しています。

ワークフレンズという変わった欄を設けました。
これは、他の制作者のポートフォリオが紹介されています。
自分が仕事を取れなくても、お客さんの要望が叶い、SUNABACOを通じて知り合った仲間のポートフォリオを紹介することで、双方にとって幸せな結果が生まれることを期待して作成しました。
お客さんの要望が叶い、仲間も案件を獲得できるチャンスがあるので一番見てほしい項目となっています。

制作にあたって、写真と色の選定に迷っていたが、今回はWebデザイン1stからの継続受講。前回はデザインが難しく、コーディングに進めなかった経験から、今回は必ず使えるポートフォリオを作成することを目標に掲げて取り組みました。前回の完璧を求めすぎて時間が足りなかった反省を生かし、今回は最低限のポートフォリオを作ることを意識。
アントレプレナーシップ講座と同時に受講し、毎日6日間の1週間での受講はしんどかったが、最低限の機能実装とアントレプレナーシップ講座で学んだことを活かせ、デザインについてもwebデザインコースで深められ、大変ではあったが2ヶ月間で大きく成長できたと感じています。

Webデザインの挑戦と成長を記録したポートフォリオサイト

ササキさん：
私は、IT企業への就職やクラウドワークスなどでWeb制作の案件を受注する際に、自分のスキルやできることをアピールするためのポートフォリオを作成しました。

実は受講前から体調や精神的な消耗がありましたが、今回のWebデザインコースはどうしても受講してみたかったので、挑戦するも予想外に急遽就職活動を始めたり個人で受注してる案件の対応もあり、その影響でWebデザインコースに追いつけずに精神的にも落ち込んでしまった。
一時は卒業制作の辞退も考えたが、自らの意思でコースを受講した以上は卒業制作をやり遂げたいと思い、最低限の機能を突貫工事で実装することができました。

進化するサイトと多彩なスキルのポートフォリオサイト

ミヤモトさん：
Webデザインコースの卒業制作発表では、先月に取得したサイトやドメインを放置していたが、ポートフォリオの機会で申し込みを決め、公開を決意。制作の目的は単純に案件獲得だけでなく、日々進化するサイトを作り、ターゲットとしてはWebサイト制作や盛り上げたいサイトを持ちたい人々を想定。

参考にしたサイトはなく、書籍「webデザイン良質見本張[第2版]」から色の選び方やフォントの使い方を学び、単純な案件獲得だけでなく、日々進化するサイトを目指しました。
制作実績のセクションには、5つの架空のサイトをFigmaで制作しました。
レスポンシブ対応で、ハンバーガーメニューも実装。中身のプログラムは時間の制約からchatGPTを利用し、背景のスクロールを止める方法などもchatGPTに質問して解決しました。その他にも、英文と和文でフォントを分けるなどタイポグラフィーをこだわりました。
Webデザインコースを通じて、GSAPやデザイン、動きだけでなく、より多くのものを制作できる自信を得ることができました。

3年間、仕事でWebの制作に従事しています。現在も同様の業務を続けていますが、自身のポートフォリオを制作することはなかなか時間を確保できず、後回しにしてしまっていました。しかし、今回のコース受講を通じて、すごく背中を押してもらえたのでポートフォリオ制作に対するモチベーションが大きく高まりました。これを機に、今後は仕事を積極的に取り組んでいきたいと考えています。

信頼感と責任感を伝える、ポートフォリオサイト

コイワさん：
このサイトは、訪れた方々に仕事をいただけるよう信頼感を高めると同時に、安心してサイト制作を任せられる責任感を伝えることをサイトテーマに設定しました。

配色とレイアウトにおいて信頼感を与えたかったので、Webデザインコースで学んだ知識を応用し、青色をメインカラーに採用しました。
また、使用しているフォントはnotoSansというシンプルなものを使っています。
サイトテーマで設定した信頼感を与えるためにはどうしたらいいかというところで、自分のSNSを見てもらいたいと思い、ヘッダーの幅を一般的なものより広く取り目立つようにしました。そこにSNSのプロフィールページに飛ぶアイコンを設置することで、視線誘導を狙いました。

サイトを制作していて、デザインだけでなくファーストビューの選定に苦労しました。現在の画像は一時的なものなので、これらについてもっと多くの情報を収集したり他のサイトを参考にしながら進化させていくことが今後の課題となります。そして、このサイトを通じて自分のことを理解していただき、仕事の依頼をいただけるようなサイトにしていくことが目標です。

スポーツカー愛好者のためのパーツ紹介サイト

マスティさん：
日本のスポーツカーを持っている方向けに、車のパーツを紹介するサイトを制作しました。
ヘッダーの画像を固定したかったんですけど、できなかったので今後修正していきたいと思います。写真は公式の画像を使用しました。

お問い合わせの部分は日本語にしようとも思いましたが、やはり外国人向けのサイトにしたいなと思ったので全部英語に統一しました。
実は去年高校3年生でプログラミングコースをしたんですけどその時はチームで制作していたんですけど、今回は1人での制作ということでしたが上手くできました。また、授業で習った内容もサイトに組み込むことができました。

シンプルでこだわりあるポートフォリオサイト

くまのりさん：
案件が獲得できるようなサイトを目指しました。見た目は極めてシンプルですが、実は細部にわたりこだわり、基本的な事項をしっかりと反映させることを意識しています。

サイトの配色としてまずベースカラーに白よりもややグレーがかったを色を使用し、目に優しい緑をメイン・アクセントに取り入れました。
技術的な側面でデザインの4元則や余白の8の倍数揃え、黄金比を活用するなど、基本的な要素を丁寧に取り入れ、シンプルながらも見ていて心地よいサイト目指しました。

受講中にSassやGSAPなど新しい技術に触れ、それがなぜ必要なのかを理解することができ、非常に有益な経験でした。SUNABACOの講座は技術だけでなく目的に焦点を当てており、身につけた知識を将来に活かす基盤ができたと感じます。通常のWebデザイン講座では主にコーディングが中心だと思いますが、毎週のWeb調査課題を通じてサイト研究が役立ちました。最初は言葉にできなかったが、何周かするうちに目的や意図をスムーズに伝えられるようになり、案件獲得時にデザインの理由を説明できるようになりました。SUNABACOの講座はデザイナーが目指す方向性を理解しやすくし、スタッフや同期の皆さんに感謝しています。

エンジニアとしての興味を引く、モダンで動きのあるポートフォリオサイト

フルルンさん：
今回は自分のポートフォリオを作成しました。
目的としては、仕事を依頼してもらうこと、Webデザイナーとしてエンジニアとしての興味を引くこと、そして質問された際にポートフォリオを参照してもらうことです。

ターゲットはWebページやWebアプリを開発したい人、自身の力量を知りたい人です。配色はベースがホワイトで、メインカラーは優しさや温かみを感じさせるグリーン系、アクセントカラーは赤です。
レイアウトとタイポグラフィーはシンプルで、フォントは統一しています。作成したサイトはGSAPを使用し、クリックやスクロールに応じて要素が動きます。スマホ版ではレイアウトを変更し、開発を効率的に進めるためにh1やh2などのタグごとにフォントを統一しました。

学校などの環境では、技術に先入観を持ちがちで、できることが優れているという印象が強まります。しかし、その技術や成果物がどのような目的に貢献しているのか、その本質的な意義が重要だと感じました。社会に出る前にこれを理解できたことは良かったと思います。また、現地での交流も非常に楽しかったです。

シンプルで春らしい配色が特徴のポートフォリオサイト

みきさん：
自分が作成した作品を見てもらうことで、案件獲得につなげたいと考えています。ターゲットはWEB制作に関心がある人で、様々なアイデアに迷いながらも、シンプルかつ見やすいサイトを目指しました。

配色は、シンプルな白をベースに、春らしい色合いで統一しました。グリーン、オレンジ、イエローの中から選び、文字は黒っぽい色で統一。1ページで全体が見やすく、技術的な要素も控えめにまとめました。
タイポグラフィーは、ゴシック系の落ち着いた雰囲気の書体を選び、安心感を演出。GSAPも取り入れ、可愛いらしいちょっとしたアニメーションも加えています。
サイトはヘッダーから始まり、写真やワークス、自己紹介、スキル、コンタクトといったシンプルな構成。自身で撮影した写真を使用し、作品がまだない分、依頼を受けることを期待しています。
最終的な目標は、見ている人がストレスなく快適に閲覧できるようなサイトを作ることで、制作過程での難しさや兼ね合いにも気を配りました。レスポンシブ対応も取り入れ、完成しました。

聞くだけとか想像するのと、やってみるのとはやはり全然違うなっていうのを最後の最後に卒業制作を1人でしてみてすごく感じたところです。
でも前回のプログラミングコースから受けてるんですけど、検証ツールの良さがそこまで分からなかったのにもう今はもうないとやっていけないぐらいにやってますも成長したなって自分で思うところです。

写真や配色にこだわった柔らかい印象のポートフォリオサイト

のんさん：
ページの目的が、お仕事の依頼や一緒に仕事をしたい方への自己紹介ということで、ポートフォリオを作りました。ターゲットとして個人事業主の方や同業者の方をターゲットにし、配色は灰褐色と白、メインが弁柄色という赤みがある色を使用しました。レイアウトはシングルカラムで、タイポグラフィーは丸みを帯びたマゴシックを使用し、柔らかい印象にしました。

HTML、Sass、JavaScript、GSAPを使ってサイトを制作しました。
画面のスクールに合わせて、写真や文字がフェードインでゆっくり出てくる感じにしてます。
私は写真撮るのが好きなので、サイト内の画像は自分で撮りました。
ファーストビューと自分の写真に関しては、そのまま使うと目が痛くなるかなと思ってオパシてィをかけています。趣味の項目の写真は、綺麗さを知って欲しかったので、ここはオパシてィかけずにそのまま入れました。

プログラミングからの継続受講で、CSSへの理解が深まりました。デベロッパーツールの使い方やデザインの勉強を通じて、新しい視点を得ることができました。特に配色の勉強は、写真が好きなので色合いに敏感になり、楽しい時間でした。現地の仲間たちとの交流もあり、ワイワイしながら勉強できたことがとても楽しかったです。充実した期間を過ごすことができました。

架空のチョコレート屋さんをイメージしたシンプルで高級感のあるサイト

ととさん：
ポートフォリオのイメージがあまりつかめず、架空のチョコレート屋さんのWebページを制作することにしました。このサイトは販売専門ではなく、お店の紹介やこだわりを知ってもらえるようなもので、ターゲットは商品購入を考えている人やお店に興味がある人を想定しています。

デザインでは白黒を基調にし、フォントには見やすくてシンプルで高級感のあるものを選びました。トップビューを白黒にすることでチョコの写真が際立ち美味しそうに見える工夫をしました。
画面のスクールに合わせて、写真や文字がフェードインでふわっと出てくる感じにしてます。また、写真の選定にも工夫をしました。
レスポンシブにも対応しており、今後はハンバーガーメニューの実装に取り組んでいきたいです。

アニメーションが個性的なふんわりとした印象のポートフォリオサイト

たこさん：
最初は方針が定まらず迷っていましたが、最終的には簡単なシートを制作し、自分の特徴や個性を伝えるポートフォリオサイトを制作することを目指しました。
サイトのデザインにおいては青系の配色、JPゴシック系のタイポグラフィーを採用し、シングルカラムレイアウトで全体的にふんわりとした印象を意識して構築しました。

Figmaを使用してトップ画像や配色を調整し、サイトにはタコが動く仕掛けがあり、上から下に流れるようにデザインされています。最後に実績やプロフィールを追加し、トップ画面に戻るボタンも実装しました。現在はリンクなどが未完成ですが、全体的にはこのような形に仕上がっています。

最初は何を作るか考えていました。HTMLは2日ぐらいでできたんですけど、CSSが非常に難しく、HTMLが簡単だと思っていたので比べて5倍ほど時間がかかりました。最初の段階でのしっかりとした設計が重要だと学びました。div割りやFigmaの使い方などももっとしっかり勉強すべきだと感じました。

デザインの奥深さを感じるポートフォリオサイト

角ハイさん：
今回ポートフォリオサイトを作るにあたって、デザイナーという言葉の定義が広すぎて、発注者側の視点からデザイナーをどう選ぶかが悩ましいと感じました。自分のテイストをきちんと表現し、LPを依頼されたり、スポットでUXデザイナーを探している会社をターゲットにしました。

サイトの配色は、各作品で様々な色が入ってくるので、そちらが目立つように基本的にはモノトーンの配色に差し色として黄色を入れ、色味は抑えています。レイアウトは実装を想定したデザインをアピールすることを重視し、無理なアニメーションは控えました。タイポグラフィーは、Open SansとNoto Sans等の標準的なゴシック体フォントを採用し、視認性を考慮しつつ、安心感のあるものを採用しました。
シンプルなサイトでスクロールするとシングルページで表示されます。コンセプトやデザインの視点、得意な領域などを客観的に示すためのパラメーターを導入し、アニメーションも一部取り入れています。スマホサイトもレスポンシブ対応しており、全体的に問題なく挙動するようになっています。

最初、僕はプログラミングコースに参加し、SUNABACOに入りました。その後、デザインコースを受講しているんですけど、だんだんとSUNABACOが意図しているものが体にインストールされてきたと感じます。前のコースを受けて初めて、これってそういったことだったのかなと理解できるようになりました。そういった学びがだんだんと積み重なってきて、非常に良い経験になりました。また、現地に来ることで現地の皆さんとの交流があり、面白い経験もたくさんありました。お酒も飲んだりして、そういった意味でやっぱりすごく面白かったです。

信頼感と落ち着きを感じるポートフォリオサイト

ちゃんももさん：
案件を受注することが最終的に得たい結果だなと考えています。現状は、まだwebデザインをする経験がないため、未経験の人に案件を受注する際にはまず問い合わせをしていただきたいと思っています。そのページの目的は、私の人柄や人物像などを理解してもらうことでコンタクトを取ってみたい、そういった印象を持ってもらうことです。

サイトの配色を、アクセントカラーにオレンジを採用し、メインカラーにはブラウンとブルーを使用。ベースカラーはブラウンの明度を上げた白をベースに採用。オレンジの明るさに新鮮さを感じさせつつ、過度な若々しさを避け、信頼感と落ち着きを演出するために配色を選定しました。
卒業制作にあたり、Pharol（ファロール）という屋号を考えました。
Pharol はポルトガル語で灯台を指し、デザイナーとして、困っている人たちにとっての道しるべになりたいというコンセプトを込めました。

受けたきっかけは、SUNABACOさんを通していただいた案件をお手伝いさせていただいて、そこで悔しい思いをしたので、それを乗り越えたくて受けました。CSSとお友達になることが目的で、まだお話できるレベルです。プログラミングコースを受けた時と比べて自分の吸収率が違ったことに気付き、それは自分が本気でそれを習得したいかどうかの違いだったと感じています。まだ成長途中で、来週以降に完成させたいと思います。

最後に

Webでざいん2ndの皆さん、1ヶ月半の努力と挑戦、本当にお疲れさまでした。
どれも素敵なサイトで、素晴らしかったです。
今回の卒業はスタート地点であり、これからも学びの道は続きます。皆さんと一緒に成長していくことを楽しみにしています。SUNABACOと共に、未来への一歩を踏み出していきましょう！

この記事が気に入ったらサポートをしてみませんか？