画像だけのLP(1ページ, モバイルレイアウトのみ)のコーディング｜画像の遅延読み込み、一部アニメーション対応あり HTML・CSSコーディングの仕事の依頼

Nao Komura

5.0 (5件のレビュー) 本人確認済み発注ルールチェック済み

クラウドワークスで発注するにあたり、必要な知識・ルールを確認するためのチェックテストです。
もっと詳しく

仕事の概要

固定報酬制	10,000円〜 50,000円
納品完了日	2021年03月31日
掲載日	2021年03月23日
応募期限	2021年03月29日
必要なスキル	HTML CSS JavaScript Adobe Photoshop (フォトショップ)

応募状況

応募した人	27 人
契約した人	1 人
募集人数	1 人
気になる！リスト	6 人

この仕事に応募したクラウドワーカーを見る

仕事の詳細

Adobe Photoshopでデザインされたランディングページ(モバイルレイアウトで約25,000pxの長さ)を画像形式で書き出し、Webサイトで閲覧できる形にコーディングしていただきます。ただし、ただ画像を配置するだけではなく幾つかの達成要件があります。それに伴い、HTMLとCSS以外にも必要なスキルがございますので、応募する前にご確認いただけると幸いです。 # 達成要件 ## スキルに関係する要件 - 画像は1枚で配置するのではなく、ファイルサイズが重くなりすぎないよう、デザインのセクションなどで適切に分割して配置する - 複数サイズ(1倍,2倍,3倍の3つ)の画像をsrcset属性で指定する → 作成されたデザインを分割して複数サイズで書き出すために、Photoshopの操作ができる必要があります。 - 分割して書き出した画像をスクロールに応じて遅延読み込みする → 画像が表示されないタイミングが発生しないようある程度先回りして読み込む必要があります（もしくは細かく画像を分割する）。そのため、ライブラリを使用するなどは自由ですが、ある程度JavaScriptの知識が必要です。 - 画像が横へスライドしていくループアニメーション - 特定範囲内のランダムな時間で、定期的に新しい要素が追加されるアニメーション → 一部のデザインにシンプルなアニメーションが必要な箇所があります。そのため、CSSかJavaScriptによるアニメーション実装の知識が必要です。（後者の対応を考えると少なからずJavaScriptでアニメーションを制御する知識があった方が望ましいですが、必須ではありません。） ## その他の要件 - alt属性に画像の内容を記述する - CTAボタンは独立した画像として設置する（CSSでスタイリングしても構いません） - 幅375pxベースでコーディングし、320pxと428pxのウィンドウサイズの間は375pxをベースに相対的に拡大縮小させる（428px以上に関してはLPの左右に余白が出来るよう中央配置されていれば問題ありません） --- # 納期 3月31日 24:00 # 予算〜 6万円(税込) ※契約金額（税込）からシステム利用料を差し引いた金額が、ワーカーさまの受取金額となります # 応募の条件と方法 ## 条件 - 達成要件に記載している内容が理解できる、達成できる方 - 過去にコーディングを担当したWebサイトを提出できる方（実案件でなくても構いません） - よく分からない部分を曖昧にせず質問していただける方 ## 方法簡単な自己紹介と、過去の制作物のURLまたはコード一式を添付してご応募ください。また、条件提示にてお見積もり金額をご入力ください。質問等ありましたら気軽にお問い合わせください。ご応募お待ちしております！
特記事項
急募オフィス訪問不要未経験可プロフェッショナル求む継続依頼あり

Adobe Photoshopでデザインされたランディングページ(モバイルレイアウトで約25,000pxの長さ)を画像形式で書き出し、Webサイトで閲覧できる形にコーディングしていただきます。
ただし、ただ画像を配置するだけではなく幾つかの達成要件があります。それに伴い、HTMLとCSS以外にも必要なスキルがございますので、応募する前にご確認いただけると幸いです。

# 達成要件
## スキルに関係する要件
- 画像は1枚で配置するのではなく、ファイルサイズが重くなりすぎないよう、デザインのセクションなどで適切に分割して配置する
- 複数サイズ(1倍,2倍,3倍の3つ)の画像をsrcset属性で指定する
→ 作成されたデザインを分割して複数サイズで書き出すために、Photoshopの操作ができる必要があります。

- 分割して書き出した画像をスクロールに応じて遅延読み込みする
→ 画像が表示されないタイミングが発生しないようある程度先回りして読み込む必要があります（もしくは細かく画像を分割する）。そのため、ライブラリを使用するなどは自由ですが、ある程度JavaScriptの知識が必要です。

- 画像が横へスライドしていくループアニメーション
- 特定範囲内のランダムな時間で、定期的に新しい要素が追加されるアニメーション
→ 一部のデザインにシンプルなアニメーションが必要な箇所があります。そのため、CSSかJavaScriptによるアニメーション実装の知識が必要です。（後者の対応を考えると少なからずJavaScriptでアニメーションを制御する知識があった方が望ましいですが、必須ではありません。）

## その他の要件
- alt属性に画像の内容を記述する
- CTAボタンは独立した画像として設置する（CSSでスタイリングしても構いません）
- 幅375pxベースでコーディングし、320pxと428pxのウィンドウサイズの間は375pxをベースに相対的に拡大縮小させる（428px以上に関してはLPの左右に余白が出来るよう中央配置されていれば問題ありません）

---

# 納期
3月31日 24:00

# 予算
〜 6万円(税込)
※契約金額（税込）からシステム利用料を差し引いた金額が、ワーカーさまの受取金額となります

# 応募の条件と方法
## 条件
- 達成要件に記載している内容が理解できる、達成できる方
- 過去にコーディングを担当したWebサイトを提出できる方（実案件でなくても構いません）
- よく分からない部分を曖昧にせず質問していただける方

## 方法
簡単な自己紹介と、過去の制作物のURLまたはコード一式を添付してご応募ください。
また、条件提示にてお見積もり金額をご入力ください。

質問等ありましたら気軽にお問い合わせください。
ご応募お待ちしております！

特記事項

急募

オフィス訪問不要

未経験可

プロフェッショナル求む

継続依頼あり

クライアント情報

Freelance UI Designer, PdM, Web Engineer

個人でご依頼を受けることもありますが、主にチームで活動しています。
LPなどのWebサイトから複雑なWebアプリケーションまで、設計・開発・運用を一括で対応出来ます。
Webであれば概ね対応できると思うので気軽にご相談ください。（知見は少ないですが、React Nativeを使用したネイティブアプリケーション開発も承っています。）

Nao Komuraの詳細を見る

最近応募したクラウドワーカー

クラウドワーカー	応募日時
阿部直貴@納期早め	2021/03/25 09:48
atatsu0117	2021/03/24 16:43
guqiaohemo	2021/03/24 11:19
takedadaiki06	2021/03/24 10:09
Lovely Thing	2021/03/24 00:30
koutaou	2021/03/23 22:44
golden_21b6	2021/03/23 22:19
うの / 即レス対応	2021/03/23 21:40
beatless0121	2021/03/23 20:35
ハセガワユウヤ@即レス	2021/03/23 17:23
TOMO_web制作	2021/03/23 15:26
Samurailance	2021/03/23 14:34
SGR_suguru	2021/03/23 12:18
Morilyn	2021/03/23 11:13
（退会済み）	2021/03/23 10:55
山内大地＠丁寧対応	2021/03/23 10:51
（退会済み）	2021/03/23 10:50
DEV_MASTER	2021/03/23 10:35
mitsuko1206	2021/03/23 10:33
（退会済み）	2021/03/23 10:25