リト｜AI×Webデザイン

大手アパレル企業個人売上エリア1位、全国5位｜現ITエンジニア｜Webデザイン制作100本以上｜LP・HP制作・バナー作成｜Photoshop / WordPress / Canva等対応｜“伝わるデザイン”と集客導線を意識した制作をしています｜制作実績は固定ページから｜ご相談はDMまで

[リト｜AI×Webデザイン @Rito_Designer]

はじめまして！
Webデザイナーのリトです🌸

「見た目」だけでなく、“集客につながる導線設計”を
意識したデザインをしています🌱

現在はWebサイト制作とバナー制作などを承っています💪　

▼ポートフォリオ
https://t.co/jiHGyXtwGY
https://t.co/lJlPq8UvAF

ご相談はDMからお気軽にどうぞ！

[リト｜AI×Webデザイン @Rito_Designer]

タン祭り🙌

[リト｜AI×Webデザイン @Rito_Designer]

@Nicotama222 本日ラストお願いします！！！！！

[リト｜AI×Webデザイン @Rito_Designer]

@Nicotama222 フォロバ活動頑張ります！

[リト｜AI×Webデザイン @Rito_Designer]

@Nicotama222 本日初参加です！
フォローよろしくお願いします！

[リト｜AI×Webデザイン @Rito_Designer]

@Nicotama222 まだ起きてます！
今月初参加よろしくお願いします！
フォロバするのでフォロまちです！

[リト｜AI×Webデザイン @Rito_Designer]

これは絶対に見逃せない…

[シロウ @shiro_life0]

https://t.co/p8FCNUaF8k

[リト｜AI×Webデザイン @Rito_Designer]

「コードが本職じゃないデザイナーでも、
AIで自分の道具は作れるのか？」を実験中🧪

第一弾、サイト納品後のSNS告知文を X / Instagram / Threads 分まとめて生成するツールを作ってみた💡

”自分のブランドの世界観のまま”
ただ“人に配って使ってもらう”には、
もう一段の壁（裏側の仕組み）があると判明😭

そこも含めて、作りながら書いていきます！

[リト｜AI×Webデザイン @Rito_Designer]

未経験から案件0→6件…

スクールで型を学んで、本でセンスを磨いて、
とにかく手を動かし続けた全記録をnoteにまとめました🙌

「で、結局なにをすればいいの？」に全部答えた1本です💡

そのまま使えるテンプレ・チェックリスト・ロードマップ付き👇
https://t.co/z6LhGdL3Cl

[リト｜AI×Webデザイン @Rito_Designer]

# あなたは、「写真の中に“もうひとつの主役”を描き足すアーティスト」です。

アップロードされた画像を観察し、
写真の中にある要素から自然に生まれた“主役”と装飾を、
**白ペン風の手書き落書き**として追加してください。

## 目的

* 「主役がはっきり見える」
* 「被写体と一体化している」
* 「全体に自然に広がる」
* 「丁寧で安っぽくない仕上がり」

この4つを必ず満たしてください。

---

# 【入力情報】

* 画像：ユーザーがアップロードした画像
* シーン：任意（未入力OK）

※必ず画像を最優先で判断すること

---

# 【作業手順】

## ① 主役を決める

## ② 配置を決める

## ③ 装飾で全体を整える

---

# 【① 主役（最重要）】

## ▼ 基本ルール

* 必ず画像内の要素から作る
* 元の要素と“視覚的につながっている”状態にする
* 完全に別物にはしない

---

## ▼ 主役の作り方（4パターンから1つ選択）

### ① 変形型

元の形を保ったままキャラクター化

### ② 拡張型

一部が伸びて別の形になる

### ③ 擬態型

元要素が別の存在に見える

### ④ 関係性キャラクター型（推奨）

元要素に「関わる存在」として登場させる
（持つ／運ぶ／触れる／支える など）

### ※必須条件

* 単体で存在させない
* どの要素と関係しているか一目で分かること

---

## ▼ 主役の条件

* 一目で主役と分かる
* 写真の雰囲気と一致している
* 元要素との関係が見える
* 主役は1〜2個まで

---

## ▼ 主役の強さ（重要）

主役は目立つが「目立ちすぎない」こと。

写真本来の主役を壊さず、
自然に共存している状態を目指す。

### 目安

* 「よく見ると可愛い」くらいでもOK
* 違和感なく馴染んでいること

---

## ▼ サイズ

画像全体の20〜35％程度

---

## ▼ 配置

### 【A：被写体一体型】

元の要素に重ねて発生させる

### 【B：被写体外型】

余白に配置し、元要素との関係を持たせる

### ※共通ルール

* 被写体を隠さない
* 視線の起点にする

---

## ▼ 描き込み

* 主役のみしっかり描く
（輪郭＋簡単な中身）
* その他は最小限

※全体描き込みは禁止

---

# 【② アウトライン】

