自主制作として、北海道上川郡当麻町にある施設「くるみなの木遊館」の架空リニューアルサイトを制作しました。
町が取り組む木育の拠点とされている施設であることが伝わるような情報設計と、サイトを訪れた人が施設のあたたかい雰囲気が感じられるようなデザインを心がけました。
ノーコードツールStudioを触ってみようと思い作成しました。
※サイト内にボタンやフォームを設置しているのですが、クリックできない状態です。理由はこちらをご覧ください。

クライアント

自主制作のためなし

制作期間・範囲

情報設計・ワイヤーフレーム:1日
サイトデザイン:1週間
コーディング:1週間

使用ツール・技術

Figma / Photoshop / Studio

ターゲット

当麻町民及び当麻町近郊の子育て家庭

課題・目的

当麻町の木育への取り組みをより広く知ってもらうこと、ターゲットに向けたデザインにすることにより施設の雰囲気や魅力を伝え来館者を増やすことを目的にサイトを作成しました。

情報設計

この施設の情報を単に羅列するのではなく、当麻町の木育への取り組みをあわせて紹介することで、施設の存在意義を明確にしました。「ただ遊べる場所」ではなく、「木育を体験できる場」であることを伝えることで、より魅力を感じてもらえる情報設計を目指しました。

サイトデザイン

施設の魅力である「遊びながら子供も大人も学べる」ことや「地域の木材を使った持続可能な施設」ということがサイトを見て伝わるデザインを心がけました。ただ遊べるだけではなく、きちんとコンセプトのある施設であることを伝えるため「学び（木育）」をテーマにし、紙っぽいテクスチャや手書きのフォントなどを用いて世界観を作りました。

施設内やおもちゃが木製であることから、掲載写真と調和するようなテクスチャや配色（茶色・緑色）を用いて、アクセントカラーに子供の遊び心を連想させるような明るい黄色を採用しました。

実装について

今回、紙の質感を表現するために紙のテクスチャを最前面に配置しました。しかし、そのままでは下の要素がクリックできないため、本来であれば「pointer-events: none;」を指定する必要がありました。
当初はカスタムコードでオリジナルのCSSを適用できると考えていましたが、実際には公開画面でのみ反映される仕様でした。無料プランでは公開後のサイトにパスワードを設定できず、転職活動のための自主制作サイトということもあり、公開は控えることにしました。そのため、サイト閲覧時のクリックは制限されていますが、全体のデザインを見ていただければと思います。

今回、初めてノーコードツールのStudioを使用しました。興味があって試してみましたが、普段のコーディングと比べて制約が多く、特にレスポンシブデザインの調整には苦戦しました。見た目はデザイン通りに整えることを意識しましたが、コードの構造には改善の余地があり、今後さらに練習が必要だと感じました。
また、デザイン段階でもっとStudioの機能や制限を把握していれば、よりスムーズに制作を進められ、デザインの要求を満たすものが作れたと思います。