Web制作の実績・ポートフォリオ
Webサイト制作、コーディング、Webデザインなど一般的なWeb制作分野のフリーランス実績を一覧で掲載。
サッカースクールサイトのコーディング・WordPress構築｜スタンドアップフットボールアカデミー
【制作概要】 サッカースクールサイトのコーディングおよびWordPress構築を担当しました。 【担当業務】 ・HTML/CSS（SCSS）によるコーディング ・スマートフォン、タブレット対応（レスポンシブ） ・jQueryによるアニメーションの実装 ・WordPressオリジナルテーマの構築 ・カスタム投稿タイプ、カスタムフィールドの実装 ・プラグインを使用したInstagram投稿の表示機能の導入 ・サイト公開作業 【制作規模】 全7ページ 【使用技術】 HTML / CSS / SCSS / jQuery / WordPress 支給されたデザインデータをもとに、デザインの再現性と使いやすさを意識して実装しました。
保育園サイトのコーディング・WordPress実装｜川岡保育園
【制作概要】 保育園サイトのコーディングおよびWordPressの機能実装を担当しました。 【担当業務】 ・HTML/CSS（SCSS）によるコーディング ・スマートフォン、タブレット対応（レスポンシブ） ・jQueryによるアニメーションの実装 ・WordPressを使用したコンテンツ表示の実装 ・お知らせの年別アーカイブ機能の実装 ・サイト公開作業 【制作規模】 全8ページ 【使用技術】 HTML / CSS / SCSS / jQuery / WordPress 支給されたデザインデータをもとに、各デバイスでの見やすさとデザインの再現性を意識して実装しました。
企業サイトのコーディング・WordPress構築｜ONE SEVENS
【制作概要】 企業サイトのコーディングおよびWordPress構築を担当しました。 【担当業務】 ・HTML/CSS（SCSS）によるコーディング ・スマートフォン、タブレット対応（レスポンシブ） ・jQueryによるアニメーションの実装 ・WordPressオリジナルテーマの構築 ・カスタム投稿タイプ、カスタムフィールドの実装 ・サイト公開作業 【制作規模】 全10ページ 【使用技術】 HTML / CSS / SCSS / jQuery / WordPress 支給されたデザインデータをもとに、デザインの再現性と各デバイスでの見やすさを意識して実装しました。
HP制作
ノーコードでAIも効率的に活用しながらHPを制作しました。
ヘッドスパのLP｜眠る前の90分
ページを開いた瞬間から、夜のお店の中にいる気分になってほしくて、黒と金と縦書きでまとめました。写真は暗いところからじわっと明るくなり、湯気がゆっくりのぼります。今夜の月の形も出るので、「今日行こうかな」と思うきっかけになります。架空のお店の制作見本です。 ページの動きは、URLの動画で見られます。
まつげ・眉サロンのLP｜鏡を見るのが楽しみな朝
まつげと眉のサロンは、仕上がりが想像できるかで予約が決まります。そこで、ボタンでカールの形が変わる小さなシミュレーターをつけました。雑誌をめくるような作りで、楕円の鏡の写真が画面いっぱいに広がります。「私ならどうなるかな」と考えながら読めるページです。架空のお店の制作見本です。 ページの動きは、URLの動画で見られます。
マシンピラティスのLP｜まっすぐ立てるまで
ピラティスは「姿勢が変わる」を言葉だけで伝えにくいジャンルです。そこで、スクロールすると丸まった背骨が下から1つずつ起き上がり、一本の線にそろう図を作りました。石と木の色で、スタジオの落ち着いた空気まで伝わるようにしています。架空のスタジオの制作見本です。 ページの動きは、URLの動画で見られます。
子ども料理教室のLP｜包丁デビューの日
子どもの教室は、子ども本人が「行きたい」と言うかが大事です。原色と太い線のイラストで、親子で一緒に見て楽しいページにしました。絵がふわっと動き、最後には野菜がはじけます。そのぶん料金や申し込みの流れは、保護者の方が迷わないようにすっきり並べました。架空の教室の制作見本です。 ページの動きは、URLの動画で見られます。
整体院のLP｜戸をひらくと
整体院のページは、どこも似た見た目になりがちです。そこで店名の「ひらく」から、障子の戸がひらいて始まる形にしました。丸まった姿勢がひらいていく様子を写真で見せ、今日が営業日かどうかも自動で出します。電話の前の「今日やってるかな」にも答えられます。架空の整体院の制作見本です。 ページの動きは、URLの動画で見られます。
結婚相談所のLP｜赤い糸の手紙
結婚相談所は、はじめて問い合わせるまでの不安が大きい業種です。縦書きと白い縁の写真で、手紙を読むような落ち着いたページにしました。一本の赤い糸がページを縫うように下りていき、最後は水引の結びになります。料金や流れも、安心して読める順番にしています。架空の結婚相談所の制作見本です。 ページの動きは、URLの動画で見られます。
スタイリストのHP｜秋のクローゼット
服選びの相談は、「この人のセンスに任せたい」と思ってもらえるかがすべてです。黒に近い地に大きな写真を置き、映画のワンシーンのような雰囲気にしました。スクロールで服のカードが1枚ずつ重なり、料金は値札の形で見せています。見ているだけで服を選びたくなるページです。架空の制作見本です。 ページの動きは、URLの動画で見られます。
朝のオンラインヨガのLP｜深呼吸から始まる朝
朝のヨガなので、開いた瞬間に「朝」を感じてもらえる表紙にしました。夜明けの空に線が引かれ、写真が朝日のようにのぼってきます。次のクラスまでの時間を表示し、読み進めると右下の時計が6:30から6:50へ進みます。20分で終わる気軽さが、読みながら伝わります。架空の教室の制作見本です。 ページの動きは、URLの動画で見られます。