ホームページ制作事例(WEBサイト制作)|宮城県仙台市太白区|丸木医科器械株式会社様
写真は丸木医科器械株式会社様サイトのトップページ
| スマホ対応 | OK |
| レスポンシブ | 対応済み |
| トップページ最上部 | 動画 |
このたび、丸木医科器械株式会社様よりオフィシャルホームページ(ウェブサイト)のリニューアル制作のご依頼をいただきました。
丸木医科器械株式会社様は、宮城県仙台市を拠点に東北の医療を支えられている専門商社です。創業はなんと江戸時代の1781年。薬種商から始まり、長い歴史の中で医療機器や医療用品を扱う専門商社へと発展されてきました。今では病院やクリニックに機器や消耗品を届けるだけでなく、手術や検査での適切な使い方のサポート、病院経営の相談まで幅広く対応されています。
代々受け継がれてきた信頼や実績を背景にしつつ、現在取り組まれている医療機器の提供やサポート、地域医療への貢献が伝わるよう、親しみやすさと誠実さを両立させることを意識しています。「医療に奉仕する」という理念が自然に伝わり、安心感を持っていただけるホームページになるように心を込めて制作しました。
静かな濃紺とやわらかな余白
濃紺をベースに余白をたっぷり使った落ち着いたデザインで、見る人のペースにそっと寄り添うような感じにしてみました。フォントにはオールド明朝を選び、細い横線としっかりした縦画が、紙に書いた文字みたいなあたたかさを残してくれるんです。
全体の骨格となる「濃紺×余白×オールド明朝」をしっかり守ることで、ページを移動しても世界観が崩れず、一貫した安心感が出るようにしました。
色や写真も落ち着きのある控えめな感じで、情報の確かさや誠実さを画面全体で伝えられるよう意識しています。角は立てず、でも曖昧になりすぎないようにバランスを調整することで、医療と真摯に向き合う会社の姿勢が自然と伝わるデザインが出来上がりました。
メインカラーは落ち着きのある濃紺に
余白をたっぷり使ってやわらかな印象に
パラパラ漫画の“拍子”の積み重なり
トップページのパラパラ漫画
2分尺のあたたかみのあるストーリー
パラパラ漫画のような小さなアニメーションをページ随所に配置しました。トップページや採用情報、「私たちについて」などの要所に入れることで、視線を誘導したり、読み進めるテンポを整える役割を持たせました。数十秒だけの動きなんですが、不思議とあたたかさが出て、見ている人の緊張を少し和らげてくれるんです。
動画を主役にせず、あくまで全体の落ち着いた雰囲気を崩さないように調整したのもポイントです。採用ページでも同じようにアニメーションを効かせていて、スクロールのリズムを整えることで「流し読み」じゃなく「ちゃんと読めた」と感じてもらえるようにしました。小さな“拍”を積み重ねて、会社の誠実さにつながるように意識しています。
水彩タイムラプスで社屋が立ち上がる物語
今回のサイトの中で力を入れたものの一つが、社屋を水彩で描くタイムラプス映像です。新しい社屋と、そして杜の都景観重要建造物に認定された旧社屋の様子を、弊社スタッフが実際に筆をとって描いている様子を少し早送りで流しています。映像でただ建物を紹介するだけじゃなく、これまで積み重ねてきた歴史や、土地と歩んできた時間、そしてこれからに向けた思いも込めました。
建築写真のかっちりした説得力もいいんですが、水彩のにじみにはまた違ったあたたかさがありますよね。濃紺のキーカラーに水彩の透明感が重なって、やわらかな雰囲気をつくり出してくれる。その映像を見ていると、自然と心が落ち着いてくる。医療に寄り添う会社の自己紹介として、すごくぴったりな表現にできたと思います。
タイムラプスで見せる制作の風景
水彩画 完成の様子
やさしく迷わせない導線設計
自然と行動に繋がるグローバルナビ
どこからでも目的のページに行ける工夫
こだわりがつまった導線の設計にも注目です。グローバルナビは「次に知りたいこと」に沿って並べていて、初めて来た方は「私たちについて」や「事業案内」に、取引先の方は「許可証」や「事業所一覧」に、求職者には右上の「採用」へ、と自然に進めるようにしています。
ページ下のフッターにも主要リンクを置いているので、どこからでも目的のページにすぐ行けるようにしました。ボタンの大きさや間隔も、白い余白の中にそっと置くことで、つい押したくなるようなタイミングで押せるよう意識しています。
導線は押しつけすぎると逆効果になりがちですが、このサイトは「迷わせず、押しつけない」を意識しました。そのおかげで、見ている人が自然に行動に繋がる作りになったと思います。
意義から始まり人の温度で終わる採用ページ
採用情報のページでは、「意義 → 先輩たちの声 → 仕事内容 → 応募」という順で作っています。最初に出てくるのは待遇や条件でなく、目的である「医療に奉仕することの意味」が見えることで、その後の情報もすっと心に入ってくる感じにしました。
社員の声もできるだけ現場の素直な言葉を残すことで、ページを読み終わったときに、条件よりも“人の温度”が印象に残るんじゃないかなと思います。文章も「未経験でも学べる」「段階的に身につく」といったやさしい言葉を選んで、そっと背中を押すようなトーンにしています。
必要な情報が、必要な順番で、必要なだけ揃っているので、初めての人でも安心して読み進められるページになったと思っています。
「医療に奉仕することの意味」を伝える
「先輩の声」でわかる現場の素直な言葉
詳しくは 丸木医科器械株式会社様オフィシャルサイト をぜひご覧ください。
医療や物流に関わる情報は、正確であることが第一。その一方で、訪れる方の多くは少なからず緊張だったり不安を抱えながらサイトを開かれるのではないでしょうか。だからこそ、このホームページが「ほっと落ち着いて読める場所」として、丸木医科器械株式会社様の誠実な姿勢を伝えていく、そんな存在であり続けてほしいと願っております。
■丸木医科器械株式会社
Web Design Aoi (ウエブデザインあおい)は、仙台市青葉区と東京都渋谷区に本拠地を置くホームページ制作会社です。ホームページ(WEBサイト)制作の知識がない方でも簡単にブログを更新して頂ける「WordPress(ワードプレス)」というブログシステムで制作しています。お客様自身に日記を書くように気軽にブログを更新して頂けます。このようなブログ更新システムやパソコン・スマホ・タブレットで最適な表示が可能なレスポンシブデザインも余程のことが無い限りスマホ・タブレット用の制作費を別途頂戴しておりません。
私共にホームページ制作をご相談されたいという方は、ぜひお気軽にご連絡ください。

