- Figma
- Photoshop
- Illustrator
- HTML / CSS
- JavaScript
- GSAP
- WebGL
- Three.js
- Responsive
- WordPress
- STUDIO
- Copywriting
About
「きれい」で終わらせない。
予約・購入・問い合わせまで
届くLPを、ひとりで一貫して。
いろどりデザイン工房は、Web制作会社と事業会社で約10年、Webサイト・LPの企画からデザイン、コーディング、公開後の改善までを担当してきたWebデザイナーの屋号です。
得意なのはヘアサロン・コスメ・エステなどの美容LP。飲食・不動産・スクール・コーポレートなど、ほかの業種もトーンを描き分けてお作りします。
- Experience
- 10年
- Works
- 40点
- Revisions
- ∞
制作会社・事業会社での経験(約)
掲載しているLPの制作サンプル
デザインの修正回数
01 — Strengths
Why Irodori選ばれる4つの理由
-
01
Web制作会社と事業会社で約10年
受託の制作会社と、自社サービスを運営する事業会社の両方を経験。見た目だけでなく、成果を追う側の視点でLPを組み立てます。
-
02
美容LPに特化
ヘアサロンの予約導線、コスメの定期購入、エステの体験予約。ヘアサロン・コスメ・エステの「らしさ」と売り方を押さえたデザインが得意です。
-
03
デザインからコーディングまで
Figmaでのデザインから、HTML・CSS・JavaScriptでの実装、スクロールアニメーションやWebGLの演出まで。窓口がひとつなので、意図がそのまま形になります。
-
04
修正は回数無制限
色味や文字の大きさなど、細かな調整も遠慮なくお伝えください。ご納得いただけるまで、回数を気にせず修正します。
02 — Service & Price
Serviceサービス・料金
Base plan
LPデザイン
15,000円〜
- 縦長LP 1ページ(PC版+スマホ版)
- 構成案(ワイヤーフレーム)の作成
- 業種・ブランドに合わせた配色と書体のご提案
- 修正回数 無制限
-
Option 01
ライティング
キャッチコピーと本文を、ヒアリングをもとにお作りします。原稿がなくても大丈夫です。
+3,000円
-
Option 02
コーディング
デザインをHTML・CSS・JavaScriptで実装。スマホ対応やスクロールの動きも含みます。
+5,000円
-
Option 03
特急対応
公開日が決まっているなど、お急ぎの場合に優先して制作します。
+5,000円
※ 内容やボリュームによってお見積りが変わる場合があります。まずはお気軽にご相談ください。
03 — Works
Selected Works制作実績
構成・デザインからコーディングまで担当したLPです。
クリックすると、実際に動くページをご覧いただけます。
Notice掲載しているLPは、すべて架空のブランドを想定して制作したサンプルです。ブランド名・商品名・店舗情報・文章は実在しません。
-

Lilou hair & treatment
筆記体のロゴとアーチ型の写真で、やわらかな曲線の世界観を表現した髪質改善サロンのLP。
-

SOUTHPAW TOKYO
黒と蛍光色の大胆なタイポグラフィで、常識の逆から考えるエージェンシーを表現。
-

月白堂
深い緑と和菓子の写真で、百年続く京都の和菓子店の品格を表現。
-

Maison Rosée
銅色の英字と水滴のモチーフで、うるおう時間と体験予約までの流れを設計したエステのLP。
-

NESTA HOME
木と光の写真と縦組みのコピーで、自然素材の家づくりの空気感を表現。
-

ミナトロジ
大胆なタイポグラフィとオレンジで、物流の仕事のイメージを変える採用サイト。
-

CHERI
ピンク×赤の大胆な配色とポップな文字で、落ちないリップティントの楽しさを表現。
-

HAKO AOYAMA
黒を基調にした余白と欧文タイポグラフィで、一日一組の式場の上質さを表現。
-

