一級建築士事務所 艸の枕 公式サイト

CLIENT
一級建築士事務所 艸の枕
CATEGORY
WEB
ROLES
  • Direction
  • Research
  • Planning
  • Wireframe
  • UI/UX Design
  • Front-End Dev
  • WordPress
LAUNCH
2021.01
URL
https://kusanomakura.jp/

OverView

キングコング西野亮廣さんのイベントや音楽フェスなどの空間プロデュースを手掛ける、一級建築士事務所「艸の枕(クサノマクラ)」様より、コーポレートサイトのリニューアルをご依頼いただきました。

ご依頼の背景・目的

既存サイトは数年前に制作されたもので、レイアウト崩れなどの不具合が目立ち始めていました。
既存デザインを活かして部分的に改修するか、全面的にリニューアルするかをご検討されており、あわせて増え続けた情報を整理し、より分かりやすいサイトにしたいというご相談でした。

また、業界内での認知度が高く、ご依頼が非常に多いことから、お問い合わせ窓口は設けつつも過度に目立たせたくないという、一般的なコーポレートサイトとは異なるご要望もいただきました。
さらに、noteで発信している記事を自社サイト内のブログにも掲載し、情報発信の基盤を一本化したいというご相談もありました。

ご提案・施策のポイント

既存サイトを調査したところ、コンテンツの階層構造が十分に整理されておらず、情報量以上に煩雑な印象を与えていることが課題でした。
また、文字と背景のコントラスト不足や導線の分かりにくさなど、UI/UXの改善点も多く見つかったため、部分的な改修ではなくフルリニューアルをご提案しました。

情報設計では、必要なコンテンツを整理したうえで階層構造を再構築し、訪問者が目的の情報へ迷わずたどり着けるサイト構成へ刷新しています。

お問い合わせ導線については、一般的なサイトのようにグローバルナビゲーションへ配置するのではなく、必要なページにのみ設置する設計を採用しました。
ブランド価値や現在の受注状況を踏まえ、「問い合わせを増やす」ことではなく、「必要な方が適切に連絡できる」ことを重視した導線設計としています。

また、noteとの連携についてはRSSによる自動表示も検討しましたが、外部サービスの仕様変更や障害による影響を避けるため、自社サイトにも記事を蓄積する運用をご提案しました。
これにより、情報資産を自社で管理できるだけでなく、SEOの観点からもメリットのある構成としています。

設計・制作のプロセス

設計にあたっては、これまで手掛けられたプロジェクトを調査し、作品に共通する特徴を分析しました。その中でも特に印象的だったのが「光」を活かした空間演出です。

この魅力を最大限に引き出すため、施工事例ページでは写真が映えるダークトーンのデザインを採用し、一方で会社情報やブログなどテキスト中心のページでは可読性を優先して明るい背景を使用するなど、コンテンツに応じて最適な見せ方を設計しました。

デザインは作品を主役にすることを第一に考え、装飾を抑えたシンプルな構成をベースとしています。
一方で、シャドウや明度差による立体感、ページごとに変化を持たせたレイアウトを取り入れることで、器としてのWebサイトが単調にならないよう調整しました。

運用面では、noteの記事をコピー&ペーストするだけで公開できるよう、不要な記号や特殊文字を自動的に調整する仕組みを実装しています。
また、プロジェクト実績や採用情報などもソースコードに触れることなく更新できるよう、WordPressのカスタムフィールドを活用して管理画面を設計しました。専門知識がなくても継続的に運用できる環境を整えています。

今後の展開など

公開後も、クライアントは継続的に情報発信を行い、施工実績やコンテンツの更新を積極的に進められています。

サイトは日々の運用を前提とした設計としているため、通常の更新はクライアント側で完結できる体制を構築しました。
現在は、新たな機能追加や改善が必要になった際にスポットでサポートを行う形で、長期的な運用を支援しています。

Credit

ディレクション
  • 柴田竹思(Bamboo Works)
企画・設計・編集
  • 柴田竹思(Bamboo Works)
UI/UXデザイン
  • 柴田竹思(Bamboo Works)
実装・構築
  • 柴田竹思(Bamboo Works)