プロジェクト概要

本プロジェクトでは、TSURINEWS内の求人ページにおいて、都道府県・雇用形態などの絞り込みUIと、求人カードの表示（求人ボックスへの遷移を含む）を整備しました。実際の求人カードには “sponsored by 求人ボックス” が表示され、クリックすると求人ボックス側の求人詳細へ遷移する導線になっています。

求人ボックスの「求人検索API（パブリッシャープログラム）」は、外部サイトが求人ボックス保有の求人を API経由で取得し（JSONレスポンス）、自社サイト上に表示できる仕組みで、表示デザインはサイト側で調整できます。 

この仕組みを活用し、TSURINEWSのユーザー体験に合う形で求人コンテンツを組み込みました。

目的

1. 求人検索の体験向上：絞り込み〜一覧表示までを分かりやすくし、探しやすい状態を作る 
2. 外部求人データの自然な組み込み：サイトの世界観を崩さず、求人情報を違和感なく表示 
3. API連携の安定運用：API仕様に沿ったリクエスト/レスポンス処理で、継続運用できる実装にする

デザイン・実装のポイント

1）絞り込みUI（都道府県／雇用形態）の整理

求人ページでは 都道府県 と 雇用形態 を軸に絞り込みができ、検索結果へスムーズに反映される設計です。 

「まず条件を選ぶ→検索する」という行動が直感的にできるよう、操作の分かりやすさを優先しました。

2）求人カードの見せ方を整える（情報の優先順位）

求人カードは、職種・会社名・勤務地・給与など、判断に必要な情報が多くなりがちです。

そこで、視線移動が少なくなるように情報の並びと余白感を調整し、スマホでもストレスなく一覧を追える見せ方に寄せています。 

3）求人ボックスAPI連携（取得→表示）

求人検索APIは、API仕様に沿ってリクエストを送信し、レスポンスを受け取り、求人情報を画面に表示する形が基本です。 

本案件でもこの流れで実装し、ユーザーが求人をクリックすると求人ボックス側へ遷移する導線を構築しています。 

4）“外部連携”を前提にした表示設計

サイト側のUIに合わせた実装ができたため、それを活かし、TSURINEWS側のページデザインに馴染む形で、求人一覧のUIを整えました。

制作を振り返って

求人ページは「情報量が多い」うえに「探す行動」が前提なので、デザインは作り込むよりも、迷わせない情報設計とサクサク動く検索体験の方が成果に直結します。 

また、求人ボックスAPIのような外部連携では、API仕様に沿った取得・表示の基本を固めることが、運用フェーズのトラブル回避につながります。  

プロジェクト概要

NPO法人 未来塾様は、「新しい学び、新たな出会い」を理念に掲げる生涯教育団体です。横浜市の栄区・港南区・神奈川区を中心に、各地区センターや公共施設で多彩な講座を開催しています。受講生の募集は年2回（春期・秋期）行われ、書道・生花・茶道・日本舞踊といった伝統文化から、語学、健康・フィットネス、音楽まで幅広いジャンルの講座を提供しています。

また、文化庁の支援を受けた「伝統文化親子教室」も運営しており、子どもたちが伝統文化を体験・習得できる機会を提供。地域の文化振興に大きく貢献されています。

今回のプロジェクトでは、団体の公式ホームページを新規制作。主な目的は以下の3つでした。

1. 受講生への情報発信：講座内容・スケジュール・申込方法をわかりやすく伝える
2. 講師募集：地域でキャリアを活かしたい方への呼びかけ
3. 団体の信頼性向上：NPO法人としての活動実績・理念の発信

特に講座情報は定期的に更新が必要なため、WordPress CMSを導入し、団体スタッフが専門知識なしで更新できる体制を構築しました。

コンセプト

「学びの楽しさと、人とのつながりを感じられるサイト」

未来塾様の魅力は、単なる「習い事」ではなく、受講を通じて生まれる人とのつながりや、新しい自分との出会いにあります。サイト全体を通じて、その温かみと活気を感じられるデザインを目指しました。

ターゲットは主にシニア世代の方々であるため、視認性の高いフォントサイズ、わかりやすいナビゲーション、直感的に操作できるUI設計を重視しています。

デザイン・実装のポイント

シニア世代に配慮したUI/UXデザイン

未来塾様の主な受講生はシニア世代の方々です。そのため、デザインにおいては以下の点を特に意識しました。

• 十分なフォントサイズ：本文は16px以上を確保し、見出しも大きく設定
• 高いコントラスト比：背景色と文字色のコントラストを十分に確保
• シンプルなナビゲーション：迷わず目的のページにたどり着ける構造
• クリックしやすいボタンサイズ：タップ領域を広く取り、操作ミスを防止

また、スマートフォンでの閲覧にも対応したレスポンシブデザインを採用。お子さんやお孫さんがスマートフォンで講座を調べて、シニアのご家族に伝えるというケースも想定しています。

講座情報の見やすい一覧表示

サイトの核となるのは、各地区の講座情報です。栄区・港南区・神奈川区それぞれの会場ごとにページを分け、開催曜日・時間・講師・受講料などの情報を一覧で確認できる構成としました。

講座数が多いため、カテゴリ別（文化・語学・健康など）に分類し、興味のある分野から探しやすい設計にしています。

WordPress CMSによる更新性の確保

NPO法人のサイト運営において、外部に依頼せず自分たちで情報を更新できることは非常に重要です。未来塾様では年2回の受講生募集に加え、講座の変更や追加、イベント告知など、定期的な更新が発生します。

WordPressのカスタム投稿タイプを活用し、講座情報やお知らせを簡単に追加・編集できる管理画面を構築。パソコン操作に不慣れな方でも直感的に更新できるよう、管理画面もシンプルに設計しました。

SEOを意識した内部設計

地域で講座を探している方に見つけてもらうため、SEO対策も実施しました。「横浜市 生涯学習」「栄区 カルチャー教室」「港南区 習い事」といった地域キーワードを意識しながら、タイトルタグや見出し構造を最適化。また、各講座ページにも適切なメタ情報を設定し、検索エンジンからの流入増加を狙っています。

サーバー・ドメイン設定までワンストップ対応

本案件では、サイト制作だけでなく、サーバーの選定・契約代行、ドメイン取得・設定まで一貫して対応しました。NPO法人の場合、IT担当者がいないケースも多く、「サーバーって何？」「ドメインってどうやって取るの？」という状態からスタートすることも珍しくありません。

そうした技術的なハードルをすべて代行することで、クライアント様は本来の活動に集中していただける環境を整えました。

伝統文化親子教室の特設コンテンツ

文化庁の支援を受けた「伝統文化親子教室」は、未来塾様の活動の中でも特に重要なプログラムです。子ども向けの講座であり、保護者の方が検索して申し込むケースが多いため、専用ページを設け、対象年齢・開催日程・申込方法などをわかりやすくまとめました。

制作を振り返って

NPO法人のホームページ制作は、一般企業とは異なる視点が求められます。収益最大化よりも「活動を知ってもらうこと」「参加者・支援者を増やすこと」が主目的であり、そのためのコミュニケーション設計が重要です。

未来塾様の場合、シニア世代を中心とした受講生と、子ども向けの親子教室という、異なるターゲット層が存在しました。それぞれに最適化された情報設計を行いながらも、サイト全体としての統一感を保つバランスには苦心しましたが、結果として使いやすく温かみのあるサイトが完成したと考えています。

また、サーバー・ドメイン設定からCMS構築、運用サポートまで一貫して対応することで、IT知識がない団体様でも安心してWebサイトを持てる環境を提供できました。地域で活動するNPO法人様のWeb発信をお手伝いできたことを嬉しく思っています。

プロジェクト概要

奈羅尾玲子様は、鳥取県を拠点に活動するタレント・日英バイリンガルナレーターです。2005年に米国から帰国後、山陰地方（鳥取県・島根県）のテレビ局でリポーターとしてキャリアをスタートし、現在は日本海テレビの情報番組でメインMCを務めています。

ナレーターとしては、TOYOTA、Hermès、資生堂、Spotify、adidas、Notion、EXPO2025大阪・関西万博など、国内外の一流企業・プロジェクトに多数参加。2023年にはアメリカで開催されるVOICE ARTS® AWARDSの日本語ラジオCMナレーション部門で最優秀賞を受賞されるなど、国際的な評価も高い実力派です。

今回のプロジェクトでは、奈羅尾様の公式サイトを新規制作。主な目的は以下の4つでした。

1. ナレーション案件の獲得：国内外のクライアントからの仕事依頼を増やす
2. ボイスサンプルの効果的な発信：「声」という商品を魅力的に伝える
3. ブランディング強化：ローカルタレントとしてだけでなく、国際的なナレーターとしての認知向上
4. 日英バイリンガル対応：海外クライアントからの直接依頼にも対応

特に重要だったのは、「声」という目に見えない商品をいかに効果的に伝えるか。ボイスサンプルの配置、再生しやすいUIデザイン、そしてサンプルを聴いた後に問い合わせへとつなげる導線設計に注力しました。

コンセプト

「声の魅力を、視覚でも伝えるオフィシャルサイト」

ナレーターにとって最も重要な商品は「声」です。しかし、Webサイトは基本的に視覚メディア。この矛盾を解決するため、サイト全体のビジュアルデザインで奈羅尾様の「声の世界観」を表現することを目指しました。

奈羅尾様の声の特徴は、「知性と深みを感じる低音」「潮風を含んだような中低音」「親しみやすい中音」という幅広いレンジ。この多彩な表現力と、山陰地方の自然豊かな背景、米国での経験に裏打ちされた国際感覚——これらの要素を、洗練されながらも温かみのあるデザインで表現しました。

デザイン・実装のポイント

ボイスサンプルを中心に据えた情報設計

ナレーターのサイトにおいて、ボイスサンプルは最も重要なコンテンツです。本サイトでは、トップページにボイスサンプルセクションを大きく配置し、訪問者がすぐに「声」を聴ける設計としました。

サンプルは「ナチュラル」「シリアス」「知的」「スタイリッシュ」「重厚」など、トーン別にカテゴライズ。クライアントが求める声のイメージから、該当するサンプルを素早く見つけられるよう工夫しています。また、各サンプルにはダウンロード機能も実装し、社内での検討や比較がしやすい仕様としました。

さらに、個別案件に応じたカスタムサンプルを無料で制作できることも明記。「聴いてみたい声のイメージがあるけど、既存のサンプルにはない」というクライアントのニーズにも対応できることをアピールしています。

日英バイリンガル対応の実装

奈羅尾様は日本語と英語の両方でナレーションを行うバイリンガルナレーターです。海外クライアントからの直接依頼も多いため、英語版ページを別途制作しました。

単純な機械翻訳ではなく、英語圏のクライアントにとって自然で、かつ必要な情報が過不足なく伝わる構成を意識。日本語版と英語版で一部コンテンツの優先順位を変えるなど、ターゲットに合わせた最適化を行っています。

豊富な実績を効果的に見せるポートフォリオ設計

TOYOTA、Hermès、資生堂、Spotify、adidas、EXPO2025大阪・関西万博など、奈羅尾様の実績は非常に豪華です。これらを効果的に見せることで、サイト訪問者に「この人に依頼すれば間違いない」という信頼感を与えることを狙いました。

ポートフォリオセクションでは、実際の映像作品を埋め込み表示し、ナレーションの実例を視聴できる形式を採用。また、クライアントロゴを一覧で表示するセクションも設け、一目で実績の幅広さが伝わるデザインとしています。

ストーリーテリングによる差別化

ナレーターは数多く存在しますが、奈羅尾様には独自のバックグラウンドがあります。鳥取県の山奥で育った幼少期、米国での特殊メイク・造形の学び、そして帰国後のタレント・ナレーターとしてのキャリア——この「人生のストーリー」こそが、他のナレーターとの差別化ポイントです。

サイト内に「Reiko’s Story」セクションを設け、奈羅尾様のバックグラウンドを丁寧に紹介。「声に宿る質感や陰影。そこに想いをのせて言葉の本質を伝えたい」というナレーションへの哲学を伝えることで、単なる「声の提供者」ではなく、作品に深みを与えるパートナーとしての価値を訴求しています。

自宅録音スタジオ設備の紹介

近年、リモート収録の需要が急増しています。奈羅尾様は高品質な自宅録音ブースを完備しており、これは大きなアドバンテージです。サイト内に「Home Studio Setup」セクションを設け、使用機材（マイク、オーディオインターフェース、防音・吸音材など）を詳細に紹介しています。

また、宅録音質確認用のサンプル音声（10秒間の沈黙付き）も用意。クライアントがノイズフロアや音質を確認した上で依頼できる安心感を提供しています。

受賞歴・評価の可視化

2023年のVOICE ARTS® AWARDS最優秀賞受賞は、奈羅尾様の実力を客観的に証明する重要な要素です。サイト上部に受賞バッジを配置し、訪問者の目に入りやすい位置でアピール。また、お客様の声（Testimonials）セクションでは、国内外のクライアントからの評価コメントを掲載し、信頼性を高めています。

ロゴ制作からの一貫したブランディング

本案件では、サイト制作だけでなくロゴ制作も担当しました。奈羅尾様の「R」をモチーフにしたシンプルかつエレガントなロゴを制作し、サイト全体のトーン&マナーと統一。名刺やSNSアイコンなど、オンライン・オフライン問わず使用できる汎用性の高いデザインとしています。

WordPress CMSによる更新性の確保

ナレーターのサイトは、新しいボイスサンプルの追加、実績の更新、ニュースの発信など、定期的な更新が必要です。WordPressをベースにCMSを構築し、奈羅尾様ご自身で簡単にコンテンツを更新できる環境を整備しました。

特にボイスサンプルの追加は頻繁に発生するため、音声ファイルのアップロードと公開が直感的に行える管理画面を設計しています。

SEOを意識した内部設計

「ナレーター 日英バイリンガル」「英語ナレーション 日本人」「女性ナレーター 低音」など、ナレーターを探しているクライアントが検索しそうなキーワードを意識しながら、タイトルタグや見出し構造を最適化しました。また、ボイスサンプルページや実績ページにも適切なメタ情報を設定し、検索エンジンからの流入増加を狙っています。

制作を振り返って

ナレーター・タレントのオフィシャルサイト制作は、一般的な企業サイトとは異なるアプローチが求められます。「声」という目に見えない商品を、視覚的なWebサイト上でいかに魅力的に伝えるか——この課題に真正面から向き合ったプロジェクトでした。

奈羅尾様は、米国での経験、山陰地方でのタレント活動、そして国際的なナレーターとしてのキャリアという、非常にユニークなバックグラウンドをお持ちです。このストーリーを丁寧に伝えることで、単なる「声のカタログ」ではなく、「奈羅尾玲子という人物の魅力が伝わるサイト」を目指しました。

また、本案件は鳥取県在住のクライアント様からのご依頼であり、川崎市を拠点とするtkmt designが全国対応できることを示す好例でもあります。オンラインでのコミュニケーションを活用し、地理的な距離を感じさせないスムーズな制作進行が実現できました。

公開後、奈羅尾様のサイトは国内外のクライアントからのアクセスを集め、新規案件の獲得にも貢献しているとのお声をいただいています。ナレーターやタレント、アーティストなど、クリエイター向けポートフォリオサイトの制作をご検討の方の参考になれば幸いです。

プロジェクト概要

アズールテスト株式会社様は、高精度小型テスターの製造・販売を主力事業とする電子機器メーカーです。自社製品の開発・製造に加え、PCB（プリント基板）設計、回路図設計、組み込みシステム設計、ソフトウェア設計など、電子機器開発に関する幅広い技術サービスを提供されています。

埼玉県から複数の認定を受けており、「彩の国経営革新モデル企業」「埼玉県シニア活躍推進宣言企業」「埼玉県SDGsパートナー企業」に選定されるなど、技術力だけでなく企業としての社会的責任にも積極的に取り組まれています。

今回のプロジェクトでは、同社のコーポレートサイトを新規制作。主な目的は以下の4つでした。

1. 企業の信頼性向上：技術力と実績を効果的に伝え、取引先からの信頼を獲得
2. 製品情報の発信：自社製品（テスター）のスペック・特徴をわかりやすく紹介
3. 事業内容の訴求：PCB設計や組み込み設計など、受託開発サービスの認知拡大
4. 採用活動の強化：中途採用・未経験採用に向けた情報発信

製造業のサイトでは、専門的な技術情報を「わかりやすく」伝えることが重要です。技術者が見ても満足できる詳細情報と、非技術者にも理解しやすい概要説明のバランスを意識した設計を心がけました。特に重要だったのは、「声」という目に見えない商品をいかに効果的に伝えるか。ボイスサンプルの配置、再生しやすいUIデザイン、そしてサンプルを聴いた後に問い合わせへとつなげる導線設計に注力しました。

コンセプト

「技術力と誠実さが伝わる、信頼感のあるコーポレートサイト」

製造業において、Webサイトは「会社の顔」として取引先や求職者に第一印象を与える重要な存在です。アズールテスト様の場合、高精度なテスター製造という技術力と、SDGsやシニア活躍推進といった社会貢献への姿勢の両方を伝えることが求められました。

デザインは、電子機器メーカーにふさわしい「精密さ」「信頼性」を感じさせるクリーンな印象を基調としながら、堅くなりすぎない親しみやすさも加味。BtoBサイトとして、必要な情報に素早くアクセスできる明快な構造を重視しました。

デザイン・実装のポイント

製品情報ページの設計

アズールテスト様の主力製品である高精度小型テスター（AZT1016、AZT1008、AZT1010など）の情報を、技術者が求めるレベルで詳細に掲載できる製品ページを構築しました。

各製品ページでは、スペック表、特徴、用途などを体系的に整理。製品写真も大きく配置し、外観デザインや端子配置などが一目でわかるレイアウトとしています。また、製品間の比較がしやすいよう、統一されたフォーマットで情報を掲載しています。

事業内容の可視化

アズールテスト様は、自社製品の製造だけでなく、受託開発サービスも提供されています。PCB設計、回路図設計、組み込み設計、ソフトウェア設計という4つの事業領域を、それぞれ独立したページで詳しく紹介する構成としました。

各ページでは、「どんな課題を解決できるのか」「どのような技術・設備を持っているのか」を具体的に説明。潜在的な取引先が「この会社に相談できそうだ」と感じられる情報量を確保しています。

採用情報の充実

製造業において人材確保は重要な経営課題です。アズールテスト様のサイトでは、採用情報セクションを充実させ、中途採用・未経験採用それぞれに向けた情報を発信しています。

特に「未経験採用」ページを設けている点は、技術職でありながら未経験者の育成にも力を入れている同社の姿勢を表しています。また、Q&Aページでは、応募前に求職者が抱きやすい疑問に先回りして回答することで、応募へのハードルを下げています。

企業の社会的取り組みの訴求

アズールテスト様は、「彩の国経営革新モデル企業」「埼玉県シニア活躍推進宣言企業」「埼玉県SDGsパートナー企業」など、複数の認定を受けています。これらの情報をニュースセクションで発信し、単なる技術力だけでなく、企業としての社会的責任を果たしている姿勢をアピールしています。

また、さいたま緑のトラスト協会からの感謝状授与など、地域貢献活動についても積極的に発信。取引先や求職者に対して、「信頼できる会社」というイメージを醸成しています。

WordPress CMSによる更新性の確保

製造業のサイトでは、新製品情報の追加、ニュースリリースの発信、採用情報の更新など、定期的なコンテンツ更新が必要です。WordPressをベースにCMSを構築し、社内で簡単に更新できる環境を整備しました。

特に製品情報ページは、スペック表や特徴リストなど、定型化された情報を入力しやすいカスタムフィールドを設計。新製品が追加される際も、統一されたフォーマットで効率的にページを作成できる仕組みとしています。

SEOを意識した内部設計

製造業のBtoBサイトにおいて、検索エンジンからの流入は新規取引先獲得の重要なチャネルです。「テスター 製造」「PCB設計 埼玉」「組み込み設計 受託」といった業界キーワードを意識しながら、タイトルタグや見出し構造を最適化しました。

また、製品ごとの詳細ページを設けることで、製品名での検索にも対応。「製品を探している」というニーズを持つユーザーを逃さない設計としています。

レスポンシブ対応

BtoBサイトであっても、スマートフォンやタブレットからのアクセスは増加しています。展示会や商談の場でサイトを見せるケース、移動中に製品情報を確認するケースなどを想定し、あらゆるデバイスで快適に閲覧できるレスポンシブデザインを実装しました。

制作を振り返って

製造業のコーポレートサイト制作は、専門的な技術情報をどのように「伝わる形」にするかが大きなポイントです。アズールテスト様の場合、高精度テスターという専門性の高い製品を扱っているため、技術者が見ても納得できる情報量を確保しながら、初めて訪れる方にも会社の概要が伝わるバランスを追求しました。

また、製品情報だけでなく、受託開発サービス（PCB設計・回路図設計・組み込み設計・ソフトウェア設計）の訴求も重要なミッションでした。これらのサービスは、「何ができるのか」が伝わりにくいため、具体的な事例や対応可能な技術範囲を明確に示すことで、潜在顧客の興味を引く構成としています。

さらに、SDGsパートナー企業やシニア活躍推進宣言企業といった認定情報は、採用活動においても大きなアドバンテージです。これらの情報を効果的に発信することで、求職者に対しても「働きがいのある会社」というイメージを伝えられるサイトになったと考えています。

製造業のホームページ制作をご検討の方、特に「技術力をどう伝えればいいかわからない」「BtoBサイトで成果を出したい」とお考えの方の参考になれば幸いです。

プロジェクト概要

the courageは、従来の“週1〜2回のレッスン”型では伸びにくい課題に対し、「効果的な学習方法」「時間確保」「学習の継続」という3つの要素を、プロのコーチが一人ひとりに寄り添ってトータル支援する中国語コーチングサービスです。本プロジェクトでは、サービスの強みと実績が直感的に伝わり、無料カウンセリングまで迷わず進める“体験設計”を主軸にサイトを構築しました。   

無料カウンセリング予約（問い合わせ）導線の強化

検索流入の最大化（SEO） ─ とくに「中国語コーチング」周辺の獲得

信頼性の可視化 ─ 実績・カリキュラム・コーチ品質が“初見で”伝わる情報設計

the courageは「語学スクールではなく、コーチによるトータルサポートで学習を加速させる」ことを強みにしており、サービス理解のハードルを下げつつ、比較検討で必要な情報（特徴、コース、受講までの流れ、コーチ紹介、受講生の声、FAQ）を迷わず辿れる構造が重要でした。 後に問い合わせへとつなげる導線設計に注力しました。

コンセプト

「納得して予約できる。無料カウンセリングまでの体験を最短化する。」

強み（3要素のトータル支援）と実績が先に伝わり、次に「自分に合うか」を判断でき、最後に迷わず予約できる。

この順番で、情報とCTA（無料カウンセリング）を設計しました。

デザイン・実装のポイント

1）ファーストビューで“何のサービスか”を即理解

「コーチによるトータルサポート」「3要素（学習方法・時間確保・継続）」が一目で伝わる構造にし、サービスの違いを先に提示。 

2）比較検討の導線を固定化

訪問者が必ず確認したいセクション（特徴 / コース・料金 / 受講までの流れ / コーチ / 受講生の声 / FAQ）へ、常に迷わず移動できる導線を設計。 

3）“信頼材料”を先回りして配置

実績に基づくカリキュラム、学習継続の仕組み、コーチ採用基準など、判断材料を要所に配置し不安を潰す。 

4）成果・実績の見せ方を整理

HSK関連の実績や満足度など、強い数字・根拠がある部分は「結果と成果」としてまとめ、説得力が落ちない見せ方へ。 

5）SEOを前提にしたコンテンツ設計

検索ニーズのあるテーマ（学習法・試験・教材・継続など）を受け皿にしつつ、最終的に無料カウンセリングへ戻る導線を意識して設計。

6）更新しやすいCMS運用

コースやお知らせ等、運用更新が発生する領域はCMS導入を前提に設計し、継続的に改善しやすい状態へ。

成果

SEO：「中国語 コーチング」関連で検索上位表示（※クライアント計測では1位獲得）

CV導線：無料カウンセリングまでの導線を明確化し、迷いを減らす設計へ

運用：更新・改善が回る構造（WordPress / CMS）を整備

使用技術・対応範囲

WordPress / CMS導入 

コーディング（HTML / CSS / JavaScript） 

SEO設計（内部設計・コンテンツ導線） 

サーバー設定 / ドメイン設定

制作を振り返って

中国語コーチングのような“高単価×比較検討が長い”サービスは、デザインの良し悪し以上に、「判断材料がそろう順番」と「予約までの迷いのなさ」が成果を左右します。

本件では、強み（トータル支援）と実績を先に提示し、次にコース・流れ・コーチ・受講生の声へ自然に進める構造にすることで、納得して無料カウンセリングへ進める体験を優先しました。

プロジェクト概要

Remoブランドサイトでは、琺瑯ランプ（LP-31A / LP-31 / LP-23 など）を中心に、アウトドア用食器（ブラックシリーズ）やレトロマグ等のラインナップを掲載し、商品の特徴・仕様・カラーバリエーションまでを整理して閲覧できる構成になっています。
また、News（お知らせ）更新、Company情報の掲載、用途別の問い合わせ導線（商品問い合わせ／資料請求など）を備え、ブランド運用を前提とした情報設計が求められるプロジェクトでした。

目的

1. ブランドの世界観を損なわずに、商品の魅力を伝える（素材・仕上げ・経年変化などの価値訴求） 
2. 商品情報を比較しやすく整理し、カラーや型番などの検討をスムーズにする 
3. 問い合わせ導線の明確化（商品に関する問い合わせ／資料請求など） 
4. 運用（更新）を前提にしたサイト基盤（News更新・商品追加を想定） 

課題

型番・カラーが複数あるため、比較検討しやすいUI/構造が重要

商品の価値が「写真＋スペック」だけでは伝わりにくく、“選ばれる理由”の言語化が必要

運用（News更新・ライン追加）を想定し、更新性を担保したい

コンセプト

「静かな世界観で魅せる。情報は迷わせない。」

ブランドのトーンを守りながら、ユーザーが「商品を見る → 特徴を理解する → 仕様を確認する → 問い合わせる」まで迷わない導線設計を重視しました。

デザイン・実装のポイント

1）“価値”が伝わるコピー/情報配置

琺瑯ランプでは「焼成仕上げで色褪せにくい図柄」「真鍮ソケットカバーの経年変化」など、購買の決め手になる特徴を要所で伝える設計に。 

2）商品比較がしやすいラインナップ設計

型番ごとのカラー展開、JAN、寸法、材質、口金サイズなどを整理し、検討に必要な情報へスムーズに到達できる構成にしています。 

3）運用前提のNews・商品追加

Newsでは「製品追加」「展示会出展」「HP公開」などの更新が前提のため、更新しやすい導線・設計を意識。 

4）問い合わせフォームの目的分岐

「商品に関するお問い合わせ／資料請求」など、目的に合わせた問い合わせ導線を用意し、取りこぼしを減らす構造に。

制作を振り返って

プロダクト系のブランドサイトは「世界観」と「情報設計」を両立しないと成果が出ません。

本件では、静かなトーンで魅せつつ、仕様や比較検討など“判断に必要な情報”へ迷わず辿れる構造を優先し、運用更新まで見据えた設計で組み立てました。