prisma
光のグラデーションと大きな英字で、日常に新しい光を届けるWeb制作会社を表現。
-

AQUAVEIL
透明な水とブルーの写真、すりガラス風のカードで、みずみずしさを表現した美容液のLP。
-

Crumb & Coffee
写真とアーチ型のレイアウトで、焙煎所と焼き菓子の店のぬくもりを表現。
-

Lighthouse Capital
3Dのリングと上品な欧文タイポグラフィで、資産運用の信頼感と先進性を表現。
-

ÉTUDE
モノトーンの写真と雑誌のような文字組みで、静かな美意識を持つ一席だけのヘアアトリエを表現。
-

北村建設 RENEWAL
3Dのビルとビフォーアフターで、古いビルを再生するリニューアル事業を表現。
-

Pocco
子どもの写真と遊び心のある英語コピーで、楽しく話せるオンライン英会話を表現。
-

ATELIER KANO
モノクロの写真と余白で、職人がつくる革小物の質感と誠実さを表現。
-

sai 彩
縦書きのコピーとグレージュの余白で、発酵美容液の上品な透明感を表現。
-

Usucha Bake
抹茶の緑と大胆なロゴで、一番茶を使った焼き菓子の香りを表現。
-

yuzuriha
湯けむりと葉のモチーフで、山あいの温泉宿の静けさと季節の巡りを表現。
-

AMBRE
黒と金の配色と、しずくや柚子の接写で、シズル感に振り切ったビタミンC美容液のLP。
-

clarté homes
写真を切り抜いた大きなロゴで、光が入る性能リノベーションを表現。
-

ASCEND
写真が球体に集まるビジュアルで、国境をこえる人材紹介のつながりを表現。
-

AFTERHOURS LABEL
ライン状のロゴと黒を基調にしたデザインで、夜更けの音楽レーベルの空気を表現。
-

SORA BEAUTY
ポップな配色と大胆なタイポグラフィで、ヘア・まつげ・ネイルを楽しむサロンの世界観を表現。
-

こむぎとロンド
縦書きのロゴと手元の写真で、路地裏のパウンドケーキ店のやさしさを表現。
-

青葉台みなも矯正歯科
落ち着いた写真と余白で、話を聞くことから始める矯正の安心感を表現。
-

SILKIA
メダルや成分バッジ、価格ボックスで、通販LPの分かりやすさと上品さを両立。
-

TONE LAB
写真と大きな英字のコピーで、対話から伝えたいことを見つけるデザインラボを表現。
-

JUMPiN!
フェルトの立体文字と跳ねる子どもの写真で、あそぶ運動教室の楽しさを表現。
-

あおば住宅サービス
街と暮らしの写真で、住まいの価値を地域と育てる不動産会社を表現。
-

NUAGE
泡に包まれたボトルのビジュアルで、泡の質にこだわるシャンプーを表現した商品LP。
-

こうじのいえ
やわらかな写真とことばで、発酵のある毎日のごはんを表現した通販LP。
-

SHIRO CAT HOTEL
ふわっと浮かぶ写真で、猫がのびのび過ごせるホテルの日常を表現。
-

MADO WORKS
余白とセリフ体の大きな英字で、言葉を大切にするWeb制作スタジオを表現。
-

Little Harbor
地球のイラストと子どもの写真で、好奇心が育つスクールを表現。
-

MIZUHA
縦書きのグラデーションのキャッチと六角形の成分バッジで、水のようなみずみずしさを表現。
-

山下農園の生姜
黒地と大きな縦書きのコピーで、辛い生姜の力強さと山あいの冬を表現。
-

KAMI PRESS
表紙を並べた誌面風のレイアウトで、文具メーカーのスタイルマガジンを表現。
-

SHIFTEN
明るいブルーと使用シーンの写真で、シフト作成の手間がなくなる便利さを表現。
-

