ホームページ構築プロセス
ホームページ制作事例について、制作プロセスを含め紹介いたします。
実際の制作も同様のプロセスで行いますのでご参考にしていただければ幸いです。
プロジェクトの目的
ESSENCE Design Officeが果たす役割を明確に伝達することで伴走パートナーとしての認知拡大、安心できるWebデザインの相談窓口を提供する。
戦略構築
ターゲットとするペルソナへの洞察を基に、制作方針の策定、情報構造（IA）の設計を行う。
ペルソナの設計
基本情報
名前
佐藤 けんいち
年齢
42歳
居住区
東京都渋谷区
仕事
都内IT系ベンチャー企業 経営、自社サービス運営およびWebメディアのプロデュース
使用端末
Desktop（メイン）、Mobile（外出時の確認用）
役割
成果志向のビジネスパートナー
概要
・
都内でITサービスを展開するベンチャー企業の経営者。
・
サービスの成長に伴い、Webサイトを単なる会社情報の設置場所から「顧客獲得と信頼構築の拠点」へと引き上げるフェーズにある。
・
合理的かつ論理的な思考を好み、感覚的なデザインや過度な装飾には関心がない。
・
外部パートナーには「ビジネス課題の言語化」と「本質的な解決策の提示」を期待しており、自分のビジネスを深く理解し、中長期的な視点で伴走できる相手を探している。
制作方針の策定
納得と信頼を届ける「論理的な情報提供」
・
構成やデザインの細部に至るまで意図を明確にし、確信を持ってパートナーを選定いただけるよう、透明性の高い情報を収載します。
・
ビジネス課題の解決を共通言語とすることで、どなたにとっても理解しやすく、納得できる体験を設計します。
目的の情報へ最短で辿り着く「最適化された動線とデザイン」
・
余計な装飾を削ぎ落としたミニマルなデザインにより、訪問者の認知負荷を下げ、求める情報へ最短距離で迷わずアクセスできる情報構造（IA）を構築します。
・
信頼感と落ち着きを感じさせる配色、そしてWeb業界の洗練と先進性を象徴するフォント選定により、ビジネスパートナーとしての格調高さを表現します。
安心してビジネスを任せられる「技術的な信頼性」
・
セキュリティ対策を標準実装し、Webサイト訪問者様の個人情報やプライバシーを強固に守る、安全な閲覧環境を担保します。
・
AI検索や最新の検索エンジンにも適切に対応し、情報を探しやすく、いつでも正しい回答を得られる設定を施します。
情報構造(IA)
伝えたい情報の順番・流れに合わせて情報構造を設計。
心理フェーズ
コンテンツ
第一印象
アイキャッチ
役割は何？
Service Scope
どんな想いで活動している？
Philosophy
想いを実証している？
制作実績
LP制作実績
Webサイト制作実績
もっと見る(folio)
どのようなプロセスをたどる？
制作の流れ
納得したい
料金について
安心したい
お知らせ
透明性を確認したい
FQA
デザインシステムの定義
戦略を視覚的ルールとして言語化し、実装の土台を構築。
制作
論理的根拠に基づいたワイヤーフレームを作成し、忠実度のステップを踏んだプロトタイプを制作、最終化したビジュアルデザインをStudioで実装。
ワイヤーフレーム作成
低忠実度プロトタイプ作成
Low-fidelity prototype
高忠実度プロトタイプ作成
High-fidelity prototype
Studioでの実装
ノーコードツールStudioを用いて実装。
・
Figmaで作成した高忠実度プロトタイプに基づき、デザインの細部まで忠実にStudioへ実装し、精緻に調整。
・
デスクトップ、タブレット、モバイルの各端末において最適な表示となるよう、レスポンシブデザインを徹底。
・
SEO対策を実施し、検索エンジンでの視認性を高めるとともに、AIO（AI最適化）を含めた検索体験の最適化にも対応