First-view_image

Simple. Clear. Yours.

あなたらしさを、
まっすぐに届けるWEBページを

Works

制作実績

これまでに制作したWEBページを紹介します。各カードをクリックすると詳細な情報を確認することができます。

Scroll →
採用サイトのHP

Wordpressオリジナルテーマ：採用会社HP

対応範囲
  • HTML
  • CSS
  • Javascript
  • Wordpress
製作日数
約25日
ポートフォリオサイト

HTML静的サイト：ポートフォリオサイト

対応範囲
  • HTML
  • CSS
  • Javascript
製作日数
約15日

figmaにてデザインから対応

ノーコードツールStudioにて実装

ノーコードツールStudio：インテリアショップHP

対応範囲
  • Studio
  • モーダル
  • CMS機能
  • アコーディオン
  • コンタクトフォーム
製作日数
約15日

Studio galaxyの有料テンプレートデザインを参考に実装

工務店HP

HTML静的サイト：工務店HP

対応範囲
  • HTML
  • CSS
  • Javascript
製作日数
約20日
介護派遣会社HP

HTML静的サイト：介護派遣HP

対応範囲
  • HTML
  • CSS
  • Javascript
製作日数
約20日
Skill

対応範囲

常に対応可能範囲をアップデートしています。
ご希望の内容がございましたらお気軽のお問い合わせください。

HTML-icon

HTML

意味のあるHTMLタグを使い、ページ構成を意識したマークアップを行います。
SEOやアクセシビリティにも配慮し、保守や運用のしやすさを考えた設計を心がけています。
GoogleマップやSNSなどの外部サービスの埋め込みにも対応可能です。

HTML-icon

CSS

SCSSを用いて、保守性と再利用性を意識したスタイル設計を行っています。 レイアウトやデザインの再現はもちろん、レスポンシブ対応やアニメーション表現にも柔軟に対応可能です。
変数やミックスイン、ネストを活用し、効率的なスタイル管理を実現しています。

HTML-icon

Javascript

JavaScriptを使って、使いやすく、動きのあるサイトを作ることができます。 スムーズスクロールやスライダー（Swiper）、モーダル、アコーディオン、ハンバーガーメニューなどに対応しています。
サイトの目的やデザインに合わせて、必要な機能を丁寧に取り入れます。

HTML-icon

Wordpress

オリジナルデザインからのWordPressテーマ化が可能です。 HTML・CSS・JavaScriptで構築したサイトをベースに、独自テーマとして開発します。
カスタム投稿タイプやカスタムフィールドを活用し、更新性や汎用性を高めた設計にも対応できます。

Studio-icon

Studio

ノーコードでWebサイトを構築できるツールです。デザイン性の高いサイトを短期間で公開することが可能で、更新や修正にも柔軟に対応できます。コーディングなしでも表現の幅が広く、ビジネスサイトやランディングページ制作に適しています。

figma-icon

Figma

コーディングを意識したWebサイトデザインが可能です。ワイヤーフレームから実装を見据えたデザインまで対応し、UI/UXの最適化を意識した設計を行います。共同編集機能を活用し、クライアントとのリアルタイムな共有・フィードバックもスムーズに行えます。

figma-icon

ライティング

ココナラにて個人SEOブログのサポートで50件以上の実績（すべて★5評価）があります。また、メルマガ原稿の執筆も50件以上対応しており、読みやすさと成果につながる文章作成を心がけています。Web制作とあわせて、文章面からもサイトやビジネスの価値を高めるサポートが可能です。

Contact

お問い合わせ

日々対応範囲も拡大中です。
デザインの外注の相談も乗れますので、
お気軽にお問い合わせください。

mail-icon

お問い合わせはこちらから
採用サイトのHP

採用企業HP

https://www.nori-code.com/tetote/

Basic認証設定中

ユーザー名：pf_tetote

パスワード：pf_1234567890

対応範囲

  • HTML
  • CSS
  • Javascript
  • Wordpress

製作日数

約25日

概要

本採用企業HPは、Figmaで作成されたデザインにをもとにWordPressで忠実に実装しました。

