本サイトは、ノーコードツール「Studio」を使用して制作しました。オーナー様ご自身でも更新・管理がしやすい設計としており、BLOG投稿やお知らせの更新をスムーズに行えるよう構築しています。
オーナー様からの「メニュー内容を分かりやすく伝えたい」というご要望を最優先に設計しました。脱毛メニューやフェイシャルメニューは、サービス内容を直感的に理解できるようイラストを活用し、視覚的に分かりやすく表現しています。
また、施術内容や特徴が伝わりやすい文章構成を意識し、初めて利用される方でも安心してメニューを比較・検討できるよう情報を整理しました。ユーザーの理解を深めることで、予約へのハードルを下げる導線設計を行っています。
デザインは、ナチュラルで女性らしい雰囲気を意識し、ベージュを基調にくすみカラーをアクセントとして採用。シンプルながらも温かみのある、落ち着いた印象に仕上げました。
使用ツール Adobe Photoshop adobe Illustrator ノーコードツールStudio
WEBデザインスクールの課題として、無料体験申込の増加を目的としたランディングページを制作しました。
ターゲットは30代〜40代の女性を設定し、「未経験から新しい働き方に挑戦したい」「将来に向けてスキルを身につけたい」と考える女性をイメージしています。
デザイン面では、女性に好まれるやわらかい配色や余白を活かし、未来への期待感を感じられる雰囲気を意識しました。
また、ユーザーが行動しやすいようCTAボタンを目立たせ、無料体験への導線を分かりやすく設計しています。
ターゲットに合わせたデザイン設計だけでなく、視認性や情報の伝わりやすさにも配慮しながら制作しました。
使用ツール Adobe Photoshop
子供が「できた！」時の嬉しさが伝わるようなイメージで制作。「できた！」の文字が目立つようなデザインに仕上げています。（企業様ロゴはKID’S SCHOOL文字に置き換えています）
未来を感じる親子のイメージにて制作。全体的に優しいふんわりした印象を出し、数字はゴシック体ではっきりと表示しました。
使用ツール Adobe Photoshop
日本の名所の画像を背景に、タイトル文字のあしらいを加えることで華やかな印象に仕上げました。
使用ツール Adobe Photoshop
子供の音楽教室の楽しさが伝わるような明るいイメージで制作しました。水彩風森のイラストに動物と子供の画像を合わせてワクワク感を表現、サイドバナーの細部にもこだわって制作しました。
使用ツール Adobe Photoshop
暖かくなってきた春のセールをイメージして、全体的に明るくふんわり仕上げ、タイトルは目立つようにビビットなピンクで制作しました。
使用ツール Adobe Photoshop
レトロ感を出したタイトルと本に囲まれた女性のイラストで古本屋さんで本を選ぶ楽しみをイメージして制作しました
使用ツール Adobe Photoshop
フェスティバルの賑わい感とクラフトボールをイメージしたタイトルですぐにビールが飲みたくなるようなワクワク感を表現しています。
使用ツール Adobe Photoshop
デザインについて
華やかでロマンティックなイメージで制作しました。クリスマス情報をイメージできるように写真を配置し、CTAボタンへの誘導を意識しました。
使用ツール Adobe Photoshop
概要
架空化粧品ブランドサイトを、企画からデザイン・構成・実装まで一貫して手がけました。「STUDIO」を用いた初めてのWebサイト制作で、UI設計・ビジュアル表現・ブランドコンセプトの落とし込みを重視しました。
コンセプト
ブランド名のイメージを、「宝石と花を融合させたようなナチュラルで上品な世界観」をテーマに設定。植物成分を配合したやさしい化粧品ブランドであることを伝えるため、配色にはラベンダートーンを基調に、やわらかく透明感のあるデザインを意識しました。
工夫したポイント
・ユーザーに安心感を与える、シンプルで見やすいレイアウト設計
・花や自然素材を連想させる画像・配色の選定
・ブランドロゴ・イメージビジュアルも自作し、トータルの世界観を統一
・製品の特徴が直感的に伝わるよう、余白を活かしたミニマルなデザイン
使用ツール
・STUDIO（デザイン・実装）・Illustrator/Canva（画像・ロゴ制作）
概要
初めて制作した架空のIT企業のコーポレートサイト。HTML / CSS / jQuery を使用し、ハンバーガーメニューやカルーセル、ボタンアニメーションなど、基本的なフロントエンドの技術を取り入れながら、スマートフォンにも対応したレスポンシブ設計を実現しました。
制作のポイント
・シンプルで分かりやすい構成：訪問者が迷わず情報にたどり着けるよう、コンテンツの流れや視線誘導を意識した設計
・スマートフォン対応：ハンバーガーメニューやレイアウト調整で、モバイルでも快適な閲覧体験を実現
・アニメーションによる動きの演出：jQueryを使って、カルーセルスライダーやボタンにアニメーション効果を追加し、静的なページに動きを加えました
使用ツール
・HTML / CSS、jQuery
概要
WordPressのオリジナルテーマを用いて、清潔感のあるWebサイト(架空サイト)を一から制作。白を基調に、ブルーとグリーンをアクセントに使用、年齢や性別を問わず、誰でも見やすく使いやすいデザインを意識しています。デザイン・コーディング・WordPress組み込みまで行いました。
デザインと設計のポイント
・清潔感のある配色設計：白をベース、ブルーとグリーンをアクセントに安心感を演出
・視認性を意識したUI：文字サイズや行間、余白設計にも配慮、誰でも快適に閲覧できるデザインに
・スマートフォン対応：レスポンシブ設計、スマホではヘッダー・フッターを常時固定、操作性を向上
ユーザビリティ向上の工夫
・CTAボタンの設置：画面右上に予約ボタンを配置、ユーザーのアクションを促進
・スクロール後の固定ヘッダー：ヘッダーが画面外に出た後に固定表示、邪魔にならず利便性も確保
・予約までの導線：予約ボタンを配置し、ユーザーが迷わずアクセスできる設計
使用技術
・WordPress（完全オリジナルテーマ）
・HTML / SCSS / JavaScript / PHP
概要
見本デザインをもとに、模写コーディングで制作した架空のプロフィールサイト。HTML / CSS / JavaScriptを使用し、シンプルながらも動きのある表現を取り入れた、印象に残るデザインに仕上がりました。
制作のポイント
・模写コーディングによる実装力の向上：構造やレイアウト、動きの再現を通じて、フロントエンドの理解を深めながら制作
・ユーザーの目を引く動きの演出：アニメーション効果を加えることで、シンプルな中に動きと奥行きを演出
・レスポンシブ対応：スマートフォンでも見やすい構成に調整
主な機能／実装内容
・カルーセル・リンクホバー時のアニメーション
・スクロールに合わせたフェードイン表示・モーダルウィンドウ
使用ツール
・HTML / CSS / JavaScript
概要
WordPressを使用、ノーコードで制作の架空美容室サイト。お問い合わせフォームや「お客様の声」投稿機能など、サイト運営者がコーディングなしで簡単に情報更新できるよう設計しました。
制作のポイント
・ノーコード構築：プラグインやブロックエディタを活用、誰でも更新・管理ができる設計に
・明るく親しみやすいデザイン：お店の雰囲気が伝わるよう、明るい色合いや写真を活用したビジュアル設計
主な機能
・お問い合わせフォーム：ユーザーが簡単に問い合わせできるようフォームを設置
・お客様の声投稿機能：WordPress投稿機能を活用し、レビューを手軽に追加・管理可能に
・SNS連携：X、Facebook、Instagramの口コミ投稿を掲載し、店舗のリアルな魅力を伝達
・Google Map埋め込み：店舗の場所がひと目で分かるよう、アクセスページに地図を表示
使用ツール
・WordPress（ノーコード設計）
概要
架空の大学サイトを静的HTMLからWordPressへ移行する課題に取り組みました。カスタム投稿タイプやサイドバー、検索フォームの実装など、サイト運営者がコーディング知識なしで情報更新できるCMS構築を目指しました。
実装内容
・カスタム投稿タイプ・ウィジェット対応サイドバー・検索フォーム・投稿ページテンプレート
使用ツール
・WordPress（テーマ開発・カスタマイズ）
・PHP / HTML / CSS / JavaScript
