はじめに
ご覧いただきありがとうございます。株式会社QueryLiftのCOOの河内光太です。主に業務としてはデザイン・フロントエンドの実装を一通り行っております。
この記事ではこのブログが掲載されている会社HPを作成するにあたって体験した苦悩や解決策、これからの展望についてまとめられればと思います。
プロジェクトの背景と目的
私たちのスタートアップでは、立ち上げ初期から「会社としての顔」となるWebサイトを自社で制作してきました。私自身、これまでフリーランスなどでフロントエンド開発を行ってきた経験があったため、初期段階の会社HPも、自分のデザインセンスや開発の知識を活かして構築しました。
しかし、最初に公開したバージョンには、今振り返ってみれば致命的な課題がたくさんありました。
なんとなくのデザイン・なんとなくの構成
初期のサイトは、見た目には「綺麗」で「現代的」に見えるよう、モダンなUI設計を意識しました。しかし、問題は「何を伝えるか」が明確でなかったことです。
文章もページ構成も、感覚を頼りに、「こうすればそれっぽい」を並べてしまい、「会社として何をしているのか」「どんな課題を解決したいのか」という根本的な情報が曖昧なままになっていました。
その結果、社内外のメンバーやユーザーから「綺麗だけど、結局この会社は何をやっているのかいまいちわからない」というフィードバックが多く寄せられました。
デザインと情報のバランスの難しさ
現代のWebデザインでは、美しいビジュアルと機能性のバランスが求められると日々感じています。しかし、それ以上に重要なのが「伝わること」です。特にスタートアップの会社HPは、単なるカタログではなく、「信用を生み出すメディア」でもあると思います。
当初のデザインでは、私たちのビジョンやミッション、サービスに込めた想いなどが、表面上の美しさの裏に埋もれてしまっていました。情報の粒度や並べ方が曖昧で、社外の方が見ての「内部の熱量」や「未来への展望」が伝わりにくかったのです。
「誰にでも伝わる」会社HPを目指して
そこで私たちは、会社HPの目的を改めて見直し、「誰にでも伝わる」「誰が見ても信用できる」Webサイトへと刷新することを決めました。
ターゲットユーザーはあえて特定の業界や年齢層に絞らず、いい言葉で言えば老若男女、あらゆる立場の方に見ていただきたいという決定を下しました。特に、強いていうのであれば、会社の意思決定者やパートナー候補となる方々に向けて、情報の透明性と信頼性を担保したコンテンツ設計を意識しました。
デザイン面での課題と乗り越え方
経営層音の「なんとなく違う」ギャップ
プロダクトやコーポレートサイトのデザインは、経営層や他のメンバーとの認識のずれが生じやすいポイントです。特にスタートアップでは、スピード感と柔軟性が求められる一方で、「このデザインで本当に伝えたいことが伝わっているのか？」という根本的な議論が頻繁に発生します。私たちも例外ではなく、「なんとなく違うな、」「もう少し何かが足りない」といった抽象的なフィードバックに悩まされました。
FigmaやMiroを用いた合意形成プロセス
このギャップを埋めるため、FigmaやMiroなどのビジュアルコラボレーションツールを積極的に活用。求田的には、ページ一覧などをMiroで、ワイヤーフレームやUIモックを複数パターンFigmaで用意し、経営層や関係者とリアルタイムで議論できる場を設けました。これにより、「なぜこの配置なのか」「この色やフォントの意図は何か」を言語化しやすくなり、抽象的な違和感を具体的な改善アクションに落とし込むことができました。
UI/UX設計で気をつけたこと
特に意識したのは、初めてサイトに訪れたユーザーが「なんの会社か」「どんな価値を提供しているか」を直感的に理解できる情報設計です。トップページでは、「生成AI時代に、価値ある情報を正しく届ける」というメッセージを大きく表示、次に「QueryLiftとは何か？」「どんな課題を解決するのか」といったGEO / LLMOというまだ世間一般にSEOほどは定着していない概念を噛み砕いて段階的に伝える構成にいたしました。
また、プロダクトの特徴や強み（例：「AIに詳しくなくても大丈夫」「直感的なUI」「専門家による技術支援」など）は、できるだけ簡潔な言葉とビジュアルで表現し、専門知識がない方でもQueryLiftのサービスは使える。ということを理解してもらえるように心がけました。
技術面での課題と解決策
使用技術スタックの選定理由
今回の会社HPでは、将来的な拡張性や保守性、SEO / AIO への配慮を重視して技術スタックを選定しました。具体的には、Next.jsなどのモダンなフレームワークを採用し、パフォーマンスやアクセシビリティにも配慮しています。静的サイト生成 (SSG)を活用することで、表示速度の向上と運用コストの最適化も実現いたしました。
技術的に苦労したポイントとその解決
デザインと実装のすり合わせにおいては、Figma上の細かな表現をどこまでWeb上で再現するかが悩みどころでした。特にレスポンシブ対応や、アニメーション・インタラクションの自然さには最新の注意を払い、都度プロトタイピングとユーザーテストを繰り返しました。
また、生成AIやSEOに配慮したメタデータ設計や構造化データの埋め込みも意識し、「AIに見つけられやすい」「AIが学習しやすい」情報設計を実装面からもサポートしました。
実装フェーズのマネジメント
学生スタートアップにおける開発体制
私たちは少人数体制で開発を進めていたため、各自の役割分担と進捗管理が重要でした。タスク管理にはNotionや開発がメインだったため、Issueベースで進める、GitHub Projectを活用し、数日に1回の進捗確認・共有をすることで、遅延や認識ずれを最小限に抑えました。
チームへのタスク分解と伝え方の工夫
特に非エンジニアメンバー（当社は参画しているメンバーは全員コードが書けるエンジニアです。ここでは非フロントエンドエンジニアという意味で使用しています。）にもわかりやすいよう、タスクは「何をゴールとするか」「なぜ必要か」を明確に説明し、背景や意図を共有することを徹底しました。これにより、各自が自分の作業の意義を理解しやすくなり、全体最適を意識した動きができるようになりました。
振り返りと今後の展望
反省点と改善点
今回のプロジェクトを通して、「伝えることの難しさ」と「合意形成の大切さ」を改めて痛感しました。特に色段階では、デザインや情報設計の意図が十分に言語化できておらず、結果として全体の作り直しが発生した点は大きな反省材料です。今後は、より早い段階でプロトタイプやコンテンツ案を共有、関係者全員の認識をそろえるプロセスを強化したいと考えています。
次のステップ
今後は、会社HPを単なる「名刺」や「カタログ」ではなく、QueryLiftの思想や強み、そして生成AI時代における新しい価値観を発信する「メディア」として育てていきたいと考えています。具体的には、導入事例や技術解説、業界トレンドなどのコンテンツを充実させ、より多くの方に「QueryLiftらしさ」が伝わるサイト運営を目指します。
おわりに
会社HPの制作は、単なるWeb開発ではなく、「会社の価値をどう伝えるか」という本質的な問いへの挑戦でした。今後も、ユーザー目線と事業目線の両立を意識しながら、より良い情報発信を続けていきます。
ご覧いただきありがとうございました。
