WEB DESIGN / INFORMATION ARCHITECTURE

情報を整理し、理由のある
Webデザインへ。

見た目だけでなく、何を・どの順番で・なぜ見せるかを考え、
構成から制作、レスポンシブ調整、確認・修正まで対応します。

対応領域

情報整理・構成設計 / Webデザイン・制作
レスポンシブ対応 / レイアウト調整・表示修正

Web制作・更新業務 約3年既存指示に沿った実装レスポンシブ・表示修正・画像編集情報をページ構成へ整理

01 / CASE STUDY

専門性の異なる業務を、
「暮らしと事業の身近な相談相手」という一本の軸で整理

OVERVIEW

池澤行政書士事務所|Webサイト制作

目的
奈良市で終活・相続・各種許認可など手続きを相談できる身近さを伝える
担当
取材資料作成/情報整理/ページ構成/見出し・本文設計/キャッチコピー作成/構築デザイン
規模
9ページ
STEP 01UNDERSTAND

取材情報から、相談者と相談目的をつかむ

取材情報・支給資料

01相談者の不安終活・相続・将来02事業者の手続き消防計画・開業03事務所の姿勢身近さ・丁寧な案内

最初に確認したこと

想定する相談者

  • 終活や相続に不安がある本人・家族
  • 消防計画や開業手続きが必要な事業者

見つけた課題

暮らし向けと事業者向けの業務が同居していて、情報を列挙するだけでは「自分の相談先か」を判断しにくい。

STEP 02ORGANIZE

相談の入口になる言葉と、情報の優先順位を決める

サイト全体の情報優先度

伴走 ⇒ 安心 / 奈良市密着暮らしの相談 | 事業の手続き各業務の詳細・事務所情報
判断 01

専門用語より先に「誰の不安に応えるか」を提示

判断 02

4業務を二つの入口へ。暮らし/事業で大別しながら整理

判断 03

開業の原点を信頼材料へ。介護・相続に向き合った経験を紹介

STEP 03DESIGN

設計意図を、見出し・導線・画面へ落とし込む

池澤行政書士事務所サイトのワイヤーフレーム
情報の優先順位をワイヤーフレームへ
池澤行政書士事務所サイトの完成デザイン
構成の意図を保ったまま画面へ展開

DESIGN DECISION

最初に「誰の、どのような不安に応える事務所か」を示し、暮らしと事業の二つの入口から必要な情報へ進める構成にしました。見た目だけでなく、相談者が迷わず判断できる順番を基準に設計しています。

02 / OTHER WORKS

業種の違いに合わせ、情報の見せ方を整える

WEB SITE / 産業・工作機械

株式会社ハイブテック

産業・工作機械の組立・据付を軸に、業務内容、全国対応、製作実績、採用情報を整理。技術力と一貫対応の強みが伝わる構成へまとめました。

取材資料作成/情報整理/ページ構成/見出し・本文設計/キャッチコピー作成/構築デザイン
WEB SITE / 飲食店・店舗案内

お好み焼き 鉄板焼き と

店舗のこだわり、豊富なメニュー、予約・問い合わせなどの情報を整理。来店前に必要な情報へ迷わず進める構成へまとめました。

取材資料作成/情報整理/ページ構成/見出し・本文設計/キャッチコピー作成/構築デザイン
WEB SITE / ツーリングサポート

京慈ツーリングサポート

サービス内容と利用の流れ、問い合わせに必要な情報を整理。初めて訪れる方にも対応内容が伝わる構成へまとめました。

取材資料作成/情報整理/ページ構成/見出し・本文設計/キャッチコピー作成/構築デザイン

03 / SKILLS & TOOLS

情報設計からデザイン、実装・更新まで

情報を整理する情報整理/ページ構成/ワイヤーフレーム/レイアウト
見せ方をつくるFigma/Adobe Photoshop/Affinity
Webとして整えるHTML/CSS/CMS/レスポンシブ対応/表示修正

04 / HOW I SUPPORT

制作経験を、質問への回答と改善支援へ

Web制作・更新約3年で得た実装・設計・調査・説明の経験を、オンラインでの制作支援へつなげます。

制作画面を確認する様子

IMPLEMENTATION

つまずいた経験を、理解の近道へ変える

EXPERIENCE

初心者の頃は、レイアウト崩れの原因が分からず試行錯誤しました。その後、実務で使われるHTML・CSSやレスポンシブ対応を重ね、原因と直し方を整理して捉えられるようになりました。

HOW IT HELPS

つまずきやすい点を知っているからこそ、確認する順番と理由を、相手の理解度に合わせて伝えられます。

情報を整理したワイヤーフレーム

DESIGN

調査・整理した材料を
実務の設計へつなげる

EXPERIENCE

検索結果・地図・同業他社サイト・支給素材を見比べ、必要な情報や見せ方を整理したうえで、ワイヤーフレームへ落とし込んできました。

HOW IT HELPS

調査→整理→設計の流れと、自分がレビューで指摘を受け改善してきた点も含め、実務の判断基準を共有できます。

Webサイトの調査

RESEARCH

調査を、デザインの
根拠へつなげる

EXPERIENCE

制作前に、近隣の同業他社や関連語の検索結果を確認し、その業種で求められる情報や見せ方を整理してきました。

HOW IT HELPS

調査結果から、必要な情報・優先順位・その業種らしい見せ方を組み立てる考え方を伝えられます。

分かりやすく説明する様子

EXPLANATION

意図を、伝わる言葉に
置き換える

EXPERIENCE

ワイヤーフレームの構成やデザインについて、なぜこの順番・見せ方にしたのかを、ディレクターやクライアントへ説明する機会を重ねてきました。

HOW IT HELPS

社会人経験の中でも「説明が分かりやすい」と言っていただくことがあり、相手に合わせて要点を整理する力を制作支援に活かせます。

オンラインで質問へ回答する画面

ONLINE SUPPORT

質問を、次の一歩へ
つなげる

SUPPORT STYLE

Chatworkで届く質問や制作物を確認し、修正点だけでなく「なぜそうした方がよいのか」まで短く整理して返します。

HOW IT HELPS

利用者それぞれの理解度やペースに合わせ、次の制作で自分でも判断できる支援を心がけます。

05 / PROFILE

これまでの経験を、初心者の制作支援に活かしたいと考えています。

PROFILE

高橋 広大

Web制作・運用 約3年 / 構成・デザイン・制作 / 現在もWeb制作を継続

SEOを主軸とするWeb制作・運用

約3年間、Webサイトの制作と運用を実務で経験

一般事務として約2年

他業種への関心などから、一時Webコンテンツ制作から離れる

フリーランスとしてWeb制作に携わる

現在はフリーランスとして、Webサイトの構成検討からデザイン・制作まで幅広く携わっています。制作を続ける中で培った知識や考え方を、今後は人に伝え、支援することにも活かしていきたいと考えています。

制作する側で得た経験を、次は「分かるまで支える力」へ。