Hikora Design コーポレートサイト

本サイトは、Webデザインにおけるスキル（情報設計・ビジュアルデザイン・ブランド構築力など）を包括的に証明することを目的として制作した架空の企業サイトです。業界問わず通用する、洗練された印象と信頼感を併せ持つコーポレートサイトを意識し、ユーザー体験とビジュアルの両面から設計しています。

Webデザイン
コーディング
コーポレートサイト

プロジェクト概要

カテゴリー：コーポレートサイト
制作種別：自主制作
担当領域：Webデザイン、コーディング
使用ツール：Figma, HTML, CSS(Sass), JavaScript, git, Github
制作期間：3週間
リンク：コーポレートサイトはこちら

設計方針

会社概要

Hikora Designは、UI/UX設計から業務フローの最適化、フロントエンド開発、運用支援までを一気通貫で手がける、DX（デジタルトランスフォーメーション）パートナーです。戦略立案から導入・改善フェーズまでクライアントに伴走し、本質的な変革を実現します。

サイト制作の目的

本サイトは、コーポレートサイトとして、企業の顔となるホームページを構築することを目的としています。モダンで洗練されたデザインを通じて、信頼性のあるIT企業としての印象を与えることを意図しており、訪問者に対して基本的な会社情報や事業内容、制作実績を簡潔かつ明確に伝えることを主なゴールとしています。採用や受注といった機能もサイト内には一部組み込まれていますが、これらはあくまで補助的な位置づけに留めています。

ターゲット層

中小〜中堅企業の経営層・事業責任者
スタートアップや新規事業の責任者
ITや開発のリソースが不足している企業のマネージャー
当社に就職を考えている人

デザインコンセプト

Hikora DesignのWebサイトは、「本質的な課題と向き合う伴走型のDXパートナー」というブランドメッセージを軸に、静かで誠実な佇まいを大切にしたデザインを目指しました。先進性よりも“信頼できる知的パートナー”としての印象を重視し、トーンを抑えた配色やミニマルなUI設計、余白を活かしたレイアウトによって、読み手に思考の余白と深さを提供しています。

情報設計

本サイトの情報設計は、まず競合他社のコーポレートサイトを複数調査・分析し、一般的に必要とされる情報要素や、ユーザーの行動パターンを整理するところから始めました。そのうえで、当社サイトにおいて伝えるべき情報を取捨選択し、閲覧者にとって無理のない情報の流れとなるよう、全体の画面遷移構成やページ内の情報配置を設計しました。

設計の中心に置いたのは、初めて訪れたユーザーが「この会社は何をしているのか」「どのような価値を提供しているのか」を素早く把握できることです。そこで、トップページには企業概要・事業内容・実績・理念といった要点を凝縮し、視認性と情報量のバランスに配慮しながら、限られたスペースの中に必要十分な情報を配置しました。

導線の設計においては、閲覧者の関心が自然に移り変わる順序を意識しています。まずは事業内容を紹介し、その具体例として制作実績を提示。次に、他社との違いや当社ならではの価値を伝えるために強みのセクションを設け、企業理念へとつなげています。その後、お知らせや更新情報を通じて企業の活動を示し、最後にお問い合わせへと誘導する構成とすることで、ユーザーが迷うことなく情報を取得し、必要に応じて次のアクションへと進めるよう設計しています。このように、単なる情報の羅列ではなく、訪問者の理解と行動を支える流れを重視した情報設計を心がけました。

ビジュアル設計

配色

信頼感とモダンなIT企業の雰囲気を出せるように青系統でトーンを統一しています。また、情報の重要度に応じて、色の濃淡を変えることで、認知負荷を下げる設計にしています。加えて、全体を通してWCAG基準に準拠したコントラスト比を保ち、視認性やアクセシビリティにも配慮した設計としています。

タイポグラフィー

