WEB

<課題制作>

歯医者リンク

概要

職業訓練校での課題で心斎橋に位置する歯医者さんのウェブサイトを作成しました

期間

1ヶ月(2024年5月〜6月)

担当範囲

企画・デザイン・コーディング

使用ツール

Photoshop / XD / VS Code / HTML / CSS / JavaScript / jQuery

企画
PLAN

ターゲット

仕事帰りに気軽に行けて、心斎橋近郊の店舗で働く女性をターゲットにしました。

ペルソナ

  • 氏名: 田口 陽子
  • 年齢: 28歳
  • 女性
  • 職業 高級ブランド販売店員
  • 独身
  • 趣味: SNS､ヨガ、ランチ、ショッピング、美容皮膚科にもよく行く、旅行（特に韓国が好き）
  • 実家暮らし（父、母、兄は別居）
  • 月収: 25万円
  • 美容費は月に3万円～5万円
  • 給料のほとんどを美容代に使う
  • 平日のランチはオフィス街周辺のカフェに行くことが多い
  • よく使用するSNSはInstagram。カフェや美味しいお店を見つけて、実際に自分でもよく投稿している。Youtubeも好きで美容系のチャンネルをよくみる。
  • ヨガで体を動かすことが好き。
  • 性格はせっかちで常に何か忙しく動いている
  • スケジュールは空きがあると不安になるタイプ

デザイン
DESIGN

デザイン

課題として与えられたワイヤーフレームを元にデザインカンプをXDで作成しました。全体的にペルソナの求める「高級感のあるおしゃれな雰囲気」を意識してデザインしました。視線誘導

配色

配色は落ち着きのある暖色系の色味を使用し、女性らしさを表現しました。また高級感を出すためにベースカラーはベージュを使用し、アクセントカラーにピンクを使用しました。

フォント

和風かつ落ち着いたお店の雰囲気を伝えるために、「Times New Roman」「游明朝」「ヒラギノ明朝」を使用しました。

コーディング
CODING

歯医者リンク

レスポンシブにも対応するページも作成しました。JAVA SCRIPTを使用し、スクロールをすると画像やテキストに動きが出るようにして、ページが視覚的にアクティブになるようにしています。

クリックすると画像が拡大します↓

FLAME WORK

WEB

RESPONSIVE

back to

WORKS