WEB PRODUCTION × AI

LOBODE

量産品じゃないプロダクトを。

SCROLL

Works

制作実績

LOBO.DEポートフォリオサイト

01

WordPress / ポートフォリオ

LOBO.DE
ポートフォリオサイト

Concept

単純なAI制作との差別化のため、あくまでも自分のデザインを作成するための道具としてAIを活用し、自分が良いと思うものをつくることを心がけています。コラージュグリッドのヒーローに使用した素材は自ら撮影しています。今後も、良いデザインアイデアが浮べば随時変更して、単なるAIコーディングで終わらないLPづくりをしていきます。

担当範囲
企画整理 / デザイン / WordPress実装 / 写真撮影・加工

使用技術
WordPress / HTML / CSS / JavaScript / Photoshop

制作意図
AI活用を前提にしながらも、写真・余白・構成で個人の制作姿勢が伝わるポートフォリオに調整。

LOBODE COFFEEカフェサイト

02

WordPress / カフェサイト・サンプル

LOBODE COFFEE
架空カフェサイト

Concept

落ち着いた喫茶店をイメージした高級感と親しみやすさの両立をテーマに、ダークトーンとゴールドのアクセントで統一した架空の店舗のLPです。完全にAIに任せてしまうと文字の視認性など、気を使えない部分も多いため、細かく指示を出して作成しています。

担当範囲
LP構成 / デザイン / WordPress実装 / レスポンシブ調整

使用技術
WordPress / HTML / CSS / JavaScript / 画像最適化

制作意図
架空店舗の世界観を立てながら、メニュー・コンセプト・アクセスまで自然に読める店舗LPとして設計。

サイトを見る

路草苑グループホームLP

03

Landing Page / コンペ出展

グループホーム LP
コンペ出展作品

Concept

福祉・介護施設向けLPのコンペ出展作品。サイト名や素材などは全て差し替えています。オレンジとセージグリーンを基調に、暖かくも信頼感の出るカラーを選択し、先方のオーダーを守りつつ、その範囲内でオリジナリティと親近感を両立したデザインを意識しました。ロゴデザインは今回のサンプル作成のため新規に作成しています。

担当範囲
LP構成 / デザイン調整 / コーディング / ロゴ制作 / 素材差し替え

使用技術
HTML / CSS / JavaScript / WordPress / Affinity Designer

制作意図
福祉施設らしい安心感を保ちつつ、温かさ・信頼感・見学導線が伝わるように構成。

制作物を見る

What I Bring

制作に対する4つのポイント

01

AIに頼らない
設計・デザインの思考力

AIが生成するデザインは均質的で似たようなデザインになりやすいため、ターゲットに合わせ、配色・タイポグラフィ・レイアウト構造などは私自身で積極的に指示・介入し、ユーザビリティとオリジナリティを両立させたデザインを心がけています。

01

02

AI生成を
実用レベルに仕上げる調整

AI生成コードは視認性の問題や表示崩れを含むことが多くあります。そのままでは使えないアウトプットを、実際に動作する・見やすいサイトに仕上げる修正・調整を細かく行なっています。

02

03

写真・美術の知識を活かした
デザイン設計

カメラマンとして構図・光・色彩を扱う経験を、Webデザインに活かしています。視線誘導・余白の扱い・色のバランスといった感覚的部分をしっかりと落とし込み、よりよいデザインづくりをします。

03

04

写真のレタッチ・簡易ロゴ制作など、
サイトの使用素材も対応

Photoshopによる画像素材のレタッチ・Affinityを使った簡易的なロゴ制作や修正まで、外注なしで対応できます。本格的なロゴ制作は専門外となりますが、「画像素材をホームページの雰囲気に合わせてレタッチしたい」「ロゴを少し直したい」といった軽微なご要望にも、制作の流れの中でまとめて対応します。

04

Services

サービス内容

サイトの新規制作から部分修正まで、
目的と状況に合わせて必要な範囲から対応します。

01

WordPress制作・修正

WordPress Development

既存テーマの調整、固定ページの作成、レイアウト崩れの修正などに対応します。WordPress上の編集だけで直しにくい部分も、HTML・CSSを含めて整理します。

要相談

02

LP制作

Landing Page

サービス紹介・店舗紹介・採用・イベント告知など、目的に合わせた1ページ構成のLPを制作します。見た目だけでなく、読み進めやすい流れと導線を意識して設計します。

要相談

03

デザイン改修・コーディング修正

Design & Code Fix

既存サイトの見た目の古さ、スマホ表示の崩れ、余白や文字サイズの違和感などを確認し、必要な範囲でデザインとコードを整えます。

要相談

04

バナー・画像制作/レタッチ

Visual & Retouch

Webサイトに使う写真の色調整、簡単な合成、バナー画像の作成に対応します。写真撮影の経験を活かし、サイト全体の雰囲気に合わせて素材を整えます。

要相談

Process

制作の流れ

ご相談内容を確認しながら、必要な範囲を整理して進めます。
小さな修正からLP制作まで、状況に合わせて対応します。

01

ヒアリング

目的・ご希望・現在のお困りごとを確認します。内容が固まっていない段階でも大丈夫です。

02

構成・方向性の確認

必要なページや掲載内容、デザインの方向性を整理します。参考サイトや素材がある場合は確認します。

03

制作・実装

WordPress、HTML/CSS、画像調整など、必要な作業を進めます。表示崩れやスマホ対応も確認します。

04

確認・修正

実際の表示を確認していただき、文言・余白・色味・動作などを必要に応じて調整します。

05

納品・公開サポート

公開作業や反映後の確認までサポートします。必要に応じて、簡単な更新方法もお伝えします。

Contact

Tell me about your project.

WordPressの小さな修正から、LP制作・既存サイトの見直しまで対応します。
内容が固まっていない段階でも、まずはお気軽にご相談ください。

CrowdWorksでのご相談はこちらから