働きがい創造プロジェクト「コレカラヤ」のWebサイトを制作しました!アクセシビリティを確保し、働きがい創りを拡大。


「働くこと=しんどいこと」といった発信がSNSで溢れ、働くことに関してネガティブな思いを持っている人も多いかもしれません。「働く」と一言にいっても、その内容は多岐にわたります。能力を発揮するだけでなく、関わる人たちと協力し合っていくことが必要です。どんな仕事が合っているのか?スキルアップはどうしたらいいのかな?と、様々な疑問が浮かぶことと思います。

仕事を探しながら、働きながら、何をすべきか迷ってしまうこともあるかもしれません。そんな時は、働きがいを創造するプロジェクト「コレカラヤ」のサイトをのぞいてみませんか?

「コレカラヤ」とは、学生・企業・福祉事業所・学校が参画するプロジェクトのこと。運営するのは、「プレジャーサポート株式会社」です。「自分の役割に自信をもち、互いの価値を認め合える社会を創ります。」をビジョンに、企業を対象にコンサルティング事業を行っています。

今回は「コレカラヤ」のご紹介と共に、コレカラヤウェブサイトをどのように作ったのか、レポートしていきたいと思います!

「コレカラヤ」ってどんなプロジェクト?

大きく分けて4つのサービスを展開しています。

  • 学校向け出前授業を行う「コレミラ」
  • インターンシップに代わる新しい企業理解を提案する「コレトラ」
  • 障害のある方のキャリア設計を描く「コレデビ」
  • 企業と若者が集い働きがいをつくり出すためのコミュニティ「コレカラヤコミュニティ」

他にも、あらゆる企業の働きがいを掲載した「働きがい探求コラム」はたくさんの企業にインタビューを行い、読み応えのあるコンテンツとなっています。多様な企業に「働きがい」についてお話を伺っています。

コレカラヤ公式サイトのトップページのスクリーンショット画像

ウェブサイトはこんなメンバーでつくりました!

ロゴデザイン・ロゴガイドライン制作…夜明け前の一番暗いところから照らしていくデザインを。

担当:デザイナー・齋藤智成さん

「コレカラヤは、夜明け前の一番暗いところから照らしていくプロジェクト」という言葉に辿り着き、シンプルな造形に夜明けのシンボルマークを制作していただきました。「コレカラヤ」のロゴタイプは、「人と人とがつながりあい、社会の中を流動していく道」を表現しています。これまでにない新しいプロジェクトを体現した、先進性の高いデザインに仕上がりました!

コレカラヤのロゴ

ロゴガイドライン

担当:合同会社Ledesone

ロゴの納品にあたっては、使用方法を定めるガイドラインを作成しました。背景に選ぶ色によっては視認性(見やすさ)が失われてしまうこともあるのですが、このガイドラインによって、見やすい背景色を選びやすくなっています。また、ロゴの使用範囲についても明示しました。

ロゴの色と背景色の関係を示すガイドライン。白・グレー・黒・紫・赤・青・水色・緑・黄色・オレンジ・ピンク・青紫の背景色に、それぞれ通常カラーまたは白抜きのロゴが配置され、背景色に応じてロゴの使い分けを示している。
ロゴは背景色によって通常カラーと白抜き版を使い分ける必要があることを示したガイドラインの例。

グラフィックレコーディング…大きなメッセージ「働きがいをともにつくる」を大胆なリボンで表現

担当:山本あやなさん

コレカラヤの大きな強みは、小中学生〜大学生〜障害のある方のみなさんを対象に、働きがいのためのサービスを展開していること。それぞれの「場」でそれぞれの「人」のやりがいや思いを「結ぶ」「つながる」を

イメージして制作しました。人と人との繋がりが生む「やりがい」のGOALはどの場も人も同じ、という

意味合いを重視し、大きなリボンでぎゅっと結ぶグラフィックレコーディングに仕上がりました。人物イラストには心の動きも描かれていて、関わる人たちが心を動かしながら「コレカラヤ」というプロジェクトで共創している様子が表現されています。

