Facebook LP Design & Coding: Recruitment Site for "TSUTSUMU" / LP制作とコーディング:採用サイト「TSUTSUMU」
Logo

LP Design & Coding: Recruitment Site for "TSUTSUMU" / LP制作とコーディング:採用サイト「TSUTSUMU」

クレジット
Avatar
デザイナー
LP Design & Coding: Recruitment Site for "TSUTSUMU" / LP制作とコーディング:採用サイト「TSUTSUMU」-1
シェア

LP Design & Coding: Recruitment Site for "TSUTSUMU" / LP制作とコーディング:採用サイト「TSUTSUMU」

A comprehensive recruitment landing page project for a baby products and community services company, completed as part of the SHElikes design and coding course. I was responsible for the entire process, from creating the initial mood board and design layouts to the final front-end development using HTML and CSS. SHElikesのデザイン・コーディングコースの課題として制作した、ベビー用品・コミュニティ事業を展開する企業の採用LPです。ムードボードの作成からデザインカンプ制作、そしてHTML/CSSを用いたフロントエンドの実装まで、全工程を担当しました。 [ Design & Development Strategy / 制作・実装戦略 ] ■ Concept & Visual Identity / コンセプトとビジュアル Visual Theme: Defined the keyword as 'soft' or 'Family' to reflect the company's mission of "wrapping the world in kindness." / 「世界を優しさでつつむ」という企業のミッションを反映したムードボードを作成しました。 Design Elements: Utilised circular imagery and a warm, organic colour palette (soft reds, earthy greens, and neutrals) to create a gentle, trustworthy atmosphere suitable for a family-oriented brand. / 丸みを帯びた画像配置と、赤やグリーン、ニュートラルカラーといった温かみのある配色を採用し、家族向けブランドにふさわしい信頼感と優しさを表現しています。 ■ Information Architecture & UI / 情報設計とUI Recruitment Focus: Designed sections for "Member Introduction" and "Work Environment" to provide prospective employees with a clear picture of the company culture. / 求職者が社風を具体的にイメージできるよう、「メンバー紹介」や「働く環境」のセクションを設けました。 Data Visualisation: Created an engaging "TSUTSUMU by Data" section using infographics to present key company statistics (e.g., average age, paid leave acquisition rate) clearly. /「データでみるTSUTSUMU」セクションでは、インフォグラフィックを用いて平均年齢や有給取得率などの重要データを視覚的に分かりやすく提示しました。 ■ Front-end Development / コーディング Responsive Implementation: Coded the site to be fully responsive, ensuring a seamless user experience on both desktop and mobile devices. / デスクトップとモバイルの両方で快適に閲覧できるよう、完全レスポンシブな実装を行いました。 [ Project Details / 制作詳細 ] Tools: Photoshop, VS Code / 使用ツール:Photoshop、VS Code
クレジット
Avatar
デザイナー
シェア
Eri Nishidaの他の作品
画像
作品を見る
Self Introduction - 自己紹介
ウェブ
作品を見る
Interview article - インタビュー記事【今...
ウェブ
作品を見る
Interview article - インタビュー記事【海...
foriio

あなたのforiioを無料で作成

fori.io/
Logo
LP Design & Coding: Recruitment Site for "TSUTSUMU" / LP制作とコーディング:採用サイト「TSUTSUMU」-1

LP Design & Coding: Recruitment Site for "TSUTSUMU" / LP制作とコーディング:採用サイト「TSUTSUMU」

A comprehensive recruitment landing page project for a baby products and community services company, completed as part of the SHElikes design and coding course. I was responsible for the entire process, from creating the initial mood board and design layouts to the final front-end development using HTML and CSS. SHElikesのデザイン・コーディングコースの課題として制作した、ベビー用品・コミュニティ事業を展開する企業の採用LPです。ムードボードの作成からデザインカンプ制作、そしてHTML/CSSを用いたフロントエンドの実装まで、全工程を担当しました。 [ Design & Development Strategy / 制作・実装戦略 ] ■ Concept & Visual Identity / コンセプトとビジュアル Visual Theme: Defined the keyword as 'soft' or 'Family' to reflect the company's mission of "wrapping the world in kindness." / 「世界を優しさでつつむ」という企業のミッションを反映したムードボードを作成しました。 Design Elements: Utilised circular imagery and a warm, organic colour palette (soft reds, earthy greens, and neutrals) to create a gentle, trustworthy atmosphere suitable for a family-oriented brand. / 丸みを帯びた画像配置と、赤やグリーン、ニュートラルカラーといった温かみのある配色を採用し、家族向けブランドにふさわしい信頼感と優しさを表現しています。 ■ Information Architecture & UI / 情報設計とUI Recruitment Focus: Designed sections for "Member Introduction" and "Work Environment" to provide prospective employees with a clear picture of the company culture. / 求職者が社風を具体的にイメージできるよう、「メンバー紹介」や「働く環境」のセクションを設けました。 Data Visualisation: Created an engaging "TSUTSUMU by Data" section using infographics to present key company statistics (e.g., average age, paid leave acquisition rate) clearly. /「データでみるTSUTSUMU」セクションでは、インフォグラフィックを用いて平均年齢や有給取得率などの重要データを視覚的に分かりやすく提示しました。 ■ Front-end Development / コーディング Responsive Implementation: Coded the site to be fully responsive, ensuring a seamless user experience on both desktop and mobile devices. / デスクトップとモバイルの両方で快適に閲覧できるよう、完全レスポンシブな実装を行いました。 [ Project Details / 制作詳細 ] Tools: Photoshop, VS Code / 使用ツール:Photoshop、VS Code
クレジット
Avatar
デザイナー
シェア
Eri Nishidaの他の作品
画像
作品を見る
Self Introduction - 自己紹介
ウェブ
作品を見る
Interview article - インタビュー記事【今...
ウェブ
作品を見る
Interview article - インタビュー記事【海...
foriio

あなたのforiioを無料で作成

fori.io/