SHEET K-15

Web制作

速くて、直しやすく、AI検索も意識したホームページ

表示が速いこと、後から直しやすいこと、ChatGPT などのAI検索でも見つけてもらいやすいこと。この3つを大事に作ります。いまご覧のこのサイトが、その実例です。

ブラウザの画面を模した紙の板が何枚も重なる模型
画面を、部品の組み合わせとして設計する。図1

01制作実績

業種ごとに、表現を変える。

業種や伝えたい印象に合わせて、文字・写真・動きの設計を変えます。いずれも当社で制作したサイトで、実際に開いてご覧いただけます。

制作実績5件の、ねらう印象・文字・色と写真・動きの比較
サイトねらう印象文字色・写真動き
はるか法律事務所法律事務所（企業法務） 信頼と先進性明朝の大きな見出し。縦書きを交える大阪の街の空撮背景に街の空撮動画
SKYLINE RESIDENCE TOKYO不動産（タワーレジデンス） 高級感とスケール画面いっぱいの大胆な英字都市の写真流れ続ける帯
稜線精工製造業（精密切削加工） 精度と技術力NC プログラムの書式（採用ページ）墨の地に、切削の火花の橙加工中のように動き続ける座標
ピポッとラボ 天王寺教育（子ども向けプログラミング教室） 楽しさと安心感丸い文字クリーム地に積み木の原色カーソルを目で追うロボット
麦と湯気飲食（ベーカリー＆カフェ） 手仕事のぬくもり縦書きの明朝朝の光の写真割ったパンから立ちのぼる湯気

02制作の方針

5つを、どれも削らない。

5つを同時に高い水準でそろえるのが狙いです。どれも、いまご覧のこのサイトで実際に行っています。番号を選ぶと、画面のどこに効いているかが光ります。

中小企業のAI・デジタル活用を支援｜株式会社kiseeeen
https://kiseeeen.co.jp/
このサイトのトップページの最初の画面。見出し「中小企業のAI・デジタル活用を支援」と模型の画像
トップページの「進め方」の図。2つの進め方を、効果と時間のグラフで比べている
ページ下部の表題欄「このページの実測値」。表示完了・レイアウトのずれ・転送量などの欄が並ぶ
このサイトのトップページ（PC・幅1440pxで撮影）。途中は省いています。
  1. 詳しく

    何をする会社かが、正しく伝わる

    • サービス・事例ごとにページを分け、それぞれに一次情報（実際の手順・役割分担・結果）を載せる
    • 数字は出所のあるものだけを載せ、試算は試算と書く
    • 構造や流れは図で見せ、文章だけに頼らない
  2. 詳しく

    最初の数秒で、印象が決まる

    • 業種と伝えたい印象から、文字・写真・動きを設計する（制作実績のとおり、業種ごとに表現を変える）
    • 文字の大きさと余白は決めた段だけを使い、どのページも同じ設計で組む
    • 強調の色は使う場所を決め、視線を集めたい言葉と導線にだけ使う
  3. 詳しく

    見えないところで、安全を作る

    • ページは静的な HTML で配信し、サーバー側の処理は必要な所だけに絞る（攻撃の入り口を減らす）
    • すべての通信を HTTPS で暗号化する
    • 入力された文字は、HTML として解釈させずに表示する
    • 制作中も、編集のたびにパスワードや鍵などの秘密情報が混ざっていないかを自動で検査する
  4. 詳しく

    検索にも、AIの回答にも出る

    • 本文は JavaScript を使わずに HTML に出す（AIのクローラーの多くは JavaScript を実行しないとされるため）
    • ページごとにタイトル・説明文・正規の URL を設定し、見出しの構造をそろえる
    • よくある質問などには構造化データを入れ、内容を機械にも正しく伝える
  5. このページの実測値を見る
    詳しく

    快適さと、サイトの健全さ

    • JavaScript は動きが必要な部品にだけ載せ、画像は画面の幅に合った大きさだけを読み込む
    • 演出は遅い端末を想定して計測し、かくつくものは作り直す
    • 表示の速さとレイアウトのずれは、ページ下部の表題欄でいま実測している

04よくある質問

よくある質問

AI検索で、必ず紹介されるようになりますか？
お約束できません。AIが情報源をどう選ぶかは公開されておらず、回答も毎回変わります。確度の高い施策を、計測しながら積み上げます。
費用はどれくらいかかりますか？
内容や規模によって異なるため、ご相談の内容を伺ったうえでお見積りします。ご予算が限られている場合も、まずはご相談ください。
ITに詳しくなくても大丈夫ですか？
大丈夫です。専門用語を使わずに、判断に必要なことをお伝えします。
どれくらいの期間がかかりますか？
内容と規模によって異なります。初回のご相談で伺った内容をもとに、目安をお伝えします。

05無料相談

まずは、御社の業務についてお聞かせください。

導入の相談だけでも構いません。

無料相談を申し込む
  • 初回のご相談は無料です
  • オンラインでも対応します
  • ITに詳しくなくても大丈夫です
無料相談を申し込む