どの色が相応しい？介護施設のホームページを3つの違う色で作ってみた

みなさんはサイトを作るとき、メインカラーをどう決めていますか？
もともとコーポレートカラーやブランドカラーが決まっている場合は悩みませんが、特にない場合は悩みの種です。
できることなら、いくつかのサイトを見比べてどれが与える印象にぴったり合うかを決めたい！と思いますよね。

サイトの作る目的や問合せ先といった簡単な質問に答えていくだけで、相応しいホームページがとにかく簡単につくれるBiNDの「AiDジェネレーター」ならそれが可能。

同じ条件でも様々なサイトを提案してくれるAiDジェネレーターの特性を活かし、選ぶ色によってサイトの印象がどう変わるかを実験してみました。サイトを作るとき、どんな色にしようか迷う人にはオススメの使い方。必見です！！

今回の条件としては、【介護施設のお問合せを目的としたホームページ】とだけを想定。
色は、暖色系の「橙」（Marigold）、アースカラーの「若葉」（Mint）、シンプルな「白」（White）の3色で作ってみることにします。

サイトの自動生成を始めます。

AiDジェネレーターを起動

まず、BiNDクラウドにログインしてからAiDジェネレーターを起動します。アカウントを持ってない方はBiNDクラウドのサイトにある「無料ではじめる」ボタンからアカウントを作成しましょう。

1.基本情報の入力

サイトのタイトルと説明を入れます。サイトタイトルは後で変更も可能ですが、必要な項目です。
今回は介護施設なので「介護施設　ぬくもりの場所　池尻」というタイトルにしました。

2.連絡先や住所を情報の入力

メールアドレス、電話番号などの連絡先を入力します。全部入れなくてもOKですが、住所を入れると地図を自動で配置してくれるので便利です。

3.画像の登録

ロゴ画像とメイン画像があれば設定します。介護施設の外観写真があるなら、メイン画像として登録するといいですね。もちろん、なければ何も登録しなくてもかまいません。

どのようなサイトを作りたいかを選びます。

4.サイト作成の目的

会社のサイトをつくりたい／事業や活動を紹介したい／商品やサービスのサイトをつくりたい／…などの目的を選びます。今回は問合せを得ることを目的としたサイトにしたいので「商品やサービスのサイトを作りたい」＞「資料請求やお問合せがほしい」を選択しました。

5.何のサイトですか？

コーポレート／サービス／個人・その他の中で、「個人・その他」を選択すると、選択肢にNPO・コミュニティ／教育・福祉／医療などの業種が出てきます。ここでは「教育・福祉」を選択し、さらに「介護」を選びました。

6.サイトのイメージカラー

ここからが今回のメイン。サイトのイメージカラーを16種類から、どういうサイトの印象にしたいかイメージして選びましょう。今回は、暖色系の「橙」・爽やかな「若葉」・シンプルな「白」を選んだ場合で試してみることにしました。
※色は一度にひとつしか選べないので、1.～7.を3回繰り返します。

7.サイト情報の入力したら、自動生成の開始

最後に会社名や事業内容、代表者名などの情報を入力します。（ここは5で選んだ業種によって入力項目が異なります。）
そのあと「サイトを生成」をクリックすると自動生成がスタート。生成が終わるまでだいたい3～4分くらいかかります。

提案された介護施設のサイトを見比べてみましょう。

AiDジェネレーターが、選んだカラーの中から異なる3つのトーンと、デザイン、構成の違う3種類を提案します。

この作業を3回繰り返して、3つの色からなるサイトを生成します。※6．のカラー選択で3種類をそれぞれ選び変えるのを忘れずに。

元気なイメージの「橙」（Marigold）を選んだ場合

はっきりとした色使いでシンプルなデザインの1、落ち着いた色使いで直線を使ったデザインの2、明るい色使いで、曲線を使ったやわらかいデザインの3、の3つのデザインが生成。見たいサイトを選んで「プレビュー」を押すと、ウェブ上でサイトをチェックできます。

橙の[1]サイトをブラウザでみる

爽やかな雰囲気の「若葉」（Mint）を選んだ場合

はっきりとした色使いで直線を使ったデザインの1、明るい色使いで曲線を使ったやわらかいデザインの2、落ち着いた色使いでイラストをあしらったデザインの3、の3つのデザインが生成されました。

若葉の[1]のサイトをブラウザでみる

清潔感を感じられる「白」（White）を選んだ場合

落ち着いた色使いで直線を使ったデザインの1、明るい色使いで曲線を使ったやわらかいデザインの2、カラフルな色使いでイラストをあしらったデザインの3、の3つのデザインが生成されました。

白の[1]のサイトをブラウザでみる

すべて同じ条件で自動生成しても、まったく異なる計9つのサイトができあがりました。
同じ色の中でも、クリアな色、くすんだ色など異なる3つのカラートーンを提案してくれるのがAiDジェネレーターのよいところです。

どの色のサイトにするかを見比べてみよう

■元気な印象を与える橙のデザイン：
鮮やかなオレンジというより渋めのオレンジが、トップのご老人の笑顔とぴったり合い温かい印象を与えています。
介護施設の「ぬくもりの場所」というサイトの名前にふさわしい色合いと言えそうです。

■落ち着いた雰囲気の若葉のデザイン：
緑やブラウンなど、いわゆるアースカラーと呼ばれる色は落ち着きが出て安心感を与えます。
自然と調和する色は介護施設に求められる雰囲気にマッチ。その一方で緑×黒の背景デザインは少々個性的な印象に。

■シンプルで簡潔な白のデザイン：
トップのビルボード画像の上に、透過性ある白枠に載るメッセージが印象的。
全体が白くまとまっているため、テキストが読みやすく、コンテンツが伝わりやすいのが特徴。

みなさんはどの色のサイトがもっとも合うと思われましたか？
もちろん正解はないので、施設のコンセプトやイメージに合う色を選んでください。

AiDジェネレーターの良いところは、何度も試して自分にピッタリのサイトが出てくるまで探し出せるところ。

セレクトされる写真素材も毎回異なるので、素材を決め手としてもよいでしょう。

AiDジェネレーターはサービスサイトから登録なしで今すぐお試し可能です。
気になった人は作ってみてくださいね。

AiDジェネレーターを試してみる

※最新のBiNDをお持ちの方は、BiNDクラウドへログインして、サイトシアターの「目的に合わせて自動生成」ボタンから、「AiDジェネレーター」をご利用ください。