WEB DESIGNER / DESIGN × AI

情報の優先順位から考える
Webデザイン。

情報設計・UIデザインを軸に、読みやすく迷いにくいWeb制作に取り組んでいます。
必要に応じてHTML / CSSを中心とした実装にも対応します。

制作実績を見る 私について

Works 制作実績

Aoi Tools公式サイトのトップ画面

FEATURED

Webツール / UI設計 / AI活用

Aoi Tools

Web制作で感じた不便を起点に、3つの制作支援ツールを企画・設計しました。実装・検証・公開まで一貫して取り組んでいます。

  • 企画・設計
  • 実装・公開
  • UI改善
詳細を見る
ESA CREATE リニューアル後の名刺の表裏デザイン

FEATURED

グラフィック / 名刺

株式会社ESA CREATE 名刺リニューアル

国内での利用シーンを見直し、91×55mmの横型名刺へ刷新。情報整理からデザイン、印刷データ作成まで担当しました。

  • 名刺デザイン
  • Figma
  • 印刷用データ
詳細を見る
CAFE KOHARUとLIVERA HOMEの広告デザイン

グラフィック / バナー / SNS広告

バナー・SNS広告デザイン制作

カフェと賃貸物件を題材に、広告バナーとSNS向け画像を制作。写真・コピー・レイアウトを変えながら複数案を比較し、媒体に合わせたサイズ展開も行いました。

  • バナーデザイン
  • SNS画像
  • AI活用
詳細を見る
コーポレートサイトデザイン改修

Webサイト / UIデザイン

コーポレートサイトデザイン改修

採用強化に向けたコーポレートサイト改修で、社員データ・インタビュー・採用バナーなどの追加デザインを担当。既存サイトのルールを読み取り、後から追加した部分が浮かないようPC・スマートフォン双方を設計しました。

  • UIデザイン
  • PC / SP
  • Figma
詳細を見る
デルミリオーレクラウド群馬 関東フットサルリーグ2026入替戦の試合告知POP

グラフィック / POP

フットサルチーム試合告知POP制作

デルミリオーレクラウド群馬の試合告知POPを継続制作。提供写真をPhotoshopで加工し、Figmaで日時・対戦カード・会場などの情報を整理してレイアウトしています。

  • グラフィック
  • Figma
  • Photoshop
詳細を見る
デルミリオーレクラウドFUTSALスクール新聞 2026年9月号

グラフィック / エディトリアル

デルミリオーレクラウドFUTSALスクール新聞

フットサルスクールの月刊新聞を継続制作。既存フォーマットをベースに、スクール日程の更新と試合・イベント告知エリアのデザインを担当しています。

  • エディトリアル
  • Figma
  • Photoshop
詳細を見る
その他の制作実績 7件を見るその他の制作実績を閉じる
ふわっとひつじ公式サイトのトップ画面

Webサイト

ふわっとひつじ 公式サイト

自身が制作・展開するオリジナルキャラクター「ふわっとひつじ」の公式サイトを制作。世界観を伝えながら、LINEスタンプ・絵文字やInstagramへ迷わず移動できる導線を設計しました。要件定義からデザイン、実装、公開まで一貫して担当しています。

  • 情報設計
  • Webデザイン
  • 実装・公開
詳細を見る
地域密着型工務店の住宅購入者向けコーポレートサイトのデザイン制作

Webサイト

地域密着型工務店の住宅購入者向けコーポレートサイトのデザイン制作

  • ワイヤーフレーム
  • PCデザイン
詳細を見る
総合キャリア支援プログラムLPデザイン制作

Webサイト

総合キャリア支援プログラムLPデザイン制作

  • ワイヤーフレーム
  • PCデザイン
詳細を見る
物流会社のBtoB向けコーポレートサイトのデザイン制作

Webサイト

物流会社のBtoB向けコーポレートサイトのデザイン制作

  • ワイヤーフレーム
  • PCデザイン
詳細を見る
プログラミングスクールLPデザイン制作

Webサイト

プログラミングスクールLPデザイン制作

  • ワイヤーフレーム
  • PCデザイン
詳細を見る
IT点呼キーパー Webコーディング

Webサイト

IT点呼キーパー Webコーディング

  • コーディング
  • レスポンシブ