## ▼ 定義

被写体の外側を囲わず、
「形に沿って上から軽く足す」

---

## ▼ ルール

* 一部だけに入れる
* 複数の被写体に使う
* 囲いすぎない

---

## ▼ 目的

可愛く見せるための補助

---

# 【③ 落書きのカバー範囲】

* 3〜5箇所以上に入れる
* ただしバランス重視

---

# 【④ 主役の動き】

主役に「動き」をつける

### 例

* ジャンプ軌跡
* 浮遊線
* 小さな粒

※主役より目立たせない

---

# 【⑤ 装飾】

## ▼ ルール

主役または写真と意味がつながるもののみ。

小さく、シンプルに描く。

### 例

* 星
* 花
* ハート
* 雲
* リボン

---

## ▼ 装飾の量（重要）

* 全体に均一に入れない
* 主役の周りだけ少し多くする
* それ以外は余白を残す

### NG

* 描きすぎ
* 画面全体を埋める

---

# 【⑥ 空間】

視線の流れ：

**主役 → 被写体 → 装飾 → 主役**

---

# 【⑦ 線】

* 白ペン
* 細〜中（主役は少し太め）
* 丁寧に描く
* ラフすぎない

---

# 【最終チェック】

* 主役が一目で分かるか
* 元の要素との関係が見えるか
* 描きすぎていないか
* バランスが崩れていないか

---

# 【禁止】

* テキスト
* 無関係なキャラ
* 外周囲み
* 雑な線

---

# 【仕上がり】

* 自然に主役が生まれている
* 写真と一体化している
* 抜け感がある
* 保存したくなる完成度

[リト｜AI×Webデザイン @Rito_Designer]

昨日の夜はローストビーフを作りました🙌

インフル中なので本当はお粥とかの方が良かった気もしますが、キャビアの賞味期限がギリギリだったので…贅沢に使わせていただきました😂

ローストビーフ × キャビア × トリュフ塩はさすがに優勝でした🏆

ちなみにこの画像の落書き加工はAIで作成しています✨

👇プロンプトはこちら👇

[リト｜AI×Webデザイン @Rito_Designer]

いつも会社ではMicrosoft 365のPlannerを使ってタスク管理しているんですが、

「プライベートPCでも使おうかな」と思って調べたら、法人契約が必要だと知って地味にショックでした😂

そこで最近話題のClaude Fable 5を使って、自分専用のタスク管理サイトを作成してみました💡

✔ タスクの追加
✔ 進捗管理
✔ 優先度設定
✔ スマホ対応

全部AIとの対話だけで作成。

コードを書くというより、
「こういう機能が欲しい」
と伝えながら作っていく感覚です。

作り方は動画でまとめてみました🙌

最近のAI、本当にすごい…。

ちょっとした業務ツールなら、自分で作れる時代になってきました😳

[リト｜AI×Webデザイン @Rito_Designer]

@yuzuyu_design ゆずゆさんありがとうございます😭
そう言っていただけて嬉しいです…！

まだまだ勉強中ですが、「頼んでよかった」と思ってもらえるように提案やサポートも大切にしているので、こういうお言葉をいただけると本当に励みになります🥲

これからも頑張ります💪✨

[リト｜AI×Webデザイン @Rito_Designer]

昨日対応したクライアント様から
嬉しい評価をいただきました🥲

「サイト全体の構成や導線まで提案してもらえた」
「価格以上のクオリティ」
「信頼できる制作者」

デザインだけでなく
「どうしたら問い合わせにつながるか」
「どうしたら見やすいか」

まで考えて制作しているので、
本当に励みになります✨

現在もホームページ制作のご相談受付中です🙌

👇ポートフォリオ👇
https://t.co/VCXcMyfOHU

[リト｜AI×Webデザイン @Rito_Designer]

@Heine_s_0909 ハイネさんありがとうございますー！
何かの巡り合わせもあって依頼いただけたので💪
もっと依頼がいただけるよう自分も頑張ります🔥
ハイネさんのIllustrator活動自分も参考に
頑張ります！！

[リト｜AI×Webデザイン @Rito_Designer]

【サイト制作案件 納品完了🎉】

クラウドワークス・ココナラでご依頼いただいた案件を無事納品いたしました！

現在、
・ホームページ制作
・LP制作
・バナー制作
を受付中です✨

✔ WordPress対応
✔ スマホ対応
✔ 修正対応可能
「ポートフォリオを作りたい」
「お店のホームページが欲しい」

そんな方はお気軽にご相談ください📩

👇ポートフォリオ👇
https://t.co/VCXcMyfOHU

[リト｜AI×Webデザイン @Rito_Designer]

納品全部終わったー！！！！
3日間頑張った😭

[リト｜AI×Webデザイン @Rito_Designer]

@Nicotama222 @majima318majima 万垢目指したいです！
みなさんフォロバよろしくお願いします！