ノーコードWeb制作プラットフォーム「Studio」で制作されたWebサイトを讃えるWebデザインの祭典「STUDIO DESIGN AWARD2023（以下、SDA2023）」にて、就労移行支援・就労継続支援などの事業を行う福祉サービス事業所「YELLOW（イエロー）」の公式サイトがグランプリを受賞しました。事業所のアーティストとコラボしたグラフィックや細やかなアニメーションなど、施設の魅力とデザイナーの感性が光る本サイト。制作を手がけた株式会社スピッカート代表の細尾正行さんは、各現場に足を運びながらYELLOWの特色を伝えるデザインを担当者と一緒に作り上げたそう。今回は細尾さんに同サイトの制作の背景と、デザインのこだわりについてお話を聞きました。Webサイトを変えれば、さらに多くの人にYELLOWの存在を知ってもらえるはず──まずは今回グランプリを受賞されたサイト「YELLOW」について、簡単にご説明をお願いします。細尾：今回制作したサイトは就労移行支援・就労継続支援を行っている福祉サービス事業所・株式会社YELLOWの公式サイトです。YELLOWは現在南大阪・泉州エリアに5箇所ほど事務所を持ち、障がい者アートや就労訓練など、障がいのある方の特性やニーズに合わせた支援を行っています。作家さんの作品は泉佐野市のカフェギャラリーで展示・販売しているほか、大手百貨店や海外の展示会にも出展されています。──どのような経緯でサイトリニューアルに至ったのでしょうか？細尾：「障がい者アート含めて様々な取り組みをしているにもかかわらず、情報をうまく発信できていない」と事業所の方から相談いただいたのがきっかけです。リニューアル前のWebサイトはYELLOWのメンバーの方が制作・運用していましたが、支援内容が幅広いゆえに様々な情報が混在していたため「障がい者アート」「本人の個性を活かした就労支援」という同社の特色が伝わりにくいサイト構成になっていました。情報の優先順位をつけた上で、ビジュアル的にもインパクトがある「アート」の要素を前面に押し出せば、YELLOWの取り組みがもっと地域に認知されやすくなると思ったんです。また障がいを持つ方は真面目な方も多く、「気の遠くなるような作業でもまじめに続けられる」「自分の利害に関係なく行動できる方」など、それぞれに強い個性を活かしながら働けるポテンシャルを持っています。少しの配慮や環境の整備ができれば、障がいを持っている人も社会で活躍できる。Webサイトでそんなメッセージを伝えられたらと考えていました。思わぬメンテナンス費用がかからないStudioは安心して提案できる──リニューアルにあたってStudioを採用した理由は？細尾：費用面と運用の手軽さが大きな理由です。WordPressや通常のコーディングと比較してもStudioは実装コストが削減できます。またWordPressの場合は定期的にシステムの更新を制作会社に依頼しなければならず、更新の度にコストがかかります。そのため提案する際は「Studioであれば保守運用作業が不要なので安心ですよ」とお伝えしていました。またYELLOWはイベント出展などの活動も活発なため、社内の方が手軽にサイトを更新できるCMSが理想でした。Web担当者の方にStudioを含めていくつかのCMSの操作画面を見比べていただき、最終的には「より直感的に使えそうなStudioで行こう」ということになりました。──サイトの制作期間と関わったメンバーの人数を教えてください。細尾：作業期間が空く時期もあったため、プロジェクトのスタートから公開までには5~6ヶ月ほどかかっています。私が進行管理とアートディレクションを兼任しており、それ以外にデザイナー1名、Studio実装担当1名、撮影を担当するカメラマンの計4名で制作を進めました。事業者の想いを汲み取りながら、ともにデザインを作っていく──デザインはどのような流れで進めましたか？細尾：まずは代表の方に、どういった想いで事業を運営しているかをインタビューをするところから始めました。その後すべての事業所に足を運び、実際にアートを描いている現場や、製品を袋詰めしている姿を見せていただきながら徐々にイメージを固めていきました。また初めの頃はYELLOWから具体的なデザインの要望がなかったので、デザインのたたきをお見せしながら対話して、少しずつ要望をヒアリングするやり方で進めていきました。じつは最初に作ったデザインをお見せしたとき、代表の松村さんが浮かない表情をされていて（笑）。「どのあたりがしっくりきませんか？」と意見を深掘りして、デザイン修正を重ねて、現在のものに辿り着きました。最終的に今のデザインをお見せしたときはすごく喜んでくださって、こちらも非常に嬉しかったです。ちなみにこのサイトのキービジュアルである「人」の文字のデザインも、打ち合わせを重ねる中で出てきたアイデアです。──YELLOWの魅力は「人」にある、ということが伝わってくるキービジュアルですよね。特にこだわったポイントを教えてください。細尾：「らしくを活かす」というキャッチコピーに合わせて、様々な「人」の文字のグラフィックを作っています。体の部分は事業所に所属するアーティストさんの作品をコラージュで使うことで、それぞれの個性や楽しげな雰囲気、障がいの有無に関わらず一人ひとりの個に向き合うYELLOWの姿勢を表現しました。また「人」の文字は一つひとつ微妙に動きが異なっているのですが、Studioのカスタムコード機能を使いながらそれぞれの画像に対してアニメーション機能をつけています。──ページの随所に手書きの文字を使っているのも印象的です。細尾：こちらもYELLOWの「色々な人がいても良い」という、温かく寛容な雰囲気を表現するためのデザインです。例えばページの下層部の見出しでは、Webフォントの中に一文字だけ手書きの文字を使っています。基本的にデザインはデザイナー本人の感性に任せることが多いのですが、ここは私が要望を出してデザイナーに作ってもらいました。妥協して後悔したくない、だから最後までデザインにこだわる──改めて、Web制作でSTUDIOを導入するメリットは？細尾：費用面・運用面でお客様にメリットがあるのはもちろんのこと、制作会社側としては修正の手間が少ない点も非常に助かります。通常のコーディングの場合、パーツを足したり、導入文を変えたりといった軽微な修正もいちいちエンジニアに依頼する必要があります。しかしStudioなら直接Webディレクターが編集画面に触れるので、エンジニアの工数が膨らむのを抑えられます。特にYELLOWのサイトは「作りながら改善していく」というフローで制作していったので、自分の手元でデザインを動かせるのはとてもありがたかったです。今後も規模がそこまで大きくなく、更新するコンテンツがシンプルなサイトはどんどんStudioをおすすめしていきたいですね。──スピッカートがデザインを作る上で大切にしていることを教えてください。細尾：「初めに作った構成やデザインに固執せず、柔軟に変化する」ことを大切にしています。もちろんプロジェクトの序盤にワイヤーフレームをしっかり作りますが、お客様のお話を聞いていたり、出てきたデザインを見ていったりするうちに「もっとこうしたら良くなるはず」と気づくことがよくあります。「その気づきを無視して、デザインを妥協して後悔したくない」と考えているからこそ、多少デザイナーや実装担当に無理を言ってでも細部の調整にこだわっています。──最後に、Web制作の発注を検討している会社の方へメッセージをお願いします。細尾：私たちはイラストを活用したアットホームな雰囲気のサイトを作るのが得意なので、もしも魅力に感じてくれたらぜひご依頼いただけると嬉しいです。今回SDA2023でグランプリを受賞させていただいたYELLOWのサイトもそうですし、直近制作した「いとうふぁーむ」という和歌山県の柑橘農家さんのWebサイトもイラストを交えたものになっています。こうした温かみのあるサイトがスピッカートの得意分野なので、気になった方はぜひお気軽にお問い合わせください。「日本タイポグラフィ年鑑2023」ロゴタイプ・シンボルマーク部門ベストワーク、「グッドデザイン賞2020」金賞/BEST100受賞と、実力派の株式会社スピッカート。初めてのStudio制作にもかかわらず、見事グランプリを受賞した「YELLOW」サイトはまさにスピッカートの圧倒的なデザインクオリティを表す代表サイトの一つになったのではないでしょうか。キービジュアルだけではなく、サイトの随所にある画像や文字が軽やかに動くアニメーションは社内のエンジニアとデザイナーが試行錯誤するなかで生まれたそう。きっと一つひとつ丁寧に実装されたのだろうと想像して、スピッカートのこだわりと創造性の高さに感嘆しました。社内にはイラストが描けるメンバーが多く、デザインに合わせたイラスト制作も強みの一つです。「YELLOW」や「いとうふぁーむ」のような、やさしくて心地よいデザインでサイトを制作されたい方は、ぜひスピッカートにご相談ください。▲株式会社スピッカートが手がけたWeb制作事例（一部）