作品詳細 Work Detail
制作概要 Overview
- 作品名
- 朝日台病院（総合病院サイト）
- 対応サイズ
- PCサイズ（1920*1080のみ）
- ターゲット
- すべての世代
- コンセプト
-
「すべての世代に寄り添う、信頼と安心の医療サポート」
高齢者には安心感を、ファミリー層には使いやすさを、働く世代にはスムーズな 対応を提供するデザインとコンテンツを追求
- 制作期間
- 2024年1月～ 計50時間 デザイン20時間 コーディング30時間
- 制作区分
- 学校課題
- 担当
-
- 企画
- Design
- Coding
- 使用技術・ツール
-
- Photoshop
- Figma
- VS Code
- HTML
- CSS(Sass)
- jQuery
ユーザー深層&競合分析 Insight & Analysis
- ペルソナ
-
- ・高齢者→定期的な診察・治療、通いやすさ、信頼感を重視。
- ・ファミリー層→小さな子どもから高齢の親まで幅広く利用する家庭。急なケガや病気への迅速な対応を期待。
- ・働く世代→健康診断や歯科メンテナンスなど、定期ケアの利用。忙しいため予約やアクセスのスムーズさを重視。
- 競合他社サイト分析
-
- ・多くのユーザーは「Google Mapなどで検索」→「口コミ」→「公式Webサイト」という順で情報収集を行う傾向があるため、Webサイトに対する期待値は必ずしも高くないと考えられる。 （参考：東洋経済オンライン）
- ・しかし実際には、病院のWebサイトに多くの情報が掲載されている例も少なくない。特に医療関係者や採用希望者に向けて、最新の医療機器の導入実績や、専門的な情報発信を行っているケースが目立つ。
- ・アイコンを積極的に活用しているサイトが多く、視認性の向上やナビゲーションのわかりやすさに寄与していた。
- 結果
- ユーザーの優先順位を「患者」→「医療関係者」の順に設定し、構成や導線を設計しました。特にファーストビューでは、来院を検討している患者が安心して情報を得られるよう、アクセス・診療内容・診療時間といった基本情報を優先的に掲載しています。
制作の目的 Objective
- ・jQueryを学び始めてから1週間のタイミングで、実践的なアウトプットとして制作に取り組んだ。
- ・情報量の多いサイトを1人で設計・実装する経験を積むため。
- ・疑似要素やコード量が多い中でも軽量化を意識する。
直面した課題 & 学び Challenges & Insights
jQueryでのモーダル実装
モーダル実装では、構造の複雑さと時間的な制約から、レイアウト整理に苦戦しました。
→div 要素が多用される中で、役割を明確にすることの重要性を実感しました。
→jQuery でモーダルの開閉やスクロール制御を実装する中で、動きと構造の関係性への理解も深まりました。
アイコンの選定と軽量化
アイコン選定では、たくさんのアイコンを探すことが大変でしたが、統一感をもたせながら集めることができました。また適切な拡張子を使うことで軽量化にもこだわることができました。
構造設計と記述効率の両立への課題
繰り返し構造のスタイリングに nth-child や nth-of-type を使い、記述効率を高めることができました。
→レイアウトやクラスが複雑になり、可読性や保守性に課題が残りました。 今後は、効率と構造のバランスを意識して制作していきたいです。
ほかの作品詳細をみる Other Work Detail
