【ゼロ期生のサイト課題紹介】上流工程からデザイン、Studio実装まで！コーポレートサイトデザイン
NOT DESIGN SCOOL（通称NOT）のコーポレートサイト課題では、実在する企業を一つ選び、コーポレートサイトをリニューアルするというていで市場リサーチと情報設計から行います。これまで紹介した名刺やバナーと比べてさらにボリュームアップした課題内容でしたが、実際の現場で行われている1連の流れを経験することで、実案件にも臆することなくチャレンジできるようになります。
さらにStudio学習に進んだ生徒は、Studioの基礎を学んだあと、課題で制作したサイトのStudio実装まで行いました。
（Studio学習は選択制のため、今回は実装を行っていない方もいます）
今回は、NOTのゼロ期生が制作したコーポレートサイトのデザインをご紹介します。NOTでの課題内容や、受講生の制作したデザインが気になる方は、ぜひ最後までご覧ください！
※サイトの企業名は仮の名称を使用しています。
NOTのコーポレートサイト課題とは
受講生の課題を紹介する前に、NOTの課題について少し触れたいと思います。コーポレート課題では、以下の3つのフェーズに分けて制作を進めます。
事前準備編
対象企業を選定する
サイトの目的とゴールを定義する
ターゲットの設定
Webサイトの評価基準を定義する
施策の方向性を検討する
競合リサーチ
ポジショニングリサーチ
サイトコンテンツの企画
サイトデザイン編
サイトの情報設計
ワイヤーフレームの作成
デザインコンセプトの設計
デザインの作成
インタラクション設計
プレゼン編
提案資料をまとめる
メンターにプレゼンする
制作したデザインだけでなく、事前準備として上流工程の部分から実際に体験し、メンターにフィードバックをもらいながら進めることで、情報設計についての理解も深めることができます。また完成したデザインはメンターへのプレゼンを行うなど、NOTでは自分のデザインを言語化する機会も多く設けています。
Studio学習について
NOTでは選択制でノーコードツールStudioを学べるコースも用意しています。Studio Expertsやテンプレートデザイナーが作成したカリキュラムをもとに基本操作を学習し、Studioメンターが実装をサポートします。
最終的には自身で作成したデザインの実装まで行うことで、マークアップやレスポンシブ、アニメーションなどWebならではの表現をより深く理解し、実装を意識したWeb制作ができるようになります。
ゼロ期生のコーポレートサイト課題紹介
ここからは、コーポレート課題に合格した受講生の作品をご紹介します。
受講生には制作概要やポイントもコメントいただきました。Studioでの実装にも挑戦された方はサイトのURLも掲載しているので、ぜひ実際にサイトを閲覧してみてください！
えりかさん：オーダーメイド家具を取り扱う企業のサイト
実装したサイト：
https://preview.studio.site/live/xPOReXJ9Wr/
制作の概要：
■企業概要
高価なイメージの家具を、心地よい空間作りと教育の観点から取り入れやすい価格で提供する理念を掲げ、オーダーメイド家具や建材商品や店舗什器の製造・販売を行う企業。
■目的
現状サイトはtoB寄りの内容になっており、オーダーメイド家具の販売に力を入れていきたいためtoC向けにリニューアルしたい。
■ターゲット
中国地方〜四国地方の30代夫婦。テーブルやTVボード、ソファなど大きな家具は質のよい物にしたいが予算に限りがある。
制作時のポイント：
プロダクト商品の写真をしっかり見せる為シンプルなデザインにしました。『リーズナブルで気軽に取り入れられる上質な家具』がコンセプトなので、高級な雰囲気ではなく、でもチープな印象にならないようキーワードは『洗練された・柔らかな・落ち着き』としました。オーダーメイドサービスの訴求を念頭に置き、セクションの順番や動線を設計しています。シンプルだからこその難しさと、会社の強みは何か、デザインでどう表現するか、という点にとても悩みました。
ろみさん：子供向けランニングスクールのサイト
実装したサイト：
https://preview.studio.site/live/Kwa5MP8laX
制作の概要：
■企業概要
4〜12歳を対象としたランニングスクール。ただ走るのではなく、運動能力全般や人間力の向上も促す。
■目的
体験へのお申し込み
■ターゲット
小学生の子を持つ保護者
制作時のポイント：
「ランニングスクール」を装飾や色、動きで表現しつつ、「子ども向けスポーツ系スクール」と「専門的な、理論に基づいたプロフェッショナル感」の２つのバランスに苦心しました。子どもの明るい未来を感じ、参加してみたいと思えるサイトを目指しました。
しおりさん：阿蘇の温泉リゾートホテルのサイト
実装したサイト：
https://preview.studio.site/live/xmaZG2nAWR
制作の概要：
■企業概要
熊本県/阿蘇にある温泉リゾートホテル
■目的
情報の整理を行い、ユーザーが使用しやすいサイト設計に。また、インバウンドと観光客増加に伴い、施設の特色を訴求できる設計へリニューアルし、宿泊予約の増加を狙う。
■ターゲット
40代夫婦/女性のグループ旅行客
制作時のポイント：
noteにまとめましたのでこちらを是非ご覧ください！
あんみさん：家族向けの工務店のサイト
実装したサイト：
https://sweethome.studio.site/
制作の概要：
■企業概要
熊本県に拠点を置き、注文住宅に対応可能な工務店。代表は女性が務めている。
■目的
Webサイトリニューアルを通じて、お問い合わせ数を増加させること。
■ターゲット
30代の既婚女性
制作時のポイント：
住宅購入時に奥様の意見を重視する傾向が多いというアンケート結果を反映し、また女性代表であることも踏まえて、「女性に選ばれる住宅会社」をコンセプトにしたサイトデザインを目指しました。母親として大切にしたい「空気感」「光」「自然との調和」「家族との安らぎ」というキーワードが直感的に伝わるよう、温かみのあるデザインを採用しています。
さらに、素材のイラストもオリジナルで制作し、手描き感のある表現を取り入れることで、デザインに一層の親しみや温かさを加えています。
サボさん：ホテル・旅館のプロデュース企業のサイト
実装したサイト：
https://preview.studio.site/live/91aPBmkxOl
制作の概要：
■企業概要
ホテル・旅館のトータルプロデュースを提供する会社です。 主に京都の京町家再生事業や、宿泊施設・商業施設のプロデュースなどを行なっております。地元の方との連携を大切にしながら、それぞれの地域に根差した空間プロデュースを行います。
■目的
会社の想いや、実績を魅力的に見せ、強みや特徴を知ってもらいお問い合わせに繋げる。
■ターゲット
京町家のオーナー、宿泊施設・商業施設のオーナーや事業担当者
制作時のポイント：
企業とペルソナが持つそれぞれの課題からコンセプトを「地域と共に創る」とし、そのコンセプトが伝わるようなデザイン制作を行いました。
デザイン、Studio構築共に難しい、ブロークングリッドに挑戦しました。ずらしながらも、一定の規則性を持たせることにより、心地の良い配置になるようにしました。
また、アニメーションにもこだわりました！是非プレビューで実際のサイトをご覧ください！！
まっささん：幼稚園のサイト
実装したサイト：
https://preview.studio.site/live/d7WlDr4mWV
制作の概要：
■企業概要
自然保育をしている幼稚園
■目的
リニューアルを通して、園に興味を持ってもらい、見学に来てもらう
■ターゲット
30代の子どもを持つ親（特に母親）
制作時のポイント：
園の特徴である、外遊びがメインで、自然に囲まれているということがパッとわかるようなイラストを用いて制作しました。文字を読まなくても、園のことがわかり、フッターまで楽しく読み進められるような楽しいデザインにしました。
ナカノさん：自然素材を活かした工務店のサイト
実装したサイト：
https://nenrinkoumuten.studio.site/
制作の概要：
■企業概要
木や自然素材を用いた施工が得意な工務店。保育施設の施工の経験が豊富なほか、一般住宅の施工も行なっている。
■目的
現行サイトに不足している事業の特徴や施工事例の情報を掲載し、ユーザーに企業ビジョンや施工事例を魅力に感じてもらうことで、企業イメージの向上と問い合わせ率の向上を狙う。
■ターゲット
１）保育施設の新設、リフォームを検討している横浜市付近の施設責任者
２）一般住宅の新築、リフォームを検討している横浜市付近のファミリー
制作時のポイント：
架空のサイトデザインではありますが、企業ビジョン、企業メッセージ、代表メッセージから作成し、デザインコンセプトにブレが起こらないようにしました。「心も体も、すこやかでいられる場所づくり。」という企業ビジョンをサイトで表現するため、FVやaboutでも建物や内装の画像だけを並べるだけではなく、そこで暮らす人々の画像も多めに配置。そうすることでユーザーに施工後のすこやかな暮らしのイメージを抱いてもらう狙いです。
また、保育施設と一般住宅という全くターゲットの異なる事業内容を持つため、それぞれのターゲットが自分の求める情報にアクセスしやすいよう、保育施設の説明エリアには保育施設カテゴリの施工事例に直接リンクを貼るなどユーザー目線の動線を設計しています。
さくさん：手芸編糸の製造と販売を行う企業のサイト
制作したサイト：Figmaのプロトタイプ
■企業概要
社名：Hanamaru Yarn （ハナマルヤーン）
事業内容：手芸手編み糸の製造と発売。
各種手芸材料および服飾付属装粧品の製造発売。
■目的
ブランドイメージの向上及び若年層新規顧客の開拓。
（若い世代の人たちに、WEBサイトを通じて編み物の楽しさを感じてもらう知ってもらう）
■ターゲット
20代の若年層新規顧客を対象。編み物系のクリエイターやインフルエンサーに影響を受け、自分も編み物にチャレンジしてみたいと思っている。
制作時のポイント：
情報設計において、特に若い世代へのアプローチが今後の課題となるのではと思い、ターゲットに響くサイト設計を検討しました。若者向けのコンテンツを充実させ、魅力的な世界観を構築することで、より多くの人に編み物に興味を持ってもらいたいと考えました。
看板キャラクターを登場させ、親和性を抱いてもらえるようにするとともに、編み方解説動画やキット商品を掲載することで「編み物は難しそう…」というハードル感を和らげられるような環境を整えました。キャラクターのイラストや、各所で使用している編み物の素材など、自身で制作したものをたくさん詰め込んでいます。
私自身が編み物に熱中していることから、その楽しさをより多くの人と共有できたら…という想いを込めてサイトデザインを考えました。
こうきさん：宮城県のWeb制作会社のサイト
制作の概要：
■企業概要
宮城県に拠点を置き、自社開発の月額定額制HPサービス(VALUE)の運営・販売をIT事業会社。
■目的
現行サイトに不足している事業の特徴やサービス効果の情報を掲載し
ユーザーに企業ビジョンやサービス効果に魅力を感じてもらうことで
企業イメージの向上と問い合わせ率の向上を狙う。
■ターゲット
・新規HP開設を検討中の中小企業経営者/個人事業主
・既存HPのリニューアル検討中の中小企業経営者/個人事業主
制作時のポイント：
企業ビジョン等から「活動力が生み出す期待感」をデザインコンセプトに、顧客ニーズに迅速に対応するエネルギッシュな企業姿勢を表現。
文字のジャンプ率や色の心理効果を駆使し、力強いデザインで顧客のビジネス発展への期待感を高めます。
また、ターゲット目線のストーリー設計を行い、サービス特徴・効果を分かりやすく掲載し、情報へのアクセス性を向上させました。
それっぽいデザインから脱却するには
駆け出しデザイナーの中には、これまで参考サイトをツギハギして制作していた方や、なんとなくそれっぽいデザインを作っていた方も多いのではないでしょうか。
NOTでは1つ1つの作業やデザインに対して「どうしてそうしたのか？」という疑問を持つことを大切にしています。最初は苦戦する方も多いですが、メンターからのフィードバックを通して細かく確認しながら制作を進めていくため、最終的なアウトプットの質がとても高くなっています。
また実案件ではディレクターとデザイナーが分かれることもあるため、コーポレートサイト課題のように全ての工程を1人で行う機会は少ないかもしれません。ですが、Web制作だけでなくバナーや名刺などでも上流設計はとても大切です。情報設計がしっかりできているからこそデザインも迷いなく進めることができます。
NOTでの名刺課題やバナー課題については他の記事でもご紹介しています。こちらもすべて上流設計からデザインまで一貫して行っているので、ぜひご覧ください。
2025年1月開講の1期生を募集しています！
NOTでは、来年1月から開講するWEBデザインコース、UIコース、グラフィックコースの3コースで1期生を募集しています。
今回ご紹介したコーポレートサイト課題はWebデザインコースの制作課題になりますが、他のコースでも実務に即した様々な課題を用意しています。
各コースの詳細はこちらのページからご覧いただけます。
▼NOT DESIGN SCOOL新コースのご紹介
今回の受講申込は12月15日まで。この機会を逃すと次回の募集は最低でも6ヶ月先になってしまうため、ぜひ早めのご応募をお待ちしています！
この記事を書いた人
元パティシエのWebデザイナー。NOTではコミュニティマネージャーを担当しています。Studio Expertsに加盟し、Webサイトを中心としたクリエイティブ制作を行っています。
Xアカウント：https://x.com/mnk_dg