• #

  Webサイト

• #

  自主制作

制作時期

2026年8月

担当範囲

• デザイン

• 構成

• コピーライティング

使用ツール

• Figma

• Photoshop

概要

設立5年目を迎え、アプリ開発事業の拡大に伴い、WEBサイトのリニューアルを決定されたアプリ開発会社様のコーポレートサイトを制作しました。

ターゲット

・アプリ開発の知識や経験が不足している中小企業
・確信的なアイディアはあるが、開発リソースや経験が不足するIT系スタートアップ企業
・アクセシビリティや安全性を重要視する教育機関や自治体
・30-50代の経営者や決裁権のある人物、プロジェクトリーダー

目的

・自社プロダクト「OHA!」のさらなる普及
・ITスタートアップ企業や教育機関・自治体への積極的なアプローチ

コンセプト

技術力だけではなく、その先にあるユーザーや社会の未来まで考える姿勢を伝え、確かな技術への信頼感を軸に、先進性と親しみやすさを感じられるコーポレートサイト

制作ポイント

①信頼感や先進的なイメージをベースに、親しみやすさも両立させるデザイン
Wake Wonderが持つ「アプリ・AI・テクノロジー」という先進的なイメージだけでなく、「人の毎日に驚きや感動を届ける」という企業としての想いも伝えられるよう、先進性と親しみやすさのバランスを意識してデザインしました。メインーカラーにはブルーとエメラルドグリーンのグラデーションを採用し、テクノロジー企業らしいクリーンさや未来感を演出しました。アクセントにはイエローを採用し、単調にならず、視線を集めやすくなるようにしました。一方で、人物や街並みなどの自然な写真を取り入れたり、カードやボタンを角丸にすることで、無機質になりすぎない温度感を加えています。余白も広めにとり、清潔感や信頼感だけでなく、やさしさを感じるような雰囲気を目指しました。単に「テクノロジーを扱う会社」ではなく、「テクノロジーによって人や社会をより良くしていく会社」であることが伝わるトーンを目指しました。

②写真とビジュアルで内容を直感的に伝える
サービスやブログなど、掲載する情報が多いサイトだったので、文章だけでなく写真やイラストでも内容が伝わるようにすることを意識しました。
特に「Service」では、それぞれの内容に合った写真を使うことで、文章を全部読まなくても「どんなことをしている会社なのか」が直感的に分かるようにしています。写真選定においても、フリー素材感があまりない自然なものを選び、トーンを合わせることで違和感なく企業の雰囲気をビジュアルで伝える工夫をしました。
また、「Blog」では記事ごとにアイソメトリックイラストを用いたサムネイルを作成しました。それぞれの記事テーマを視覚的に表現し、一覧画面でも内容の違いが分かりやすくなるよう設計しています。カード型のUIやカテゴリー表示、人気記事などの情報も整理し、情報量が多くなっても視線の流れが崩れないよう、余白やサイズ、文字量を調整。「情報を掲載する」だけでなく、「ユーザーが必要な情報を見つけやすい」ことを重視したビジュアル設計としています。

③PC・SPどちらでも見やすく、UIも意識したデザイン
コーポレートサイトとしてPC・SPどちらから閲覧してもブランドイメージが損なわれないよう、デバイスごとに合わせたレスポンシブ設計を行いました。PC版では広い画面を活かして、写真とテキストを横並びにしたレイアウトや、複数のカードを並べた一覧構成を採用しました。一方でSP版では、情報を無理に縮小するのではなく、コンテンツを縦方向に並べて、スマートフォンでも読みやすい情報量と余白に調整しています。また、単純にPC版をSPサイズに縮小するのではなく、ナビゲーションやフォーム、パンくずリストなど、それぞれのUIについてスマートフォンでの操作性を考慮してレイアウトを再設計しました。特に「News」や「Blog」など、ユーザーに自発的に検索などを促すページでは、優先順位を再整理してレイアウトを設計しました。
PCとSPで各要素のレイアウトは変わりますが、カラーやフォント、ボタンなどのデザインをできるだけ統一することで、画面サイズが変わっても「Wake Wonderのサイト」と直感的に認識できる、一貫性のあるサイトデザインを目指しました。