第39期の卒業制作発表会を開催しました!その②

毎月、6カ月の学習期間を終えて卒業する受講生の皆さん。その多くは「webデザイナー専攻」という未経験からweb業界への就・転職やスキルアップを目指すコースを受講されます。 受講修了を飾る集大成は、自身が制作したwebサイトをプレゼンする発表会!
今回は昨年8月、10月から受講された10名の皆さんがオリジナルな作品を発表して卒業を迎えられました。今回は広島市内にデザインオフィスを置く永戸修司さん(Brand Planting Studio Kirin)にもゲストでご参加いただきました。

その①はこちら

SassやGitも学びサイトの世界観を表現

⑤(有)吉田グラビヤのサイト制作 8月生 Sさん

ポリエチレン袋への印刷を事業とする「吉田グラビヤ」のサイト制作を卒業制作にしたSさん。高齢化による製造現場の縮小や、ポリエチレン袋の消費減少など厳しい環境のなか、印刷など製造工程の紹介や販路開拓がサイト制作の目標です。

Webデザイナー専攻で学んだSさんは受講期間中、独学でSassやGitなどコーディング言語や管理ツールも学ぶなど熱心に取り組んできました。
デザインコンセプトは印刷会社ならではのインクをイメージしました。トップのメインビジュアルではインクを思わせる動画を取り入れて鮮やかなイメージを伝えています。ABOUT・COMPANYのページなどのボタンや文字に動きをつけるなど工夫しました。

担当トレーナーは「プログラミング関心があったSさん。レイアウトや動きの入れ方、サイトの構築方法にいろんなバリエーションを学んで使っている。手を使い始めて形が出来るまでが速い。さらにブラッシュアップしていってほしい」と期待しました。3月に入ってからもトップページや細部のクオリティをあげたSさん。あきらめずに頑張った姿勢をこれからも生かしてください。

最高の笑顔で、企業の信頼とファンを増やすサイト制作に挑戦

⑥ ティーズカンパニー㈱コーポレートサイトリニューアル 10月生 Kさん

ご家族がご近所だったことを縁に、自動車販売ティーズカンパニーのコーポレートサイトリニューアルに取り組んだKさん。卒業制作として決める前に、社長あてに心を込めてお手紙を書いて了承を得たそうです。認知度の高い大手販売店とは違い、中古車検索サイトへの販売店登録に留まっている現状を何とかしたい思いです。コーポレートサイトでは自動車販売に加え、もうひとつの事業である体験型観光も紹介し、信頼とファンを増やすことが目標です。

現行サイトは10年前のもので、観光業の情報が入っておらず、リニューアル時に刷新します。アクティブかつスタイリッシュなデザインが社長のコンセプト。黄色を基調にスタイリッシュを演出。社長の「最高の笑顔」で信頼感も演出しました。ご自身で撮影に赴き、撮った写真を活かすレイアウトを最後まで根気強く模索しました。フォント選びも含め、いくつも差分を作りブラッシュアップを重ねています。スクロールすると時間差で写真が出てきたり、画像を押すと詳細が表示されたりと目線を離さない工夫も凝らしました。

担当トレーナーは「コーポレートサイトとして、笑顔の社長の写真が効果的。顔が見えることが大事。パソコン版の写真配置をみると、レスポンシブ対応が大変だったよう。全体的に丁寧なつくりになっている。」毎日のようにスタジオで学んでいたKさん、ご卒業で寂しくなります。ご活躍を祈ります。

ビジュアルメインにブランドの価値観を表現

⑦ Plant Girl NYC ウェブサイト制作  10月生 Sさん

クライアントのPlant Girl NKYは、米ニューヨークで活躍するクリエーターMegan Kennaのブランド。絞り染めの服やアクセサリーを扱います。Sさんは、このブランドの価値観をアメリカで共感してもらい、購入につながることを目標にサイト制作を進めました。現状はインスタやTikTokで告知していますが、一部ECサイト等はほとんど使われていないそうです。日本向けではなく、ターゲットはアメリカでのサイト制作となります。トレンドに敏感な20歳代にアーティスティック、ナチュラル、サイケデリックなイメージを演出します。ニュース更新のためにワードプレスを実装する予定です。

アースカラーを基調に、横ストロークがサイトのアピールポイントです。Meganさん本人のリクエストで文字配列を曲げて曲線感を出しました。商品表示は、センターのみカラー表示とし、アクセントを付けました。オンラインストアへの誘導をトップページにも配置するなどアクセスを容易にしています。おなじ「ナチュラル」という言葉でも日本とアメリカでは受け止め方が違うことを把握し、デザインに反映しました。これからの公開を控え、ワードプレス実装や細かな修正を加えていきたいそうです。

担当トレーナーは「最初から、実装が難しい横スクロールのサイトを構想していた。独自なデザインで取り組んで、実装力がついたのでは?背景は単色にみえるがノイズを乗せたこだわり。クライアントにも喜んでもらえたのでは?」「米クリエーターの感性が鋭く、勉強になったのでは?英語テキストは日本語とデザインでも違う。アメリカの文化などよく理解したうえで制作したことがわかる」と希少な経験を称えました。