主な実装内容
  • スライダー実装（Swiper）
    トップページと2箇所にSwiperを用いたスライダーを設置。画像や情報が動的に切り替わることで、視覚的なインパクトと訴求力を高めました。
  • FAQセクション（モーダル・アコーディオン）
    アコーディオン形式で回答を表示し、必要に応じてモーダル表示も取り入れ、情報整理と使いやすさを両立。
  • スタッフ紹介の管理（CPT + カスタムフィールド）
    管理画面から簡単にスタッフ情報を追加・編集可能。役職やコメントも入力でき、運用面のメンテナンス性にも配慮。
mail-icon

お問い合わせ
ポートフォリオサイト

ポートフォリオサイト

https://www.nori-code.com

対応範囲

  • HTML
  • CSS
  • Javascript

製作日数

約15日

備考

figmaを使用しデザインから対応

概要

自身のスキルと実績をまとめたポートフォリオサイトです。デザインからコーディング、動的な機能実装まで一貫して対応しており、ユーザーに見やすく使いやすいサイトを目指しました。

主な実装内容
  • HTML・CSS
    コーダーとしてのスキルを活かし、シンプルかつメンテナンス性の高いコードを意識しています。
  • レスポンシブ対応とブラウザ互換性
    さまざまなデバイスで快適に閲覧できるよう、細部まで調整しています。
  • ユーザー体験を重視した設計
    見やすく使いやすいレイアウトとインタラクションを心掛け、UIの質を高めました。
mail-icon

お問い合わせ
ノーコードツールStudioで制作

Studioにて制作

https://preview.studio.site/live/65qmX5JvOV

対応範囲

  • CMS
  • モーダル
  • アコーディオン
  • コンタクトフォーム

製作日数

約10日

備考

Studioの有料テンプレートのデザインを忠実にトレース

概要

Studioの有料テンプレートを参考に、基本的なホームページ機能を忠実に再現したサイトを制作しました。

Studioのおすすめポイント
  • ノーコードで簡単実装
    専門知識がなくても、ドラッグ＆ドロップ操作でデザインや機能を組み立てられ、スピーディーに制作可能です。
  • 基本機能が充実
    モーダル表示、お問い合わせフォーム、Googleマップ埋め込み、お知らせ管理など、よく使われる機能を標準で対応しています。
  • ユーザーにやさしい管理画面
    Web制作経験が浅いユーザーでも、CMS機能を活用してコンテンツの追加・編集が直感的に行えます。
mail-icon

お問い合わせ
工務店HP

静的サイト：工務店HP

https://www.nori-code.com/middle_ex

Basic認証設定中

ユーザー名：pf_middle_ex

パスワード：pf_1234567890

対応範囲

  • HTML
  • CSS
  • Javascript

製作日数

約15日

概要

Figmaにて作成されたデザインカンプからコーディング、動的な機能実装まで一貫して対応しました。

主な実装内容
  • HTML・CSS
    コーダーとしてのスキルを活かし、シンプルかつメンテナンス性の高いコードを意識しています。
  • レスポンシブ対応とブラウザ互換性
    さまざまなデバイスで快適に閲覧できるよう、細部まで調整しています。
  • ユーザー体験を重視した設計
    見やすく使いやすいレイアウトとインタラクションを心掛け、UIの質を高めました。
mail-icon

お問い合わせ
介護派遣会社HP

静的サイト：介護派遣会社HP

https://www.nori-code.com/middle

Basic認証設定中

ユーザー名：pf_middle

パスワード：pf_1234567890

対応範囲

  • HTML
  • CSS
  • Javascript

製作日数

約15日

概要

Figmaにて作成されたデザインカンプからコーディング、動的な機能実装まで一貫して対応しました。

主な実装内容
  • HTML・CSS
    コーダーとしてのスキルを活かし、シンプルかつメンテナンス性の高いコードを意識しています。
  • レスポンシブ対応とブラウザ互換性
    さまざまなデバイスで快適に閲覧できるよう、細部まで調整しています。
  • ユーザー体験を重視した設計
    見やすく使いやすいレイアウトとインタラクションを心掛け、UIの質を高めました。
mail-icon

お問い合わせ