Portfolio Site

ポートフォリオサイト

日々、高速で使いやすいサイトを目指してwebサイトを作成します。
HTML、CSS、JavaScriptを用いた高品質なフロントエンド開発を専門としています。

Watch Demo
背景画像

What is a Markup Engineer?マークアップエンジニアとは

Webデザイナーが作成したデザインを元に、HTMLやCSSなどの言語を用いてWebサイトの画面を構築する専門職です。SEO対策やユーザーの使いやすさ(ユーザビリティ)、スマホ・PCでの表示最適化を実装する重要な役割を担います。

01デザインの再現

デザイナーが作成したレイアウト(FigmaやAdobe XDなど)を、HTML/CSSを使って正確にWebブラウザ上に再現します。

ブラウザの画面

02レスポンシブ対応

スマートフォン、タブレット、パソコンなど、あらゆる画面サイズに対応したwebサイトを作成します。

03SEO/セマンティックなマークアップ

検索エンジン(Googleなど)やスクリーンリーダー(音声読み上げ機能)がサイトの構造を正しく理解できるよう、意味の通る適切なHTMLタグ(<header>, <article>, <nav>など)を使用します。

04動き(アニメーション)の実装

JavaScriptやCSSアニメーションを用いて、ボタンのホバーエフェクト、ハンバーガーメニュー、スライダーなどの「動き」を実装します。

Demo作成したページ例

株式会社アトリエ・テラのHP画像

【架空】株式会社アトリエ・テラHome Page

Preview
Google fontsプレビュー

Google fontsプレビューTool Site

Preview
表作成ツール

表作成ツールTool Site

Preview

─ 準備中 ─Coming Soon

Preview