PALETTA
手描きのような図形とイラストで、編集・デザイン事務所の遊び心を表現。
04 — Animation Demo
Motion Labアニメーション実装デモ
WebGLのシェーダーからスクロール連動の演出まで。
LPに取り入れられる動きのサンプルを22本。触って動かしてみてください。
-

Demo 01
マウスでなぞると波紋が広がる水面
-

Demo 02
RGBがずれて切り替わるグリッチスライダー
-

Demo 03
文字の粒子がマウスで散らばるパーティクル
-

Demo 04
スクロールで円形に広がって現れる写真
-

Demo 05
ドラッグで回る3Dカルーセル
-

Demo 06
スクロールの速さで傾く文字と横スクロール
-

Demo 07
液体のように溶け合う画像の切り替え
-

Demo 08
タイルがめくれて切り替わる画像
-

Demo 09
マウスの軌跡に写真が現れる
-

Demo 10
奥から手前へ流れる3Dギャラリー
-

Demo 11
文字がランダムに変化して確定するテキスト
-

Demo 12
ホバーで画像が浮かび上がるリスト
-

Demo 13
絵の具のように流れるグラデーション背景
-

Demo 14
マウスに反応して色づくドットグリッド
-

Demo 15
スクロールで重なっていくカード
-

Demo 16
LPで使えるボタンのホバーエフェクト8種
-

Demo 17
モザイクが晴れて現れる画像
-

Demo 18
奥行きごとに動くマウスパララックス
-

Demo 19
数字のカウントアップと伸びるグラフ
-

Demo 20
ドラッグで投げられる無限ループのギャラリー
-

Demo 21
3Dに傾いて光るカード
-

Demo 22
カーソルの周りだけ色が見えるスポットライト
05 — Flow
How it works制作の流れ
Step 01
ご相談
ランサーズのメッセージからお気軽にご連絡ください。「まだ何も決まっていない」段階でも大丈夫です。
Step 02
ヒアリング・お見積り
ブランドの特徴やお客様像、LPの目的(予約・購入・問い合わせなど)をお聞きし、お見積りと納期をご提案します。
Step 03
構成案
ファーストビューから申し込みまでの流れを、ワイヤーフレームでご確認いただきます。
Step 04
デザイン
PC版とスマホ版のデザインを制作し、画像でご確認いただきます。
Step 05
修正
ご要望に合わせて調整します。修正の回数に制限はありません。
Step 06
納品
デザインデータを納品します。コーディングをご依頼の場合は、HTML一式もお渡しします。
06 — FAQ
FAQよくある質問
原稿や写真がなくても依頼できますか?
はい、大丈夫です。ヒアリングをもとに構成を作り、文章はライティングオプション(+3,000円)でお作りします。写真がない場合は、雰囲気に合う素材のご提案も可能です。
美容以外の業種も依頼できますか?
はい。得意なのはヘアサロン・コスメ・エステですが、飲食・不動産・スクール・採用・コーポレートなど、幅広い業種のLPを制作しています。
修正は本当に無制限ですか?
はい、デザインの修正は回数に制限なく対応します。構成を大きく変える場合や、ページを追加する場合のみ、別途ご相談させてください。
納期はどのくらいですか?
内容によりますが、ヒアリング完了から3営業日ほどで初稿をお出しするのが目安です。お急ぎの場合は特急対応(+5,000円)で優先して制作します。
デモのようなアニメーションも入れられますか?
はい、コーディングをご依頼いただく場合に対応します。動きの量や表示速度とのバランスも含めてご提案しますので、イメージに近いデモや参考サイトをお知らせください。
コーディングしたLPは、どこで公開できますか?
HTML・CSS・JavaScript一式で納品しますので、お使いのレンタルサーバーなどにアップロードして公開できます。アップロードの方法もご案内します。
制作実績のブランドは実在しますか?
いいえ。掲載している制作実績は、すべて架空のブランドを想定して制作したサンプルです。ブランド名・商品名・店舗情報・文章は実在しません。