Works 一覧へ

PROJECT 02 / FICTIONAL PROJECT / CORPORATE WEBSITE

青瀬法律事務所コーポレートサイト

初めての法律相談を、少し身近に。
情報の見つけやすさと、相談しやすい空気を考えました。

青瀬法律事務所のWebサイト

OVERVIEW制作概要

法律相談が初めての方を想定した、架空の法律事務所サイトです。取扱分野や事務所の案内などを含む20ページ構成で、情報量が多くても迷いにくいサイトを目指しました。

制作区分
自主制作 / 架空サイト
サイト構成
コーポレートサイト / 20ページ
担当
Planning / Design / Coding / Responsive

BACKGROUND制作背景・目的

法律相談を考えていても、「自分の悩みを相談できるのか」「どんな人が対応するのか」と不安を感じる場面があります。必要な情報にたどり着けることと、相談を検討しやすいことの両方を大切にして制作しました。

ROLE担当範囲

サイト全体の情報設計、各ページのデザイン、コーディング、レスポンシブ対応を担当しました。ページごとに扱う内容を整理し、関連する情報へ移動する際にも迷わない構成を考えました。

DESIGN / CONCEPTデザイン・設計方針

士業のサイトに必要な落ち着きと、初めての方にも近寄りがたい印象にならない柔らかさを意識しました。見出し・本文・補足情報の差を明確にし、文章が多いページでも、知りたい部分を拾いながら読めるようにしています。

POINT工夫したところ

  1. 相談する方の目線で情報を分ける

    取扱分野や事務所の情報を整理し、必要な内容を順に確認できる構成を考えました。専門的な内容が並ぶ場面でも、見出しからページの内容を把握しやすいことを意識しています。

  2. スマートフォンを起点に組み立てる

    小さな画面での読み順や操作を先に考え、広い画面へ展開しました。PC版を縮めるだけにせず、画面幅に応じて余白や情報の並びを調整しています。

  3. 読みやすさと操作しやすさを確認する

    PC・スマートフォンを含む複数の画面幅で表示を確認。文字の読みやすさやリンクの分かりやすさ、操作対象の間隔など、アクセシビリティにも配慮して調整しました。

SCREENPC / SP画面

DESKTOP
青瀬法律事務所のPC画面を大きく見る
MOBILE
青瀬法律事務所のスマートフォン画面を大きく見る

画像を選ぶと、大きな画面でご覧いただけます。

TECH使用技術

  • HTML
  • CSS
  • JavaScript
  • Responsive Design

VIEW SITE実際のサイトを見る

実際のサイトを見る ↗(新しいタブで開きます)

自主制作の架空サイトです。実在する法律事務所のWebサイトではありません。