ACQUA WORKS

株式会社Formosa様｜就労支援サイトの制作事例｜デザイン・コーディング

公開日 2026年9月9日更新日 2026年9月12日制作事例

株式会社Formosa様が名古屋・丸の内で運営する多機能事業所の就労支援サイトで、Acquaはデザインとコーディングを担当しました。就労移行支援と就労継続支援A型の案内を、写真、色分け、見出し、相談ボタンによって伝えるWebサイトです。

制作対象と担当範囲

ここでは、公開中の画面を使ってデザインと表示の特徴を紹介します。

施設の特徴を知り、2つの支援コースを確認して、見学・相談や資料請求へ進む。公開サイトの案内を、この3段階に整理した図です。

トップページの冒頭では、IT企業が運営する就労支援施設であることを見出しに掲げています。パソコンに向かう人物の写真に、Design、Coding、Office、AI活用のラベルを重ね、学べる内容を短い言葉で示しています。

白を基調に、青から緑へ変化する色をボタンや装飾に使用。説明文の周囲には余白を取り、施設の特徴、学べる内容、見学・相談への入口を読み進められる画面にしています。写真の柔らかな輪郭も、文字や情報が多いページの印象を和らげる要素です。

就労移行支援の「スグJOBアカデミー」と、就労継続支援A型の「Formosaクリエイティブ事業部」は、別々の枠で紹介しています。前者は青、後者は緑を中心に、コース名と説明、基本情報をまとめています。

名前だけでは違いが伝わりにくいサービスでも、同じ形式で情報を並べると、読み手がそれぞれの内容を確認する手がかりになります。このサイトでも、各コースの詳細ページへ進む前に、概要を見渡せる見せ方を採用しています。

ヘッダーとページ冒頭には、見学・相談のボタンと資料請求のボタンを配置しています。色を付けた相談ボタンと、輪郭を中心にした資料請求ボタンで、目的の違いを表しています。

ナビゲーションにはコース紹介、スタッフ、ご利用の流れ、よくある質問、施設・アクセスへの入口があります。スマートフォンではメニューを開閉する形式になり、冒頭の文章やボタンは縦方向に並びます。画面の幅に合わせて、情報を読む順序と操作する場所を整えています。

事業の説明や掲載したい内容が決まっていても、写真の見せ方、見出しの強弱、ボタンの配置によってページの印象は変わります。デザインから実装まで担当する場合は、見た目と実際の画面表示をつなげて制作できます。

Acquaは福岡県那珂川市を拠点に、ホームページの新規制作・リニューアルに対応しています。掲載内容の準備状況と必要な工程を伺い、担当範囲を整理します。

掲載画面は2026年9月9日時点のものです。画面内の支援実績や利用条件は掲載サイト側の情報であり、Web制作による集客成果を示すものではありません。