ウェブサイト / 医薬品・サプライチェーン支援
ファルマチェーン総研
つなぎ目の問題を、
診断から解きほぐす。
東京の架空のコンサルティング会社を題材にした、企業紹介のウェブサイトです。医薬品の需給・品質・調達という三つの領域を扱う会社として、よくある課題の提示から三週間の現状診断へ進む道筋をまとめました。
作品を開く架空の事業者を題材にした自主制作です。
最初の一歩を、
迷わせない。
相談先を比べている担当者に向けて、何を扱う会社かを先に示す構成にしました。会社の紹介、三つの領域、よくある五つの状態と続け、入口となる三週間の現状診断へ送ります。
診断は単独で完結し、後続の契約を条件にしないことを本文に書いています。ヘッダーの右端にも現状診断への案内を常に置き、どのページからでも同じ入口へ戻れるようにしました。
雑誌の誌面のように、
段を組む。
深い青緑を文字色、白と淡い青灰を地色にし、主な操作と見出しの上の罫、段落頭の文字に赤紫を使っています。最上部には社名の題字を大きく掲げ、スクロールすると細いバーに縮みます。会社紹介の後には、需要から卸までの供給の流れを点が流れていく図を置きました。
本文は欄外の列と本文の列に分け、欄外に欧文の章ラベルを置いています。段落の頭の1字を大きく落とし、写真には濃紺のキャプション帯を付けました。三つの領域は、打ち合わせ・温度管理・倉庫の写真を載せた三段の小記事にしています。
相談の種類を、
選んでから書く。
お問い合わせでは相談の種類を選んでから本文を書きます。送信の前に入力内容の確認画面が挟まり、そこから入力へ戻って直すこともできます。
入力は送信も保存もしないデモです。支援事例のページは本文のキーワードで6件を絞り込め、料金・契約形態のページでは三つの契約の形を先に示し、契約ごとの費用を欄外に置いています。
章の並びを、
そのまま縦へ。
スマートフォンでは社名の題字とメニューのボタンを2段に収め、写真を画面いっぱいに敷いて、下から暗くなる地にコピーを重ねました。欄外の章ラベルは見出しの上へ移り、三段の小記事は1列に積み替わります。
制作情報
- 種別
- 自主制作・架空サイト
- 制作範囲
- 構成・文章・デザイン・実装
- 使用技術
- HTML / CSS / JavaScript
Vite / GSAP - 対応画面
- PC・タブレット・スマートフォン