「co-sou」は、企業と学生がオープンイノベーションを通じて共創するためのプラットフォームです。複雑なサービス内容を、ターゲットとなる企業や学生にわかりやすく伝えることが最大の課題でした。

ヒアリングからサイト公開までの制作プロセスをご紹介いたします。

ご依頼内容

萩原エレクトロニクス株式会社様の新規事業である産学連携プラットフォーム「co-sou」のサービスサイト制作をご依頼いただきました。

ヒアリング

どんなWEBサイトを作りたいのか、また現状でどんな課題を抱えているのかを明確にしていきます。picks designではデザイナーがディレクターとしてヒアリングを行います。

デザインの方向性も共有し、ヒアリング内容からお見積書をお出しいたします。金額のご確認、発注書の授受を行います。

調査・分析

ヒアリングした内容をもとに、市場調査や競合のデザインを分析していきます。

ワイヤー設計

サイトの構造・骨格を作っていきます。

打ち合わせ

考えたものを打ち合わせにてご提案します。（オンラインミーティングにて実施）ディスカッションを重ね、内容をブラッシュアップしていきます。

CLIENT

3つのサービス内容を差別化させ、もっと伝わりやすくしてほしいです。

picks design

サービス内容をフェーズで表せるイラストに起こして、ユーザーに一目で分かるようにするのはいかがでしょうか。

テキストベースでは伝わりづらいサービス内容をイラスト化して、初見でもわかりやすく表現することになりました。

TOPページデザイン

サイトの顔となるトップページのデザインをしていきます。

CLIENT

弊社のロゴや既存サイトの雰囲気を残しつつ、学生のエネルギー、活発なイメージがほしいです。

picks design

青ベースを残しつつ、C案で提案させていただいたアクセントカラーや図形を使用し、イノベーションを連想させるデザインはいかがでしょうか。

4つの提案の中から2つを組み合わせた、既存イメージと新しさが融合したトンマナに決定しました。

下層ページデザイン

その他のページをデザインしていきます。

CLIENT

サービス内容が複数あるため、ユーザーに正確に伝わるか不安です。

picks design

サービス別にイメージカラーを決めて視認性の高いデザインにいたします。

サービス別にテーマカラーを使用し、初見のユーザーにもわかりやすいようにデザインしました。

コーディング

ネット上に構築していくプログラミング作業です。

CLIENT

スマホで閲覧するときに、ユーザーがスクロールしやすいように、1画面の高さを調節してほしいです。

picks design

画像の大きさや文字の量、余白の量を調節して高さを調節いたします。

PCだけでなくスマホでもユーザーにとってストレスなく閲覧できるサイトに仕上がりました。

まとめ

萩原エレクトロニクス株式会社様の「co-sou」は、複雑な産学連携サービスをわかりやすく伝えるため、以下の工夫を施しました。