【Webサイト】自爪育成サロン　high-tone

1.概要

本作品は、2026年1月15日に開催された進級制作展にて展示した作品です。

進級制作展は、トライデントコンピュータ専門学校の1年生が、これまで学んできた知識や技術の成果を発表する機会です。当日は、企業の方々や先生方、保護者の方々に作品をご覧いただき、講評や評価をいただきました。

1-1.クライアント紹介

今回、進級制作にご協力いただいたのは、自爪育成サロン「high-tone」さんです。こちらはご自宅で運営されているサロンで、オーナー様お一人が丁寧に施術を行われています。自爪育成を中心に、カラー施術も行っているサロンです。

-

2.作品紹介

2-1.ヒアリング

今回の制作では、オーナー様がお忙しい状況であったため、主に電話でヒアリングを行いました。一回目のヒアリングではサイトの方向性や掲載内容はまだ決まっていなかったため、私からいくつか系統の違う自爪育成サロンのサイトを提示し、必要な内容やデザインの好みについてオーナー様と一緒に考えました。その中で、サイトを作る目的は以下の通りです。

　・自爪育成について知ってもらいたい 
　・爪で悩んでいる人に来てもらいたい

そこから目的が伝わるサイトにするための要望を、以下の4点に絞りました。

• 明るく、落ち着いた雰囲気のデザインにしてほしい
• ページ遷移をできるだけ減らしたい
• シンプルなデザインにしてほしい
• 今後更新の可能性がある箇所は、オーナー様が更新できるようにしたい

これらの内容をもとにヒアリングシートを作成し、整理した内容を反映させながら作品制作に取り組みました。

2-2.コンテンツマップ作成

ヒアリングで整理した内容をもとに、コンテンツマップを作成しました。サイトを見たときに、どこにどの情報があるかがすぐにわかることを意識して構成しています。

2-3.ワイヤーフレーム

コンテンツマップをもとに、各情報をどこに配置するか、どのようなデザインで見せるかの案を作成しました。実際に完成したサイトとは一部異なりますが、さまざまなネイル関連サイトを参考にしながら、情報の整理を行っています。

2-4.配色設計

オーナー様からは「明るさと落ち着きの両方を感じられる配色にしたい」というご要望をいただいたため、明度や彩度が高すぎる色は避け、メインカラーを引き立てつつ全体の印象を損なわない色選びを意識しました。

2-5.デザイン作成

コンポーネントやオートレイアウトを積極的に活用し、デザインの変更や調整が発生した際にも効率よく対応できるよう工夫しました。

2-6.ポイント（デザインについて）

■トップページで情報が完結

「トップページで情報が完結するサイトにしたい」というご要望を受け、必要な情報をトップページにまとめました。

情報が多すぎると見づらくなるため、10代から50代のお客様を対象にアンケートを実施し、どのコンテンツが重要かを可視化しています。

これを踏まえて、優先度の高いコンテンツは上部に、低いコンテンツは下部に配置し、情報を探しやすい構成に工夫しています。

■キャンペーン情報

来店のきっかけにつなげるため、トップページに目立つキャンペーンバナーを設置しました。文字だけでなく、ヤスリやネイルのアイコンを入れ、背景にはネイル写真を使用して内容が一目で分かるよう工夫しています。

また、サイト全体の統一感を出すため、少しくすんだピンクやゴールドを使用し、フォントも揃えています。

■飽きないデザイン

装飾は控えめにし、情報が直感的に分かることを意識してデザインを制作しています。

また、コンテンツごとにレイアウトや見せ方を少しずつ変えることで、トップページが長くなっても最後まで見てもらいやすい構成にしています。

2-7.ポイント（コーディング・実装について）

■MicroCMSで簡単更新

オーナー様が更新することを踏まえ、初心者でも使いやすい MicroCMS を導入しました。

メニューの内容は JavaScript で制御しているため、コンテンツを追加すると自動でサイトに反映されます。また、メニューごとに表示番号を設定できるため、簡単に並び替えができるようになっています。

■アクセシビリティ

装飾ではない画像には alt 属性 を設定し、サイトの meta 要素 にも適切な説明文を記載することで、音声でも内容が伝わりやすいよう配慮しました。

また、サイト内の装飾以外の要素については、色差がアクセシビリティ基準を満たすよう調整し、視認性を確保しています。

-

3.感想

実際にサイトを制作してみて、お客様の要望から本来の意図を汲み取り、それを形にすることの難しさを実感しました。

最初のヒアリングではやりたいことが明確でなく、オーナーの方が納得できるサイトをどう作るか悩むこともありました。しかし、先生や周りに相談しながら、サイトの例を提示したり質問の仕方を工夫したりすることで、少しずつオーナーの意図を把握できるようになりました。

今回の経験を通して、今後もクライアントに寄り添い、より納得してもらえるサイトを制作していきたいです。