02 INFORMATION SERVICE DEPT.
BEHIND THE DESIGN
このサイトができるまで
このサイトは、
どう設計されたのか。
Webサイトをつくる。
その仕事は、デザインツールを開くところから始まるわけではありません。
「情報サービス課を、どうポジショニングするか」
市場環境から考え、ブランド、情報設計、UI / UX、AI、実装へ。
このサイトを題材に、企画から実装までの設計プロセスを紹介します。
01｜WHY FIRST
何のために、情報サービス課のWebサイトをつくるのか。
「どんなWebサイトをつくるか」から考える
「何のためにWebサイトをつくるか」から考える
Webサイトは、目的ではなくツールです。
まず考えるべきなのは、
「どんなWebサイトをつくるか」ではなく、
「このサイトで何を実現したいのか」。
情報サービス課の場合、その目的は大きく三つあります。
① A型事業所として、利用を検討する人に選ばれること。
② 利用者の一般就労につながる、企業との接点をつくること。
③ Web制作・開発などを行う組織として、仕事の相談や案件につなげること。
この三つの目的から逆算して、
誰に、何を伝え、どのような見せ方をするべきかを考えていきます。
02｜ANALYSIS & STRATEGY
私たちには何があるのか。どう活かすのか。
すでにある、技術と仕事。
差別化の方法は、一つではない。
「情報サービス課」そのものを、選ばれる理由にする。
情報サービス課には、Web制作、システム・アプリ開発、デザイン、GIS、AI活用など、すでにさまざまな技術と仕事がありました。
その強みを、どう活かすか。
差別化の方法は一つではありません。
サービスを細分化する。
特定の市場に特化する。
新しいサービスをつくる。
技術や実績を前面に出す。
いくつもの選択肢から私たちが選んだのが、
「情報サービス課」そのものをブランドとして差別化すること。
ここから、ブランドとポジショニングの設計が始まります。
03｜BRAND & POSITIONING
私たちは、何者として選ばれたいのか。
システム会社を前身とする、技術の蓄積。
技術を学び、技術を使い、仕事につなげていく場所。
「技術」を強みにしたA型事業所。
システム会社を前身とする情報サービス課には、Web制作、システム・アプリ開発、デザイン、GIS、AI活用など、さまざまな技術と、それを使った仕事があります。
この技術的なバックグラウンドそのものが、私たちの強みです。
そこで、それらを個別に見せるのではなく、
「技術」を情報サービス課のブランドの軸として整理しました。
利用を検討する人には、
技術を学び、仕事をしながら成長できる場所。
仕事を依頼する人には、
実際に技術を使い、成果物をつくっている組織。
二つの目的に対して、一つのブランドで応える。
それが、このサイトで目指したポジショニングです。
04｜COMMUNICATION DESIGN
誰に、何を、どう伝えるのか。
利用を検討する人。
利用者の採用を検討する企業。
仕事の依頼を検討する企業・組織。
同じ「技術」という強みでも、相手によって知りたいことは違います。
FUTURE MEMBERS
ここで、何を学び、どんな仕事ができるのか。
EMPLOYERS
ここには、どんな技術や知識を持った人がいるのか。
CLIENTS
この組織に、何を任せられるのか。
だから、ただ「技術に強い」と説明するのではなく、
実際の活動や成果を、そのまま見てもらうことを考えました。
WORKS ―― 制作実績で、組織としての技術を見せる。
TEAM BLOG ―― 利用者の表現の場であり、事業所に技術を蓄積し、一人ひとりの力を企業へ見せる。
ABOUT US ―― 情報サービス課の考え方や文化を伝える。
BEHIND THE DESIGN ―― このサイトそのものを、設計力の証明にする。
「できます」と言うのではなく、実際にやっていることを見てもらう。
それを、このサイトのコミュニケーションの基本としました。
05｜INFORMATION ARCHITECTURE
何を、どこで伝えるのか。
つくったものを見せる。
人と技術を見せる。
私たち自身を伝える。
考え方とプロセスを見せる。
伝えたいことが決まったら、
次はそれぞれの情報に役割と居場所を与えます。
制作実績は WORKS。
人と技術の発信は TEAM BLOG。
情報サービス課そのものについては ABOUT US。
そして、企画から実装までの思考とプロセスは BEHIND THE DESIGN。
それぞれの役割を明確にし、
必要な情報へ自然につながるサイト構造を設計しました。
ページを増やすことではなく、役割を明確にすることも情報設計です。
06｜BRAND DESIGN
「技術」という強みを、どう見える形にするのか。
技術を、ブランドの軸に。
情サビちゃんを、ブランドの顔に。
「技術」という強みを、言葉だけで伝えるのではなく、
見ただけでも情報サービス課らしさが伝わるブランドへ。
そのために生まれたのが、情サビちゃんです。
GIGOは、良いアウトプットは良いインプットから、という仕事への姿勢。
メガネは、知性・技術・信頼、そして問題解決力のシンボル。
それらを情サビちゃんという一人のキャラクターに集約し、
情報サービス課の考え方を伝える「ブランドの顔」として設計しました。
07｜VISUAL & INTERACTION DIRECTION
表現できることと、表現すべきことは違う。
描けることと、描くべきことは違う。
動かせることと、動かすべきことは違う。
必要な表現だけを、選ぶ。
AIを使えば、光、色彩、背景、装飾など、さまざまな表現を簡単に足すことができます。
Webなら、さらに動きやインタラクションも加えられます。
しかし、できることを、すべてやる必要はありません。
必要なものは残す。
強すぎるものは弱める。
必要のないものは削る。
動きも同じです。
勝手に動くものは必要なところだけ。触ったところはちゃんと応える。
表現できることと、表現すべきことは違う。
この考え方は、サイトのUIやモーションはもちろん、
情サビちゃんのキャラクターデザインにも共通しています。
ただアニメキャラクターをつくるのではなく、
ブランドとして、何を残し、何を強く見せるのか。
それを、このサイトのビジュアルとインタラクションの基本としました。
08｜AI WORKFLOW
AIを、制作プロセスの中にどう組み込むのか。
目的と要件を、整理する。
人が、評価し、選択する。
修正し、より良い形へ。
AIは、このサイトをつくるための道具のひとつです。
企画の壁打ち、情報設計、文章、ビジュアル、実装支援。
さまざまな工程でAIを活用しています。
しかし、AIが出したものを、そのまま採用するわけではありません。
目的と要件を整理して入力し、
出てきたものを評価し、必要なら修正する。
INPUT → GENERATE → REVIEW → REFINE
このサイクルを繰り返しながら、制作を進めています。
良いアウトプットのために、良いインプットをつくる。
そして、そのアウトプットを人が評価する。
GIGOは、AIを使うときにも変わらない考え方です。
09｜IMPLEMENTATION
考えたことを、Webサイトとして形にする。
何を実現するのか。
どう伝えるのか。
戦略も、ブランドも、デザインも、
Webサイトとして機能して初めて形になります。
ここまで考えてきたことを、情報設計やUIへ落とし込み、
コンポーネントとして組み立て、Nuxtで実装していきます。
PCとスマートフォン、それぞれでの見え方。
情報の読みやすさ。
操作したときの反応。
動きを抑えたい人への配慮。
デザインを再現するだけではなく、設計した意図まで実装する。
それが、このサイトの実装方針です。
OUTRO
考えることから、Webサイトは始まる。
何のためにつくるのか。
私たちと市場を知る。
どう戦うのか。
何者として選ばれるのか。
誰に、何を伝えるのか。
どう見せ、どう体験してもらうのか。
いま、あなたが見ているこのサイト。
Webサイトをつくることから、始めたわけではありません。
目的を考え、分析し、戦略を選び、
ブランド、情報、ビジュアル、体験へと落とし込む。
そして、それらをWebサイトとして実装する。
一つひとつの判断を積み重ねた結果が、
いま、あなたが見ているこのサイトです。