開閉UI（「もっと見る」）
<details> / <summary> を使って開閉状態を open 属性で管理し、
キーボード操作でも使えるようにした折りたたみUIです。
見せたいポイント： アクセシビリティを意識した、崩れにくいUIの基本実装
使用例： Portfolio内の「View more」や、折りたたみUIで応用可能
GitHubでコードを見る私について
Profile
SUZUKI HAYATO 鈴木 隼人
課題を言語化し、情報設計と導線を土台に、UIを“使える形”まで設計・実装します。
見た目だけでなく、使いやすさや情報の伝わりやすさまで含めて丁寧に整え、ユーザーが迷わず自然に行動できる体験に仕上げることを大切にしています。
注力領域 UI実装 / コンポーネント設計 / レスポンシブ / アクセシビリティ基礎 / 情報設計
強み 要件整理からUI設計・実装までをつなぎ、改善を回せる
詳細を開く 閉じる
2004年、千葉県出身・千葉市在住。デジタルハリウッドで情報設計・導線設計・UI設計の基礎を学びながら、 それを実装までつなげて“崩れない・迷わない”画面に落とし込む力を磨いています。
アパレルEC運営（商品撮影・データ運用 / 2025.04–在籍中）では、品質基準と正確性を重視した運用業務を継続担当。 「ユーザーが困るポイント」を先回りして整える視点を、UI実装と改善に活かしています。
- 情報の優先順位を整理し、UIとして破綻なく実装する
- 余白・文字・コンポーネントで“迷い”を減らす
- レスポンシブや基本アクセシビリティまで整えて公開できる状態にする
自主制作物
Works
ウェブサイト
Websites
情報設計→導線→UI→実装の流れで整理。
DHW MALL 2025
架空の商業施設「DHW MALL」のパンフェア特設LPとして、初見のユーザーが「何の企画か／何が魅力か／どう行動するか」を数秒で判断できる構成を目指しました。 コピー→ビジュアル→CTAの順で情報を提示し、“行ってみたい”までの距離を短くしています。
- 目的
- 初見のユーザーが迷わず、来店のイメージと魅力を短時間で掴める導線を作りました。
- 担当
- コンセプト整理 / 情報設計 / 画面設計（UI）/ 実装（コーディング）
- 工夫
-
① ファーストビューで「雰囲気」→「提供価値」→「行動（CTA）」の順に情報を配置しました。
② 見出しの強弱と余白で視線の流れをコントロールし、読み疲れを抑制しました。
③ 写真・色・文字のトーンを揃えて、世界観の一貫性が崩れないよう調整しました。 - 使用ツール
- Figma / HTML / CSS（レスポンシブ対応）
隼カフェ 〜HAYABUSA〜 2025
03 Find! Ochanomizu 2025
御茶ノ水エリアを4カテゴリから探せる地域情報サイトをWordPressで制作。 トップではカテゴリ導線と投稿を組み合わせ、目的の情報へ迷わず到達できる設計にしました。
- 目的
- 地域情報を“探しやすく・更新しやすい”サイトを構築。
- 担当
- 構成 / カテゴリ設計 / 投稿作成 / 導線設計
- 工夫
- 入口にカテゴリを配置し迷いを防止。 更新情報とピックアップを組み合わせ、回遊のきっかけを作りました。
- 使用ツール
- WordPress / CSS（軽微調整）
04 鈴木美容室 2025
05 鈴木輪業 2025
バナー
Banners
目的→見せ方→情報整理で「一瞬で伝わる」設計を意識。
DHW MALL パンフェア告知 2025
パンフェア告知バナーとして、「イベント名」「魅力」「限定感」を短時間で理解できるよう、 情報の優先順位とタイポのジャンプ率で視線の流れを設計しました。
- 目的
- 0.5秒で内容を把握させ、LP/詳細ページへの遷移率を高めます。
- 担当
- 構成設計 / コピー設計 / タイポ・配色 / 画像レイアウト
- 工夫
-
「春の新作いっぱい！」→「パンフェア」→「限定」の順に読ませるため、見出しのサイズ差と余白で視線誘導。
さらに写真を“額縁配置”にして中心へ視線が集まるよう調整し、情報量が多くても散らからない密度に整えました。 - 使用ツール
- Photoshop（合成・色調整） / Illustrator（文字・装飾）
鈴木美容室 名刺・宣伝用 2025
住宅街にある小さな美容室を想定し、来店後にお渡しする「名刺代わりのご案内」として制作したバナーです。 サイトがない前提のため、この1枚で“お店の空気感”と“よく出るメニュー・価格感”が伝わることを重視しました。 キャッチコピー → 写真（安心感）→ おすすめメニューの順で、持ち帰って見返したときにも迷わない構成にしています。
- 目的
- 来店の余韻を残しつつ、再来店・紹介につながる「持ち帰れる案内」を作ります。
- 担当
- コピー設計 / 情報整理 / レイアウト設計 / 文字組み・配色調整
- 工夫
-
① 住宅街のサロンらしい“やわらかさ・安心感”が伝わるトーンに統一しました。
② お渡し後に見返す想定で、メニューは料金表として読みやすい形に整理しました。
③ キャッチ→人物→メニューの読み順が自然に流れるよう、サイズ差と余白で視線誘導を設計しました。 - 使用ツール
- Photoshop（合成・色調整）
- 制作補助
- ChatGPT（画像生成）
レタッチ
Retouch
Before / After で編集意図を可視化（質感・色・清潔感の改善）。
コートのホコリ・毛羽・不用物の除去 2025
毛玉やホコリで質感が重く見えてしまうコート写真を、AI補助で不要な繊維・チリを整えました。 素材の起毛感がのっぺり潰れないように、除去の強さを調整しながら“清潔感と素材感の両立”を目指してBefore / Afterにまとめています。
- 目的
- 清潔感を改善しつつ、素材の起毛感が失われない仕上がりを目指しました。
- 担当
- レタッチ方針の設計 / 除去範囲の判断 / 比較画像の構成
- 工夫
- 除去しすぎると質感が潰れるため、目立つ不要物から優先して整え、素材感が残る強さに調整しました。
- 使用ツール
- ChatGPT（指示で生成・調整）
キャンドルのトーン・色温度の統一 2025
伝えたい世界観（あたたかさ / 落ち着き）が先に届くように、色温度と明るさのバランスを調整しました。 主役が散らないよう、背景の青みやコントラストも整えています。
- 目的
- 見る人が一瞬で「落ち着く雰囲気」を感じられるトーンに整えました。
- 担当
- 色補正 / 明るさ調整 / トーン統一
- 工夫
- 主役の明度を優先し、背景の青みを抑えて視線が散らないよう調整しました。
- 使用ツール
- ChatGPT（指示で生成・調整）/ Photoshop（色味調整・加工）
清潔感のある肌補正 2025
AI補助でホワイトバランスと明るさを整え、光の温かみと影の立体感は残したままトーンを統一。 主役が自然に引き立つよう背景の青みも抑え、肌補正のBefore / Afterが一目で分かる比較画像に仕上げました。
- 目的
- 清潔感と好印象につながる肌トーンの整え方を、加工感が出ない自然さで伝えました。
- 担当
- ホワイトバランス・明るさ・色味の調整 / トーン統一 / 比較画像の見せ方整理
- 工夫
- 主役の明度を優先しつつ、背景の青みを抑えて視線を固定。肌の立体感（影）を残して“のっぺり”を防止しました。
- 使用ツール
- ChatGPT（指示で生成・調整）/ Photoshop（色味調整・加工）
実装
Code
見た目だけでなく、操作性・アクセシビリティ・状態管理まで含めて実装できることを、 小さなサンプルでまとめています。
メールアドレスのコピー機能
'Clipboard API'を優先して使い、環境によってコピーできない場合は別方式に切り替えることで、失敗しにくい挙動にしています。
見せたいポイント： 小さなUIでも「失敗しうるケース」を想定して、例外対応まで含めて実装できること
使用例： Portfolio の Contact セクション（メールアドレスコピー）
GitHubでコードを見るクエリで状態を引き継ぐ（診断結果）
診断フォームの選択内容を URLクエリ（GET） に載せて結果ページへ渡し、 さらに再現レシピ・美容室オーダー・買い物ページへも引き継ぐことで、ページ遷移しても文脈が切れない導線を実装しました。
見せたいポイント： UIだけでなく、「ページをまたぐ状態管理」まで含めて体験を設計できること。
使用例： K-Pop Style Boost（診断 → 結果 → 再現レシピ / 美容室オーダー / 買い物）
GitHubでコードを見るお問い合わせ
Contact
採用・面談・制作のご相談など、お気軽にご連絡ください。