▍概要
自分たちの活動の拠点となる「よんにゅ」のWebサイトを制作しました。
日々の発信の場として機能するのはもちろんのこと、私たちが現在提供できるデザインや実装の質を直接体感してもらう「生きたサンプル」としての役割を持たせています。
サイト全体を通して「ここなら面白い仕事を頼めそう」と直感的に感じてもらえるような設計を目指しました。
■ プロジェクト情報
・業種／ジャンル：制作系コミュニティー
・地域：天草市
■ 制作背景・課題
単なる活動報告の場に留まらず、私たちのスキルを「動く実例」として提示することが課題でした。誰にでも使いやすい親しみやすさを維持しつつ、仕事を任せられると感じていただけるクオリティも感じさせる。その両立を目指し、天草の穏やかな空気感や「よんにゅ」らしい温度感を、UIとインタラクションでどう具現化するかに挑戦しています。
■ よんにゅの提案・担当領域
サイト設計／UI・UXデザイン／フロントエンド実装
■ 制作でこだわったポイント
・直感に訴えるやわらかなUI構成
「よんにゅ」という言葉や音の柔らかさを、角を落としたインターフェースに変換しました。操作するたびに滑らかなアニメーションやレイアウト変化が起こるよう設計し、Webサイトそのものが持つ「硬さ」を払拭し、情緒的な体験を重視しています。
・言葉の意味を動的に伝える流体メインビジュアル
ローディングからファーストビューへと繋がる背景には、無数の「粒」が躍動する流体アニメーションを実装しています。
粒が集まってキャッチコピーを結像し、再び流体へと戻る表現を通して、天草の言葉であり、コミュニティの名前でもある「よんにゅ（たくさん・いっぱい）」の意味を視覚的に表現しました。
多様な色が集まり、変化し続ける演出は、多様なクリエイターが混ざり合うコミュニティの象徴でもあります。
また、同じ背景が連続しないランダムなテーマ切り替えを取り入れ、ユーザーが飽きずに滞在できる体験を狙いました。
・モバイルファーストを追求した「ボトムナビゲーション」の実験的導入
スマートフォン版のUIでは、一般的な右上ハンバーガーメニューではなく、近年の主要アプリやSNSで主流となっている「ボトムナビ」を試験的に採用しています。
片手での操作性（ユーザビリティ）を劇的に向上させるためのアプローチであり、Webサイトにおける新しい体験の提案として実装しています。
■ 担当メンバー（クレジット）
・ディレクション：りょうちゃん
・ワイヤーフレーム：りょうちゃん
・デザイン：りょうちゃん／こもりん
・コーディング：りょうちゃん／こもりん
・CMS実装：りょうちゃん
■ 使用ツール・技術
Figma / HTML・CSS / WordPress / Claude Code / Visual Studio Code / Antigravity / Google Apps Script