PILOT版 SDGsのはじめ方-back story-
こんにちは、PILOT SDGsチームのじゅんじゅんです。
これまで、SDGsに関する情報やPILOTで行っている勉強会の様子などを発信してきましたが、ここで一息。
PILOTのSDGs特設サイトを開設するまでの経緯や想いなどについてお話したいと思います。
是非最後までお付き合いください◎
開設に至るまでの経緯
PILOTでは、クライアント様のサステナビリティやSDGsのWEBページを制作し、ときには相談を受けどういうページがよいか提案をしています。
しかし、PILOTの自社サイトにはそういったページがなく、SDGsについて勉強しているうちにこんな疑問が湧いてきました。
そこで、SDGsチームキックオフにてこの疑問を投げかけ、PILOT版SDGsページを制作することが決定しました!
ページ制作における事前準備
その① 棚卸し
まず初めに行ったのが『棚卸し』。
こういった疑問の解決や現状の把握をするためにも、棚卸しは必須です。
↓↓棚卸しの様子は、こちらの記事で詳しく書いています。
その② サイトの方向性を決める
制作していく過程において、ああしたい・こうしたい、というのはどうしても出てきます。
そうなったときに、要望のまま制作していくと、当初に予定からどんどんかけ離れていき、ツギハギをしたかのような構成になったり、トンマナが揃っていないデザインになったりと、何を伝えたいのかよくわからないページとなってしまいます。
そうならないためにも、
・ページを作る目的とコンセプト
・ニーズ
・ターゲット層
など明確に決めておく必要があります。
もちろん、今回のページ制作においてもこれらについてSDGsチーム内で打ち合わせを行い、認識に齟齬がないようすすめていきました。
考えられるニーズ
とりあえずSDGsのページを作りたい
理念やイメージを大事にしつつSDGsページを作りたい
個性を出したSDGsページを作りたい
想定されるターゲット
企業の社長
企業のSDGs担当者
最近SDGsを知った人
SDGsを既に知っているが、遠いものに感じている人
コンセプト
SDGsを知らない人と、知っている人とのギャップを埋められるようなサイト
SDGsを身近なものにしてもらえるようなサイト
企業の社長がみて共感できるサイト
その③ ワイヤーフレームの作成
方向性が決定したら、ワイヤーフレームを作成します。
とはいえ、いきなりワイヤーフレームの作成に取り掛かるのではなく、まずは掲載したいコンテンツざっくりと洗い出しました。
これらのざっくりとしたコンテンツをどういう構成にしていくのかワイヤーフレームに落とし込んでいきました。
ページ制作に着手
デザインの作成
コンテンツや構成が決定したら、次はデザイン。
ここはデザイナーの腕の見せ所!
これまでの内容をもとにデザイナーがデザインラフをいくつか作成し、よりつくりたいものに近いのはどれか、チーム内で話し合いを行いました。
そして採用デザインラフがこちら↓↓
参考になるサイトを探したり、リード文を作成したり、チームメンバー全員が制作に携わりました。
そして何度も打ち合わせを行い、『こういう見せ方が参考になるよ』『ここはこうしたほうがいいのでは?』など様々な意見を出し合いながら、PILOTのSDGsコンテンツページのデザインが完成しました。
完成したデザイン
試行錯誤の上、ようやくデザインが完成!
メインビジュアルは想像を遥かに超えるもので、見た瞬間に誰もが『これがいい!!』となりました。
このメインビジュアルは多様性を表現していて、それぞれが見ている方向は違うけれども、向かっている方向は同じなんだよ、という意味が込められています。
デザインが出来上がっただけではWebページができたとは言えません。
ここでコーダーが登場!
コーディング
デザイナーが作成した画像に動きをつける必要があります。
これにはコーダーが必要不可欠です。
カルーセル(画像をスライドさせる動き)はこういう動きが良い、フォントはこれ、アニメーションはこう、っといった指示をもとに、コーディングしていきます。
また、パソコンとスマホでは見え方も違ってくるので、デバイスに応じたサイズやレイアウトにも対応していきます。
"PILOT版 SDGsのはじめかた"完成!
これらの過程を経て完成したページがこちら↓↓
2030年まであと8年。
できていないことがまだまだありますが、SDGsの取り組みを続け、2030年までありのままの姿をこのサイトで発信し続けていくことが、このサイトの目標です。
"SDGsのはじめかた"から”SDGsのつづけかた”に進化していく過程を楽しみに、今後も注目して見てくださいね◎
■PILOT 公式Twitterはこちら
■PILOT 公式Facebookはこちら
↓↓PILOT 企業サイトはこちら↓↓
この記事が気に入ったらサポートをしてみませんか?