詳細を見る
Blue Shoes Webコーディング

Webサイト

Blue Shoes Webコーディング

  • コーディング
  • レスポンシブ
詳細を見る

About me 私について

プロフィール写真

WEB DESIGNER

A.Y.

現在はWebデザインを中心に、情報設計やUIデザインに取り組んでいます。必要に応じてHTML / CSSを中心とした実装にも対応しています。目的やターゲットに合わせて情報を整理し、読みやすく迷いにくいデザインを考えることを大切にしています。

Webデザイナーとして経験を積みながら、制作や業務を効率よく進めるためにAIも取り入れています。ChatGPT、Codex、Gemini、Copilotを、要件整理・調査・実装支援・業務効率化など、目的に応じて使い分けています。AIに判断を任せるのではなく、自分で方向性を決め、出力を確認しながら制作に活用しています。

  • 01 目的から組み立てる ゴールと優先順位を整理し、伝わる情報設計へ落とし込みます。
  • 02 利用者の視点で整える 読みやすさと迷いにくさを基準に、導線や余白を設計します。
  • 03 実装までつなげる 必要に応じてHTML / CSSで実装し、表示や使いやすさまで確認して仕上げます。

Skills & Tools

Webデザインを軸に、デザイン・実装・公開・業務支援まで、目的に応じてツールを使い分けています。

デザインイメージ

Design

Figma Photoshop Illustrator
Figma

Figma

WebサイトやLP、バナーなどのデザイン制作に使用しています。ワイヤーフレームからUIデザイン、プロトタイプまで作成し、実装時の再現性も意識して設計しています。

パーツやコンポーネントを整理しながら全体の統一感を保ち、ボタン配置、余白、文字サイズなど、視認性や操作性を考えたUIデザインを行っています。

経験年数：2年

Photoshop / Illustrator

Photoshop / Illustrator

Photoshopでは、写真の切り抜きや色味・明るさの調整など、Webサイトやグラフィック制作に必要な画像加工を行っています。

Illustratorでは図形や文字組みに加え、名刺などの印刷用データ作成にも使用しています。用途やターゲットに合わせて、配色・文字サイズ・余白を調整しながら制作しています。

経験年数：1年

AI & Workflow

要件整理・調査・実装支援・業務効率化など、目的に応じて使い分けています。

ChatGPT

要件整理、文章構成、アイデア出し、情報調査に使用。考えを言語化し、制作方針を固める補助として活用しています。

Codex

仕様やデザイン方針をもとに、Web実装・修正・テストを進める際に使用しています。実装後の表示や動作は自分で確認し、必要に応じて修正しています。

Gemini

情報収集や比較調査、文章構成の確認に使用。ChatGPTとは用途を分け、複数の視点から情報を確認したい場面で活用しています。

Microsoft Copilot

業務ではExcel Copilotを使用し、集計表の作成や定型作業の効率化に活用しています。プロンプトで処理内容を整理し、出力結果は元データと照らし合わせながら確認しています。

Web / Publish

HTML / CSS / JavaScript

HTML / CSSを中心に、既存サイトの更新やレスポンシブ対応、デザインカンプをもとにしたWeb実装に使用しています。JavaScriptは既存コードの読解やナビゲーションなどの軽微な修正を中心に使用しています。

GitHub / Cloudflare

個人制作のバージョン管理と公開に使用しています。GitHubで変更内容を管理し、Cloudflare WorkersなどでWebサイトやWebツールを公開しています。

Other Tools

WordPress

既存Webサイトの更新・運用や、HTML / CSSを使った軽微な修正を経験しています。

Excel / PowerPoint

業務でのデータ整理、集計表・管理表や資料の作成に使用しています。

DESIGN × AI

デザインは自分で考え、
AIを実装と業務の効率化に活かす。

デザインの方向性や情報設計、配色・レイアウトの判断は自分で行っています。

AIは要件整理・調査・実装支援・業務効率化のための補助ツールとして使い、出力を確認しながら制作に取り入れています。

Design

Webデザイン / UI・情報設計 / グラフィック

方向性と最終判断は自分で行う

AI

ChatGPT / Codex / Gemini / Copilot

実装支援 / 調査 / 検証 / 業務効率化に活用