WORKS

WEB DESIGN

Figma/XD/STUDIO

WEBデザインの制作が可能です。
和風な落ち着いた旅館のサイトです。シンプルな構造ですが、動きで優雅さを表現しました。

デザイン → コーディング → WordPress化を行いました。

ワイヤーフレーム

落ち着き和風高級感

サイトはこちら

WEB SITE

会社規約の関係で業務で作成したサイトは掲載できませんが、WordPressやLaravel構築サイトにて、特設ページ、数字で見るページ、英語翻訳に対応したページなどの制作を行いました。

  • HPデザイン&構築（Studio）
    グローネクスト株式会社様
    2025.7月納品

    ざっくりとしたご要望から、デザインと構築を行いました。
    スマホのハンバーガーメニューを開いた時に現れる動画など遊びゴコロを取り入れました。
    サイトを見る
  • ECサイト（shopify構築）※デモ
    ※パスワードを入力してご覧ください
    テーマ：Dawn

    【カスタマイズ内容】
    タブ切替可能なコレクションをTOPページに配置。もちろんコレクションはカスタマイズから1クリックで選べます。
    ▶︎パスワード：test2023 サイトを見る
  • ECサイト（shopify構築）※デモ
    ※パスワードを入力してご覧ください
    テーマ：Dawn

    【カスタマイズ内容】
    メタフィールドを利用したバッジを追加。インスタフィードを追加、SNSアイコンにラインを追加
    ▶︎パスワード：test2023 サイトを見る
  • ECサイト（shopify構築）※デモ
    ※パスワードを入力してご覧ください
    テーマ：Origin(無料)

    【カスタマイズ内容】
    ノーコードで編集可能な流れるテキストエリアを追加。商品ページに閲覧履歴を追加。パンくずリストを追加。
    ▶︎パスワード：test2023 サイトを見る
  • ホテル旅館（shopify構築）※デモ
    ※TOPのみ作成。パスワードを入力してご覧ください

    【カスタマイズ内容】
    オリジナルスライダーの実装。
    各種セクション作成（すべて画像、テキストの編集がノーコードで可能）
    パスワード：test2023 サイトを見る
  • ECサイト（shopify）※デモ
    テーマ：Dawn

    【カスタマイズ内容】
    スライダーにロゴ画像を追加
    全体の色味をPOPに。グラデーションデザイン。
    ▶︎パスワード：test2023 サイトを見る
  • イベントサイト※デモ
    学習サイト：codestep（XDカンプ）
    スクロールでMVが拡大されます。
    また、中盤セクションでは要素が領域に入ると背景が出現する仕組みです。この部分の実装が時間がかかりました。
    サイトを見る
  • ゲームサイト※デモ
    学習サイト：無料コーディング練習所
    ローディングアニメーション、動画背景のパララックス、画像の傾きを実装しました。
    サイトを見る
  • ジムサイト※デモ
    学習サイト：無料コーディング練習所（XDカンプ）
    タブ切り替え、スライダーなどを実装。
    スマホ表示の際はコース紹介部分が横スライドできるよう、スライダーを使わずCSSで設定。
    サイトを見る
  • カフェサイト※デモ
    学習サイト：codestep（XDカンプ）
    テキストにシャドウをかけて視認性をよくするなど、細かい設定について学習しました。
    また、Google Mapをサイトの雰囲気に合わせてモノトーンで設置する方法なども学びました。
    サイトを見る
  • ハウスメーカーサイト※デモ
    学習サイト：codestep（XDカンプ）
    背景は動画パララックスを使用。中盤の円はCSSにて実装し、マウスオンで左からマスクがかかります。
    サイトを見る
  • コーポレートサイト※デモ
    学習サイト：未経験からWebデザイナーへ！
    マウスオンでボタンカラーの変更、スクロールされるとヘッダー背景を表示、スクロールを促すアニメーションなどを実装しています。
    サイトを見る
  • 英会話スクールサイト※デモ
    学習サイト：codestep（XDカンプ）
    ハンバーガーメニュー、スクロールで要素を表示など動きがあるページ。背景が動く箇所はcssで実装。
    サイトを見る
  • セミナーサイト※デモ
    学習サイト：codestep（XDカンプ）
    MVで画面幅が変わっても人物が表示されるよう配置。フォームエリアの設置を行いました。
    サイトを見る

EC SHOP

複数クライアント様のshopify構築、shopify、楽天市場の保守対応、MakeShop構築など担当しております。
shopifyは広告運用時代から構築担当していたため構造を理解しており、liquid構成のテーマの編集も可能です。
回遊率向上、SEO対策などマーケティング知識を活かしたショップの構築が可能です。

Shopify
構築・テーマ編集、ストア全般カスタマイズ
・条件分岐でのコンテンツ表示
・メタフィールド活用したセクション作成
・カスタマイズ可能なセクションの作成
・オリジナルのバッジ・タグ
・ブログタグ絞り込み表示
・タブ切替セクション（カスタマイズ可）
楽天
・RMSでのデザイン設定・固定ページ作成
・楽天FTP（GOLD）での操作、タイマー付きバナーの設置など
・iframeを用いた商品ページ作成
Yahoo、Amazon、MakeShop
・Yahoo - 管理画面操作、FTP編集
・Amazon - 管理画面操作、商品ページコンテンツ、ブランドページ
・MakeShop - ストア構築、管理画面操作、独自デザイン
Home に戻る