PORTFOLIO

株式会社アース・ライフ様

株式会社アースライフ様HP作成

CLIENT

株式会社アースライフ様

プロジェクトの背景

株式会社アースライフ様は飲食事業を展開する企業で、新規顧客の獲得と採用強化が急務でした。既存のウェブサイトは数年前に制作されたもので、情報が散在し事業の魅力を十分に伝えきれていない状態。特にスマートフォンからのアクセスが全体の70%以上を占める中、モバイル対応が不十分で離脱率が高く、ビジネス機会の損失が深刻な課題となっていました。コーポレートサイトを「集客・採用・取引先開拓」の3軸で機能させるフルリニューアルが求められました。

課題解決プロセス

課題 CHALLENGE

既存サイトでは事業内容や強みが伝わりにくく、お問い合わせ・採用エントリーへの導線も整理されていない状況でした。スマホ閲覧比率が増える中、表示崩れ・読み込み速度・ブランド一貫性に課題があり、新規顧客獲得の機会損失につながっていました。

アプローチ APPROACH

WordPressをCMSとして採用し、お客様自身での日常的なコンテンツ更新を可能にしました。テーマはフルスクラッチで開発し、Tailwind CSSによるユーティリティファーストのスタイリングで保守性と開発速度を両立。モバイルファーストの設計思想で375px〜1440pxまで全ブレークポイントをカバーし、Lighthouseスコア90+を目標にパフォーマンスを最適化。導線設計では「顧客・求職者・取引先」の3ペルソナを定義し、それぞれが2クリック以内で目的ページに到達できるIA（情報アーキテクチャ）を設計しました。

成果 OUTCOME

新サイト公開後、スマホからの平均滞在時間とお問い合わせ数が改善。ブランド面でも事業の世界観を統一して打ち出せるようになり、集客・採用・取引の全方位で接点としての機能が高まりました。

ポイント

3ペルソナ（顧客・求職者・取引先）別に最適化した導線設計で、どのユーザーも2クリック以内で目的ページに到達可能
SNS・Googleマップへのシームレスな導線を組み込み、外部プラットフォームとの接続を強化し離脱を最小化
ブランドカラーとフォントを統一したデザインシステムを構築し、全ページで一貫した世界観を表現
タッチ操作を前提としたUIコンポーネント設計（タップ領域48px以上確保、スワイプ対応ギャラリー）
画像のWebP変換・遅延読み込み・CSS/JSの最適化でCore Web Vitals全項目グリーンを達成

プロジェクト概要

株式会社アースライフ様（飲食業）のコーポレートサイトを、企画・デザイン・実装まで一貫してサポートしました。事業内容・お問い合わせ動線を最適化し、ブランディングと採用面の両軸で機能するWebサイトを構築しています。

レスポンシブ対応・SEO基本対応・お問い合わせフォームを標準実装し、社内で運用しやすい構成で納品しました。

制作内容

企画・設計: ターゲット整理、サイトマップ設計、ワイヤーフレーム作成
デザイン: ブランドイメージに合わせたビジュアルデザイン
コーディング: レスポンシブ対応のHTML/CSS/JavaScript実装
CMS: WordPress導入、お客様自身で更新可能な構成
SEO: メタタグ・構造化データ・パフォーマンス最適化

サイト実績

技術スタック

CMS: WordPress
フロントエンド: HTML / CSS / JavaScript
デザイン: Figma
ホスティング: Xserver

開発事例一覧に戻る