DESIGN IT YOURSELF.

BUROKI


top

design

  • top
  • design
  • web
  • やわらかい雰囲気で伝える。びすけっと保育園のwebデザイン

やわらかい雰囲気で伝える。びすけっと保育園のwebデザイン

web

  • top
  • design
  • web
  • やわらかい雰囲気で伝える。びすけっと保育園のwebデザイン

やわらかい雰囲気で伝える。びすけっと保育園のwebデザイン

2021.02.26.

スポンサーリンク

スポンサーリンク

2021年の一番はじめのwebサイト制作実績となります。

昨年末にお話をいただき、2月10日に無事公開となった「企業主導型保育園 びすけっと東戸塚」。それから多少修正や追記などありましたが、先日ようやく制作完了となりました。

ボク自身保育園のwebサイト制作は初めてだったので、親子向けの柔らかい雰囲気を感じるデザインテイストなど試行錯誤しながら進めました。

制作会社さんからの案件を初対応

今回は初めて、制作会社さんからの案件にデザイナーとして加わり、ディレクションやクライアントさまとのやりとりなどはお任せして制作担当としてデザインとコーディングを手掛けました。ボク自身が直接クライアントさまとやりとりできるわけではないので少しスムーズさを欠く部分などはどうしても発生しましたが・・これも経験ですね。初めてのことだったので学びの多い案件となりました。

びすけっと保育園のスマホTOP
スマホで見たときのメインビジュアル

制作したページは20ページ以上

企業のwebサイトと違って保育園のwebサイトは「入園に関する問い合わせや申し込み」がゴールであり、保護者の方に保育園のことを知ってまずは安心してもらうために年間行事や取り組み、魅力、先生のことなどを伝える必要があります。なので制作するwebページは通常のwebサイトより少し増えてしまいます。今回は約20ページ以上とやや中規模なwebサイトとなりました。

ボクがディレクションまで担っていたら本当に必要なページなのか、直接クライアントさまとコミュニケーションをとりながらサイトマップの作成から進めないといけないですが、今回は制作会社さんがサイトマップ作成や情報の整理・用意をしてくださったのでその部分は省くことができ、1ヶ月弱というややタイトな制作期間の中ですべてのwebページの制作を完了させることができました。そこはよかったところです。

びすけっとの1日ページ
一番つくり込んだ「びすけっとの1日」

ページ数が多いとスマートフォンの場合いろんなページを見せるのが難しいですが、項目を整理しながら基本的にどのページにもアクセスできるようにナビゲーションを組みました。

スマホナビゲーション
スマホのナビゲーション

入園の案内ページへのフローティングバナー

ゴールが入園に関することへのアクションなので、それを促すために入園のご案内ページにはどのページ、どの画面からも遷移できるように右上にフローティングバナーを設置しました。

フローティングバナーのデザインは何度もつくり直しながら今のデザインに決めたのですが、他のビスケットアイコンとはあえて違うテイストにすることにしました。そしてすぐに目に入るようにバナー自体を常に上下に動くようなアニメーションを設定。ふわふわさせています。

制作したフローティングバナー
上下にふわふわさせてみました

どのページを見ても右上に配置されます。

制作したフローティングバナー
右上の「入園のご案内」と書かれているビスケットです

常時固定で表示させるもので気をつけないといけないのは、

  • 情報の邪魔になっていないか
  • 警戒心を与えていないか
  • 操作がしにくくなっていないか
  • 「しつこい」と思われていないか

などですね。
見る人によってはそう思われかねないものなので、サイズなど何度も試しながらできるだけ優しい印象でつくることを心がけました。

どんなデザインであれ不快に感じる人はいると思いますが・・固定配置の場合そこが難しい部分です。

ビスケットアイコンも制作

サイトデザインの要望のひとつに「びすけっと保育園なのでページのところどころにビスケットを散りばめてほしい」というものがありました。なのでページデザインと同時にビスケットアイコンも数種類制作。各ページにいろんな種類のビスケットを散りばめることにしました。

ビスケットのアイコンたち
カラーはクライアントさま指定のものでした

こういったイラストのようなアイコンからポイントやメリットを伝えるためのポップなアイコンも制作。

ビスケットのアイコンたち その2
カラーとテイストを考慮しつつ制作

保育園の魅力を伝えるためにできるだけ視覚的に伝えていくことを意識しました。
公開後少し修正・追記がありましたが先日無事完了となり、ほっとしました。

production list

今回の制作で対応した項目
  • webデザイン
  • コーディング
  • アイコンやタイポグラフィなどのグラフィックデザイン
  • wordpressでのサイト構築
  • PC、タブレット、スマホ表示対応(レスポンシブデザイン)

びすけっと保育園のwebサイトはこちらから

実際のサイトは下記のリンクよりご覧ください。
※webサイトによっては変更・クローズしてることもありますので、その際はご容赦ください。

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

design list

デザイン作品一覧

graphic

削ろう会 大阪 交野大会のイベントロゴ、パンフレットデザインをお任せいただきまし...

先月の話になりますが、4月の12日と13日の二日間、大阪交野市で「削ろう会 全国大会 第41回 大阪 交野大会」というイベントがいきいきランド交野にて…

2025.05.03.

web

明朝体フォントをアクセントに。IVARA LEARNのランディングページデザイン

当サイトにwebの制作実績として紹介させていただいている実績は、基本的にデザインとコーディングの両方を担当させていただいた制作案件がメインなの…

2025.04.09.

graphic

黒の用紙に活版印刷でグレードアップ。株式会社FORGEの名刺デザイン

昨年の9月に制作実績にて紹介している株式会社FORGEさまの名刺デザイン。 ブランドの世界観をより引き立てる。株式会社FORGEの名刺デザイン 名刺のデ…

2025.04.01.

goods

創業54周年。のぼり刃物店さんのロゴデザインと缶バッジ&ステッカー

毎年恒例としてお任せいただいている制作物が、今年も完成。 きたる2025年4月1日(火)、いつもお世話になっている大阪府茨木市にあるのぼり刃物店さ…

2025.03.27.

graphic

数字で各特徴を視覚的に伝える。ハイブアイキューのフライヤーデザイン

会社員時代の元同僚が働いている株式会社ハイブアイキューさまから、会社の強みや特徴を伝えられるチラシをデザインしてほしいというご依頼をいただ…

2025.03.17.

graphic

LPの世界観をさらに広げる。キシヒロエステートのフライヤーデザイン

いつもお世話になっているパートナーの辻本さん(株式会社FORGE)からのご紹介で、昨年末に久しぶりの紙媒体のデザインを制作させていただきました。…

2025.02.25.

designをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル