Shunsuke Kondo
Portfolio Site

背景・課題

サイトの構成・コピーはあらかじめ支給されており、内容そのものを大きく変更するのではなく、与えられた情報をどう見せるかがデザイン上の課題でした。
特に、文章量のあるコンテンツをそのまま配置すると情報の優先度が分かりづらくなるため、コピーを変更せずに、各情報のまとまりや強弱が伝わる見せ方を考える必要がありました。
また、サイト制作だけでなく、問い合わせ内容の通知や自動返信メールなど、公開後に実際に運用するための仕組みもあわせて整備しました。

アプローチ・施策

◼︎支給されたコピーを変えず、デザインで情報の強弱を整理

構成・コピーは支給されたものを使用する前提だったため、文章を安易に削ったり書き換えたりするのではなく、デザイン側で情報の優先度を整理しました。
各セクションの内容を確認しながら、どの情報を先に見せるか、どこを強く見せるかを整理し、文章量があっても内容を追いやすいようにレイアウトへ落とし込みました。

◼︎LP型の構成を、セクションごとの役割が伝わる見せ方へ

複数の情報が続くLP型の構成のため、すべてを同じ見せ方にすると情報の違いが分かりづらくなります。
そのため、支給された構成をベースに、それぞれのセクションで伝える内容を確認しながら、情報のまとまりや重要度が視覚的に伝わるようデザインしました。

◼︎問い合わせ後の運用まで含めて実装

Studioでのサイト実装に加え、問い合わせフォームから送信された内容をスプレッドシートへ連携し、GASを使用した自動返信メールの仕組みも設定しました。
公開前後には実際のフォームからテスト送信を行い、正常にメールが送信されるところまで確認。途中で正常に送信されない状態も発生したため、設定を見直しながら再調整を行いました。

制作のプロセス

01｜構成・コピーの確認

支給された構成・コピーを確認し、内容を変更せずにどのように情報の強弱をつけるかを整理しました。文章量や各セクションの役割を確認しながら、デザインへ落とし込むための準備を行いました。

02｜Webデザイン

支給された情報をもとに、各コンテンツのまとまりや重要度が分かるようデザインを作成。コピーそのものではなく、見せ方によって情報を整理することを意識しました。

03｜Studio実装

完成したデザインをもとにStudioでサイトを実装しました。デザイン制作だけで終わらず、そのまま公開できる状態まで自身で制作を進めました。

04｜問い合わせフォーム・自動返信設定

問い合わせフォームとスプレッドシートを連携し、GASを使用して問い合わせユーザーへの自動返信メールを設定しました。通知先や送信元メールアドレスについてもクライアントと確認しながら調整しました。

05｜本番環境での確認・調整

公開後の環境で実際に問い合わせフォームからテスト送信を行い、自動返信メールの動作を確認しました。正常に送信されない箇所については設定を見直し、再度テストを行いながら調整しました。

06｜公開・納品

サイト公開後、フォームを含めた最終確認を行い、正常に動作することを確認したうえで納品。制作から実装、公開後の確認まで一貫して対応しました。

背景・課題

制作開始時点では、AIを中心にデザインを進める想定でしたが、AIで生成した状態では装飾や店舗らしさが不足しており、デザイナーが調整して制作する方針になりました。
店舗については「少し高級感のある居酒屋で、観光客や女性にも人気」という情報が共有されていた一方、制作開始時点では写真素材が未支給。Instagramや飲食店情報サイトを参考にしながら、店舗の雰囲気に合うデザインと、最終的に必要となる写真の方向性まで考える必要がありました。
また、今後同様のサイトをAIでも制作していく想定があったため、素材や装飾を複雑に作り込みすぎず、一定の再現性を残すことも制作上の条件でした。

アプローチ・施策

◼︎藁のシルエットで、店舗らしさが伝わるファーストビューへ

FVでは、写真を一般的な四角形で配置するのではなく、藁のシルエットで切り抜いて配置。写真そのものを主役にしながら、「藁や」という店名や藁焼き料理とのつながりを感じられる表現を考えました。

◼︎閲覧位置に合わせて、LINE予約の見せ方を調整

予約方法がLINEだったため、予約ボタンはファーストビュー上ではグローバルナビ付近に配置し、ファーストビュー以降では画面右下から確認できる構成にしました。
常に同じ見せ方にするのではなく、ファーストビュー内の情報量と、スクロール後の見つけやすさの両方を見ながら配置を調整しています。

◼︎装飾を増やしすぎず、和の要素を画面全体に散らす

店舗の雰囲気に合わせて、白や黒をベースに、紙・木・藁といった素材感や、箸をモチーフにしたあしらいなどを取り入れました。
すべての見出しや背景に同じ装飾を使うのではなく、ページタイトルやセクションごとに役割を分けながら使用。和風の要素を入れつつも、古い印象や装飾過多にならないバランスを意識しました。

◼︎価格や予約条件を、一覧で確認しやすいお品書きへ

お品書きでは、ワイヤーフレームになかった税込表記を追加しました。価格を分かりやすく伝えるだけでなく、「数量限定」「要予約」といった注文条件もラベルとして整理しています。
情報を文章の中に埋め込むのではなく、必要な情報を視覚的に拾いやすくすることで、料理写真の見せ方を損なわずにメニューとしての分かりやすさも保つよう調整しました。

制作のプロセス

01｜要件・制作条件の確認

ディレクターから支給されたワイヤーフレームをもとに、ロゴやSNS、写真素材、予約方法を確認しました。あわせて、デザイナーが担当する範囲と、将来のAIコーディングを想定した表現レベルについて認識を合わせました。

02｜ワイヤーフレームの確認・構成へのフィードバック

サイト構成自体はディレクターが作成しており、私は支給された構成をベースにデザインを進めました。画面に落とし込む中で気になった部分については、構成へのフィードバックや改善提案も行っています。

03｜店舗の雰囲気とデザイン方向性の整理

Instagramや飲食店情報サイトから店舗・料理・内装などを確認し、デザインの参考となる要素を整理。落ち着きと少し高級感のある雰囲気を軸に、色、写真の見せ方、素材感、和のモチーフなどを検討しました。

04｜ファーストビューと予約導線の設計

サイトの第一印象を決めるファーストビューから制作し、藁のシルエットを使った写真表現を作成しました。LINE予約ボタンについても、ファーストビュー内とスクロール後の見え方を分けて調整しました。

05｜TOP・下層ページのデザイン

ファーストビューで決めたトーンをもとに、TOPページと下層ページへ展開しました。お品書きでは価格・ラベル・写真のバランスを検討し、下層ページのタイトルには箸のイラストを取り入れるなど、和の雰囲気を保ちながら情報を整理しました。

06｜AIコーディングを見据えたデータ作成

藁のシルエットのような複雑な表現は、実装時に細かく再現させるのではなく、画像アセットとして扱える形で作成しました。見た目の特徴を残しながら、AIコーディングでも再現しやすいデータ構成を意識しました。

背景・課題

受注の約9割が元請け経由だったため、自社への直接問い合わせによる新規案件の獲得を強化したいという課題がありました。
また、人手不足を背景に採用募集も強化したいという要望があり、新規顧客と採用候補者の双方に会社や事業内容を伝えられるコーポレートサイトが必要でした。

アプローチ・施策

◼︎専門性の高い事業内容を、初めて見る人にもわかりやすく

競合サイトを調査し、消防設備に関する専門用語だけでは業務内容を理解しづらいと考えました。そこで、専門性を保ちながらも平易な言葉を使い、どのような設備に対応している会社なのかを理解しやすい情報構成にしました。

◼︎写真を活用し、消防設備を視覚的に伝える

消防設備ごとに写真と短い説明を組み合わせ、設備の役割や点検内容を視覚的に把握できるようにしました。専門知識がないユーザーでも、自分が依頼したい内容と照らし合わせながら読み進められるよう意識しています。

◼︎採用情報へ自然につながる導線を設計

採用強化という課題に対し、各ページの下部に共通の採用CTAを設置しました。会社情報や事業内容を理解した流れのまま採用情報を確認できるよう、サイト全体から採用ページへつながる導線を設計しています。

制作のプロセス

01｜要件整理・競合調査

新規顧客の獲得と採用強化というサイト制作の目的を整理したうえで、同業他社のコーポレートサイトを調査。情報の見せ方や専門用語の使われ方などを確認し、メイソウテクノのサイトで改善すべきポイントを整理しました。

02｜情報設計・コピー

消防設備に詳しくないユーザーでも事業内容を理解できるよう、掲載する情報と伝える順序を整理。専門用語だけに頼らず、初めて見る人にも理解しやすい表現を意識しながら、サイト内のコピーを作成しました。

03｜Webデザイン

消防設備という専門性を伝えながらも、堅くなりすぎない見せ方を意識してデザイン。設備紹介では写真と説明文を組み合わせ、事業内容を視覚的にも理解しやすい構成にしました。また、新規顧客向けの情報と採用情報の双方へアクセスしやすい導線を設計しています。

04｜Studio実装

完成したデザインをもとに、Studioでサイト全体を実装。要件整理から情報設計、コピー、デザイン、実装まで一貫して担当し、公開まで対応しました。

担当領域

• 既存ページの改善提案・UI改修

• 情報設計・情報優先度の整理

• UX・状態設計

• デザインシステムを活用した画面設計

• 必要に応じた新規コンポーネントの設計・追加

• ステージング環境での挙動確認・リリース前検証

• 新規企画における価値仮説・ユーザーストーリー・MVPの検討

• LP・広告・ガイド・ロゴなどのビジュアル制作

代表的な取り組み

01｜飲食店の業務に合わせた予約管理画面のUI設計

既存のネット予約機能は「メニュー×時間」を前提としており、飲食店特有の「席（テーブル）×人数×時間」の予約管理には対応しづらい状態でした。そこで、店舗スタッフが日々の予約状況を把握し、設定から来店処理まで迷わず操作できる管理画面を設計しました。
席の定員・禁煙／喫煙・連結設定などを1画面で管理できるよう整理し、予約枠は一括設定と個別調整の双方に対応。予約カレンダーでは週・月・テーブル軸の表示を用意し、予約状況や未入力項目、リクエスト予約などの状態を視覚的に把握できるよう設計しました。

02｜新サービスの価値を伝える販促LP

エキテン有料店舗会員向けに提供する「公式ホームページ作成オプション」の販促LPを制作しました。サービスの特徴を短時間で理解し、申し込みにつなげることを目的に、情報設計からコピー・デザイン・イラスト制作まで担当しました。
ターゲットとなる美容師・整体師・ハウスクリーニングなどの店舗事業者をイラストで表現し、自分ごととして捉えやすいビジュアルを設計。また、「申し込み → ヒアリング → 公開」の3ステップで利用開始までの流れを整理し、ページ内の複数箇所にCTAを配置しました。

https://www.partner.ekiten.jp/homepage-info

成果

• リリース後3ヶ月で導入100店舗を突破

• リリース後8ヶ月で300店舗に到達

03｜問い合わせ削減を目的とした店舗向けご利用ガイド

エキテン正会員店舗向けに配布する「ご利用ガイド」を制作しました。申し込み後に発生していた問い合わせを減らし、営業担当者の対応負荷を軽減することを目的に、約30ページの情報を整理しました。
PC・スマートフォン・印刷のいずれでも読みやすい文字サイズとレイアウトを設計。また、紙面内にQRコードを配置し、より詳しい情報が必要な場合はWebへスムーズに移動できるよう、紙とWebをつなぐ導線も設けました。

04｜既存プロダクトの継続改善

新規機能だけでなく、既存ページの改善にも継続的に取り組みました。定量・定性の気づきから課題仮説を立て、情報の優先順位やUIを整理し、改善案として提案。既存のデザインシステムに準拠しつつ、必要なコンポーネントがない場合には新たに設計し、システムへ追加しました。
また、新規企画では価値仮説やユーザーストーリーを整理し、MVPを検討したうえで提案するなど、画面制作だけでなく企画段階から関わりました。

Other Works

プロダクトUI以外にも、サービス運用に伴うビジュアル制作を担当しました。

15周年記念ロゴ

エキテン15周年を記念した社内配布用ロゴを制作。「1」と扉で店舗、「5」と吹き出しで口コミというエキテンのサービス要素を表現し、マグカップなどのノベルティにも展開しました。

広告・キャンペーンバナー

無料店舗会員の獲得や資料請求、キャンペーン訴求を目的とした広告バナーを継続的に制作。限られた表示領域でも訴求内容を短時間で理解できるよう、コピー・情報の優先順位・視認性を調整し、複数サイズへ展開しました。

背景・課題

「トヨクモ kintone フェス2026」は、20以上の他社活用事例から業務改善のヒントを探せる2日間のイベントです。1日目はオンライン、2日目はリアル会場で開催され、形式や時間が日ごとに異なります。

LPでは、イベント概要、参加対象、見どころ、タイムテーブル、予習コンテンツ、限定特典、申し込みなど、複数の情報を一つのページで扱います。そのため、参加を検討する人が概要から具体的な内容まで順番に確認できるよう、情報の整理と見せる順番を考える必要がありました。

アプローチ・施策

◼︎情報を整理し、参加までの流れを分かりやすく

掲載する情報を整理し、①フェス概要→②こんな方におすすめ→③見どころ→④タイムテーブル→⑤予習コンテンツ→⑥限定特典→⑦お申し込みの順番で構成しました。最初にイベントの全体像を伝え、参加を検討するための情報から、当日の詳細、申し込みへと進める流れを意識しています。

◼︎「親しみやすさ」を共通軸に、3つの方向性を提案

イベントロゴは「親しみやすさ」を共通軸に、「楽しさ×参加しやすさ」「信頼感×軽やかさ」「ポップさ×季節感」と、重視する価値を変えた3案を制作しました。
文字組みや配色、キャラクター、モチーフの使い方に違いを持たせ、各案の方向性を比較できる形で提案しました。
選定後は、クライアントからのフィードバックをもとに文字色や発色、キャラクターとのバランスを調整し、イベントらしい楽しさがより伝わるロゴへブラッシュアップしました。

◼︎ロゴの表現をLPにも展開し、全体のトーンを統一

LPでは、採用されたロゴのカラーやキャラクター、ポップなグラフィック表現をそのままデザインへ展開しました。
一方で、イベント感を出しすぎて情報が読みにくくならないよう、コンテンツ部分は余白や情報のまとまりを整理。
「楽しそう」と感じてもらえることと、「情報が分かりやすいこと」の両立を意識しています。

制作のプロセス

01｜要件整理・情報設計

まずはイベント概要や掲載する情報を整理。
参加を検討しているユーザーが、どの情報をどの順番で知りたいかを考えながら、LP全体の構成を設計しました。

02｜ロゴの方向性検討・提案

「親しみやすさ」を共通軸に、楽しさ・信頼感・季節感の比重を変えた3案を制作しました。文字組みや配色、キャラクター、モチーフの使い方を変え、方向性を比較できる形で提案しました。

A案｜楽しさ × 参加しやすさ
吹き出しのような雲で、ユーザー同士のコミュニケーションや情報共有というkintoneの価値を表現。丸みのあるフォルムと明るい配色により、イベントの一体感と参加しやすい親しみのある印象を目指しました。

B案｜信頼感 × 軽やかさ
整理した文字組みと安定感のあるブルーにより、カンファレンスとしての信頼感と可読性を確保。水色と黄色のアクセントを加え、堅くなりすぎない軽やかさとブランドらしいリズムを表現しました。

C案｜ポップさ × 季節感
丸みと太さのある文字と入道雲のモチーフで、夏のイベントらしい親しみやすさと開放感を表現。英字部分の波によって動きと高揚感を加え、キービジュアルやバナーでの視認性も意識しました。

03｜ロゴのブラッシュアップ

選定されたA案の方向性をベースに、フィードバックを反映。
文字色や発色、キャラクターとのバランスなどを調整し、イベントらしい楽しさが伝わるロゴへ仕上げました。

04｜LPデザイン

完成したロゴを起点に、LP全体のデザインを制作。ロゴのカラーやキャラクターを活かしながら、イベント全体の世界観を統一しました。
また、情報量が多いページでも読みやすくなるよう、余白や情報のグルーピング、コンテンツごとのメリハリを意識して設計しています。

05｜Studio実装・公開

完成したデザインをStudioで実装。
PC・スマートフォンそれぞれで見え方を調整し、レスポンシブ対応から公開まで担当しました。

背景・課題

新規サービスの立ち上げにあたり、遺品整理を依頼したいユーザーが、自分に合った業者を探し、比較・検討できるサービス設計が必要でした。
また、サービスの運用が進む中で、画面ごとに色・余白・UIパーツの解釈が揺れ、制作担当者によってデザインの再現性に差が生まれていました。ロゴについても媒体ごとにサイズ・色・余白のばらつきが発生しており、サービス全体を継続的に運用するためのルール整備が課題となっていました。

アプローチ・施策

◼︎地図から直感的に業者を探せる検索体験

TOPページの業者検索には日本地図を採用し、地域から直感的に遺品整理業者を探せるUIを設計しました。検索方法を視覚的に分かりやすくすることで、初めて利用するユーザーでも迷わず業者探しを始められる構成にしています。

◼︎比較に必要な情報を絞り、業者を判断しやすく

業者一覧では、写真・業者からのメッセージ・業者名・評価など、比較時に必要な情報を中心に整理しました。情報量を絞ることで、複数の業者を短時間で比較し、詳細を見る業者を判断しやすい構成にしています。

◼︎ファーストビューで業者の特徴を把握できる構成

業者詳細ページでは、ファーストビューの左側に写真、右側に業者情報を配置。業者からのメッセージ・業者名・評価・特徴などを最初に確認できるよう整理し、「この業者に依頼できそうか」を判断したうえで詳細を読み進められる構成にしました。

◼︎サービスの仕組みを抽象化したロゴ設計

新規サービスの立ち上げに伴い、サービスロゴも制作しました。「故人の遺した品」と「依頼者と業者をつなぐマッチング」というサービスの特徴を整理し、3つの四角形によって依頼者・業者・両者をつなぐサービスを表現。マインドマップやラフスケッチから複数案を検討し、採用案のブラッシュアップまで担当しました。

◼︎属人化を減らすデザインシステムを構築

運用が進む中で発生していた、ページごとの色・余白・UIパーツのばらつきを改善するため、デザインシステムを構築しました。カラー、タイポグラフィ、余白、角丸、シャドウなどのデザイントークンに加え、ボタン・入力フォーム・セレクトボックス・モーダル・テーブルなどのコンポーネントを整理。状態やサイズ、優先度などのバリエーションも定義し、誰が制作しても一定の品質を保ちやすい環境を整えました。

◼︎ロゴを正しく運用するためのガイドラインを整備

リリース後、媒体ごとにロゴのサイズ・色・余白などの使われ方にばらつきが発生していたため、ロゴガイドラインを作成しました。表示色、アイソレーション、背景、最小表示サイズ、使用NG例などを整理し、A4/PDFの資料として関係者に共有。制作担当者ごとの解釈の差を減らし、ロゴを統一して運用できる状態を目指しました。

制作のプロセス

01｜要件整理・競合調査

新規サービスの立ち上げにあたり、必要なページや機能、ユーザーが業者を探して依頼を検討するまでの流れを整理しました。あわせて競合サービスを調査し、検索方法や業者情報の見せ方、比較時に必要な情報などを検討しました。

02｜情報設計・UI/UXデザイン

地域から業者を探す検索画面、業者一覧、業者詳細など、ユーザーが「探す・比較する・判断する」までの導線を設計しました。表示する情報の優先順位を整理し、初めて利用するユーザーでも業者を選びやすいUIを目指しました。

03｜サービスロゴの制作

サービスの特徴や「遺品整理ドットコム」という名称から連想される要素をマインドマップで整理し、ラフスケッチから複数の方向性を検討。

A案
遺品整理に使う「箱」とドメイン名（e-hinseiri.com）の頭文字「e」を組み合わせて抽象化したロゴです。「e」には「e（良い）遺品整理ができますように」という願いも込められています。さらに、ロゴの一部にデジタルを表現する四角ドットを取り入れることで、「世の中のオコマリごとをテクノロジーで解決する」というオコマリ様の理念を視覚的に表現しました。

B案
故人の遺した「品」と、サービスの特徴「マッチング」を抽象的な図形で表現。
3つの連なる四角形は、それぞれ「ご依頼者」「業者」そしてそれらをつなぐ「遺品整理ドットコム」を表しています。
角の丸みと斜め上に向いた形状は「あたたかみのある関係性を築くサービスへ発展するように」という想いを込めました。

C案
安心、遺族の感情や想いを象徴する「ハート」と、厳選した優良業者を掲載していること、業者を探して選ぶという当サイトの特徴を表す「チェックマーク」を組み合わせたロゴです。「安心して業者を選べる場を提供したい」という想いを込め、信頼と温かみのある印象を目指しました。

04｜業者向け管理画面のデザイン

ユーザー向けWebサイトに加え、掲載業者が利用する管理画面のデザインも担当しました。表側だけでなく、サービスを運営するための管理側UIまで含めて制作に携わりました。

05｜デザインシステムの構築

リリース後の運用で発生していたデザインのばらつきや属人化を改善するため、デザイントークン、コンポーネント、テンプレート、運用ルールを整理しました。Figma上でUIを体系化し、Confluenceを用いて社内でも参照できるよう共有しました。

06｜ロゴガイドラインの整備

ロゴ運用時の誤用を防ぐため、既存の使用状況を整理したうえで最低限守るべきルールを定義。表示色、余白、背景、最小サイズ、NG例などをA4/PDF形式のガイドラインにまとめ、関係者へ共有しました。

背景・課題

既存サイトは、TOPページ内に代表挨拶、MVV、アクセス、採用情報など複数の情報が並び、「どのページに何があるのか分かりにくい」という課題がありました。

一方で、キュリーズには標準化支援やICT・情報通信領域への専門性、同じ担当者が継続してクライアントに寄り添う姿勢といった特徴があります。検索をきっかけに標準化支援やITに強い事務所を探して問い合わせにつながるケースもあり、こうした強みをサイト上で分かりやすく伝える必要がありました。

また、採用情報の強化や海外クライアント向けの情報整備もリニューアルの目的となっており、新規クライアント・採用候補者・海外クライアントそれぞれに必要な情報を整理しながら、主となる導線を分かりやすくすることが課題でした。

アプローチ・施策

◼︎新規相談を主軸に、TOPと下層ページの役割を整理

