会社のホームページの構成と、各部の名前
会社のホームページ（コーポレートサイト）は、取引を考えている会社、就職を考えている人、取材する人など、立場の違う人が、確かめるために読みに来ます。だから、何の会社か、何ができるか、信頼できるか、どう連絡するかに、迷わずたどり着けることが大切です。事業、ニュース、会社概要、採用、問い合わせの順に並べます。
図は、精密部品のメーカー「アオミネ製作所」の架空のページです。気になる場所か名前を選ぶと、その言葉の説明が開きます。
精密切削加工複雑な形も一工程で
品質保証全数検査と記録
試作・開発支援図面1枚から3日
- ナビゲーションバー
ロゴ、事業や採用への入口、問い合わせのボタン。
- メガメニュー
事業が多い会社は、写真つきの大きなメニューで見せる。
- ヒーローセクション
何の会社かを、ひとことと1枚の写真で言い切る。
- アイブロウ
見出しの上の小さな英字。何の話かを、先に伝える。
- カウントアップ
創業年や取引先の数。数字は、信頼の裏づけになる。
- ベントーグリッド（レイアウト）
大きさの違うますに、事業をひとつずつ入れる。
- 背景文字（透かし文字）
うしろに敷いた薄い英字。見出しに奥行きが出る。
- お知らせ一覧
製品・会社・採用の知らせ。会社の動きを伝える。
- 概要表
社名、設立、資本金。取引の前に、確かめられる情報。
- CTAセクション
読み手には求職者も多い。採用への入口を大きく。
- フルブリード（全幅）
写真を画面の端まで広げて、区切りに変化をつける。
- 入力フォーム
問い合わせは、ページの中でそのまま送れるように。
- ドロップダウンメニュー
用件を選んでもらう。自由に書くより、迷わない。
- チェックボックス / ラジオボタン
個人情報の取り扱いへの同意を、チェックで確かめる。
- フッター
事業・会社・採用の行き先を、分類して全部並べる。
図 会社案内のページの中にある、15の名前。
この構成で、AIに頼む
図と同じ順番と部品で、ページをつくってもらうための文章です。
文章を確かめる
「精密部品のメーカー」のホームページ（トップページ）を作成してください。 ページは、上から次の順で組み立ててください。 1. ナビゲーションバー：左にロゴ、中央に「事業内容・技術と設備・会社情報・採用情報」のメニュー、右に言語の切り替え（JP / EN）と「お問い合わせ」ボタンを置く。 2. ヒーローセクション：製品の写真を画面いっぱいに敷き、左側に暗い色を重ねて、小さな英字の一行（アイブロウ）と、太いゴシック体の大きなキャッチコピーを置く。下端に、創業年・取引先の数・加工の精度の3つの数字を、白い帯で並べる。数字は、表示されたときに数え上がる動きにする。 3. ベントーグリッド（レイアウト）：事業内容を、大きさの違うタイルを組み合わせたベントーグリッドで見せる。主力の事業は大きな写真のタイル、ほかは小さなタイルにする。見出しのうしろに、薄い大きな英字（背景文字）を敷く。 4. お知らせ一覧：ニュースを新しい順に3件、日付・種類のラベル・タイトルの順で並べ、「一覧へ」のリンクを付ける。 5. 概要表：会社概要を、項目名と内容の2列の表（社名・設立・資本金・従業員数・事業内容・認証）で見せる。 6. CTAセクション：働く人の写真を画面の幅いっぱいに敷いて、採用情報への入口にする。短い呼びかけと、枠線だけのボタンを置く。 7. 入力フォーム：お問い合わせフォームを、ページの中に置く。お名前・会社名・メールアドレス・ご用件（選択式）・内容の入力欄と、個人情報の取り扱いへの同意のチェック、送信ボタンを並べる。左に、電話番号と受付時間も書く。 8. フッター：ロゴと所在地、分類ごとのリンクの一覧（事業内容・会社情報・採用情報）、コピーライトを置く。 あわせて、次の部品を入れてください。 ・メガメニュー：「事業内容」にポインターを重ねると、事業ごとの写真・名前・ひとことの説明が横に並ぶ、大きなメニュー（メガメニュー）が開くようにする。 全体は、白と濃いグレーを基調に、朱色を1色だけアクセントカラーにした、誠実で力強い雰囲気にしてください。見出しは太いゴシック体、数字と英字は幅の狭いサンセリフ体にしてください。 スマートフォンでも読みやすいレスポンシブ対応にし、見出し・本文・ボタンに一貫したルールを適用してください。写真は、仮の画像でかまいません。