『コレカラヤ』のグラフィックレコーディング。中央に大きく『コレカラヤ 働きがいをともにつくる』と描かれ、リボンの形に広がるデザイン。周囲には『仕事?』『やりがいは?』などの吹き出しや、人々が働く・学ぶ様子、キャリアデザインや就職活動、未来を描くシーンがイラストで配置されている。大学生向け『Colle de Try』、障害者向け『Colle de Debut』、小中高生向け『Colle de Mirai』の3つのサービス名も記載されている。

ディレクション・デザイン・運営…働きがいをつくる道のりを、高い視認性で表現

担当:フェルマータ合同会社

ディレクションを含む全体設計と制作実務の両面をフェルマータ合同会社に担当していただきました。グラレコのエッセンスを引き継ぎ、教育や研修を示す「道」と交わりを示すリボンがサイト全体に配置されています。様々な立場のみなさんが、ともに働きがいを作り育てていく道のりを、変化を示すグラデーションで表現しています。

フォントはデジタル庁も使用するNoto Sans JPです。可読性や視認性が高いのが特徴で、サイトの見やすさを支えています。

レイアウト

コレカラヤ公式サイトのトップページ

情報は、はっきりと線や色で区切られ、明確な構造になっています。この構造が、読みやすさを保ちます。

コレカラヤ公式サイトのサービスページのスクリーンショット画像

コレカラヤ公式サイトのレポートページのスクリーンショット画像

ウェブアクセシビリティ…どんな方でもスムーズに参加できる、機能的なサイトのために

担当:合同会社Ledesone

合同会社Ledesoneではウェブアクセシビリティの簡易チェックを行い、その結果をフェルマータ合同会社へフィードバックとして共有しました。実装についてはフェルマータ合同会社が担当しています。

ウェブアクセシビリティは、ウェブにおけるアクセシビリティのことです。利用者の障害などの有無やその度合い、年齢や利用環境にかかわらず、あらゆる人々がウェブサイトで提供されている情報やサービスを利用できること、またその到達度を意味します。

政府広報オンライン「ウェブアクセシビリティとは?分かりやすくゼロから開設!」

アクセシビリティが確保されていると、困りごとを抱えている人でもサイトを利用しやすくなります。コレカラヤでは「コレデビ」で障害者雇用のキャリア設計も提供しています。どんな方にもスムーズに見ていただけるよう、以下のような項目で見やすさについてフィードバックを行い、デザインを改善しています。

主なチェック項目

  • 代替テキストが適切に設定されているか(サイト公開前の画像のみ)
  • タブキーやスペースキーでの操作ができるか
  • 見やすさ、聞きやすさ、区別しやすさはあるか
  • その他Ledesoneメンバーの他の発達障害当事者の視点で見づらいポイント見やすいポイントの書き出し

代替テキストは音声読み上げソフトが拾う情報です。画像の内容に合うよう調整していきました。

Web制作のアクセシビリティチェック画面。『障害者が社会にDebutするためのincubator』のページが表示され、合同研修の様子を写した写真に代替テキストを設定している。

余白の設計によって読みやすさが変わることもあります。

Web制作のアクセシビリティチェック画面。記事一覧ページで、記事カードの見出しと代替テキストを確認している。

視線の移動ストレスを減らし、読みやすいサイトに

Web制作のアクセシビリティチェック画面。インタビュー記事の中で、2人が会話している様子の写真に代替テキストを確認している。

まとめ

制作レポート、いかがだったでしょうか。さまざまな人にコレカラヤに触れて欲しいと思い、情報の受け取りやすさを重視して制作しました。

働くということにも、人それぞれ多様なものの感じ方があります。誰かにとって合う働き方が自分に合う働き方とは限りません。自分にとって働きがいってなんだろう?と考えたとき、コレカラヤの存在を思い出してもらえたらとても嬉しく思います。サイトは日々更新されており、障害者雇用企業・就労移行施設向けセミナーや、あらゆるイベントを開催しています。ぜひニュースやピックアップをのぞいてみてくださいね。