脳育ギフト
（このサイト）

幼児教育・WEB・住まい・サロン。ばらばらに見える4つの事業を、ロゴの積み木ひとつでつないだ。

ロゴは、色と形のちがう積み木でできています。その形を、事業ごとの記号にしました。幼児教育は緑のアーチ、WEBは水色の円、住まいとお金は黄色の山形、サロンはピンクのアーチ。ページを移るとき、見出し、メニュー、スクロールバー、音のボタンまで、同じ積み木で話しています。テンプレートは使わず、一から手で書いています（フルスクラッチ）。

気づいた人だけが、楽しめるように。

ページの移り変わり

押したところから、行き先の事業の色の積み木が本当に落ちてきて積み上がり、次のページで床が抜けたように崩れて開く。同じ事業の中では、行き先のページ名（Works／制作実績など）が出る。

事業ページの見出し

小さな積み木が事業の形に積み上がる。さわると崩れて、また積み上がる。スマホは傾けると転がる。

今日の塔

見たページの数だけ、その事業の色の積み木が積み上がる。画像にして保存・シェアもできる。相談フォームには、今日見たページの名前も届く（フォームにそう書いています）。

積み木の音

本物の木の積み木を録った音（初めは鳴りません。ヘッダーの積み木のマークでオン）。

名古屋の時間と季節

朝・昼・夕方・夜、春・夏・秋・冬で、画面の光と積み木の影が少しだけ変わる。

メニュー

開く瞬間、4色の積み木が敷きつめられて、紙の色に変わる。「このページ」は積み木の目次。

スクロールバー

積み木の4色。いま読んでいる章の名前が出て、いちばん下では「上へ」のボタンになる。

隠しコマンド

3つあります。ひとつは、ロゴに。残りのヒントは、開発者ツールのコンソールに。

404のページ

「404」の積み木が足りない。はめると直って、トップへ戻れる。試してみる

ラジオCM

幼児教育のページでCMを再生すると、積み木が音に合わせて跳ねる。

動きを足しても、最初の表示は重くしない。

重い仕掛け（物理の計算・音・積み木あそび）は、使う瞬間に初めて読み込みます。動きを減らす設定の人には動かさず、「やさしい表示」（文字を大きく・動きを止める）にも切りかえられます。点数は、自分の目で確かめてください。いま自分で測る ↗

自分たちのために、決めたこと。

色と文字

ロゴの4色（緑・水色・ピンク・黄）と、紙のようなベージュ、墨のような茶。見出しはZen Kaku Gothic、数字と英字はInstrument Serif。

動き

「積む・崩す・また積む」だけ。教室で子どもがやっていることを、そのままサイトの動きにしました。

届け方

4つの事業の入口を、トップで「あなたは、どれですか」と聞いて分ける。英語のページも用意しています。

Client

一般社団法人脳育ギフトアカデミー（自社）

Logo

日本デザインセンター（プロデューサー：高柳さん）

Direction & Code

和田裕史

Scope

企画・設計・デザイン・実装（テンプレート不使用）

Sound

Pixabay の素材「Wooden Blocks」「Small wood Block」から切り出し（Pixabay Content License）

Physics

matter.js（MIT License）

Website

nouikugift.com

この事例を人に送る