株式会社BONITO様のコーポレートサイトのコーディングを担当しました

プロジェクト概要

静岡県焼津市を拠点に、地域に根ざした企業やサービスのブランディングを手がける、株式会社BONITO様のコーポレートサイトです。

本サイトでは、BONITO様の考え方や事業内容を伝えるページに加え、これまでに手がけたプロジェクトを紹介するWORK、ブランディングに関する知見を発信するJOURNAL、宿泊事業を紹介するSTAYなど、多面的な活動を一つのウェブサイトにまとめています。

コードハイブでは、支給いただいたデザインをもとに、全15ページのレスポンシブコーディング、アニメーション実装、WordPress構築を担当しました。デザイン以外のフロントエンド実装とCMS構築を一式担当し、公開後もコンテンツを継続的に発信できるウェブサイトとして仕上げています。

担当範囲

トップページから下層ページ、お問い合わせフォームまでのサイト全体のコーディングに加え、WordPress管理画面とテスト環境の構築、本番公開までを担当しました。

各ページは共通のデザインルールを保ちながらも、掲載する情報やコンテンツの目的に応じて異なるレイアウトを持っています。ページごとの見せ方を丁寧に実装しつつ、ヘッダーやフッター、カード、ボタンなどの共通要素は再利用しやすい構成に整理しました。

また、デスクトップとスマートフォンのどちらでも写真、文章、余白のバランスが崩れないよう、画面幅に応じたレイアウト調整を行っています。単純に要素を縮小するのではなく、コンテンツの並び順や文字サイズ、操作領域まで含めて端末ごとの閲覧性を考慮しました。

こだわりポイント

①デザインの意図を汲み取ったレスポンシブコーディング

淡いグラデーションの背景、大きく取られた余白、繊細な書体、写真を主役にしたレイアウトなど、BONITO様のブランドイメージを形づくる要素をできる限り忠実に再現しました。

特に余白や文字組みは、わずかな違いでもページ全体の印象が変わります。画面幅が変わってもデザインの静かな空気感が保たれるように、固定値だけに頼らず、コンテンツ量と表示領域に応じて自然に変化するレイアウトとして実装しています。

②ブランドの世界観を活かしたアニメーション

トップページのメインビジュアルには、複数の写真がゆっくりと切り替わるフェード形式のスライダーを実装しました。写真そのものの魅力やサイトの落ち着いた雰囲気を損なわないように、動きの速度や切り替えのタイミングを細かく調整しています。

また、スクロールに応じてコンテンツが現れる表示アニメーション、WORK・JOURNALの横方向スライダー、FAQや記事カテゴリーのタブ切り替えなど、サイト内のさまざまな場所にインタラクションを取り入れました。

アニメーションを目立たせること自体を目的とせず、ユーザーの視線を次のコンテンツへ自然に導くことを意識しています。表示領域に入った要素を検知して必要なタイミングで処理を開始することで、動きの滑らかさとページの表示負荷のバランスにも配慮しました。

③サイト全体を管理できるWordPressテーマの構築

サイトはWordPressのオリジナルテーマとして構築しました。会社情報やサービス紹介のような固定コンテンツと、WORK・JOURNALのように公開後も増えていくコンテンツを整理し、それぞれに適したテンプレートを用意しています。

共通パーツを一元管理することで、サイト内の表示を統一しながら、将来的な修正やページ追加にも対応しやすい構成にしました。ページごとに同じ記述を重複させないことで、更新時の修正漏れを防ぎ、保守性を高めています。

④更新しやすいWORK投稿機能

制作実績をクライアント側で継続的に追加・更新できるよう、WORKをWordPressのカスタム投稿タイプとして構築しました。

WORKでは、プロジェクトのカテゴリー、クライアント名、タイトル、担当内容、画像など、各実績を紹介するために必要な情報を整理して表示します。投稿した内容がWORK一覧、個別の詳細ページ、トップページのスライダーへ反映される構成とし、同じ情報を複数箇所へ入力する必要がないようにしています。

また、「企業ブランディング」「商品・サービス」「観光・地域PR」といったカテゴリーごとの分類にも対応しました。今後実績が増えた際にも、管理画面からスムーズに情報を登録・整理でき、既存のデザインを保ったまま新しい事例を追加できるよう更新性と拡張性を意識しています。

⑤JOURNALを軸とした継続的な情報発信

ブランディングに関する考え方やサービスの背景を発信するJOURNALについても、WordPressから記事を追加・更新できるように実装しました。記事一覧と詳細ページだけでなく、トップページにも新着記事が表示されるため、更新したコンテンツをサイト内の複数の導線から閲覧できます。

トップページではカテゴリーを切り替えながら記事を閲覧できるタブと横方向のスライダーを組み合わせ、情報量が増えてもページ全体が長くなりすぎない見せ方にしています。更新性だけでなく、訪問者が興味のある記事へ移動しやすい導線も意識して実装しました。

⑥細かな操作性まで考慮したインタラクション

スマートフォン用のメニュー、ページ内リンクのスムーズスクロール、FAQやJOURNALのタブ切り替え、動画コンテンツの再生表示など、サイト全体で必要となる細かな機能も実装しています。

お問い合わせフォームでは、入力内容を確認してから送信できる流れを用意し、入力エラーも項目ごとに分かりやすく表示されるようにしました。見た目の再現だけでなく、ユーザーが迷わず操作できることと、運営側が安心して利用できることの両方を意識しています。

ギャラリー

更新しやすいWordPressサイトの制作ならコードハイブへ

コードハイブでは、デザインデータをもとにしたレスポンシブコーディングやアニメーション実装に加え、オリジナルテーマによるWordPressサイトの構築にも対応しています。

制作実績やお知らせ、ブログなど、公開後に更新するコンテンツに合わせて投稿機能を設計することで、日々の運用を行いやすく、将来的なコンテンツの追加にも対応できるウェブサイトを制作します。WordPressサイトのコーディングやCMS設計でお困りの際は、ぜひコードハイブへご相談ください。