works
web design
出張美容しんきゅう整体サロン「HA・RI・TO」
webサイト新規開設
(訓練校卒業制作、実サロン7月オープン予定)
出張美容しんきゅう整体サロンHA・RI・TO (xdomain.jp)
![](https://saito77naomi.com/wp-content/uploads/2023/04/harito-screen.png)
制作の背景と目的
地元で経験を積んできた鍼灸師が、美容鍼と整体の出張サロンを新規オープンする。
高い効果と即効性が自慢。
しかし一方で、個人経営の出張サロンであるため認知度の低さと他人を自宅に入れる事への抵抗感、高めの価格設定がネックとなり、客足が伸びないのではないかと心配している。
SNSだけでなくきちんとしたwebサイトも作ることで、美容鍼の効果をしっかり伝え、サロンや鍼灸師個人の信用感も高め予約につなげる事が目的。
ターゲット
居住地:大阪府堺市~大阪市
性別:女性限定
年齢:30歳代以上
・美容と健康意識が高い
・経済的に余裕がある
・家庭の主婦や、小さい子供のいる母親、介護をしている人、忙しく働く人。
・忙しさや家庭の事情等で外出困難または億劫に感じる人。
・多少の犠牲(高い金額、自宅に人が来る、痛いかもしれない)を払ってでも美しくなりたいという強い思いがある
※認知度と範囲の問題から、初めは知人から、口コミで徐々に広めていきたい。
制作上の工夫・感想
競合他社のwebサイトを調査し、差別化できるポイント「出張型サロン」「女性の施術者」「美容専門」である点をしっかり訴求できるよう、コンテンツを工夫した。またデザイン面では、競合他社には見られなかった「女性らしさ」「上品さ」「スタイリッシュさ」を取り入れ、ターゲット層に好まれるイメージを大切にし、女性施術者や美容専門である事をアピールした。
サイトを訪れた人が予約・問い合わせなどのアクションを起こしやすくするため、ユーザビリティや可読性の面も考慮し、レスポンシブ対応で制作した。
SEO対策や、関係法規についても反映して製作した。
実在のクライアントの意向を聞きながら制作することは、難しくもあり楽しさや達成感もあり、訓練とはまた違った喜びを実感できた。
関連制作物
![](https://saito77naomi.com/wp-content/uploads/2023/04/leaflet.jpg)
![](https://saito77naomi.com/wp-content/uploads/2023/04/leaflet2のコピー.jpg)
![](https://saito77naomi.com/wp-content/uploads/2023/04/紹介カード.jpg)
やなせがわ内視鏡クリニック
webサイト
(架空のクリニックホームページの制作)
![](https://saito77naomi.com/wp-content/uploads/2023/03/clinic-showcase-1024x728.png)
カンプ制作:illustrator
コーディング:HTML、CSS、jQuery
制作の背景と目的
「大腸がんによる死亡者数を減らしたい」という院長の熱い思いを表現し、検査の予約率を上げる事が目的。
①ターゲットの危機感、当事者意識を激しく喚起する。
②気軽に苦痛なく検査を受けられる事を繰り返し丁寧に説明することで、安心感と信頼感を提供する。
この2ステップを踏むことで、ターゲットを「一刻も早く検査を受けたい」という気持ちにさせ、予約につなげる。
ターゲット
40歳代以上の男女。
健康が気になり始める年齢だが、日々忙しく、検査や受診の余裕なく過ごしている人。
「病気は気になるが元気だし若いし、まだどこか他人事。
内視鏡検査なんて怖いし、大変そう。忙しいし、自分にはまだ早いかな・・・。」
と考えている。
制作上の工夫・感想
看護師経験を活かして、ライティングや図解もこだわって制作した。
メインビジュアルで激しく危機感をあおり、その後は柔らかくクリーンで安心できる雰囲気を出すよう工夫した。
プラグインなしでスライドショーを実装するのに苦戦し、様々な方法を何度も試して完成した。
学習したjQueryを早速使い、実験的に要素を動かしてみるなど、はじめてのwebサイト制作を楽しめた。
メインビジュアル(4枚スライドショー)
![](https://saito77naomi.com/wp-content/uploads/2023/03/pcmv-01.jpg)
![](https://saito77naomi.com/wp-content/uploads/2023/03/pcmv-02.jpg)
![](https://saito77naomi.com/wp-content/uploads/2023/03/pcmv-03.jpg)
![](https://saito77naomi.com/wp-content/uploads/2023/03/pcmv-04.jpg)
ポートフォリオ
webサイト
![](https://saito77naomi.com/wp-content/uploads/2023/03/PF-PC-1024x728.png)
制作の背景と目的
webデザイナーとして未経験でありながら就職を希望するにあたって制作したwebサイト。自分にできることや、自分らしさを伝えることが目的である。
トップページの様々な色合いの水玉モチーフで、私のこれまでの様々な経験が、新しい素敵な世界を作り出す様を表現した。
制作上の工夫・感想
制作物そのものだけでなく、意図した事を伝えられるよう、内容を工夫した。
自己の制作物を顧みる良い機会となった。
訓練校に通う半年でスキルアップもしたが、以前の広告会社勤務時代の販促企画や印刷物制作ディレクションの経験も、webサイト制作にかなり活かせていると感じた。
webサイト制作演習(訓練校にて)
課題カンプを元にHTML/CSSでコーディング。
すべてレスポンシブ対応しました。
和風縦書きサイト
![](https://saito77naomi.com/wp-content/uploads/2023/03/tate.jpg)
![](https://saito77naomi.com/wp-content/uploads/2023/03/Web-キャプチャ_15-3-2023_16457_-178x1024.jpeg)
インテリアサイト
![](https://saito77naomi.com/wp-content/uploads/2023/03/house-1024x968.jpeg)
![](https://saito77naomi.com/wp-content/uploads/2023/03/Web-キャプチャ_15-3-2023_16158_-365x1024.jpeg)
レンタルオフィスサイト
![](https://saito77naomi.com/wp-content/uploads/2023/03/shikisate1-428x1024.jpeg)
![](https://saito77naomi.com/wp-content/uploads/2023/03/Web-キャプチャ_15-3-2023_16321_-2-84x1024.jpeg)
3ページ構成のサイト
![](https://saito77naomi.com/wp-content/uploads/2023/03/Web-キャプチャ_14-3-2023_235423_-558x1024.jpeg)
![](https://saito77naomi.com/wp-content/uploads/2023/03/Web-キャプチャ_14-3-2023_235443_-663x1024.jpeg)
![](https://saito77naomi.com/wp-content/uploads/2023/03/Web-キャプチャ_14-3-2023_235458_-1024x610.jpeg)
4ページ構成サイト、お問い合わせフォーム作成
![](https://saito77naomi.com/wp-content/uploads/2023/03/Web-キャプチャ_14-3-2023_23572_-834x1024.jpeg)
![](https://saito77naomi.com/wp-content/uploads/2023/03/Web-キャプチャ_14-3-2023_235723_-1024x701.jpeg)
![](https://saito77naomi.com/wp-content/uploads/2023/03/Web-キャプチャ_14-3-2023_235741_-1024x705.jpeg)
![](https://saito77naomi.com/wp-content/uploads/2023/03/Web-キャプチャ_14-3-2023_23581_-1024x775.jpeg)
graphic design
- チラシ制作(自主制作)新規オープンするパーソナルジムのチラシ
- チラシ制作(訓練校にて)BtoBマーケティングのサービス認知度向上ちらし
- バナー制作(自主制作)ケーキショップのフェア告知バナー
- バナー(自主制作)ベーカリーショップのシーズン告知バナー
- フライヤー(自主制作)メイクショップのキャンペーン告知バナー
- バナー(自主制作)格安スマホキャリアのキャンペーン告知
- バナー(自主制作)オーガニック野菜店のセール告知バナー
- 職業訓練中の制作物①職業訓練にて模写する課題として制作しました。
- 職業訓練中の制作物②~illustratorを用いた模写~