QR・ショートリンク・ファイルアップローダーSaaSツール「swiswii」のUX/UI設計およびLaravel Blade実装支援 株式会社egumiculture様

東京都渋谷区の株式会社egumiculture様がリリースしたSaaSツール「swiswii」において、UX/UI設計およびLaravel Bladeによる実装支援を担当しました。QRコード発行、ショートリンク生成、ファイルアップロードなどを一体化したBtoB向けWebアプリケーションの開発案件です。
swiswii

当初の想定を超えてUX/UI設計にも参画

当初はHTMLの静的ファイルコーディングのみを想定しての参加でしたが、私がこれまでに業務系WebアプリのUX/UI構築経験を持っていたことから、UI/UX全体の改善とコーディング両方の領域にアサインされました。

主な支援内容

• Webアプリとしての操作性を考慮したUI設計サポート
• 入力フォーム、一覧画面、モーダルなどのコンポーネントデザイン
• 開発メンバーとのUIレビュー・設計調整

フロントエンド設計とBootstrap採用の背景

当初、スタイリングにはTailwind CSSも検討さしましたが、最終的にチーム全体での運用効率や導入コストを考慮し、BootstrapをベースとしたUX/UI構築を採用しました。

Bootstrap採用の理由

• 知名度が高く、開発メンバー間で理解共有しやすい
• 以前参画したWebアプリ開発でも利用実績があり、運用ノウハウを活用できる
• Tailwindのようにローカルビルド環境を構築せずとも動作可能
• Bootstrapを理解して設計すれば、いわゆる“Bootstrap臭”は出ない

Bootstrapは「無難すぎる」「見た目が同じになる」と言われがちですが、構成と命名の理解次第で柔軟に表現できます。むしろコンポーネント単位でしっかり設計していけば、一定以上のクオリティを安定して担保できる点が強みです。

Tailwindを採用しなかった理由

• HTML静的レベルでもローカル環境構築が必要となる煩雑さ
• そもそもTailwindは導入コストが高い
• Bootstrapに比べ、即時共有・レビューがしづらい

開発速度・メンテナンス性・チーム規模を踏まえ、現実的かつ生産性の高い選択としてBootstrapを採用しました。

Laravel Blade実装支援

バックエンドにはLaravelが採用されており、Bladeテンプレートでの構築を支援しました。以前、業務WebアプリにてLaravel + Bladeのサポート経験があったため、テンプレート化・パーツ分割・共通化といった構造的な部分で開発チームをサポートしました。

主なBlade実装サポート内容

• Bladeディレクティブ（@include, @yieldなど）による部品化
• UI部品の再利用性を高めるパターン設計
• 開発効率を高めるベーステンプレートの整備

Laravelのテンプレートエンジンを活用し、開発スピードを維持しながらも、保守性・再利用性を両立した構成を意識しました。

結び

本案件では、HTMLコーディングからスタートし、最終的にはUI/UX設計、Bootstrapによるフロント実装、Laravel Bladeのテンプレート構築まで携わる形となりました。「Bootstrapの香りがする＝量産的」という固定観念を払拭しつつ、Webアプリとしての見やすさ・操作性を両立したデザインを実現。

結果として、開発効率を高めつつ、軽量かつ保守性に優れたフロントエンド構成を実現しました。SaaSツール「swiswii」は、今後の機能拡張性を十分に担保できる設計となっています。