主なクライアントが企業の知財部であることを踏まえ、新規相談につながる情報をサイトの中心に置きました。
TOPページですべてを説明するのではなく、事務所紹介、弁理士・技術者紹介、各サービス、料金表、採用情報などに役割を分け、ユーザーが知りたい内容に応じて下層ページへ進める構成に整理。採用や海外向けの情報は必要な導線を確保しつつ、新規クライアント向けの情報と同列に並びすぎないようにしました。

◼︎強みを伝えながら、対応範囲を狭く見せない設計に

ヒアリングでは、標準化支援やICT・情報通信領域への専門性がキュリーズの特徴として挙げられた一方、「専門性を強く出すと、それ以外の分野には対応できないように見える」という懸念もありました。
そこで、標準化支援やICT領域は特徴としてしっかり見せながら、その他の技術分野にも対応していることが伝わるよう、サービスや専門領域の見せ方を整理しました。
弁理士・技術者紹介では、職種と専門分野から絞り込めるようにし、相談内容に合う担当者を探しやすくしました。

◼︎外国案件の増加に合わせ、必要なページを多言語化

案件要件として、英語対応は「事務所紹介」「弁理士／技術者紹介」「料金表」の3ページを対象に制作しました。
制作途中で中国語対応も追加となったため、英語版と同様の設計を展開しながら、言語ごとの文字量や改行に合わせてレイアウトを調整。日本語版と内容が異なる箇所についても個別に対応しました。
あわせて、ナビゲーションやページタイトル、検索結果の表記まで確認し、各言語で表示が破綻しないよう調整しています。

◼︎更新方法まで考え、Studio上で運用しやすい構成へ

公開後の更新も考慮し、情報の性質に合わせてStudioのCMSとデザインエディタを使い分けました。
たとえば料金表は、更新時の操作や日本語・外国語ページで掲載内容が異なることを踏まえ、CMS化せずデザインエディタから編集できる形を採用。
弁理士・技術者紹介など、継続して情報を追加・更新するページについては、更新しやすい構造を意識して実装しました。

制作のプロセス

01｜要件整理・キックオフ

クライアントとのキックオフを進行し、リニューアルの目的、ターゲット、現行サイトの課題、強みとして打ち出したい領域、採用・外国語対応、更新方法などを確認しました。
制作前に仕様やスケジュールもすり合わせ、後の設計・デザインで判断がぶれないよう整理しました。

02｜情報設計・ワイヤーフレーム

ヒアリング内容をもとに、ユーザーがサイトを訪れてから必要な情報を確認する流れと、各ページの役割を整理しました。
現行サイトの情報をそのまま配置し直すのではなく、TOPに残す情報と下層ページへ分ける情報を整理しながら、サイト全体の構成を作成しました。

03｜UI・ビジュアルデザイン

コーポレートカラーを軸に、士業としての信頼感を保ちながら、情報の区切りや見出しのメリハリが分かりやすいデザインを検討しました。
専門性の高い内容でも読み進めやすくなるよう、余白、写真、図版、カード、見出しなどの情報量をページごとに調整しました。

04｜Studio実装・CMS構築

確定したデザインをもとにStudioで実装し、お知らせや弁理士・技術者情報など、更新が必要な領域にCMSを設定しました。
職種・専門分野の絞り込み、ヘッダーのスクロール時の挙動、モバイルメニュー、文章の折り返し、ボタン幅、余白、アニメーションなども実機表示を確認しながら調整しました。

05｜多言語・更新機能の対応

日本語ページをもとに、事務所紹介・弁理士／技術者紹介・料金表を中心とした外国語ページを制作しました。
また、ニュースやメンバー情報など更新が発生するコンテンツについては、公開後の運用を考慮してCMSや編集方法を整理しました。

06｜QA・公開・納品

実装後は各ページの表示、レスポンシブ、リンク、文言、画像、alt、アニメーションなどを確認し、クライアントからのフィードバックを反映しました。
最終調整後はサイトの公開作業を行い、クライアントの確認・納品対応まで進行しました。