OVER VIEW
Project
アスクハウジング – Webサイト
Client
アスクハウジング／住宅
Live View
Release
2020年8月
Highlights
- 非対面・メールのみで完結させるブランド構築 対面打ち合わせを一切行わず、限られた資料からブランドの本質を読解。期待を超える提案により、一度も顔を合わせることなく新ブランドの立ち上げを完遂。
- ビジュアルと言葉で紡ぐトータルプロデュース 施工写真の補正から、キャッチコピーを含む全テキストの執筆まで一括担当。デザインとライティングの高度な調和により、ブランドの世界観を多角的に構築。
- プラグインに依存しない完全スクラッチ開発 既存の制約に縛られないよう、フォーム機能を完全独自実装。管理画面からすべての挙動を柔軟に調整できる、クライアントの成長に寄り添った自由度の高い基盤を提供。
- マニュアル不要の圧倒的な運用性の実現 直感的なUI設計と自動化機能により、公開後の操作に関する問い合わせをゼロに。静寂の中に宿る「使いやすさ」を追求し、持続可能な情報発信基盤を具現化。
STORY
盛岡市の注文住宅会社「アスクハウジング」――新ブランド立ち上げと同時に、その存在を伝える公式Webサイトが誕生しました。「私たちの家づくりは、施主様の夢やご希望をお聞きすることから始まります。」その哲学を体現するサイトは、一度も顔を合わせることなく、完全メールのみのやり取りで完成しました。
メールという最適解
クライアント担当者と会ったことはない。電話もチャットもオンラインミーティングもない。すべてのやり取りは、メールのみ。
新ブランド立ち上げという局面では、お客様本来の業務は山積しています。ホームページ制作の打ち合わせのために貴重な時間を拘束することは、お客様にとって最大の懸念材料。ホームページ制作側の都合でお客様に日程の工面を強いるより、互いが最も効率的に動ける手段を選ぶ。それがメールという最適解でした。
それでも、限られた文字情報の中から本質を読み取り、言葉にされていないニーズを察知し、期待を超える提案で応える。このプロジェクトは、そうした信頼関係の上に成り立ちました。
ブランド誕生の瞬間に立ち会う責任
「アスクハウジング」というブランドが世に出る、その最初の接点がこのWebサイトです。展示場を訪れる前に、資料請求をする前に、多くの人がまず目にするのはこの画面。つまり、このサイトこそが「アスクハウジングとは何か」を伝える第一印象そのものなのです。
手元にあるのは、わずかな紙媒体と数枚の写真のみ。そこからすべてが始まりました。
資料から紐解くブランドの世界観
パンフレットの言葉、チラシのレイアウト、数枚の写真。そのわずかな断片から、ブランドの本質を読み解く作業が始まりました。
提供された施工写真を精査すると、そこに映し出されていたのは洗練されたデザイン、上質な佇まい。この世界観を最も的確に象徴する色として「黒」をキーカラーに設定しました。配色設計、フォント選択、余白の取り方――すべてを、実際に建てられる住宅のビジュアルから導き出しました。提供された写真は、露光、コントラスト、傾きを調整し、ブランドイメージに相応しいビジュアルへと整えました。
サイトに掲載する文章も、すべてこちらで執筆しました。パンフレットやチラシから読み取ったブランドの思想を基に、キャッチフレーズから各ページの説明文まで、言葉を一から紡ぎました。
ブランドの世界観を、ビジュアルと言葉の両面から一貫して構築する。展示場予約からスタッフブログ、分譲地情報の掲載に至るまで、これらすべての機能を、単なる「機能」として実装するのではなく、ブランドを体験するための「接点」へと昇華させました。デザインからライティングまで、トータルでお任せいただけるからこそ、実現できる世界観があります。
「誰でも更新できる」を実現する設計思想
Webサイトは、公開がゴールではありません。日々更新され、アクティブに稼働し続けてこそ、生きた情報発信基盤となります。
WordPressをベースに、カスタム投稿タイプを駆使してイベント情報や分譲地情報を適切なレイアウトで編集できる仕組みを構築。カルーセルスライダーで複数画像を自在に掲載でき、掲載から数日間は「NEW」アイコンが自動表示される。サイトが常に動いていることを、訪問者に直感的に伝える工夫を施しました。
直感的な予約操作を可能にするインターフェースを独自に実装し、閲覧者が迷わず予約や申し込みを完了できるUI/UXを設計。レスポンシブ対応は当然として、スマートフォンでも快適に操作できる体験を実現しました。
プラグインに頼らない、自由度という価値
予約フォームや問い合わせフォームは、既存プラグインを使えば手早く実装できます。しかし、それでは本当の意味でクライアントに寄り添えません。
今回、フォーム機能は完全スクラッチで開発しました。入力、確認、完了というステップ設計、予約時の複数担当者への通知、自動返信メールの文面編集――これらすべてをWordPressの管理画面から自由に調整できるようにしました。
ビジネスの成長や変化に合わせて、クライアント自身が柔軟にカスタマイズできる。プラグインの制約に縛られない、真の自由度を提供することが目的でした。
この運用負荷を極限まで削ぎ落とす設計思想が、公開後の「静寂」という結果をもたらしました。
沈黙が証明する品質
サイト公開後、クライアントからの問い合わせはほぼありません。
導入時の操作説明は、スクリーンショット付きの簡易マニュアルのみ。それでも、スタッフは日々、イベント情報を更新し、分譲地情報を掲載し、ブログを投稿し続けています。
この「沈黙」こそが、このプロジェクトの成功を物語っています。誰でも簡単に編集できる。迷わない。困らない。だから、問い合わせが来ない。使いやすさは、静けさの中に宿るのです。
私のWeb制作は、技術を実装することではありません。クライアントのビジネスを理解し、エンドユーザーの体験を設計し、運用の現場に寄り添い、持続可能なデジタル基盤を構築することです。
非対面という制約すら、本質を見抜くための純粋なフィルターへと変える。ブランド誕生という特別な瞬間に立ち会い、その第一印象を担う責任を、技術と洞察力で果たしました。
設計思想、実装技術、運用配慮――その全てを注ぎ込み、クライアントとエンドユーザー双方にとって最適なWebサイトを作り続けています。
GALLERY
PHASE
- 要件定義
- クライアントから提供された資料を精査し、ブランドの本質とターゲット層を読み解きました。メールでのやり取りから真のニーズを察知し、機能要件とブランド体験の両立を図る設計方針を確立しました。
- ビジュアル設計
- 提供された資料から抽出したブランドの世界観を軸に、キーカラー、配色設計、フォント選択、余白の取り方を綿密に設計。ブランドの持つ価値をデジタル空間に投影するビジュアルアイデンティティを構築しました。
- 写真編集
- 提供された写真素材の露光、コントラスト、傾きを調整し、ブランドイメージに相応しい統一感のあるビジュアルへと仕上げました。素材の魅力を最大限に引き出す補正を施しました。
- ライティング
- ブランドの思想を読み取り、サイト全体の言葉を執筆。キャッチフレーズから各ページの説明文、ナビゲーションの文言に至るまで、ブランドの世界観を言葉で体現しました。
- サイト設計
- サイト全体の構造を設計し、情報の優先順位を定義しました。その構造に基づきサイトマップを構築することで、各コンテンツの配置と階層を論理的に整理しました。各機能を単なる「機能」ではなく、ブランド体験の「接点」として位置づけました。
- UI/UX設計
- 具体的な画面遷移、ボタン配置、フォーム設計を通じて、直感的な操作体験を実現しました。閲覧者が迷わず目的を達成できる導線と、スマートフォンでも快適に操作できるレスポンシブインターフェースを設計しました。
- バックエンド
- WordPressをベースに、完全オリジナルのテーマを1から作成しました。カスタム投稿タイプを駆使し、あえて入力項目を限定した専用の枠を設けることで、情報の適切な配置と誰もが迷わず更新できる運用環境を構築しました。予約・問い合わせフォームは完全スクラッチで開発し、プラグインの制約に縛られない高い実用性と拡張性を実現しました。
- フロントエンド
- HTML、CSS、JavaScriptによるフロントエンド実装を担当しました。管理画面から入力されたデータが、デザイン定義に沿って正確かつ動的に描画されるロジックを構築し、バックエンドとフロントエンドの密接な連携を実現しました。レスポンシブ対応、アクセシビリティ、パフォーマンス最適化を考慮した堅牢なコーディングを行いました。
- 運用設計
- スタッフのITリテラシーに依存しない運用環境を構築しました。管理画面の入力項目制限、バリデーション設計、視覚的フィードバックの実装など、多角的なアプローチによって、迷いのない操作性を追求しました。スクリーンショット付きの簡易マニュアルを作成し、問い合わせが発生しない「直感的な運用環境」を実現しました。
- 公開・運用保守
- サイト公開後の技術的サポート、更新対応、トラブルシューティングまで一貫して担当しました。クライアントが安心してサイト運用を続けられる体制を構築しました。
