![見出し画像](https://assets.st-note.com/production/uploads/images/145026834/rectangle_large_type_2_c5977a7778dc2e16ff3b206de1aa48f4.jpeg?width=1200)
アンドナの広報ツールができるまで(Webサイト編)
はじめまして。Nekiのデザイナーの西宮です。今回のノートでは、デザインを担当させていただいた「非営利型株式会社andna(以下アンドナ)」のWebサイトについてご紹介します!
アンドナは、ネーミングとロゴマークを代表の坂田が制作し、Webサイトやパンフレットなどのツール展開を西宮が担当しました。アンドナは、ロゴマークのリサーチの段階から関わっていたこともあり「西宮くんにサイトデザインを担当してもらうつもりなのでよろしく~」と坂田から伝えられた時、嬉しさのあまり心の中でガッツポーズをしてしまいました(サイトが公開された時は本当に感動しました…!)。
そんなアンドナのWebサイトがどのような過程を経て生まれたのか、詳しくご紹介していきます!
Webサイトをデザインする前に
まず初めに、アンドナの事業内容やロゴマークのコンセプトについて坂田からフィードバックを受けました。
福祉の現場のエネルギーや可能性を伝える
研修を検討中の企業や福祉施設の方がメインターゲットである
以上のことを踏まえ、「従来の福祉のイメージを変えるような、新しさを感じるデザインであること」「明朗快活であること」をサイトデザインの指針としました。そして、この指針を念頭に、デザイントーンの参考となるWebサイトや類似サービスのリサーチを行いました。これらの作業を経て、初めてデザインの作業に移っていきます。他の案件でも同じですが、いきなり手を動かすことはせず「誰に何をどのように伝えるのか」を整理してからデザインするように心がけています。
ラフデザイン案の制作
今回は、トップページのラフデザイン案を2つの方向で提案しました。
A案:配色にメリハリを持たせたデザイン
![](https://assets.st-note.com/img/1710498043713-3H70L9BmWl.jpg?width=1200)
B案:柔らかさを重視したデザイン
![](https://assets.st-note.com/img/1710498137670-bKuNZ4oNdH.jpg?width=1200)
アンドナ代表の野村さんとお話をする中で、「企業や福祉施設の方に見てもらうことを考えるとメリハリがあってサービスを明快に伝えられる方が良い」というご意見をいただき、A案に決まりました
トップページ以外のページもデザインを進めていく
デザインの方向性が決まった後は、トップページ以外のデザインを進めていきました。今回は、トップページの他にサービス紹介のページが3ページ、ブログやエッセイといった読み物のページが2ページ、といったようにボリュームが大きいWebサイトのため、トップページのデザインを他のページにそのままコピーするのではなく、それぞれのページの役割に合ったデザインを心がけました。例えば、「喫茶アンドナ」はアンドナを通して出会った方々の「人柄」にフォーカスするページなので、柔らかくゆったりとした読み物のようなデザインにしています。
![](https://assets.st-note.com/img/1710898756809-oSTaXxV9ny.jpg?width=1200)
逆に、企業向けのページでは、分かりやすさに重点を置きメリハリの効いた配色にしています。
![](https://assets.st-note.com/img/1710902968140-KFobTWH5W1.jpg?width=1200)
ページごとのデザインを検証した後、さらに、Webページ全体のデザインを見直しました。その中で、福祉の現場のエネルギーや温度感を伝えるために、手書き文字をメインビジュアルに加えるというアイディアが生まれました。この手書き文字は、メインビジュアル以外にも展開しています。
![](https://assets.st-note.com/img/1710898794789-wQw5NLrF7n.jpg?width=1200)
![](https://assets.st-note.com/img/1710898830134-fYkuoVTSIN.jpg?width=1200)
このように、サイト全体の見た目を整えていきながら、コンテンツごとの役割に合った「顔づくり」も進める、という「木も見て森も見る」作業を繰り返していくことで完成度を高めていきました。
テストアップ後もデザインを微調整していく
Webサイトのデザインが固まった後は、いつもお世話になっているエンジニアのSUBTONIC山﨑さんに確認用のテストサイトをアップしていただきました。実際に動作確認をする中で導線上必要なボタンを追加したり、文言の修正といった微調整を加えていきました。毎日アンドナのWebサイトと向き合うことで、サービスについての理解が深まっていく分、思い込みによって「初めて見た人がどう感じるか」という視点が抜け落ちてしまわないよう、ユーザー目線を大切に改善していきました。また、代表の野村さんからも「初めて見た人でも分かるようにしてほしい」「遠慮なく意見を欲しい」と何度も言っていただけたこともあり、対話を重ねながら、最後の最後までブラッシュアップしていくことができました。
最後に
11月末ごろからデザインをスタートして公開まで約4ヶ月。Webサイトが完成するまでには、とても長い道のりがあります。毎日サービスについて考えることで「どうすればもっと良くなるだろうか」「Webサイトを見た人はどんな反応をしてくれるだろうか」とワクワクしながらデザインをすることができました(実は勝手に野村さんとの一体感を感じていました...)。改めて、挑戦する方の後押しができるデザイナーという職業の素晴らしさを実感したお仕事でした。デザインを依頼していただいた野村さん、いつも丁寧に素早く対応してくださる山﨑さん、改めまして本当にありがとうございました!
次回は、パンフレットや封筒などのアンドナの紙物のツールについてご紹介します。お楽しみに!