Web制作HP制作LP制作

会社ホームページを自社で制作・運用|デザイン刷新に込めた考え方と制作の実例

公開: 更新: この記事は約6分で読めます

いまご覧いただいているこのホームページは、企画・文章・デザイン・実装から公開後の運用まで、すべて私たち自身の手で制作しています。

kotonohaは岐阜市のAI活用支援の会社ですが、ホームページやランディングページ(LP)の制作も、サービスとして提供しています。「どんなものを作れるのか」は言葉で説明するより、実物を見ていただくのが早いでしょう。

2026年8月には、デザインを全面的に一新しました。

この記事では、次の3点をご紹介します。

  • 新デザインで大切にしたことと、演出に込めた意味
  • 読みやすさ・スマホ対応・検索エンジン対応の考え方
  • ホームページ制作サービスの進め方(4ステップ)

「価値ある事業を、AIで加速させる。」を、そのまま形に

トップページを開くと、まず「REDESIGN WORK.」の文字と、私たちの使命である「価値ある事業を、AIで加速させる。」という一文が目に入ります。

合同会社kotonohaトップページのファーストビュー。「REDESIGN WORK.」の見出しと「価値ある事業を、AIで加速させる。」のキャッチコピー、画面全体に散らばる葉

画面全体には、たくさんの葉が散らばっています。社名の由来である「言の葉」です。

ページを開いた直後は葉がばらばらに漂い、数秒たつと、ひとつの輪の形にすっと集まっていきます。

葉が球状の輪に集まった状態のトップページ。散らばっていた葉がひとつのまとまりになっている

この動きには意味を持たせました。

会社の中には、業務の手順、日々の成果物、担当者の頭の中にあるナレッジが、ばらばらに散らばりがちです。それらを整理して、ひとつに集約し、AIが活かせるように業務を再設計する——散らばった葉が集まって形になる動きは、そのプロセスをそのまま表現しています。

「REDESIGN WORK.(仕事を再設計する)」という言葉と、葉の動きが一本につながる設計です。

スクロールして次のセクションへ進んでも、葉は輪の形のまま、画面の中をゆっくり移動していきます。いったん集めたものが散らばらず、次の工程へ運ばれていくイメージです。

演出が本文の邪魔をしないよう、動きの量も透明度も控えめに調整しました。

進め方の説明より、考え方を先に

APPROACHセクションでは、見出しのすぐ下に「私たちは、無理なAI導入をおすすめしません。」という考え方を置いています。

以前はご相談から導入までの5つのステップをカルーセルで見せていましたが、手順の説明よりも、どんな基準で提案するかを先に伝えるほうが会社の姿勢が伝わると考え、2026年9月に作り替えました。

APPROACHセクション。「AIは、使いどころが9割。」の見出しと「私たちは、無理なAI導入をおすすめしません。」の主張、棚卸しのうえで4つにつながる活用をご提案する旨の文

理由は「AIができること」と「人がやるべき仕事」は別物だから、と一文で言い切ります。そのうえで「業務を丁寧に棚卸したうえで、人手不足の解消・効率化・コスト削減・ミス防止につながる活用をご提案します」と締め、4つの語だけを記事と同じ緑の強調で目立たせています。

文章を減らして、読みやすく

デザインの一新にあわせて、トップページの文章量も大きく減らしました。

以前は各セクションに数段落の説明がありましたが、新デザインではセクションごとに見出し一行と短い説明だけに絞っています。

WORKSセクション。「事例紹介」の見出しと、事例3件のカード

ホームページを訪れる方の多くは、じっくり読むためではなく「どんな会社か」をつかむために来ています。詳しい内容は、この記事のように読みたい人が読める場所へ。

トップは「読ませる」より「つかんでもらう」ページにする、という考え方です。

スマホでも、検索エンジンにも

ホームページの閲覧は、いまや多くがスマートフォンからです。このサイトもスマホでの見え方を基準に細部を調整しています。

スマホではメニューを右上のボタンにまとめ、画面を広く使えるようにしました。

合同会社kotonohaトップページのスマートフォン表示。葉の演出とキャッチコピーが縦画面に収まっている

また、画面には見えない部分——検索エンジンにサイトの内容を正しく伝えるための下ごしらえ(構造化データやOGPと呼ばれるものです)や、SNSでシェアされたときの見え方まで、ひととおり整えて納品する。

そこまで含めて「ホームページ制作」だと考えています。

雰囲気の違うサイトも作れます

「うちは葉っぱが舞う感じじゃないんだけど…」という方もご安心ください。デザインの方向性は、事業や目的に合わせて変えられます。

こちらは制作例のひとつ(架空企業を題材にした作例)です。信頼感を重視したビジネス系のコーポレートサイトで、このサイトとはまったく違うトーンで仕上げています。

コーポレートサイト・LP制作の作例(架空企業):信頼感を重視したファーストビュー

コーポレートサイト作例の課題提起セクション:カード型レイアウトのデザイン

実際のお客さまの制作事例は「ご要望に合わせた会社ホームページを制作し、公開後の運用まで支援」でもご紹介しています。

かわいらしく親しみやすいもの、堅実で誠実なもの、勢いのあるキャンペーンLP。「誰に、何を伝えたいか」から逆算して、最適なトーンをご提案します。

記事などのコンテンツ制作も

ホームページは作って終わりではなく、育てていくものです。いまお読みいただいているこの記事も、書き足しながらサイトを育てていく仕組みごと自社で構築したものです。

「サイトはあるけれど、何年も更新していない」「記事を書く時間がない」という方には、更新しやすい仕組みづくりから、記事コンテンツの制作支援までお手伝いできます。

本業はAI活用支援の会社なので、AIをうまく使って効率よく、それでいて人の目でしっかり整えた文章をお届けします。

制作の進め方は4つのステップ

ご相談から公開までの流れは、シンプルな4ステップです。

  1. ヒアリング — 目的・ターゲット・好みの雰囲気をお伺いします
  2. 構成のご提案 — ページの構成案と方向性をすり合わせます
  3. デザイン・制作 — 実際の画面をお見せしながら調整します
  4. 公開・運用 — 公開後の更新や記事の追加もサポートします

制作の過程でもAIを活用して効率化しているぶん、無理のない費用感でご提案できます。法人はもちろん、個人で事業を営む方のご依頼も歓迎です。

岐阜市近郊の方は対面でのお打ち合わせも可能ですし、オンラインで全国どこからでもご相談いただけます。

ホームページの新設・見直しをお考えの方はご相談ください

「まだ何も決まっていないけど、ホームページをどうにかしたい」——そんな段階からで大丈夫です。

このサイトの実物を見ながら、「こんな雰囲気にしたい」「ここはどう作っているのか」といったご質問にもお答えできます。お気軽にご相談ください

事例の一覧へ戻る

「これってAIで何とかなる?」からどうぞ

そんな段階のご相談も歓迎しています。通常、3営業日以内にご返信いたします。

お問い合わせ