PROFILE SITE / DESIGN & CODING
プロフィールサイト「HIRO」
音楽・E-sports・Web という3つの経歴を「教える・伝える」という一本の軸で再構成した自己紹介サイト。
ダークなエディトリアルデザインに、スクロール演出やJSのインタラクションを加え、
世界観と読みやすさを両立させることを意識して設計・実装しました。
WEB DESIGNER & FRONT-END ENGINEER
HIRO Portfolio
LPやコーポレートサイトのデザインとフロントエンド実装を中心に学習している、
Webデザイナー／フロントエンドエンジニア志望です。
現在は職業訓練や自主制作を通して、
「やさしく・伝わりやすい」Webサイトづくりのスキルを磨いています。
SCROLL
WORKS
個人制作の架空のLPの一部をご紹介します。
LP / DESIGN & CODING
クリスマス催事の特設LP
クリスマス催事の世界観を文章とセクション構成で丁寧に表現しつつ、
アンカーリンクやクイックリンクで主要コンテンツやアクセス情報へ迷わずたどり着ける
LP設計を意識して制作しました。
LP / DESIGN & CODING
架空のヘアサロンLP「La Forêt」
「森のしずけさ」をテーマにしたヘアサロンの世界観を、余白とセリフ書体で表現。
メニュー・スタッフ・ギャラリー・予約フォームなど必要な情報へ迷わずたどり着ける構成と、
スクロール演出やレスポンシブ対応を意識して設計・実装しました。
LP / DESIGN & CODING
架空のカフェ・ショップLP
カフェのコンセプトをキャッチコピーとセクション構成でシンプルに表現しつつ、
メニュー・アクセス・予約ボタンなど必要な情報に迷わずたどり着けるよう
意識して設計・実装したサイトです。
SERVICE
対応できること / 制作の流れ
■ LP・小規模Webサイトの制作
情報設計からデザイン、HTML / CSS / JavaScript でのコーディング、
スマホ対応まで、一貫して自分で形にできます。
設計・デザイン
ヒアリング / 構成・ワイヤー / LPデザイン / バナー制作
得意
コーディング
HTML / CSS / Sass / JavaScript / レスポンシブ対応
仕上げ・公開
フォーム実装 / 表示調整 / Netlify 等での公開対応
※ 学習・自主制作で対応してきた範囲です。
STRENGTH
大切にしていること
ヒアリングを大切にします
前職で「相手の課題を聞き出す」仕事をしていたため、「何を載せるか」から一緒に整理します。
デザイン → コーディングまで一貫
別々の人に頼む必要がなく、認識のズレが起きません。
レスポンスが速く、進捗を必ず共有
「今どうなっているか分からない」という不安をなくします。
PROFILE
HIRO
大阪府在住
Webデザイナー・フロントエンドエンジニアを目指し、LPやコーポレートサイトのデザインとコーディングを中心に学習・制作しています。
見る人が迷わず情報にたどり着けるシンプルな構成と、世界観が伝わるテキスト・UIを考えることが好きです。
職業訓練校でWebデザイン全般を学ぶ中で、設計から実装までを一貫して考える力を身につけました。
前職ではE-Sportsのコーチやプロベーシストとして専門学校で教える経験を通じて、チームで動く楽しさと、
相手に伝わる形で情報を整理する大切さを学びました。
今後は学びを実務の現場で活かし、より使いやすく心地よいWeb体験をつくっていきたいと考えています。
SKILLS
LPや小規模なWebサイトを、情報設計からデザイン、HTML/CSS/JavaScriptでのコーディングまで一通り自分で作れるスキルがあります。
デザイン面では、クリスマス催事LPやカフェサイトなどで、世界観を崩さずに必要な情報へ迷わずたどり着けるようにセクション構成やコピーを工夫してきました。
コーディング面では、ポートフォリオサイトでスクロールに合わせたフェードインやヘッダーの変化などのアニメーションを実装し、
見やすさを損なわない範囲でインタラクションを加えることを意識しています。
Design
ワイヤー作成 / サイト設計 / LPデザイン / バナーデザイン / アイコン制作 など
Tools：Figma（デザイン制作）/ Photoshop・Illustrator（バナー・画像加工）
Coding
HTML / CSS / Sass / JavaScript を用いたコーディング。
レスポンシブ（スマホ）対応・お問い合わせフォームの実装も可能です。
Tools：VSCode / GitHub / Netlify