Works

一級建築士事務所 艸の枕 – コーポレートサイト制作

一級建築士事務所 艸の枕 - コーポレートサイト制作

CLIENT

一級建築士事務所 草の枕 様

ROLE
  • Direction
  • Planning
  • Web Design
  • Coding
  • Wordpress
LAUNCH

2021.10

URL https://kusanomakura.jp/

キングコング西野亮廣さんのイベント・音楽フェスなどの空間プロデュースを手掛ける、一級建築士事務所 草の枕(クサノマクラ) 様のコーポレートサイトを制作させていただきました。

Overview

ご要望とご提案

数年前に立ち上げたサイトでレイアウト崩れなど不具合が目立ってきたため、既存のデザイン・機能を残しつつ改修するか、一から再構築する形でのリニューアルをしたいとのことでご相談いただきました。

また掲載する情報が増えてきて煩雑になってしまったため、この機会に分かりやすく整理したいというご要望もお持ちでした。

リニューアル前のサイトを確認させていただいたところ、サイト内ページの階層設計がされておらず、情報量以上に煩雑な印象を受けてしまう状態でした。

そのためコンテンツとして必要なものを洗い出し、整理して階層構造を作り直しました。

UI/UXの面では、背景とのコントラストが小さく文字が読めなかったり、導線が分断されていてユーザーが迷ってしまう(何をしていいのか分からない)などいくつか改善点が見つかったため、それらを踏まえたデザインをご提案しました。

その結果、既存サイトをベースにした改修では効果が低いと考えられるため、フルリニューアルということで制作を進めることになりました。

デザインや施策について

このサイトのメインコンテンツは、クライアント様が過去に手掛けられたプロジェクトを紹介するGALLERYです。

GALLERYに掲載する写真を拝見したところ、すべてのプロジェクトを通して光(照明)の使い方が特徴的であったため、そこが映えるようなデザインを模索しました。

そこで映画館のような空間をイメージして背景色を黒に、かつ明度を一段明るめに調整したグレーを背景に配置することで奥行きを出しました。

またプロジェクトの写真は解像度が高めのものを多数掲載するケースがあるため、ページ表示に時間が掛かりすぎないよう装飾的な目的での写真(画像)の使用はできるだけ控え、CSSで表現するなどして対応しました。

反対にJOURNALなどの文章(テキスト)が主体となるページでは可読性を重視して白の背景色とし、ブロークングリッドレイアウトで単調にならず、かつ視線の流れを誘導するように設計しました。