モダンで先進的なIT企業感を演出するために、書体には癖がなく、可読性と視認性が高いInterを採用しました。フォントサイズは16pxを基準に、基本的には4の倍数単位で階層的に設計しています。また、読みやすさを考慮し、行間（line-height）は見出しは1.5、本文は2.0で設定し、文字間隔（letter-spacing）は0.02emで細かく最適化しています。

レイアウト

本サイトのレイアウトは、視覚的な統一感と可読性を重視して設計しています。まず全体としては、グリッドシステムを採用し、コンテンツの最大幅を一定に保つことで、どのページにおいても均整の取れた印象を与えるようにしています。これにより、情報の散漫さを防ぎ、閲覧者が内容に集中しやすい構造となっています。

また、テキスト情報が主体となる構成においては、過度な情報量が閲覧体験を妨げないよう配慮しています。文章の合間には、サイト全体のトーンや雰囲気に調和したイラストを適度に配置し、視線のリズムを生むとともに、読み進める中での心理的な負荷を軽減するようにしています。単なる装飾ではなく、情報の理解を補助しながら、視覚的な余白を作る役割も担っています。

このように、レイアウト設計においては単に見た目の整え方だけでなく、情報の受け取りやすさ、読みやすさ、そして閲覧体験としての心地よさまでを含めて総合的にデザインしています。

実装・インタラクション等に関して

実装にあたっては、PCのみならずスマートフォンやタブレットでの閲覧も想定し、各デバイスでの表示崩れが起こらないように設計・調整を行っています。単にレイアウトが収まるだけでなく、画面幅に応じて余白やコンテンツの幅、フォントサイズといった要素を適切に変化させることで、どの環境で見ても快適に閲覧できるユーザー体験を担保しています。

アニメーションに関しては、競合他社のサイトに見られるような、過度な動きや視覚効果がユーザー体験を妨げている事例を踏まえ、必要最低限の表現にとどめています。アニメーションは自己満足的な装飾ではなく、あくまでもユーザーの認知や理解を補助するものであるべきだと考え、主にフェードインを中心とした自然な動きのみを採用しました。その結果、ページの表示速度や情報の可視性を損なうことなく、落ち着いた雰囲気の中でスムーズな体験を実現しています。

さらに、リンクやボタンなどのインタラクティブな要素については、ホバー時に微細なアニメーションを加えることで、ユーザーがその要素がクリック可能であることを直感的に理解できるよう工夫しています。視覚的なフィードバックを通じて操作性を高めるとともに、UIのアクセシビリティ向上にも寄与しています。

このように、実装とインタラクション設計においては、見た目の演出に偏ることなく、あくまでユーザー目線での快適さと機能性を最優先に考えた設計を徹底しています。

設計上のこだわり

本サイトは、一見すると装飾性が少なく、デザインの個性が抑えられているように見えるかもしれません。しかしそれは、無個性であるという意味ではなく、ユーザー体験を最優先に考えた結果として、あえてシンプルな表現を採用しているという明確な設計思想に基づいたものです。

昨今のWebデザインでは、独自性や表現力をアピールする目的で、過度に装飾的で奇抜なアニメーションや視覚効果を多用する風潮があります。しかし、そうした演出は、しばしば雰囲気だけで評価されており、情報の構造や可読性、さらには表示速度といったユーザー体験の根幹を損なう原因になり得ます。特にコーポレートサイトのように、企業情報やブランドイメージを正しく伝えることが主目的である場合においては、そのような演出は本質的にそぐわないと考えています。

だからこそ、本サイトではアニメーションを最小限にとどめ、あくまで自然なインタラクションや重要な情報への視線誘導といった、ユーザーにとって意味のある場面にのみ限定的に使用しています。加えて、ボタンなどのUI要素も過度に装飾せず、明確な操作対象であることとタップしやすさを重視した、実用的でストレスのない設計を徹底しています。

アウトプット

ロゴ

Webデザイン

Hikora Designのサイトはこちら

Hikora Designは、ビジネスの構造をテクノロジーとデザインで根本から再設計するDX事業の会社です。

プロフィール

作品一覧

その他