ビジュアルをセンス良くデザイン、韓国コスメを紹介

⑧ 韓国コスメ紹介サイト「brush myself up」サイト制作 10月生 Hさん

「brush myself up」とは韓国コスメ「tom&nd」と「HERA」を紹介するためHさんが制作するサイトのタイトルです。大好きなブランドを同年代の女性に紹介するため、卒業制作のテーマに決めました。企画段階では、コロナ禍でマスクをしていても80%の女性がリップを付けている、などコスメへの関心度の高さを分析。10代から20歳代前半の女子学生向けに見られやすいサイト設計を目指しました。

ホワイト、控えめな赤をキーカラーにシンプルで統一感を図りました。商品は2社のリップに絞り、商品とともにブランドを紹介します。トップページでは写真を横に並べ大きく表示させることにより、全体の雰囲気を華やかにしています。食事中でもマスクを外した時が気になる女性に、購入の際に意識するポイント「色」「保湿性」「質感」など女性ならではの視点で情報を盛り込みました。商品説明では日本語とあわせて英語表記も加えています。メニューボタンもクリックすると変化をもたせる工夫がみられます。

担当トレーナーからは「データで説得力を出すなど企画書が良く出来ている。デザインでは配色が良く、レイアウトも5×5のような感じでまとめている。デザインのセンスもよく、将来この業界での仕事も視野に入れてみたら?」と期待しました。「3‐4か月目から、好きなテーマを目標に、やる気を感じた。読みやすさにもこだわり、ショップページの情報量も多い。レスポンシブにも対応し、コーディングへの理解も深まっている」と頑張った姿にエールを送りました。

イラストポートフォリオサイトをつくってみよう

⑨ イラストポートフォリオサイトをつくってみよう。 10月生 Yさん

とにかく、「仕事に繋がるサイトにしたい」との思いで、自分のポートフォリオサイトの制作を卒業制作に決めたYさん。自身のイラスト作品を大きく見やすく、自分の世界観をつくり発信することを目的としました。あらためてYさんは自分の世界観とは何か考えました。「和な春っぽいイメージ」を表現することを決めます。

サイトのイメージキャラにはオリジナルの「ひつお」(ヒツジの顔をしたオオカミ)を起用。サイト内の随所に登場します。トップページのファーストビューには印象に残る1枚絵を、入れ替えながらの表示で目を惹かせます。自然と滞在時間を長くするため、動くパーティクルを散りばめています。メニューは「作品」「実績」「問い合わせ」に分けました。イラスト作品は随時更新していけるよう、コーディングを早めに完了させ受講期間中にワードプレス化までしています。サイトでのイラスト販売のことも考慮し、イラストは縦長サイズで閲覧できるように工夫して目を惹かせます。

担当トレーナーは「当初からやりたいことが決まっていた。プレゼンで人を惹きつけたが、イラスト力を存分に生かしたレイアウトになっている。これから運用していくにつれて、もっと良いサイトになっていくと思う。トップページのパーティクルは目を惹く。」と個性的なサイトを評価しました。お問い合わせスペースを広げておくことや、パーティクル画像のデータを軽くすることで動きも良くなるとのアドバイスもありました。多くの人に見てもらえるといいですね。

素材のこだわりと信頼感を盛り込んだパティシエの魅力を紹介

⑩ パティスリーゴドー様 サイト制作  10月生 Yさん

尾道市からスタジオ広島での受講を続けたYさん。オンラインでの在宅学習と講評会などスタジオでの学習を並行して頑張りました。尾道市に隣接する三原市郊外のお菓子工房パティスリーゴドーさんのサイトを卒業制作で取り組みました。アレルギー体質の方やお子さんにも安心な素材にこだわったケーキ屋さんです。ブログとオンラインショップはありましたが、素材のこだわりや商品紹介などまとめて見せるサイト設計を目標にしました。道の駅やJAなど既存の販路からの拡大やオンラインでの受注増も目指します。

「素材へのこだわり」と「信頼感」をサイト制作のアイコンにし、素材はトップページへ見出しを付けて1ページにまとめました。丁寧な商品説明と、ナチュラルを基調としたトーン&マナーで信頼感を訴求しました。背景のテクスチャや余白感を調整することでお店の雰囲気を演出しています。トップには大きめな写真を配し、商品画像はカーソルを置くと浮き出てくる工夫が見られます。スマホのみ一部カルーセル表示にするなど、モバイルユーザーに向けた配慮もしっかりしています。

担当トレーナーは「企画書に説得力がある。仮説を立てて制作、という流れはクライアントにも理解しやすいと思う。講評会のたびに良くなっていった。」「安心感、信頼感を演出するフォント選びは正解で、無駄がない」と講評しました。

その他のSTUDIO広島のブログ

BLOGS