ケアひろば

人 + 地域 + 社会をつなぐ、コミュニティサイト「ケアひろば」のホームページ制作・システム構築を行いました。

概要

ケアひろばは「非営利団体と個人がつながる場」「地域のコミュニケーションツール」「セーフティネット」として株式会社ケアツール様が運営されている SNS サイトです。 非営利団体や個人の方が無料で登録・利用することができます。

デザインは、ユーザー層を考慮したスッキリとしたやさしいデザインで、さまざまな端末に対応したレスポンシブデザインでお作りしています。 機能面では、ベースは Drupal のコミュニティ機能を活用し、独自機能についてはカスタムモジュールを開発する形で構築を行いました。

※上記画像内コンテンツはサンプルコンテンツです。

デザイン

サイトデザイン

配色

クライアントからは最初に「シンプルですっきりしたデザイン」をご要望としていただいておりました。参考として挙げていただいたサイトも、白黒ベースの限りなくシンプルなデザインでしたが、今回のサイトの性質を考えると「暖かみ」や「賑やかさ」を感じさせるデザインが良いのでは…ということで、ご提案時には、当初のイメージ通りのすっきりとしたモノトーン系の配色でまとめたデザイン案の他、弊社からのご提案としてグリーン系を中心にまとめた明るく優しい雰囲気の配色パターンなど複数案ご提案させていただいた結果、こちらの優しい配色のサイトデザインに決定しました。

レスポンシブウェブデザインの採用

今回のサイトでは、ブラウザ幅によりレイアウトが変化するレスポンシブウェブデザインを採用しています。画面解像度に応じてレイアウトを最適化することができるため、パソコンからはもちろんスマートフォンやタブレット端末からでも見やすく操作しやすい設計を実現することがました。

ロゴデザイン

こちらもサイトデザイン同様に、シンプルなロゴや賑やかさを感じさせるロゴなど方向性の異なるテイストで複数案ご提案をさせていただき、こちらのイラストをふんだんに取り入れた可愛らしいロゴデザインをご採用いただきました。
ロゴタイプ（ロゴの文字部分）からその周囲に散りばめられたイラストまで、すべて弊社内のデザイナーがケアひろば様のために描き起こしたオリジナルの手描きイラストを用いています。ケアひろばの名にふさわしく広場にさまざまな年齢層の人々が集まっている様子を表現しました。
ケアひろば ロゴデザイン制作実績

イラスト

今回のサイトではロゴマークをはじめ、スライドショーやメインナビゲーション部分などにも、イラストやアイコンをふんだんに取り入れることで、親しみやすく暖かい雰囲気を表現しています。ロゴマークとスライドショーには弊社デザイナーが描き起こしたオリジナルのイラストを、ナビゲーション部分などにはアイコンフォントを採用しました。
スタジオ・ウミでは使用用途に応じて様々なテイストのイラスト制作が可能です。

機能開発

SNS 機能

ホームページに訪れた一般の方がユーザー登録して利用できる SNS 機能を構築しました。 ユーザー登録、ログイン、ログアウト、ユーザー情報編集、パスワード再発行といった SNS サイトで必須となるユーザー周りの基本機能は Drupal のコミュニティ機能を利用することでスピーディにベースの機能をご提供することができました。

プロフィール登録

登録ユーザーが自分のプロフィールや URL 、住所などの情報を自由に登録・編集できるプロフィール登録機能を備えました。 こちらも SNS サイトでは一般的な機能ですが、 Drupal のユーザー周りの機能を利用する形で使いやすくメンテナンス性の高い機能をスピーディにご提供することができます。

記事投稿

登録ユーザーが自分の投稿を自由に投稿できる機能を構築しました。 ブログのように画像を添付したり、ちょっとしたポスターや文書を PDF として公開する機能も備わっています。

記事へのコメント投稿 非公開

他のユーザーが投稿した記事にコメントを加える機能を構築しました。 こちらも Drupal では記事に対するコメントの設定が細かく行えるようになっているため、その機能を活用する形で構築しています。 また、下の記事を投稿した人とコメントを書いた人のみが閲覧できる「非公開コメント機能」も備わっています。

記事への Nice!

他のユーザーが投稿した記事に対して Nice! をつける機能を構築しました。 Facebook や Instagram 、 Tumblr などでも、コメントとはちがう形で反応を返す「いいね」「スキ」といった機能が用意されていますが、ケアひろばでもそのような Nice! 機能をご提供しています。

ユーザーのフォロー

他のユーザーの新着記事一覧を表示できる「フォロー」機能を構築しました。 安心して利用できる SNS にしたいということでフォロー機能は承認制でお作りさせていただきました。 省力化によるスピードアップとコストダウン、メンテナンス性の向上に考慮し、データベースやフォローボタンの部分はカスタムモジュール、一覧表示の部分はコントリビュートモジュールと切り分けた形での実装にしています。 高品質のコントリビュートモジュールがあり独自の機能拡張もやりやすいという Drupal の特長を活かしました。

ユーザー・記事検索

「ユーザー検索」「記事検索」機能を構築しました。 ユーザー検索では名前や住所から他のユーザーを検索でき、記事検索では記事をフリーワードを使って検索することができます。 いずれの機能でも、入力フォームからフィルタリング、検索結果の表示、ページめくり機能に至るまで、検索機能に必要なほぼすべての要素を Drupal の Views (ビューズ) という定番モジュールを利用して実現しています。

ユーザー間メッセージ送信機能

ホームページ上で登録ユーザー間でメッセージがやりとりできる機能を構築しました。 メールを利用せず、サイト上で完結した形でメッセージのやりとりができます。 非営利団体の場合には、公式サイトをわざわざ立ち上げることなく、オンラインの問い合わせ窓口を設けることが可能です。 個人の場合には、ちょっと連絡を取りたいけれどメールアドレスでのやりとりはしたくないようなときでも安全にメッセージを送り合うことができます。

通知機能

ホームページのヘッダー領域に各種通知が届く「通知」機能を構築しました。 他ユーザーからのフォローの申請や未読のコメントなどがあったときにヘッダー領域にその旨を表す通知が届きます。 JavaScript を使った控えめな強調エフェクトも追加させていただきました。

スライドショー

新しくホームページに訪れたユーザーを対象としたスライドショー機能を構築しました。 jCarousel という JavaScript / jQuery のライブラリと Drupal のモジュールを使用して実現しています。

案件概要

クライアント名	ケアツール 様
URL	なし
Drupal バージョン	Drupal 7
ジャンル	法人・施設・団体サイト
デバイス	PC／スマートフォン／タブレット
当社スコープ	デザイン (Webサイト・ロゴ)／Drupal導入／コーディング／プロジェクト管理
プロジェクト期間	約3ヶ月半