Service 02 — Web Design & Development
ホームページ制作・リニューアル
検索エンジンとAIに内容が伝わる構造と、ブランドが伝わるデザイン。公開した後も更新し続けられることまで考えて、ホームページを設計・制作します。
- What
- コーポレートサイトやLP（ランディングページ）の新規制作と、いまのホームページのリニューアル。設計・デザイン・実装から、公開後の更新・改善まで
- For
- はじめてホームページをつくる会社・店舗、いまのサイトが「古い」「検索で見つからない」「更新しにくい」と感じている方
- Where
- 東京・池袋（Hareza Tower 25F）を拠点に支援 対応エリア
- Price
- 掲載する料金・制作期間は確認中です。お見積もりはお問い合わせください。
Issues
こんなときに、ご相談ください
- 会社やお店のホームページを、はじめてつくりたい
- スマートフォンで見ると、文字が小さく読みにくい
- 会社名やサービス名で検索しても、なかなか見つからない
- 情報が古いまま、自分たちでは更新できない
- サービスの強みや会社の雰囲気が、ページから伝わらない
- 問い合わせや予約までの道筋が分かりにくい
Principles
制作の考え方
検索エンジンに内容が伝わること、AIの検索にも要点が伝わること、速く表示されること、誰にとっても使いやすいこと、公開後も更新し続けられること。この5つの観点を、最初の設計から同時に考えます。ここで挙げるSEO・AIOは、制作するときの構造と設定の考え方です。継続的なSEO・AIOの支援は、提供の有無を確認中です。
-
01
検索エンジンに、内容が正しく伝わる構造
誰が、どんな言葉で探すのかを調べ、ページの役割と見出しを決めます。検索エンジンがページの内容を正しく理解できるよう、HTMLの構造と設定を整えます。
- ページごとに異なるtitle・説明文
- 見出しの階層
- パンくずリスト
- 構造化データ（JSON-LD）
- サイトマップ
-
02
AIの検索にも、要点が伝わる書き方
ページの冒頭に要約を置き、定義・手順・比較を箇条書きや表で整理します。Googleは、AIによる概要などの機能に表示されるための追加の要件や特別な最適化はなく、SEOの基本がそのまま有効だと説明しています。AIでの引用や表示をお約束するものではありません。
- 冒頭の要約
- 定義文
- よくある質問
- 表・箇条書き
-
03
スマートフォンでも、待たせない表示速度
画像の大きさや読み込みの順番を整え、スマートフォンの回線でも早く表示されるようにします。Googleが示すページ体験の指標「Core Web Vitals」（読み込みの速さ・操作への反応・表示の安定性）を目安に、公開前に計測して確かめます。
- 画像の最適化
- 読み込みの順番
- Core Web Vitals
- 公開前の計測
-
04
誰にとっても、読みやすく使いやすい
文字の大きさと色のコントラスト、キーボードでの操作、画像の代替テキスト、自動で動く表現を止める手段など。ウェブのアクセシビリティの国際的な指針「WCAG」を参考に、多くの人が使えるページをつくります。
- 色のコントラスト
- キーボード操作
- 画像の代替テキスト
- 動きを減らす設定への対応
-
05
公開した後も、更新し続けられる
ホームページは、公開してからが本番です。お知らせや実績など更新の多いページは、担当される方が無理なく更新できる方法を選びます。共通の部品をまとめ、ページを増やしても見た目と品質がそろう作りにします。
- 更新しやすい構成
- 共通部品の整理
- CMSの検討
- 公開後の改善
Scope
提供範囲
会社の公式サイトから、ひとつのサービスに絞ったLPまで。目的に合わせて、ページの構成と表現を設計します。
- Corporate
コーポレートサイト
事業内容・会社概要・アクセス・採用・お知らせなど、会社の信頼を支える公式サイトです。取引先や求職者が確かめたい情報に、迷わずたどり着ける構成にします。
- Landing Page
LP（ランディングページ）
ひとつのサービスやキャンペーンに絞った1ページのサイトです。広告やSNSから来た方が内容を理解し、問い合わせや予約に進めるよう、話の順番を設計します。
- Renewal
リニューアル
いまのサイトの構成・内容・表示速度を確認し、残すものと作り直すものを整理します。URLが変わるページは転送を設計し、検索での評価の引き継ぎに配慮します。
- Connect
地図・SNSとの連携
GoogleマップやInstagramから来た方が、詳しい情報を確かめて予約や来店に進めるよう、Googleビジネスプロフィール・SNSとサイトの入口をつなぎます。
- 3D / WebGL
3D・WebGLの表現
ブランドの世界観を、立体の動きで伝える表現です。端末への負荷と目的のバランスを見て、使う場面を絞ります。
提供範囲
- E-commerce
ECサイト
オンラインで商品を販売するサイトです。提供の可否と範囲を確認しています。
提供の可否
Flow
制作の流れ
目的の整理から公開後の改善まで、5つの段階で進めます。
- 01
ヒアリング
目的、届けたい相手、いまの課題、更新の体制をうかがいます。
- 02
設計
検索される言葉を調べ、ページの構成・見出し・導線を決めます。
- 03
デザイン
ブランドが伝わる見た目を、スマートフォンとPCの両方でつくります。
- 04
実装
表示速度とアクセシビリティを確かめながら、ページを組み上げます。
- 05
公開・運用
公開前に表示・リンク・設定を確認し、公開後は更新と改善を続けます。
About — This Test Site
テストサイトについて
いまご覧のサイトは、Web制作会社のEiffyパートナーズが、自社の制作システムを検証するために制作しているテストサイトです。株式会社Eiffの制作実績として掲載しているものではありません。検索エンジンには登録していません（全ページnoindex）。株式会社Eiffの公式の情報は、公式サイト（www.eiff.info）でご確認ください。
オープニングの最後に映る、Eiffのオフィス（東京・池袋のHareza Tower 25F）。この写真は、表示されるときのワイプとスクロールに合わせた視差をWebGLで加えています（写真の色は変えていません）。
オープニング：ロゴから、オフィスへ
トップページを開くと、約14秒（読み込みの時間を除く）の3Dのオープニングが流れます。地図サービスの画面やデータは使わず、白とシルバーの独自の街として表現しました。スクロールやキー操作、スキップボタンで、すぐにトップページへ進めます。
- 01白い空間に、Eiffのロゴが現れる
- 02ロゴが粒子になり、黄色のスポーツカーの形に
- 03白とシルバーの3Dの街に、地図のピンが立ち上がる
- 04車が街を走り、検索から来店までの流れを描く
- 05池袋のHareza Towerへ。外観を見上げて上昇する
- 06オフィスの写真から、トップページへ
このテストサイトの仕様
| 構成 | 静的なHTML（Viteのマルチページ構成）。3Dを使う部分だけをReact Three Fiber（three.js）で描画しています |
|---|---|
| 文字と3D | 見出し・本文・ボタンはすべてHTMLで書き、3Dの中には文字を置いていません。検索エンジンや読み上げソフトにも内容が伝わります |
| 3Dと写真の演出 | ページごとの記号（地図のピン、画面のフレーム、レンズなど）を、背景の1枚のキャンバスに描いています。写真は、表示されるときのワイプとスクロールに合わせた視差だけを加えています |
| 端末への配慮 | 3Dのプログラムは、条件を満たす端末だけが読み込みます。動きを減らす設定の端末とWebGLに対応していない端末では、オープニングと3Dを省略し、CSSで描いたクロームの点で表示します |
| SEO・AIO | ページごとのtitle・説明文、パンくずリスト、構造化データ（JSON-LD）、冒頭の要約、よくある質問 |
| アクセシビリティ | 本文へのスキップリンク、画像の代替テキスト、動きを減らす設定への対応 |
| 検索への登録 | テストサイトのため、全ページをnoindex（検索結果に表示しない設定）にしています |
| 表示速度 | 公開後に計測して掲載します 実測値 |
表示速度などの数値は、公開後に実際に計測してから掲載します。
FAQ
よくある質問
ホームページをつくれば、検索で上位に表示されますか？
いいえ。検索結果の表示順は検索エンジンが決めるため、上位表示をお約束することはできません。検索エンジンに内容が正しく伝わる構造と、探している人の役に立つ内容を、設計の段階から整えます。
いまのホームページのリニューアルだけでも依頼できますか？
はい。いまのサイトの構成・内容・表示速度などを確認し、残すものと作り直すものを整理してから進めます。ページのURLが変わる場合は、検索での評価を引き継ぐための転送（リダイレクト）も設計します。
公開した後、自分たちで更新できますか？
更新の頻度や担当される方に合わせて、更新の方法をご提案します。お知らせや実績など、更新の多いページを自社で編集できる仕組み（CMS）の導入も、ご相談ください。
費用と制作期間はどのくらいですか？
掲載する料金・制作期間は確認中です。お見積もりはお問い合わせください。
3Dや動きのある演出を入れると、表示が重くなりませんか？
演出を増やすほど、端末への負荷は大きくなります。このテストサイト（制作：Eiffyパートナーズ）では、3Dのプログラムを条件を満たす端末だけで読み込み、動きを減らす設定の端末やWebGLに対応していない端末では、動きを抑えた表示に切り替えています。演出を入れるかどうかは、目的と負荷のバランスを見ながら、ご相談のうえで決めます。
スマートフォンでの表示にも対応していますか？
はい。スマートフォンで見たときの読みやすさと、指での操作のしやすさを前提に設計します。
Related
関連する事業
Contact
見つかる、サイトへ。
はじめての制作も、いまのホームページのリニューアルも、目的とつくりたいサイトのイメージから話を始められます。
ご相談は、お電話03-6454-9934（平日 10:00–19:00）または公式サイト（www.eiff.info）から承ります。
お電話03-6454-9934平日 10:00–19:00