BETA現在ベータ版で公開中です。現在ベータ版で公開中です。ベータ版

LAY-003 公開 更新

縦長ストーリー型の会社案内

理念と創業からの歩みを、写真と文章で順に読ませる縦長の構成。会社の考え方や歴史に共感してほしい会社向け。

向いている

  • 理念や創業からの歩みに共感してほしい会社
  • 現場や当時の写真を用意できる会社
  • 採用で、会社の考え方に合う人に来てほしい会社

向かない

  • 取引前の確認など、基本情報だけを素早く見せたい会社
  • 写真や物語にできる出来事が少ない会社
  • 事業や拠点が多く、情報を選んで見せる必要がある会社

ワイヤーフレームと順番の理由

このワイヤーは、型の一例です。
実際のサイトでは、業種や伝えたいことに合わせて、セクションの数や順番が変わります。

ワイヤーフレーム
縦長ストーリー型の会社案内のPCワイヤーフレーム

このワイヤーは、縦長ストーリー型の会社案内の一例です。実際のサイトでは、業種や伝えたいことに合わせて、セクションの数や順番が変わります。
ワイヤー内の社名・数字・住所・人名は、すべて架空の表示例です。

PCワイヤーのプロンプト

この構成の考え方

縦長ストーリー型は、会社案内を情報の一覧ではなく、理念と歩みを順に読ませる「読み物」として作る構成です。

並びは、守ってきた約束、それを言葉にした理念、その理念が生まれた歩み、引き継ぐ人の言葉、の順です。
理念を先に見せ、歩みで裏づけることで、理念が後から作った言葉ではないことを伝えます。

会社概要などの基本情報は、物語の途中に挟むと流れが切れます。
そのため、確認したい人向けの情報は、読み物を終えた後にまとめて置いています。

制作時のよくある失敗

理念が抽象的な言葉だけで終わっている

「誠実」「挑戦」「信頼」のような言葉だけでは、どの会社にも当てはまり、読み手の印象に残りません。
その言葉が仕事のどんな場面で表れるのかを、短い説明や歩みの出来事で具体的に示します。

歩みが年号と出来事の羅列になっている

年表のように出来事を並べるだけでは、物語として読まれません。
転機になった出来事を3〜5つに絞り、そのとき何があり、何を決めたのかを短く書きます。

写真が用意できないのに、写真ありきで作ってしまう

この構成は、現場や当時の写真があって初めて力を持ちます。
写真が揃わない場合は、写真の枠を減らして文章を主役にするか、1ページ完結型など別の型を検討します。

スマホで長くなりすぎて、最後まで読まれない

左右交互の段を縦積みにすると、スマホではページが大きく伸びます。
各段の文章を2〜3行に絞り、写真の高さも抑えて、1段が画面1つ分に収まるようにします。

よくある質問

縦長ストーリー型と、ハブ型はどう選べばよいですか?

読み手に一つの流れで読んでほしいかどうかで考えます。
理念や歩みに共感してほしいなら縦長ストーリー型、目的の違う人にそれぞれ必要な情報を選んでもらいたいならハブ型が向いています。

沿革のページは別に必要ですか?

このページの歩みは、転機に絞った読み物です。
細かな年表を残したい場合は、別ページに沿革をまとめ、このページからリンクする形にします。

理念がまだ言葉になっていない場合はどうすればよいですか?

先に創業からの歩みを書き出し、繰り返し出てくる判断や考え方を拾うと、言葉にしやすくなります。
それでも決めきれない場合は、理念のセクションを外し、歩みと代表の言葉だけで構成する方法もあります。

同じ種別のレイアウト

会社案内のレイアウト一覧を見る

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このレイアウトを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。