◇制作期間:1ヶ月+3週間(2023年9月末〜11月中旬)
(参考リサーチ→ラフ・テキスト作成→デザイン作成・プロトタイプ設定)
トップページ(PC、スマホ、タブレット版):1ヶ月
下層ページ(PC版):3週間
◇担当箇所:デザイン
◇使用ツール:Figma・Illustrator
◇Figma デザインカンプURL:https://www.figma.com/proto/xQTcXIObPxC1CSGsPkOoI1/%E3%83%9F%E3%83%A9%E3%82%A4%E3%83%8B%E8%96%AC%E5%B1%80WEB%E3%82%B5%E3%82%A4%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%AB%E3%83%B3%E3%83%97_%E4%BC%8A%E8%97%A4%E6%84%9B%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA?page-id=11%3A19&type=design&node-id=1703-4966&viewport=65%2C286%2C0.04&t=SgM0kU6iN2PPFLQD-1&scaling=min-zoom&starting-point-node-id=1703%3A4966&mode=design
【課題内容】
「ミライニ薬局」のトップページデザイン(PC)&「ミライニ薬局」の下層ページデザイン(PC)
ワイヤーフレームを元に、「見る人の視線で」必要があれば、情報を再構築してデザインを作成。
◇提供
・トップページのワイヤーフレーム
・「店舗一覧」「お問い合わせ」「会社概要」「私たちについて」の下層ページ原稿
◇会社の概要
大阪を中心に処方箋などを行う薬局「さくら薬局(11店舗)」と「ひかり薬局(13店舗)」が合併。株式会社ミライニとして新しい会社を設立し、合計24箇所で「ミライニ薬局」をスタートさせる。新しくできる薬局のため、ロゴもウェブサイトも同時に制作していく。
新しい薬局のイメージは撮影前なので、写真素材で対応してほしい。
薬局名が新しくなったこと、事業拡大により採用に力を入れていることを優先度高く見せたい。
◇目指すイメージ
水色・青・黄緑など、自然で清潔なイメージ
誠実、やさしさ、ホスピタリティ、すっきりとしたデザイン
ミライニは、「明るい未来に向けて薬局としての役割を果たす」という「未来に」を、読みやすさとすっきりとした文字のカタカナで表現。
病院の先生とは違う、薬の専門家として「薬のことを相談しやすい」「気軽に質問できる」ホスピタリティを目指す。
【制作ポイント】
◇コンセプト:相談しやすい、気軽に質問できるホスピタリティを目指す
◇カラー
・メインカラーは爽やかで清潔感があり、青よりも柔らかい印象もある水色を選択。
・ベースカラーは水色を引き立てるために清潔感がある白でも相談しやすい雰囲気にするためオフホワイト
を使用
・柔らかい雰囲気になりすぎず、医療機関の誠実さを出すためにアクセントカラーに青緑色を使用
◇デザイン・レイアウト
・老若男女に受け入れてもらいやすいよう、全体的にすっきりつとして見やすいデザインにしました。
相談しやすい雰囲気にするため、ボタンやフレームは丸みをつけました。
男女ともが通いやすいよう、人物は男性と女性両方を選択。
・優先度高くするという「私たちについて」と「採用情情報」はトップページで目立たせるために、ウィンドウサイズいっぱいに写真や水彩の背景を配置したり、他より写真を大きく使用。
・トップページではユーザー目線を考え、店舗検索ができるコンテンツを追加
・スマホ版、タブレット版はヘッダー・フッターのレイアウトを変更。
ユーザーが使いやすいよう小さくなりすぎず、各コンテンツが収まるようにレイアウト変更。
スマホ版は別途、メニューボタンを出す仕様に。