01 / OVERVIEW
何を作ったか
徳島の藍染と滞在をテーマにした、架空のアトリエのサイトです。画面の布に触れると、その場所から藍がにじみます。スクロールで一枚の布が染まり、工房や宿の風景へ。色を選び、染めて、旅を思い描くまでをひと続きの体験にしました。
02 / CHALLENGE
目的
藍染の工房と宿は、写真と文章だけだと「きれいな青」で終わってしまいます。染める手ざわりを、来る前に少しでも感じてもらうことを目的にしました。
03 / APPROACH
どう考えて、どう作ったか
藍染の店なので、サイトの操作そのものを「触れて、染まる」にしました。動きは飾りではなく、ここで受けられる体験の予告です。
色は霧の灰・墨・藍の3色だけ。書体も2つに絞りました。章ごとに面を切り替え、1つの章では1つの場面だけを見せています。
一枚の布がスクロールに合わせて「触れる・ひらく・着く」と形を変え、最後は工房の写真に入れ替わります。布の色は5つの青から選べて、選んだ青はページの最後にある旅のしおりにも残ります。
04 / HOW IT'S BUILT
設計を見る
AIMA の最初の画面は、3枚の層を重ねてできています。
-
見出しは左の1列に、布の色を選ぶ丸いボタンは右下の1か所にまとめました。スクロールで進む章ごとに、見せる場面は1つだけです。
見出しの字は、下にある色によって明暗が入れ替わります。灰の地の上では墨色に、藍に重なると白く抜けます。
-
画面の中央にある布に触れると、触れた点を中心に藍が広がります。青は5つから選べて、選んだ色はページの最後まで引き継がれます。
-
いちばん奥は、霧の灰の地と、薄い灰の「AIMA」だけ。使う色は3つ、書体は2つです。
霧の灰 #E6E8E8墨 #111A24藍 #1C39B3Noto Sans JP（ほとんどの字）／Cormorant Garamond（英字の一言と値段）
触れると、3枚の層に分かれます