このサイトは
PCで閲覧してください
私たちMOPEDは、
実装とPCをこよなく愛する
ギークな人を求めています。
そのため、
スマートフォンサイトではなく、
PC専用の採用サイトをご用意しました。
ぜひ、お手元のPCから
アクセスしてみてください。
最短距離が正解とは限らない。
流動的な時代の中で、拘りや美学などは薄れつつある。
しかし、どんな時代でも、普遍的に求められるものは変わらない。
試行錯誤を積み重ねたその先にこそ、「本質的な力」があると信じている。
だから私たちは、切磋琢磨できる仲間とミッションに応えていく。
Read More
こんなもんか で
終わらせたくない
Growth Story
成長事例_
- 小規模プロジェクトがメインだったフリーランスから複数CMSの構築やリッチなWebサイト制作を経てスキルや経験を底上げ
-
- Before（入社前のスキル）
-
- 10P未満のHTMLコーディング
- WordPress構築
- アフィリエイトサイトの記事更新
- 既存サイトの更新作業
- Now（入社後身についたスキル）
-
- チームでの100P超の大規模サイト制作
- MovableType、RCMSなどWordPress以外のCMS構築
- GSAPを使用したアニメーション実装
- 以前はフリーランスで小規模案件を中心にコーダーとして活動していましたが、より大きなプロジェクトを経験したり対応できる領域を広げたくて入社を決めました。
現在はチームでの制作を通じて保守性に優れたHTML/CSS設計を意識するようになったり、他メンバーが作成したページの反映確認などを行う中で視野が広がり、コーディングのクオリティが上がっていることを実感しています。
- アパレル業界のインハウスコーダーからコーディング力と表現力を兼ね備えたオールラウンダーに成長
-
- Before（入社前のスキル）
-
- HTMLコーディング
- 自社サイトEC運営、CMS組み込み
- 商品撮影
- Now（入社後身についたスキル）
-
- WordPress, MovableTypeなどのCMS構築
- 高度なアニメーション実装（svgアニメーション、jsでcanvasの描写など）
- Webアクセシビリティ対応
- 制作ジャンルや業種に偏りがないので実装の幅が広く、インハウスでは経験できなかったことにも挑戦できるのでスキルアップを実感しています。
前職は月の休みが6日程度でしたが、現在は完全週休2日制（祝日休み）に加え、リモートワークも上手く取り入れてワークライフバランスが取りやすくなりました。
Read More
WANTED
求める人物像
もっとあなたの価値を高める場所がここにある
モペットは人が持つ可能性と想像力を大切にしながら
コーディングの技術を追求していける仲間を募集中！
求道者思考がある
- 常に疑問を持ち、学び続ける姿勢を忘れない人は、人一倍成長します。モペットは、自分に足りないものを認め、助言を素直に受け入れながら高みを目指す“生涯挑戦者”を歓迎します。
当事者意識がある
- モペットでは協調性を持ち、積極的にコミュニケーションを取りながら、仲間とともにより良い成果を追求できる人が活躍します。自分の役割に責任を持ち、課題に向き合いながら最後までやり遂げる姿勢を大切にしています。
遊び心がある
- 好きなことや夢中になれるものがある人は、その情熱が“個性”になります。仕事を自分次第で面白くできる人、柔軟な発想で新しい価値を生み出せる人こそ、モペットの “あそび” と共鳴し、シナジーを生みます。
俯瞰的な視野がある
- 目の前のコードやタスクにとどまらず、チームやお客様の全体像を見据えて行動できる人をモペットは歓迎します。成果物の完成ではなく、「誰のために」「なぜ作るのか」を考え抜く姿勢が、より良いアウトプットを生み出します。
NUMBERS
数字で見るモペット
組織や仕事、ちょっとしたあれこれについて数字で紹介しています
- 社内の男女比
-
- 技術相談・共有の社内やり取り
-
- 実装内容
-
- 制作ジャンル
-
EMPOWERING GROWTH
社員一人一人との向き合い方について
紹介しています。
Read More
WORK ENVIRONMENT
モペットでの働く環境について
紹介しています。
Read More
JOB DESCRIPTION
募集要項や選考情報について
ご確認いただけます。
Read More
FAQ
よくある質問
-
主な取引先や制作ジャンル、プロジェクト規模について教えてください
多くは広告代理店、ブランディング会社、Web制作会社となります。また直接お客様との取引もございます。
数十ページ規模の中小案件から数百ページ規模の大規模サイトまで対応いたします。企業サイト、サービスサイト、採用サイト、キャンペーンサイト、LPと業種や規模感に偏りなく対応してます。
-
各職種の具体的な業務内容や担当するプロジェクトについて教えてください
HTMLコーダー
デザイナーやディレクターなど、プロジェクトメンバーと連携しながら、コーディングやCMS実装などの制作業務全般を担当します。
プロジェクトの内容や規模に応じて担当領域は変わりますが、中規模以上の案件ではタスクを細分化し、チームで分業しながら進行していきます。
テクニカルディレクター
プロジェクトの要件整理や企画の段階から参画し、クライアントと制作チームの双方とコミュニケーションを取りながら、ローンチに向けた進行管理を行います。
進捗やスケジュールの管理だけでなく、品質面のチェックやメンバーのタスク調整など、プロジェクトを円滑に進める役割を担っていただきます。
-
入社後の研修制度や、スキルアップのサポートはありますか？
入社後は概ね2週間〜1ヶ月の社内研修を経て、実案件に携わっていただきます。
※入社時点でのスキル経験、成長速度に応じて期間は異なります
また、社内全体の技術力向上を目的とした勉強会（技術共有会）や、キャリア形成・日々の業務について振り返る1on1ミーティングも実施しています。
個々の成長段階に合わせたサポート体制を整えており、着実にスキルを高めていける環境を整えています。
-
リモートワークはできますか？
はい、可能です。
現在は週2日程度のリモートワークを取り入れた勤務形態が最も多くなっています。
職種やスキルレベルによって異なりますが、最短で入社から3ヶ月後を目安にリモートワークが可能です。
リモートワークの日数や頻度については、採用後にご本人のスキルや経験、業務内容を踏まえて相談のうえ決定いたします。
Read More
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>東京都渋谷区のWeb制作会社・ホームページ制作会社｜株式会社モペット</title>
<meta name="description" content="東京都渋谷区を拠点に活動するWeb制作会社、株式会社モペット。有名サイトを含む3000件以上の豊富な実績と圧倒的なコーディング力を強みとしたWeb制作会社です。企画、デザイン、コーディング、システム開発などお任せください。" />
<meta property="og:type" content="website" />
<meta property="og:title" content="東京都渋谷区のWeb制作会社・ホームページ制作会社｜株式会社モペット" />
<meta property="og:description" content="東京都渋谷区を拠点に活動するWeb制作会社、株式会社モペット。有名サイトを含む3000件以上の豊富な実績と圧倒的なコーディング力を強みとしたWeb制作会社です。企画、デザイン、コーディング、システム開発などお任せください。" />
<meta property="og:locale" content="ja_JP" />
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<meta name="robots" content="index, follow">
<meta property="og:site_name" content="株式会社モペット">
<link rel="canonical" href="https://moped.co.jp/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/css/style.css" type="text/css" media="all">
</head>
<body>
<header class="g-header">
<div class="g-header__inner">
<div class="g-header__logo">
<a href="/" class="g-header__logoLink">
<img src="/assets/img/common/logo.svg" alt="MOPED inc." />
</a>
</div>
<button class="g-header__drawer hamburger js-hamburger" aria-label="メニューを開く" aria-controls="g-sp-nav" aria-expanded="false" type="button">
<span class="hamburger__box">
<span class="hamburger__line"></span>
<span class="hamburger__line"></span>
<span class="hamburger__line"></span>
</span>
</button>
<nav class="g-header__pc-nav g-pc-nav">
<ul class="g-pc-nav__items">
<li class="g-pc-nav__item">
<a href="/about/">モペットについて</a>
</li>
<li class="g-pc-nav__item">
<a href="/message/">メッセージ</a>
</li>
<li class="g-pc-nav__item">
<a href="/company/">会社情報</a>
</li>
<li class="g-pc-nav__item">
<a href="/service/">業務内容</a>
</li>
<li class="g-pc-nav__item">
<a href="/case_study/">取組実績</a>
</li>
<li class="g-pc-nav__item">
<a href="/recruit/">お問合せ</a>
</li>
<li class="g-pc-nav__item g-pc-nav__item--recruit">
<a class="g-pc-nav__recruit-link" href="/recruit/">採用情報</a>
</li>
</ul>
</nav>
<nav class="g-sp-nav" aria-label="スマートフォン用メニュー" id="g-sp-nav">
<div class="g-sp-nav__inner">
<a href="/" class="g-sp-nav__logoLink">
<img src="/assets/img/common/logo-white.svg" alt="MOPED inc." />
</a>
<ul class="g-sp-nav__items">
<li class="g-sp-nav__item">
<a href="/about/" class="g-sp-nav__link">モペットについて</a>
</li>
<li class="g-sp-nav__item">
<a href="/message/" class="g-sp-nav__link">メッセージ</a>
</li>
<li class="g-sp-nav__item">
<a href="/company/" class="g-sp-nav__link">会社情報</a>
</li>
<li class="g-sp-nav__item">
<a href="/service/" class="g-sp-nav__link">業務内容</a>
</li>
<li class="g-sp-nav__item">
<a href="/case_study/" class="g-sp-nav__link">取組実績</a>
</li>
<li class="g-sp-nav__item">
<a href="#" class="g-sp-nav__link">お問合せ</a>
</li>
<li class="g-sp-nav__item">
<a href="/recruit/" class="g-sp-nav__link g-sp-nav__link--recruit">採用情報</a>
</li>
</ul>
<ul class="g-sp-nav__policy-list">
<li class="g-sp-nav__policy-item"><a href="/privacy/" class="g-sp-nav__policy-link">プライバシーポリシー</a></li>
<li class="g-sp-nav__policy-item"><a href="/cookie/" class="g-sp-nav__policy-link">クッキーポリシー</a></li>
<li class="g-sp-nav__policy-item"><a href="#" class="g-sp-nav__policy-link">アクセシビリティガイドライン</a></li>
<li class="g-sp-nav__policy-item"><a href="#" class="g-sp-nav__policy-link">カスタマーハラスメントに対する基本方針</a></li>
</ul>
<div class="m-company__logo js-top-company-logo--sp m-fix-icon is-active"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
<script>
// SPナビ用
lottie
.loadAnimation({
container: document.querySelector(".js-top-company-logo--sp"),
renderer: "svg",
loop: true,
autoplay: true,
path: "../assets/lottie/moped_loop_01.json",
})
.addEventListener("DOMLoaded", function () {
const paths = document.querySelectorAll(".js-top-company-logo--sp path");
paths.forEach((path) => {
path.setAttribute("fill", "#f0f0f0");
path.setAttribute("stroke", "#f0f0f0");
});
});
</script>
</div>
</nav>
</div>
</header>
<main class="p-index article-body">
<div class="m-main js-top-animation">
<div class="m-fv__video">
<video src="/assets/img/top/fv.mp4" autoplay loop muted playsinline></video>
</div>
<div class="m-main__bg js-top-animation-bg"></div>
<div class="m-main__block">
<section class="m-fv">
<div class="m-fv__animation js-top-animation-logo">
<div class="m-fv__animation-logo js-lottie-logo"></div>
</div>
<script src="https://unpkg.com/lottie-web@latest/build/player/lottie.min.js"></script>
<script>
lottie.loadAnimation({
container: document.querySelector(".js-lottie-logo"),
renderer: "svg",
loop: true,
autoplay: true,
path: './assets/lottie/moped_loop_sequence.json',
});
</script>
<div class="m-fv__inner js-top-animation-logo">
<div class="m-fv__logo">
<img src="/assets/img/common/logo-white.svg" alt="MOPED inc." class="m-fv__logo-img" />
</div>
</div>
</section>
<div class="m-main__about js-top-about">
<section class="m-about">
<h2 class="m-section-title js-top-about-ttl">About Moped</h2>
<div class="m-about__inner js-top-about-content">
<div class="m-about__content">
<p class="m-about__copy"> More Than Code,<br /> Creating Meaningful<br /> Experiences </p>
<p class="m-about__text"> 「コーディング」から<br /> 「インタラクションデザイン」へ </p>
<div class="g-btn m-about__btn">
<a href="/about/">モペットについて<span class="g-btn__arrow"></span></a>
</div>
</div>
</div>
</section>
</div>
</div>
<section class="m-company js-top-company">
<div class="m-company__content">
<h2 class="m-section-title js-top-company-ttl">Company information</h2>
<div class="m-company__inner">
<div class="m-company__block js-top-company-content">
<p class="m-company__copy"> 株式会社モペットは<br /> ビジネスに効果を<br data-device="sp" />生み出す<br data-device="pc" /> 戦略的<br data-device="sp" />Webプロダクションです。 </p>
<div class="m-company__btn-wrap">
<div class="g-btn m-company__btn">
<a href="/message/">メッセージ<span class="g-btn__arrow"></span></a>
</div>
<div class="g-btn m-company__btn">
<a href="/company/">会社情報<span class="g-btn__arrow"></span></a>
</div>
</div>
</div>
</div>
<div class="m-company__logo js-top-company-logo">
</div>
<script>
lottie.loadAnimation({
container: document.querySelector(".js-top-company-logo"),
renderer: "svg",
loop: true,
autoplay: true,
path: './assets/lottie/moped_loop_01.json',
});
setTimeout(() => {
const paths = document.querySelectorAll('.js-top-company-logo path');
paths.forEach(path => {
path.setAttribute('fill', '#f0f0f0');
path.setAttribute('stroke', '#f0f0f0');
});
}, 1000);
</script>
</div>
</section>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
<script src="/assets/js/app.js" defer></script>
<footer class="g-footer">
<div class="g-footer__border">
<div class="g-footer__inner">
<div class="g-footer__content">
<a href="https://maps.app.goo.gl/kkJM3aJyGKsnXtCi8" class="g-footer__address" target="_blank" rel="noopener noreferrer">
<p class="g-footer__postcode">〒150-0011</p>
<p class="g-footer__location">東京都渋谷区東2-17-12 パーシモン・チバ201</p>
</a>
<ul class="g-footer__links" aria-label="フッターのナビゲーションリンク">
<li><a href="/privacy/" class="g-footer__link">プライバシーポリシー</a></li>
<li><a href="/cookie/" class="g-footer__link">クッキーポリシー</a></li>
<li><a href="#" class="g-footer__link">アクセシビリティガイドライン</a></li>
<li><a href="#" class="g-footer__link">カスタマーハラスメントに対する基本方針</a></li>
</ul>
</div>
<div class="g-footer__top">
<div class="g-footer__top-link" aria-label="ページのトップへ戻る">
<span class="g-footer__top-text"> Page Top </span>
<span class="g-footer__link-top">
<img src="/assets/img/common/page-top-top.svg" alt="ページのトップへ戻る" />
</span>
<span class="g-footer__link-bottom">
<img src="/assets/img/common/page-top-bottom.svg" alt="ページのトップへ戻る" />
</span>
</div>
</div>
</div>
</div>
<div class="g-footer__logo">
<img src="/assets/img/common/footer/footer-logo.svg" alt="MOPED inc." class="g-footer__logo__img" />
</div>
</footer>
<div class="m-cookie js-cookie">
<p class="m-cookie__text">当サイトでは、利便性向上のためにCookie（クッキー）を使用しております。Cookieの使用に関しては、『<a href="/cookie/">クッキーポリシー</a>』をご覧ください。</p>
<button class="m-cookie__btn js-cookie-btn" type="button" aria-label="Cookieに関する通知を閉じる"></button>
</div>
</body>
</html>
